TP Cordova

L'objectif de ce TP est de transformer votre application Web actuelle en application mobile.

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 votre application existante

Nous restons avec une single page application consistant en une première vue de recherche puis une seconde vue d'affichage sur la carte.

Recherche

Adapter la 1ere vue, pour que la recherche affiche un ensemble de résultat sur la même page.

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énition 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. 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 réponses de recherche

Une Application mobile a souvent une entete (header). Normalement cette entête ne bouge pas quand le contenu de la fenetre 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 www/css/styles.css définir la classe scroller :

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

Ajouter la seconde vue

Quand un des résultats de recherche est sélectionné, l'afficher sur la carte. Ajouter éventuellement une transition CSS.

Tester l'application

Technologies alternatives

Liens utiles