TP Cordova

L'objectif de ce TP est de transformer l'application Web faite la semaine dernière en application mobile.

En plus d'un accès plus riche aux capteurs (ex: les données de boussole sont plus précises), il devient possible d'accéder à des API natives (ex : le carnet d'adresse). Un autre avantage est la possibilité de distribuer vos applications sur les stores des plateformes (Play Store, App Store...)

Les supports de cours sont disponibles ici.

Avant le TP : mise en place des outils

Ce TP nécessite les outils de développement Android qui pèsent plus d'1 GB au total. Il est donc important que vous les installiez avant le TP (depuis chez vous).

Le TP sera évalué avec l'émulateur suivant : Nexus 5, Android 5.1 Lollipop x86 (Api 22).

Vérifiez que l'émulateur fonctionne and créant un projet Android Hello World.

Vérifiez 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/

Cordova s'appuie maintenant sur l'outil de build gradle qu'il vous faudra installer.

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, 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/Mif13-debug.apk

Porter une application existante

Nous allons maintenant transformer l'application de TODO en application mobile native.

Pour commencer avec Cordova :

  1. Créez un nouveau projet : $ cordova create hello com.example.hello HelloWorld
  2. Déplacer dans ce projet
  3. Ajouter la plateforme Android au projet : $ cordova platform add android --save
  4. Construire le projet : $ cordova build.
  5. Testez que l'application se lance bien dans l'émulateur :$ cordova emulate android.

En cas de problème, référez vous au guide Getting Started, ou au guide plus détaillé dédié aux applications Android.

Vous pouvez maintenant commencer à importer le code du TP précédent dans le projet, en particulier la structure Backbone.

Ajoutez ensuite dans votre index.html une 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/.

Par la suite nous allons ajouter des plugins cordova qui permettent de spécifier des éléments natifs depuis du code html.

Utiliser la géo-localisation

Ajoutez le plugin de geolocalisation à votre projet :

 $ cordova plugin add cordova-plugin-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é.

Des exemples détaillés sont disponibles dans la documentation de Cordova. Voici un exemple simple :

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

Ajouter au modèle de donnée des TODOs un ou deux champs (lat, lon) permettant d'associer un lieu à un TODO

Créer un composant demandant à l'utilisateur s'il veut déclencher un "rappel" du TODO quand il arrive dans un lieu donné (ou à proximité).

Ajout de la vibration#

Ajouter un mécanisme de monitoring de la position de l'utilisateur. Faire en sorte que quand la personne se trouve à proximité son dispositif vibre, en utilisant le plugin de vibration de Cordova.

Utiliser les alertes natives

Ajouter le plugin a votre projet : 

 $ cordova plugin add cordova-plugin-dialogs

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
                "Capteur", // title
                'OK'        // buttonName
            );
        };
    }
}, false);

Scroll natif

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.

Fixer votre composant d'en-tête (exemple avec Bootstrap).

Tester l'application

Rendu du TP

Le TP comprenant la partie React et cette partie mobile, est à rendre pour le mercredi 14 à 23h59 (date du dernier commit sur la forge). Chaque étudiant d'un binôme doit fournir:

Le projet doit comprendre un fichier README.md (ou .txt) à sa racine. Ce fichier doit décrire au minimum:

Barême (à titre indicatif)

Projet, dépendance et build (6 points)

Application (15 points)