Phonegap – au sein du projet eInventaire – Le projet eInventaire



Phonegap – au sein du projet eInventaire – Le projet eInventaire

0 0


invite-kais


On Github houssems / invite-kais

Phonegap

au sein du projet eInventaire

Created by Matthieu Hostache / @twMatthieuH

Sommaire

  • Le projet eInventaire
  • Les différents types d'application mobile
  • Le framework Phonegap
  • L'application mobile eInventaire

Le projet eInventaire

Dans le contexte d'un certain déménagement.

Les besoin d'un après déménagement

Répondre aux besoins d’infrastructure et de space planning (base commune).

Inventorier c'est lier !

  • Localisation
  • Photo
  • Projet > Reponsable
  • ...

Rendre ces données accessibles depuis ...

  • un ordinateur
  • la plateforme
  • un terminal mobile

Le projet eInventaire aujourd'hui

  • + de 10300 QRCODES
  • Un accès à tout les projets
  • « Self made » et donc adaptable aux besoins (archives, mouvements, lien avec Paloma)

Les applications existantes

  • Application Web (PC)
  • Application Android (tablette)
  • Base de connaissance type Wiki (SharePoint)

Pourquoi une nouvelle application ?

  • Mobilité
  • Accès hors-ligne
  • Multi-plateforme

Les différentes types d'application mobile

Native , WEB ou Hybride ?

Les applications natives

Android > Java > Eclipse

Windows Phone > C# > Visual Studio > Windows

iOS > Objective-C > xCode > OSX > MAC

Application native iPhone

Les applications WEB

Code adapté ou "Responsive Design"

Site WEB vs WEB App

Les applications hybrides

Un code unique

Fonctionnalités natives

Distribution (stores)

Phonegap

Easily create apps using the web technologies you know and love: HTML, CSS, and JavaScript

Phonegap

  • Historiquement
    • Développé par Nitobi Sofware
    • Développé par Adobe
    • Donné à la Fondation Apache en 2011
  • Une distribution d'Apache Cordova
  • Sous licence Apache 2 :
    • Accès au code source
    • Droit d'usage / de duplication
    • Redistribution monétisable

How it work ?

Phonegap 3.0 : tout est plugin

Répertoire des plugins cordova : plugins.cordova.io

Le "gap"

Bientôt : Firefox OS, Ubuntu, Chrome Apps

Phonegap CLI

Basé sur Cordova CLI & NodeJS

Création d'un projet :

    $ phonegap create my-app
    $ cd my-app

Ajout d'un plugin :

    $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

Déploiement :

    $ phonegap run android

Now just web dev !

source : http://coenraets.org

Ce qui est possible

  • Utilisation de framework JS :

    Angular, Backbone, Ember, etc.

  • Personnalisation CSS spécifique à une plateforme

    Dossier /merge

  • Récupération de données par API REST

Express (NodeJS):

    app.get('/wines/:id', function(req, res) {
        res.send({id:req.params.id, name: "The Name", description: "description"});
    });

Slim Framework (PHP):

    $app->get('/project/:id',    'getProject');

Testing & Debug

  • Navigateur / Ripplepython -m SimpleHTTPServernpm install -g ripple-emulator
  • Livereload : plugin Gapreload
  • debug.phonegap.com avec Weinre
  • Remote Debug avec Webkit (Android 4.4 / iOS6)
Outils Phonegap

  • Compile vos apps dans le cloud
  • Signer rapidement les applications
  • Gestion / simplication des phases de test

Démo !

  • phonegap create preztek
  • phonegap run android
  • phonegap run firefoxos
  • ripple emulate
  • python -m SimpleHTTPServer 4444
  • phonegap run wp8 (?)

Retour d'XP : Avantages

  • Un code unique
  • Accès à tout les frameworks & librairies WEB
  • Outils Phonegap (by ADOBE)

Retour d'XP : Inconvènients

  • Performances : optimisation nécessaire
  • Phonegap ne résoud pas tout

L'application eInventaire

Les fonctionnalités

  • Authentification AD
  • Base locale synchronisés (unidirectionnelle)
  • Recherche de matériels & localisations
  • Scan de QRCodes
  • Autres : favoris, authentification hors-ligne,...

Technologies utilisées

+

  • Phonegap / Cordova
  • Angular
  • Localstorage
  • Undescore.js

Démo

Q & A

@twMatthieuH