POC Proof of concept du plugin cordova Dialogs dans un projet Ionic et un module Angular, puis deploiement sur Android : appliqué à l’éléction présidentielle aux USA
Veille et lecture documentation du plugin :
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-dialogs/index.html
Installation du plugin :
cordova plugin add cordova-plugin-dialogs
Via Node avec la commande:
npm install –g cordova-plugin-dialogs
Je crée maintenant mon nouveau projet ionic en tapant la commande :
Ionic start consultingitdialogs blank
Je rentre dans mon répertoire consultingitdialogs
J’ajoute ma plateforme android comme d’habitude :
Ionic platform add android
Je n’ajoute pas pour l’instant la plateforme Apple IOS pour le iphones/ipads ca c’est un peu plus compliqué : il faut OBLIATOIREMENT un mac pour builder et déployer l’app sur un device IOS, et là je n’ai qu’un PC sous la main pour l’instant.
J’ajoute le module cordova dialogs à mon projet en tapant :
Cordova plugin add org.apache.cordova.dialogs
Ou plutôt :
cordova plugin add cordova-plugin-dialogs
|
Fetching plugin "cordova-plugin-dialogs" via npm Installing "cordova-plugin-dialogs" for android ANDROID_HOME=H:\android.sdk JAVA_HOME=C:\Program Files\Java\jdk1.8.0_101 Subproject Path: CordovaLib Downloading http://services.gradle.org/distributions/gradle-2.14.1-all.zip Starting a new Gradle Daemon for this build (subsequent builds will be faster). Download https://jcenter.bintray.com/com/android/tools/build/gradle/2.2.0/gradle-2.2.0.pom Download https://repo1.maven.org/maven2/com/android/tools/build/gradle-core/2.2.0/gradle-core-2.2.0.pom ... ... ... Download https://repo1.maven.org/maven2/com/android/tools/annotations/25.2.0/annotations-25.2.0.jar Download https://repo1.maven.org/maven2/com/google/guava/guava/18.0/guava-18.0.jar Incremental java compilation is an incubating feature. :clean :CordovaLib:clean BUILD SUCCESSFUL Total time: 56.229 secs |
Je vais utiliser le dialog « confirm » parce qu’il y a plusieurs boutons disponibles, 3 boutons, pour réfleter les votes.
Je vais ouvrir mon fichier js/app.js par exemple avec Visual Studio
Et je vais variabiliser mon module angular :
|
var consultingitDialogs = angular.module('starter', ['ionic']) .run(function ($ionicPlatform) { $ionicPlatform.ready(function () { if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } if (window.StatusBar) { StatusBar.styleDefault(); } }); }); |
Une question? Posez-la ici
Maintenant je vais créer le controller avec le $scope:
|
consultingitDialogs.controller("ConsultingitDialogsController", function ($scope) { }); |
Je rajoute mon code
|
consultingitDialogs.controller("ConsultingitDialogsController", function ($scope) { //J’ajoute la méthode confirmDialog à mon objet scope : $scope.confirmDialog = function () { navigator.notification.confirm("Election presidentielle americaine: pour qui allez-vous voter?", function(buttonIndex){ // avec le callback qui indique quel bouton a été appuyé // le titre, et un bouton: on va déterminer lequel va être appuyé avec un switch par exemple: switch (buttonIndex) { case 1: console.log("Appui sur le bouton BLANC. Vote pris en compte."); break; case 2: console.log("Appui sur le bouton TRUMP. Vote pris en compte."); break; case 3: console.log("Appui sur le bouton CLINTON. Vote pris en compte.");
} }, "Confirm Dialog", ["TRUMP","BLANC", "CLINTON"]) } }); |
Je vais maintenant rajouter mon UI, user interface dans la vue, dans le fichier index.html
Voici ma balise body de base:
|
<bodyng-app="starter"> <ion-nav-view></ion-nav-view> </body> |
Je l’enrichis avec un UI Ionic, dans une balise <ion-content></ion-content> en y intégrant le controlleur que je viens de créer :
|
<bodyng-app="starter"> <ion-pane> <ion-header-barclass="bar-stable"> <h1class="title">POC Cordova plugin Dialogs in Angular module</h1> </ion-header-bar> <ion-contentng-controller="ConsultingitDialogsController"> </ion-content> </ion-pane> </body> |
Puis je rajoute mon bouton qui va déclencher la fonctio confirmDialog de mon scope :
|
<bodyng-app="starter"> <ion-pane> <ion-header-barclass="bar-stable"> <h1class="title">POC Cordova plugin Dialogs in Angular module</h1> </ion-header-bar> <ion-contentng-controller="ConsultingitDialogsController"> <buttonclass="button"ng-click="confirmDialog()">Touchez ici</button> </ion-content> </ion-pane> </body> |
Maintenant je vais builder le projet avec un ionic android build :
|
H:\consultingitdialogs>ionic build android Updated the hooks directory to have execute permissions running cordova build android Running command: "C:\Program Files\nodejs\node.exe" H:\consultingitdialogs\hooks\after_prepare\010_add_platform_class.js H:\consultingitdialogs add to body class: platform-android ANDROID_HOME=H:\android.sdk JAVA_HOME=C:\Program Files\Java\jdk1.8.0_101 Subproject Path: CordovaLib Starting a new Gradle Daemon for this build (subsequent builds will be faster). Incremental java compilation is an incubating feature. :preBuild UP-TO-DATE :preDebugBuild UP-TO-DATE :checkDebugManifest :CordovaLib:preBuild UP-TO-DATE … BUILD SUCCESSFUL Total time: 16.095 secs Built the following apk(s): H:/consultingitdialogs/platforms/android/build/outputs/apk/android-debug.apk |
Mon apk est généré
Une question? Posez-la ici
Je démarre mon simulateur avec AVD Manager.exe
Maintenant je vais lancer l’apk dans mon simulateur :
Adb install –r \consultingitdialogs\platforms\android\build\outputs\apk\android-debug.apk
Adb install \platforms\android\build\outputs\apk\android-debug.apk
Ou pour remplacer l’APK existant :
Adb install –r \platforms\android\build\outputs\apk\android-debug.apk
Et si l’on a plusieurs emulateurs/devices physiques, choisir sur lequel on veut deployer avec –s et l’id, comme ceci:
Adb -s emulator-5554 install -r platforms\android\build\outputs\apk\android-debug.apk
[100%] /data/local/tmp/android-debug.apk
pkg: /data/local/tmp/android-debug.apk
Success
Voilà, l’application est installée, l’icône de cordova par défaut apparait :
Et voilà:
A la console, je lance un
adb –s emulator-5554 logcat
pour voir les résultats du vote:
Une question? Posez-la ici