User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active
 
Details

 

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

 

ionic-project-ready-to-go

 

Je rentre dans mon répertoire consultingitdialogs

J’ajoute ma plateforme android comme d’habitude :

Ionic platform add android

 

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 :

 

cordova icon

 

Et voilà:

 

dialogs

 

A la console, je lance un

adb –s emulator-5554 logcat

pour voir les résultats du vote:

 

adb logcat

 

Une question? Posez-la ici