Tutorial creation d’une application Hybride Ionic angularJS Cordova NodeJS

 

Pré-requis, avoir installé ionic

taper ionic pour avoir l’aide

 

commande ionic2

 

ionic start nomduprojet

 

Je vais créer une application qui va s’appeler consultingit

ionic start consultingit

 

Ionic crée la structure du projet

il va télécharger les dépendances, paquets NPM

 

ionic telechargement dependances

Une question? Posez-la ici

 

Your ionic app is ready to go !

Ionic a créé l’arborescence de l’application

 

arborescence ionic bower gulp node json

 

 

<REP>         .

<REP>         ..

29 .bowerrc

242 .editorconfig

138 .gitignore

118 bower.json

992 config.xml

1 385 gulpfile.js

<REP>         hooks

55 ionic.config.json

<REP>         node_modules

439 package.json

<REP>         scss

<REP>         www

               8 fichier(s)           3 398 octets

               6 Rép(s)   6 016 503 808 octets libres

 

Une question? Posez-la ici

 

Je vais maintenant éditer le fichier config.xml de base avec Visual Studio par exemple, et je remplace la description et la balise email

 :

<?xmlversion="1.0"encoding="UTF-8"standalone="yes"?>

<widgetid="com.ionicframework.consultingit788703"version="0.0.1" xmlns="http://www.w3.org/ns/widgets"

xmlns:cdv="http://cordova.apache.org/ns/1.0">

<name>consultingit</name>

<description>

       Projet Ionic Cordova AngularJS NodeJS multi plates-formes Android,IOS,WindowsPhone

   </description>

<authoremail="Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."href="http://example.com.com/">

     Loic BILLET

   </author>

<contentsrc="index.html"/>

<accessorigin="*"/>

<preferencename="webviewbounce"value="false"/>

<preferencename="UIWebViewBounce"value="false"/>

<preferencename="DisallowOverscroll"value="true"/>

<preferencename="SplashScreenDelay"value="2000"/>

<preferencename="FadeSplashScreenDuration"value="2000"/>

<preferencename="android-minSdkVersion"value="16"/>

<preferencename="BackupWebStorage"value="none"/>

<featurename="StatusBar">

   <paramname="ios-package"onload="true"value="CDVStatusBar"/>

</feature>

<pluginname="cordova-plugin-device"spec="~1.1.3"/>

<pluginname="cordova-plugin-console"spec="~1.0.4"/>

<pluginname="cordova-plugin-whitelist"spec="~1.3.0"/>

<pluginname="cordova-plugin-splashscreen"spec="~4.0.0"/>

<pluginname="cordova-plugin-statusbar"spec="~2.2.0"/>

<pluginname="ionic-plugin-keyboard"spec="~2.2.1"/>

</widget>

 

 

 

Voici maintenant la structure du répertoire www :

C:\Users\iloveparis\consultingit\www

Dir

 

tree-ionic-www.PNG

C:\Users\iloveparis\consultingit\www>dir

Le volume dans le lecteur C s'appelle OS_04092016

Le numéro de série du volume est E4BD-684A

Répertoire de C:\Users\iloveparis\consultingit\www

10/10/2016 16:42   <REP>         .

10/10/2016 16:42   <REP>         ..

10/10/2016 16:42   <REP>         css

10/10/2016 16:42   <REP>         img

10/10/2016 16:42             1 675 index.html

10/10/2016 16:42   <REP>         js

10/10/2016 16:42   <REP>         lib

10/10/2016 16:42               207 manifest.json

10/10/2016 16:42               168 service-worker.js

10/10/2016 16:42   <REP>         templates

               3 fichier(s)           2 050 octets

               7 Rép(s)   5 937 692 672 octets libres

 

Avec la commande « tree » cela donne :

 

tree angularjs

 

 

Une question? Posez-la ici

 

On remarque bien le repertoire angular

 

C:\Users\iloveparis\consultingit\www>tree

Structure du dossier pour le volume OS_04092016

Le numéro de série du volume est E4BD-684A

C:.

───css

───img

───js

───lib

│   └───ionic

│       ───css

│       ───fonts

│       ───js

│       │   ───angular

│       │   └───angular-ui

│       └───scss

│           └───ionicons

└───templates

 

C’est sympa, mais je vais faire un peu le ménage et recréer ma propre arborescence à moi

 

Je supprime index.html

Je supprime le répertoire js

Je supprime le répertoire template

Il ne reste plus que ça :

 

C:\Users\iloveparis\consultingit\www>tree

Structure du dossier pour le volume OS_04092016

Le numéro de série du volume est E4BD-684A

C:.

───css

───img

└───lib

   └───ionic

       ───css

       ───fonts

       ───js

       │   ───angular

       │   └───angular-ui

       └───scss

           └───ionicons

 

Je vais maintenant recréer :

-un autre fichier index.html

Edit index.html, save

Un nouveau repertoire : js

Un nouveau repertoire : js/app

 

Voilà, maintenant je peux commencer à créer mon application

 

Mon client n’est pas d’accord pour que je publie le code métier. Je ne documenterai donc pas le code métier à proprement parlé. Je documente juste un petit tutorial pour créer une application ionic Cordova AngularJS NodeJS qui ouvre une boite d'information dialogue.

 

Je commence par éditer mon fichier index.html vierge avec visual studio et rajoute les balises de bases :

 

<!doctypehtml>

<html lang="en">

<head>

   <metacharset="utf-8"/>

   <title>Consulting IT application Multi plate-forme</title>

</head>

<body>

</body>

</html>

 

Je vais maintenant ajouter les librairies

Dont le css ionic de base et le bundle ionic qui contient AngularJS:

 

<!doctypehtml>

<html lang="en">

<head>

   <metacharset="utf-8"/>

   <title>consultingit</title>

   <linkrel="stylesheet"href="lib/ionic/css/ionic.css"/>

   <!-- ionic:libs -->

   <scriptsrc="lib/ionic/js/ionic.bundle.js"></script>

</head>

<body>

</body>

</html>

 

Une question? Posez-la ici

 

Voilà le squelette de mon application :

 

<!doctypehtml>

<htmllang="en">

<head>

   <metacharset="utf-8"/>

   <title>consultingit</title>

   <linkrel="stylesheet"href="lib/ionic/css/ionic.css"/>

   <!-- ionic:libs -->

   <scriptsrc="lib/ionic/js/ionic.bundle.js"></script>

   <!-- Mon application-->

   <linkrel="stylesheet"href="css/style.css"/>

   <scriptsrc="js/app.js"></script>

</head>

<body>

</body>

</html>

 

Je vais maintenant créer une barre header

Je consulte la doc d’ionic framework :

http://ionicframework.com/docs/api/directive/ionContent/

http://ionicframework.com/docs/api/directive/ionHeaderBar/

je choisis la couleur de la barre ici :

http://ionicframework.com/docs/components/#header

Et je choisis « bar-balanced », ce qui donne:

 

   <!doctypehtml>

   <htmllang="en">

   <head>

       <metacharset="utf-8"/>

       <title>consultingit</title>

       <linkrel="stylesheet"href="lib/ionic/css/ionic.css"/>

       <!-- ionic:libs -->

       <scriptsrc="lib/ionic/js/ionic.bundle.js"></script>

       <!-- Mon application-->

       <linkrel="stylesheet"href="css/style.css"/>

       <scriptsrc="js/app.js"></script>

   </head>

   <body>

       <ion-header-barclass="bar-balanced">

           <h1class="title">http://consultingit.fr Ionic Cordova Angular Node app</h1>

       </div>

   </body>

   </html>

 

Maintenant je vais choisir le contenu de mon body :

Je repère la balise sur http://ionicframework.com/docs/api/directive/ionContent/

Et la balise est « ion-content »

 

   <!doctypehtml>

   <htmllang="en">

   <head>

       <metacharset="utf-8"/>

       <title>consultingit</title>

       <linkrel="stylesheet"href="lib/ionic/css/ionic.css"/>

       <!-- ionic:libs -->

       <scriptsrc="lib/ionic/js/ionic.bundle.js"></script>

       <!-- Mon application-->

       <linkrel="stylesheet"href="css/style.css"/>

       <scriptsrc="js/app.js"></script>

   </head>

   <body>

       <ion-header-barclass="bar-balanced">

           <h1class="title">http://consultingit.fr Ionic Cordova Angular Node app</h1>

       </ion-header-bar>

       <ion-content>

           h1{Multi plate-formes: 1 code=4 devices: Web,Android,IOS,WindowsPhone}

       </ion-content>

   </body>

   </html>

 

Une question? Posez-la ici

 

Maintenant je regarde à quoi ressemble cette première application :

Je tape la commande ionic-serve

Mon navigateur s’ouvre, et voilà :

 

app de base

 

C’est sympa, mais on peut faire mieux en utilisant la puissance des directives d’AngularJS :

Je vais donc associer mon fichier index.html à une application AngularJS

Dans mon js/app.js je rajoute :

 

var App = angular.module("App", ["ionic"]);

// Cette ligne veut dire que mon application aura un module App qui aura comme dependance ionic.

// App (en rouge) est de type App (angular).

// Maintenant je vais créer un controlleur

 

App.controller("AppCtrl",["$scope","$log",AppCtrl]) ;

// Cette ligne veut dire que j’ai un controlleur avec un scope (voir cours angularJS) un log, et il s’appelle AppCtrl

 

// Maintenant je vais définir ma fonction controlleur :

function AppCtrl($scope,$log) {

}

 

Je dois maintenant modifier la balise de mon index.html pour lui dire que le contenu du code html est pris en charge par AngularJS : je rajoute le nom de mon app dans le fichier app.js, qui est « App », souvenez-vous plus haut.

<html lang="en"data-ng-app="App">

 

Je vais maintenant associer mon <body> à mon controlleur, en ajoutant la balise :

<body data-ng-dontroller="AppCtrl">

 

Une question? Posez-la ici

 

Maintenant si je raffraichis mon navigateur, je vois apparaitre une belle barre verte : normal, AngularJS a pris en charge mon code.

 

app ionic angular barrre ok

 

Je veux maintenant ajouter un bouton à droite pour raffraichir la page.

Dans mon index.html je rajoute:

           <buttonclass="button"></button>

Oh le joli bouton qui est apparu. Mais il n’est pas très joli. Je vais donc choisir un joli bouton sur :

www.ionicons.com

Je choisis ce bouton « ionic refresh »

ionic boutons ionicons

Je rajoute à mon bouton :

           <buttonclass="button">

               <iclass="icon ion-refresh"></i>

           </button>

 

Une question? Posez-la ici

 

bouton refresh joli avec ionic angular

 

Le bouton est nettement plus beau et plus « pro ».

C’est bien beau, mais maintenant, quand je clique sur le bouton, je veux qu’il se passe quelquechose.

Je rajoute donc la balise à mon bouton :

           <buttonclass="button" ng-click="refresh()">

 

Lorsque je cliquerai sur le bouton, AngularJS executera la méthode refresh() ;

Je dois donc déclarer ma méthode refresh dans mon app.js :

 

var App = angular.module("App", ["ionic"]);

App.controller("AppCtrl",["$scope","$log",AppCtrl]) ;

function AppCtrl($scope, $log) {

   $scope.refresh = function () {

       $log.info("Le bouton a été appuyé!");

             alert("Sois gentil avec le bouton!");

   }

 

Je teste dans mon navigateur, et voilà :

 

clic bouton ionic angular

 

Une question? Posez-la ici

 

Des questions?