TP Cordova

L'objectif de ce TP est de transformer une application Web en application mobile. Par exemple la TODO list de Jérôme Gravel-Niquet ré-écrite par TodoMVC. Une archive du projet est disponible ici.

Cela permet d'avoir accès à des API natives (ex : le carnet d'adresse) ou à des API plus riches que celles accessibles depuis un navigateur (ex : boussole). Un autre avantage est la possibilité de distribuer vos applications sur les stores des plateformes (Play Store, App Store...)

Set-up / outils nécessaires :

Télécharger le SDK Android et vérifiez que l'émulateur fonctionne.

Vérifier que les liens vers les outils du SDK Android sont dans le PATH. Sous unix :

  $ export PATH=$PATH:/.../android-sdk/tools/
  $ export PATH=$PATH:/.../android-sdk/platform-tools/

Vérifier que ant est bien dans votre PATH.

Installer Cordova qui sera notre outil permettant de transformer des applications Web en applications mobile:

  $ npm install -g cordova

Un serveur node est toujours nécessaire pour gérer les requêtes CORS. On se concentrera toutefois sur la partie Web mobile pendant le TP.

ngrok permet d'exposer un serveur tournant en local au monde extérieur. Cela peut être utile si vous voulez tester des choses avec votre téléphone via la 3G ou le Wifi.

Apache Cordova et Adobe Phonegap

Cordova et Phonegap permettent d'embarquer une application Web dans une application Mobile. Cette approche est la plus légère mais offre une intégration plus limitée que d'autres outils multi-plateformes tels que Xamarin Studio, Appcelerator Titanium, or Embarcardero FireMonkey, qui eux permettent de créer des applications réellement natives.

Cordova est le projet ouvert sur lequel se base Phonegap, depuis que Phonegap a été racheté par Adobe. Grossièrement Phonegap rajoute une couche facilitant le processus de build. Notamment en permettant de gérer des builds sur les serveurs d'Adobe (ce qui permet de faire une build pour iOS sans Mac par exemple).

Pour avoir plus de détails.

Nous allons travailler avec Cordova qui est le projet ouvert.

Workflow Cordova

Créer un projet :

$ cordova create hello com.example.hello HelloWorld

Ajouter la plateforme Android au projet (faire ça dans le dossier du projet) :

$ cordova platforms add android

Construire le projet :

$ cordova build

Tester le projet dans un émulateur :

$ cordova emulate android

Au cas ou la connexion avec l'émulateur se fait mal.

  1. Lancer l'émulateur à la main

    $ android avd

  2. Charger l'application dans l'émulateur (depuis le dossier de votre projet) :

    $ adb install platforms/android/ant-build/Mif3802-debug.apk

Porter une application existante

Donner un aspect mobile

Utiliser les alertes natives

Ajouter le plugin a votre projet : 

 $ cordova plugin add org.apache.cordova.dialogs

Dans votre index.html, ajouter la référence au fichier cordova.js

 <script src="cordova.js"></script>

Cette commande demande au client Cordova d'injecter la version correspondant à votre plateforme (Android/iOS/...) au moment du build. Il n'est pas nécessaire (ou même recommandé) d'avoir un fichier cordova.js dans votre dossier www/.

Surcharger la définition de window.alert() par navigator.notification.alert() pour avoir 

document.addEventListener('deviceready', function () {
    if (navigator.notification) { // Override default HTML alert with native dialog
        window.alert = function (message) {
            navigator.notification.alert(
                message,    // message
                null,       // callback
                "Workshop", // title
                'OK'        // buttonName
            );
        };
    }
}, false);

Utiliser la géo-localisation

Ajouter le plugin de geolocalisation à votre projet :

 $ cordova plugin add org.apache.cordova.geolocation

Ce plugin permettra d'accéder aux données GPS même si le navigateur du téléphone ne supporte pas l'API de géolocalisation du W3C. Vous pourrez par exemple ajouter comme méta-donnée au TODO sont lieu de création, ou encore mieux l'endroit ou le TODO devrait être réalisé.

Exemple d'utilisation :

    navigator.geolocation.getCurrentPosition(
        function(position) {
            alert(position.coords.latitude + ',' + position.coords.longitude);
        },
        function() {
            alert('Error getting location');
        }
    );

Tester l'application.

Scroll natif dans la liste des todos

Une Application mobile a souvent un en-tête (header). Normalement cet en-tête ne bouge pas quand le contenu de la fenêtre défile. Accrocher l'entête en haut de l'écran:

Ajouter une classe css scroller à la liste des résulats de la rechercher

<div class="topcoat-list__container scroller">
    <ul class="topcoat-list list employee-list"></ul>
</div>

Dans votre fichier .css définir la classe scroller :

.scroller {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 141px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

Tester l'application

Technologies alternatives

Liens utiles