Tutorial creation d’une application Hybride Ionic angularJS Cordova NodeJS
Pré-requis, avoir installé ionic
taper ionic pour avoir l’aide
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
Une question? Posez-la ici
Your ionic app is ready to go !
Ionic a créé l’arborescence de l’application
<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 :
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à :
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.
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 :
Je choisis ce bouton « ionic refresh »
Je rajoute à mon bouton :
<buttonclass="button">
<iclass="icon ion-refresh"></i>
</button>
Une question? Posez-la ici
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à :
Une question? Posez-la ici
Des questions?