Création d'un plugin

Dans cette première partie, nous allons réaliser un plugin pour afficher une boite de dialogue avec le design propre à Android. Le but de cet exercice est de se familiariser avec la création d'un plugin. Le projet est composé de 3 fichiers :

• Un fichier CustomAlertPlugin.java qui se situe dans le dossier src/android/com/example/
• Un fichier plugin.xml qui contient l'ensemble des configurations du plugin
• Un fichier plugin.js qui permet de faire l'interface entre le code source Java et notre plugin. Il se situe dans le dossier www/

├── package.json
├── plugin.xml
├── src
│   └── android
│       └── com
│           └── alert
│               └── CustomAlertPlugin.java
└── www
   └── plugin.js

Nous vous invitons à regarder la documentation officielle de Cordova pour la création d'un plugin ici

Première étape : le code Java

La classe de notre plugin hérite de CordovaPlugin qui permet l'utilisation de la méthode exec et de pouvoir récupérer l'ensemble des différents attribus de la classe. Pour plus d'informations sur la classe CordovaPlugin.

Le but de cette première partie est donc de remplir la fonction execute(String action, JSONArray args, final CallbackContext callbackContext) dans src/android/com/example/CustomAlertPlugin.java qui va permettre d'exécuter les différentes fonctions Java de notre plugin en testant la valeur d'action ainsi que la fonction showCustomAlert(String title, String content) pour créer la boite de dialogue en customisant le titre et le contenu.

• String action est le nom de la fonction du plugin à exécuter
• JSONArray args Le json qui contient l'ensemble des paramètres (ici le titre est la description de la boite de dialogue)
• CallbackContext callbackContext qui permet de retourner si l'utilisation d'un plugin a été un succès ou non

Pour créer une boite de dialogue en Android, nous utiliserons la classe AlertDialog.

Tips : Utilisez webView.getContext() pour récupérer le contexte de la WebView.

Deuxième étape : l'interface JS

La deuxième étape est de réaliser l'interface entre notre code Java écrit précédemment et le javascript. Dans le fichier plugin.js, nous allons donc déclarer nos différentes fonctions de la manière suivante :

    window.echo = function(str, callback) {
        cordova.exec(callback, function(err) {
            callback('Nothing to echo.');
        }, "Echo", "echo", [str]);
    };

Dernière étape : tester le plugin

La première étape est de créer un nouveau projet Cordova puis d'ajouter la plateforme Android. Pour finir, on ajoute le plugin que l'on vient de créer à notre nouveau projet.

$ cordova create [nom_de_votre_app] [package] & cd [nom_de_votre_app]`
$ cordova platform add android@6.1.0
$ cordova plugin add ../android-plugin/

Pour vérifier que votre plugin a bien été ajouté, vous pouvez utiliser la commande suivante qui liste l'ensemble des plugins du projet :

$ cordova plugin ls

Nous allons donc ajouter notre code dans la fonction onDeviceReady (www/js/index.js) pour utiliser le plugin. Celui-ci va alors être exécuté lors du lancement de votre application :

$ cordova build android
$ cordova run android

A vous de jouer !

Google Maps

Pour la deuxième partie de ce TP, nous allons afficher une Google Maps et balayer une partie de ses fonctionnalités. Le but est d'utiliser un plugin développé par une tierce personne. Vous pouvez vous inspirer de la documentation officiel de Google maps.

Le projet Cordova est déjà créé et paramétré avec une clé générée pour utiliser l'API Google Maps. De ce fait, dans cette partie du TP, vous n'aurez seulement qu'à vous concentrer sur l'utilisation d'un plugin.

Pour ce TP, nous avons généré la clé pour l'utilisation de l'API Google Maps. Si vous souhaitez générer vous-même une clé, c'est ici. Dans le cadre de ce TP, il n'est pas nécessaire d'en générer une pour pouvoir utiliser l'API Google Maps. En effet, le nombre limite de requête est largement suffisant pour l'ensemble des membres de la promotion.

Première étape : Affichage de la Google maps

Le but de cette première partie est d'afficher une Google Maps sur l'ensemble de l'écran. Nous utiliserons le fichier maps.js pour ajouter l'ensemble de votre code javascript pour l'affichage et la gestion de notre Google Maps.

1. Lorsque l'ensemble de votre mobile est prêt, initialiser la Google Maps avec le plugin importé.
2. Créer une balise pour afficher votre Google Maps
3. Une fois que la Gogole Maps est dans le statut plugin.google.maps.event.MAP_READY, afficher une alert javascript.

Deuxième étape : Affichage d'un marqueur

La deuxième étape consiste à afficher un marqueur sur la carte. La documentation pour les marqueurs se situe ici. Ce marqueur sera positionné en :

• Latitude : 43.117475
• Longitude : 5.937939

Pour ce qui est des paramètres complémentaires, libre à votre imagination.

À vous de trouver où ce marqueur se situe !

Dernière étape : Tunning !

Pour cette dernière étape, nous allons rajouter une animation sur la caméra. Nous souhaitons que celle-ci pointe directement sur la même latitude et longitude que notre marqueur. Nous utiliserons donc la fonction

animateCamera(CameraUpdate update, GoogleMap.CancelableCallback callback) 

Pour les différents paramètres, ici par défaut pour le TP :

• Pour la latitude et la longitude, ce sont les mêmes que le marker précédent
• Un zoom de 8
• un tilt de 60
• un bearing de 140
• une duration de 5000

Pour les plus rapides

Pour les plus rapides, nous vous proposons un petit challenge. Le but ? Récupérer des coordonnées GPS sur un serveur et les afficher sous formes de marker sur la Google Maps. Ces positions correspondent à des restaurants situés un peu partout autour de Toulon. Elles sont disponibles sous cette URL.

De ce fait, vous aurez besoin d'utiliser les requêtes AJAX avec JQuery. Pas de panique ! La librairie est déjà ajoutée au projet.

Si tout cela fonctionne, félicitations vous pouvez rentrer chez vous !

Bon courage :)