ionic, angularjs,cordova,nodejs,sass
TRANSCRIPT
![Page 1: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/1.jpg)
LOGO
Développement Mobile Hybride
IONIC
Réalisé par : Baich Marwa
Encadré par : Mr.Benlahmar
Master SII
![Page 2: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/2.jpg)
Plan1
Introduction General
AngularJS1
Comment ionic fonctionne
NodeJS3
Cordova2
Sass4
2
Première application IONIC
3
4
IONIC exploite plusieurs technologies :
![Page 3: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/3.jpg)
un système d'exploitation open source pour Smartphones, PDA et terminaux mobiles
Android: c’est quoi ?
basé sur le noyau Linux et développé actuellement par Google.
Le système a été lancé en juin 2007 à la suite du rachat par Google en 2005, Android est le système d'exploitation le plus utilisé dans le monde avec plus de 80 % de parts de marché dans les smartphones.
![Page 4: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/4.jpg)
Développement mobile natif
Développement mobile Web
Développement mobile hybride
Développement Mobile
Trois manières pour développer des applications mobiles :
![Page 5: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/5.jpg)
Est une application mobile développée pour un des systèmes d’exploitation utilisés par les smartphones et tablettes (iOS, Android, Windows Phone etc.).
Elle est développée avec un langage spécifique à son système d’exploitation (App Store, Google Play, Windows Store, etc.)
Une application native
![Page 6: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/6.jpg)
www.themegallery.com
Les applications natives utilisent toutes les fonctionnalités offertes par le téléphone (GPS, Local Storage, Push Notifications, SMS, Appels Téléphoniques, Caméra, Accéléromètre, Mode connecté et mode non connecté, Gestion de l’énergie, Mémoires embarquées, etc…)
Les applications natives pour iPhones sont par exemple développées avec le langage de développement Objective-C.
Une application native
![Page 7: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/7.jpg)
Une web application est une application mobile développée en HTML, CSS, Java Script accessible et exécutable par le biais d’un navigateur Internet pour téléphone mobile.
Elle utilise le navigateur du smartphone et ne nécessite pas forcément de télécharger l'application. Elle est accessible par tous les smartphones quelques soient leur marque et système d’exploitation.
Mobile Web Application
![Page 8: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/8.jpg)
Cependant une web application ne prend pas en considération les différents modèles de Smartphones et les différents systèmes d’exploitation.
Une Application mobile Web n’utilise pas les fonctionnalités offertes par le système du téléphone
Mobile Web Application
![Page 9: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/9.jpg)
Une application hybride combine des éléments d’une application web HTML5, CSS, Java Script . Pour la partie Présentation des éléments de l’interface on utilise : • Des Framework CSS créées pour les applications mobiles (Boot Strap) • Des Framework Java Script ( Angular JS, JQuery Mobile, Dojo, Sencha
Touch)
Pour la partie Interaction avec le serveur, on utilise des Frameworks Ajax ( AngularJS, JQuery Mobile, …)
Une application hybride
![Page 10: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/10.jpg)
www.themegallery.com
• Des éléments d’une application native permettent d’utiliser toutes les fonctionnalités natives des smartphones ((GPS, Local Storage, Push Notifications, SMS, Appels Téléphoniques, Caméra, Accéléromètre, Mode connecté et mode non connecté, Gestion de l’énergie, Mémoires embarquées, etc.)
Une application hybride
![Page 11: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/11.jpg)
Pour utiliser interagir avec les fonctionnalités natives, l’application mobile native utilise les plugins du Framework CORDOVA (Apache) ou PhoneGap (Adobe).
En plus Cordova offre des outils qui permettent de : • Générer des applications mobiles natives pour les différentes
plateformes
• Tester ces applications sur des émulateurs appropriés
De plus elle pourra être distribuée en tant qu’application sur les plateformes d’applications (App Store, Google Play Store, Windows Store)
Mobile Web Application
![Page 12: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/12.jpg)
Appceleraor
Titanium (gratuit)
Win Dév mobile
(payant) IBM
WorklightAdobe
Phone Gap
Plateforme de développement mobile hybride
IONIC (GRATUIT, OPENSOURCE)
![Page 13: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/13.jpg)
![Page 14: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/14.jpg)
Définition
Ionic Framework : un framework utilisant Apache Cordova et aidant à la création d’applications mobiles hybrides.
Ionic utilise AngularJS pour le développement backend, et Sass pour la gestion du thème.
![Page 15: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/15.jpg)
IntroductionApplications SPAConcepts et fonctionnalités de NG
Directives & Liaison de données Filtres Vues, Contrôleurs, Scope Modules, Routes, Services
![Page 16: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/16.jpg)
Applications SPA
![Page 17: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/17.jpg)
Angular.js
AngularJS est un framework JavaScript open-source développé par Google.
L'idée de base est d'augmenter le langage HTML pour permettre la représentation des données métiers, qui sont elles traitées et gérées avec le langage Javascript.
Ce framework facilite grandement le développement d'application web selon le modèle MVC (Modèle Vue Controleur).
AngularJS va nous permettre de rajouter de nouveaux attributs aux balises HTML, tous ces nouveaux attributscommenceront par : ng
![Page 18: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/18.jpg)
www.themegallery.com
Les applications créées par AngularJS sont :
o Modulaires (des équipes peuvent travailler séparément su la même application)
o Testables (Encouragent les bonnes pratiques de développement. TDD et Tests unitaires)
o Evolutives (Utilisent des patrons de conceptions confirmés, tels que l’injection de dépendances, MVC, …)
Angular.js
![Page 19: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/19.jpg)
Concepts et fonctionnalités de NG
![Page 20: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/20.jpg)
Télécharger AngularJS.
![Page 21: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/21.jpg)
Créer page html « index.html ».<!DOCTYPE html> <html lang="fr" ng-app>
<head> <meta charset="UTF-8"> <title>Test AngularJS</title> <script src="js/angular.js"></script>
</head> <body>
<input type="text" ng-model="nom" placeholder="Votre nom">
<hr> Bonjour : {{nom}}
</body> </html>
Attacher AngularJS
![Page 22: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/22.jpg)
Directives et Liaison de données
Une Directive ajoute des fonctionnalités au HTML Un Template évalue une expression.
<!DOCTYPE html> <html lang="fr" ng-app>
<head> <meta charset="UTF-8"> <title>Test AngularJS</title> <script src="js/angular.js"></script> </head> <body> <input type="text" ng-model="nom" placeholder="Votre nom"> <hr> Bonjour : {{nom}} </body>
</html>
Directive
Directive
Template et Liaison de donnée
![Page 23: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/23.jpg)
AngularJS privilégie l’aspect déclaratif La plupart des balises sont augmentées par des attributs
« ng-* ».
Exemple pour la balise <input
type="text" >
Directives et Liaison de données
![Page 24: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/24.jpg)
Directives et Liaison de données
Utilisation de boucles « ng-repeat » et « ng-init »
<!DOCTYPE html> <html lang="fr" ng-app>
<head> <meta charset="UTF-8"> <title>Test AngularJS</title> <script src="js/angular.js"></script>
</head> <body>
<ul ng-init="persons=[‘marwa', ‘rabab', ‘sii']"> <li ng-repeat="person in persons"> {{person}} </li> </ul>
</body> </html>
Initialisation du tableau
« persons »
Parcours du tableau et affichage
![Page 25: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/25.jpg)
Filtres
Utilisation de l’opérateur « pipe | » On peut chainer les filtres. (Expression|filtre1|filtre2…)
<input type="text" ng-model="nom" > <ul ng-init="persons=[‘marwa', ‘rabab', ‘sii']">
<li ng-repeat="person in persons "> {{person | uppercase}}
</li> </ul>
Le contenu est transformé en majuscule
![Page 26: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/26.jpg)
View $scope Controller
Le Scope est un objet qui permet de partager les données entre la vue et le contrôleur; Le Modèle.
• La vue ne doit rien savoir sur le contrôleur• Le contrôleur ne doit rien savoir sur la vue
Vues, Contrôleur et Scope
![Page 27: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/27.jpg)
<html lang="fr" ng-app="myApp">…<body ng-controller="PersonCtrl">
<input type="text" ng-model="nom« placeholder="Filtrer"> <ul> …</ul> <script>
// Créer un module var app = angular.module('myApp', [ ] ); // Y ajouter un contrôleur app.controller('PersonCtrl', function ($scope){ $scope.persons = [‘marwa', ‘rabab', ‘sii']; });
</script> </body>
Contrôleurs Définit le la portion du DOM gérée par le module.
(l’application)Définit le la portion du DOM
gérée par le contrôleur.
$scope est le modèle. Il est
injecté automatiquement
par AngularJS
![Page 28: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/28.jpg)
<input type="text" ng-model="newPerson" placeholder="Ajouter"><button ng-click="addPerson()">Ajouter</button><script>
var app = angular.module('myApp', [] ); app.controller('PersonCtrl', function ($scope){ $scope.persons = [‘marwa', ‘rabab', ‘sii']; $scope.addPerson = function(){ $scope.persons.push($scope.newPerson); $scope.newPerson = ''; } });</script>
![Page 29: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/29.jpg)
Modules
Un module est un conteneur. Il permet d’organiser le code.
Dans un module, on peut enregistrer des :• Configurations• Contrôleurs• Services• Directives• Filtres
Un module peut dépendre d’autres modules :var app = angular.module('myApp', ['$ngRoute', 'myModule']);
Le module « myApp » dépend des modules : 1. « $ngRoute » 2. « myModule »Ceux-ci seront injectés automatiquement par AngularJS
![Page 30: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/30.jpg)
Services
Les services sont instanciés au moment de leur première utilisation. Ce sont des « Singleton ».
Il sont construits à l’aide de la méthode « factory() » ou « service() » d’un module.
app.factory('serviceStates', function(){ return { states : ['Alabama','Alaska','Arizona','Arkansas'] };});
Un service ainsi défini, peut être utilisé dans n’importe quel contrôleur du module. Il suffit de le référencer comme une dépendance.app.controller('statesCtrl', function($scope, serviceStates){ $scope.states = serviceStates.states;});
![Page 31: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/31.jpg)
<body ng-controller="statesCtrl"><h2>USA States</h2><ul><li ng-repeat="state in states"> {{state | uppercase}}</li></ul><script> var app = angular.module('myApp', []); app.factory('serviceStates', function(){ return { states : ['Alabama','Alaska','Arizona','Arkansas'] }; }); app.controller('statesCtrl', function($scope, serviceStates){ $scope.states = serviceStates.states; });</script>
</body>Injection du service
serviceStates
Services
![Page 32: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/32.jpg)
Routes - Structure ?
Module
Config
Route
View $scope Controller
![Page 33: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/33.jpg)
Routes – module « ngRoute »
Les routes sont gérées par le module « ngRoute » qui n’est pas intégrés dans le « core » de AngularJS.
Pour l’ajouter :
![Page 34: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/34.jpg)
3 – Routes La page index.html :<html lang="fr" ng-app="myApp">
<head> <meta charset="UTF-8"> <title>Test AngularJS</title> <script src="js/angular.js"></script> <script src="js/angular-route.js"></script></head><body ng-controller="statesCtrl"><h2>USA States</h2><div ng-view></div><script> // et le reste …
Attacher le script du module ngRoute
L’endroit où les vues partielles vont s’afficher
![Page 35: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/35.jpg)
1. Notre module « myApp » dépend du module « ngRoute »:var app = angular.module('myApp', ['ngRoute']);
« ngRoute » fournit le provider : « $routeProvider »
2. Nous utilisons la méthode « config() » du module pour configurer les routes :app.config(function($routeProvider){ // configurer les routes ici avec $routeProvider});
Routes – provider « $routeProvider »
![Page 36: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/36.jpg)
Routes
Configuration des routes : var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider){ $routeProvider.when( '/', { templateUrl: ‘xxxx.html', controller: ‘xxxxCtrl' } ).when( '/, { templateUrl: ‘yyyy.html', controller: ‘yyyyCtrl' })});
Injection des dépendances
Injection des dépendances
![Page 37: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/37.jpg)
Node.js
![Page 38: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/38.jpg)
Node.js
DescriptionsAvantagesDescriptions de V8 Comment V8 compile le code JSArchitecture de NodeJs
Qu’est-ce que la programmation par callback ? Les méthodes synchrones? Les méthodes asynchrones?
Qu’est-ce que NPM ?
![Page 39: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/39.jpg)
Open-source Développé en C/C++ Cross Platform: OS X, Microsoft Windows, Linux,
FreeBSD, IBM AIX .. Pour développer en <<server-side>> Se base de l’interpréteur JS : V8 de Google Utilisé par de grand nom : IBM, Microsoft ,Yahoo,
LinkedIn..
Descriptions
![Page 40: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/40.jpg)
Avantages
NodeJs est base sur une architecture :• <<Event-driven>>• <<Non bloking I/O API>> NodeJS ect concu pour optimiser et les évolutions d’une
application web en temps réel Les possibilités de NodeJS sont sans cesse augmentées
grâce a sa grande communauté
![Page 41: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/41.jpg)
Est un moteur JavaScript libre et open source développé par Google Il est notamment utilisé dans les navigateurs Google Chrome, ainsi que sur la plateforme node.js.
Il transforme le code JavaScript très rapidement en code machine
Codé en C++
Descriptions de V8
![Page 42: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/42.jpg)
Commet V8 compile le code JS ?
V8 a deux compilateurs !
Un compilateur complet <<Full>> Un compilateur D’optimisation
![Page 43: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/43.jpg)
Architecture de NodeJs
Qu’est-ce que la programmation par callback ?
Les méthodes synchrones?
Les méthodes asynchrones?
![Page 44: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/44.jpg)
Les callbacks sont des fonctions qui sont appelées à la fin dune tache
Les callbacks peuvent aussi être désignées par abus de langage, une fonction anonyme passé en argument
Une très grande partie du code de NodeJS est développé avec des callbacks
Programmation par callback
![Page 45: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/45.jpg)
<<Errror-first>> callback
La communauté de NodeJS s’est mis d’accord pour une standardisation des callbacks:
• Le premier argument est l’erreur.• Le second est le résultat. C’est important de garder cette normalisation pour faciliter
la réutilisation de votre code
![Page 46: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/46.jpg)
Exemple :
![Page 47: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/47.jpg)
Chaque tache est traitée une après l’autre
Les méthodes synchrones
Tant que le fichier 1 n’est pas totalement téléchargé , le script bloque.
L’ exécution est complètement bloquée. La méthode de contournement est de développer un programme multithreadé
![Page 48: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/48.jpg)
Exemple :
![Page 49: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/49.jpg)
Le programme lance plusieurs tache en même temps, on est averti quand les taches sont finies
Les méthodes asynchrones
Malgré que le programme soit en train de télécharger les fichiers , le programme peut continuer à faire d’autres choses.
![Page 50: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/50.jpg)
![Page 51: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/51.jpg)
Synchrones vs asynchrones
![Page 52: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/52.jpg)
NPM est un gestionnaire de module pour NodeJs.
NPM Gère les dépendances des modules automatiquement.
NPM Fonctionne en ligne de commande.
NPM Permet de rechercher, installer et gérer.
NPM Est installé avec NodeJS
Qu’est-ce que NPM ?
![Page 53: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/53.jpg)
Les modules locaux sont des modules téléchargés et installes au niveau de votre projet
Pour installer un module local , Placez-vous dans le dossier de votre projet et tapez :
npm install nomdumodule
Module local
![Page 54: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/54.jpg)
Module global
Les modules globaux sont installés dans
Les modules ne peuvent pas etre accédés avec require() Mais ils sont accessibles depuis un terminal.
Pour installer un module local , Placez-vous dans le dossier de votre projet et tapez :
npm install -g nomdumodule
![Page 55: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/55.jpg)
![Page 56: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/56.jpg)
CORDOVA
Définition Les avantages Comment cela fonctionne ? Composants de base Exemples des plugings Installation Construction d’un pluging
![Page 57: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/57.jpg)
Cordova
Cordova est un framework open source permettant de créer des applications mobiles avec les technologies du web (HTML, JavaScript, CSS), tout en bénéficiant des fonctionnalités natives des appareils (localisation GPS, contacts, caméra).
L'intérêt est de pouvoir construire des applications sur les différentes plateformes mobiles.
![Page 58: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/58.jpg)
Les avantages de cordova sont nombreux :
Cordova est OpenSource
(Licence Apache)
1
Cordova est basée sur les standards du
Web.
2
Cordovasupporte la plupart
des plateformes mobiles du marché
3
![Page 59: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/59.jpg)
Comment cela fonctionne ?
Cordova permet en fait de créer une application qui ouvre une « WebView » disponible nativement sur les appareils mobiles. Pour simplifier, il s’agit d’une fenêtre de navigateur Web, exécutée dans notre application, qui va s’occuper d’interpréter et d’afficher le contenu de nos scripts. Cette WebView, dont les possibilités sont étendues par Cordova, permet d’accéder à un certain nombre de fonctionnalités natives à l’appareil mobile.
![Page 60: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/60.jpg)
www.themegallery.com
La WebView d’Android est basé sur Chromium. Il s’agit de Safari pour iOS, Internet Explorer Mobile pour Windows Phone, … Ainsi, Cordova ne permet pas de créer à proprement parler d’applications natives. On parlera plutôt d’applications hybrides.
![Page 61: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/61.jpg)
www.themegallery.com
![Page 62: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/62.jpg)
Composants de base :
Un plugin cordova se compose de 3 parties majeures : le fichier plugin.xml : il permet de définir et de configurer le
plugin. le dossier src/ : il contient le code natif spécifiques aux
différentes plateformes le dossier www/ : il contient l’API JavaScript que le plugin
exposera à la webview
![Page 63: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/63.jpg)
Exemples des plugings
cordova-plugin-batterie-état :
cordova-plugin-caméra
cordova-plugin-console cordova-plugin-contacts
plugman installer --platform <ios | Android | blackberry10 | WP8> --project <répertoire> --plugin cordova-plugin-batterie-état
plugman installer --platform <ios | Android | blackberry10 | WP8> --project <répertoire> --plugin cordova-plugin-caméra
![Page 64: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/64.jpg)
Exemples des plugings
cordova-plugin-batterie-état :
cordova-plugin-caméra
cordova-plugin-console cordova-plugin-contacts
plugman installer --platform <ios | Android | blackberry10 | WP8> --project <répertoire> --plugin cordova-plugin-batterie-état
plugman installer --platform <ios | Android | blackberry10 | WP8> --project <répertoire> --plugin cordova-plugin-caméra
![Page 65: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/65.jpg)
Cordova-plugin-device cordova-plugin-vibration cordova-plugin-splashscreen cordova-plugin-réseau d'information cordova-plugin-media-capture cordova-plugin-media cordova-plugin-géolocalisation cordova-plugin-transfert de fichiers cordova-plugin-fichier cordova-plugin-device-mouvement
![Page 66: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/66.jpg)
Installation Exécuter la commande :
◦ npm install -g ionic cordova
![Page 67: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/67.jpg)
Construction d'un Plugin
Les développeurs d'applications utilisent de la CLI « plugin add ». L'argument de cette commande est l'URL pour un dépôt gitcontenant le code du plugin. Cet exemple implémente Device API de Cordova :
![Page 68: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/68.jpg)
Exemples des plugings
cordova-plugin-batterie-état :
cordova-plugin-caméra
cordova-plugin-console cordova-plugin-contacts
plugman installer --platform <ios | Android | blackberry10 | WP8> --project <répertoire> --plugin cordova-plugin-batterie-état
plugman installer --platform <ios | Android | blackberry10 | WP8> --project <répertoire> --plugin cordova-plugin-caméra
![Page 69: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/69.jpg)
Cordova-plugin-device cordova-plugin-vibration cordova-plugin-splashscreen cordova-plugin-réseau d'information cordova-plugin-media-capture cordova-plugin-media cordova-plugin-géolocalisation cordova-plugin-transfert de fichiers cordova-plugin-fichier cordova-plugin-device-mouvement
![Page 70: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/70.jpg)
Installation Exécuter la commande :
◦ npm install -g ionic cordova
![Page 71: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/71.jpg)
Construction d'un Plugin
Les développeurs d'applications utilisent de la CLI « plugin add ». L'argument de cette commande est l'URL pour un dépôt gitcontenant le code du plugin. Cet exemple implémente Device API de Cordova :
![Page 72: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/72.jpg)
Définit la configuration et le comportement du
pluging
Doit être unique parmi tous les plugin
Permet de définir le fichier javascript
contenant l’API du pluging ainsi l’endroit ou
le pluging sera publié grace « clobers »
API de notre pluging sera donc accessible dans la webview grace à l’objet
« device »
qui est injecté dans le spécifique à la
plateforme config.xml fichier pour sensibiliser la
plate-forme de la bibliothèque de code
supplémentaire
balises spécifient le chemin d'accès aux fichiers de composant de la bibliothèque.
![Page 73: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/73.jpg)
L'Interface JavaScript
cordova.exec(function(winParam) {}, function(error) {}, "service", "action", ["firstArgument", "secondArgument", 42, false]);
Le code JavaScript fournit l'interface de la face, ce qui en fait peut-être la partie la plus importante du plugin. Vous structurez votre plugin JavaScript ce pour cela on doit appller cordova.exec pour communiquer avec la plate-forme native, à l'aide de la syntaxe suivante:
Une fonction de rappel de succès.
Une fonction de rappel d'erreur. Le nom de service à
appeler sur le côté natifLe nom de l'action à
appeler sur le côté natif.
Un tableau d'arguments à passer dans l'environnement natif.
![Page 74: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/74.jpg)
![Page 75: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/75.jpg)
www.themegallery.com
SASS c'est quoi ? Installation Les variables L’héritage L’imbrication
![Page 76: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/76.jpg)
Sass est un préprocesseur. Lorsque vous écrivez en langage Sass, vous utilisez un compilateur qui convertit en CSS vos fichiers Sass
Les fichiers portent le format .scss
Sass ajoute à CSS des fonctions pratiques, des variables, et d'autres aides de type script qui vous permettent d'écrire plus rapidement votre CSS et de faciliter sa maintenance.
SASS
![Page 77: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/77.jpg)
Installation
![Page 78: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/78.jpg)
o Sass est écrit en Ruby, et distribué via le package manager de Ruby
![Page 79: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/79.jpg)
![Page 80: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/80.jpg)
![Page 81: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/81.jpg)
![Page 82: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/82.jpg)
![Page 83: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/83.jpg)
![Page 84: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/84.jpg)
o Première chose très utile lorsqu’on utilise un langage de programmation quel qu’il soit, c’est de pouvoir déclarer des constantes et variables afin de centraliser les « propriétés » qui seront communes dans tout le programme.
o Ici, SASS ne déroge pas à la règle. La syntaxe est simple et l’on peut définir plusieurs types de variable. Le nom de la variable sera délimité par le caractère « $ » et le caractère « : ». Voici quelques exemples de déclaration.
Les variables
![Page 85: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/85.jpg)
Exemple 1:
![Page 86: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/86.jpg)
![Page 87: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/87.jpg)
L’héritage
Comme beaucoup de langages objet, SASS introduit et utilise lui aussi la notion d’héritage. De cette manière, il est plus facile de rajouter un attribut à une classe CSS sans pour autant répéter les autres attributs de la classe mère. Attention toutefois aux différentes répercussions sur votre design lorsque vous modifiez la classe mère.
![Page 88: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/88.jpg)
Exemple 2 :
![Page 89: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/89.jpg)
L’imbrication
A la manière de CSS, il est possible d’imbriquer des blocs dans d’autres. Cependant, là où il peut être illisible de faire ça dans CSS, SASS apporte une nouvelle façon de faire qui rend le code plus court et plus facile à lire et surtout moins laborieux à écrire.
![Page 90: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/90.jpg)
Exemple 3 :
![Page 91: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/91.jpg)
![Page 92: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/92.jpg)
www.themegallery.com
![Page 93: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/93.jpg)
Les directives
Ionique possède également ses propres directives à utiliser dans les vues. Il existe des directives pour la navigation, le contenu, les onglets, les listes et les boutons. Pour headers and Footers on trouve :<ion-header-bar> :ajoute un en-tête fixe au-dessus du contenu .
<ion-header-bar> : ajoute un pied de page fixe ci-dessous du contenu.
Pour le navigateur : <ion-side-menu> : conteneur de menu qui contient des liens de navigateur<ion-nav-view> : utilisation des modèles dans notre application .<ion-tabs> :
place des onglets de navigation en bas de l'écran
![Page 94: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/94.jpg)
Pour le Conteneur et le Contenu : <ion-view> : le conteneur de la vue . <ion-pane> :le conteneur de Contenu . <ion-content>:ajoute du contenu à une zone
Pour les listes : <ion-list> :le contenu des listes ( actes <ul>). <ion-item> :un éléments de liste ( actes <li>). Pour la saisie des formulaires: <ion-checkbox>:Ajout d’un icône de sélection sous forme d'entrée . <ion-radios>: Ajout l'icône de la radio pour la sélection sous forme d'entrée . <ion-toggle>: interrupteur d'animation lié à un booléen.
![Page 95: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/95.jpg)
Pour les gestes: <ion-touch =« function() »> : appelle une fonction lorsque l'utilisateur touche un élément
<ion-swipe-right=« function() »>: appelle une fonction lorsque l'utilisateur glisse à droite
Pour les buttons : <ion-delete-button>: supprimer un élément sur une liste <ion-option-button>: crée une option d’un bouton dans une liste .
![Page 96: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/96.jpg)
Structure d’un projet ionic
![Page 97: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/97.jpg)
Comment cela fonctionne ?
Ionic est un framework complet, c’est-à-dire qu’il propose de vous aider dans le développement de votre interface graphique (frontend), mais aussi dans le développement de toute la logique métier (backend).
![Page 98: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/98.jpg)
D’un point de vue front end
Le framework possède son propre thème HTML/CSS afin de pouvoir disposer rapidement d’une application fonctionnelle. L’utilisation de Sass permet notamment de modifier les variables du thème afin de changer les couleurs, les polices et tout autre paramètre disponible.
Comme on peut le voir sur la documentation CSS, le framework met à disposition un certain nombre d’éléments comme le fait également Twitter Bootstrap. On note par exemple la présence d’une grille, de tabs (en version iOS et Android), et de tous les éléments que l’on a l’habitude de retrouver sur l’UI d’une application mobile.
![Page 99: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/99.jpg)
www.themegallery.com
L’intérêt de disposer de tels éléments est d’avoir une base de travail pouvant être par la suite personnalisée selon votre charte graphique. En effet, l’interface des applications mobiles reste plus ou moins toujours la même, c’est donc beaucoup plus simple de travailler en ayant une base.
D’un point de vue front end
![Page 100: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/100.jpg)
D’un point de vue backend Le framework est basé sur AngularJS, gage de stabilité
puisque le framework est maintenant largement utilisé et surtout développé par Google.
Ionic apporte un lot de fonctionnalités très poussées afin de pouvoir développer une application “web” au plus proche du natif.
Comme indiqué dans la documentation JS, nous retrouvons notamment un “Side menu”, des tabs, la possibilité de gérer l’intégralité des gestures et évènements présents sur mobile (onTap, onDoubleTap..). Autant de fonctionnalités indispensables pour développer une application mobile, et se rapprocher ainsi au maximum d’une application développée “nativement”.
![Page 101: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/101.jpg)
L’écosystème
Ionic Lab : Comme évoqué précédemment, Ionic met à disposition un “lab” : il s’agit d’un serveur de développement local émulant l’interface Android et iOS côte à côte et disposant d’un livereload.
Cette fonctionnalité est vraiment très intéressante lors du développement de l’application puisqu’elle permet de voir les différences entre les deux plateformes, mais également de développer à l’aide du livereload comme on le ferait sur un projet web.
ngCordova : Extensions AngularJS permettant d’intégrer les plugins Apache Cordova et d’avoir ainsi accès aux fonctionnalités du device, telles que l’appareil photo, le touch id, ou encore l’accéléromètre, depuis un service Angular.
![Page 102: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/102.jpg)
www.themegallery.com
Ionic creator : Il s’agit d’un assistant à la création d’applications Ionic, permettant de créer des interfaces graphiques via de simples “drag and drop” puis de créer votre projet Ionic grâce à l’identifiant de votre projet “creator”.
L’écosystème
![Page 103: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/103.jpg)
Installation
Installer d’abord Node.js 4.
Ensuite, installer Cordova et Ionic.
Pour les applications Android, il faut installer le SDK de Android
Pour les application IOS, il faut installer XCode.
![Page 104: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/104.jpg)
Premier outil à installer : NodeJS
![Page 105: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/105.jpg)
Installer Node JS
Le chemin de NodeJS devrait être déclaré dans la variable d’environnement Path
![Page 106: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/106.jpg)
Installer Androïde SDK
Pour générer une application androide, il faudrait installer Androïde SDK
Créer une variable d’environnement ANDROIDE_HOME Qui indique le chemin de anndoid-sdk
![Page 107: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/107.jpg)
Créer une variable d’environnement JAVA_HOME Qui indique le chemin de du kit de développement java
![Page 108: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/108.jpg)
Installation de cordova et ionic :
Exécuter la commande :
Exécuter la commande :
![Page 109: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/109.jpg)
Première application IONIC
Le premier et le plus basique est la création d’une application vide. Pour cela, tapez la commande suivante dans le terminal:
Blank
![Page 110: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/110.jpg)
Première application IONIC
Le second et certainement le plus utile, est la création d’une application avec un menu latéral intégré. Pour cela taper la commande suivante dans le terminal :
$ionic start monProjet sidemenu
SideMenu
![Page 111: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/111.jpg)
Enfin, le dernier Template proposé qui est celui par défaut lorsqu’on ne spécifie pas le Template est la création d’une application avec des onglets. Pour cela tapez la commande suivante dans le terminal :
Première application IONIC
Tabs
![Page 112: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/112.jpg)
Structure du projet
![Page 113: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/113.jpg)
• Visualiser l’application en utilisant un serveur local
Plateformes et déploiementIonic est un framework permettant la création d’applications hybrides. De ce fait il est possible de cibler les plateformes (systèmes d’exploitations) que l’on souhaite viser
![Page 114: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/114.jpg)
Résultat
![Page 115: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/115.jpg)
Générer une application android
Pour configurer votre application pour les appareils Android. Il suffit d’exécuter la suivante commande à la racine de votre projet :
Pour pouvoir générer une application de type Android, il ne nous reste plus qu’à ajouter la plateforme avec la commande:
![Page 116: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/116.jpg)
IOS
Pour configurer votre application pour les appareils IOS. Il suffit d’exécuter la suivante commande à la racine de votre projet :
Ensuite, pour compiler puis lancer et déployer votre application sur un appareil connecté ou depuis un émulateur, il suffit d’exécuter la commande suivante :
![Page 117: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/117.jpg)
Construire l’application android : .APK
Pour construire l’application on utilise la commande :ionic build android
![Page 118: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/118.jpg)
TP
![Page 119: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/119.jpg)
1- création de projet
![Page 120: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/120.jpg)
2- spécifier la Platforme de déploiement
![Page 121: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/121.jpg)
3-Génère l'application en android
![Page 122: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/122.jpg)
4- Structure de notre projet
![Page 123: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/123.jpg)
![Page 124: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/124.jpg)
![Page 125: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/125.jpg)
![Page 126: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/126.jpg)
![Page 127: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/127.jpg)
![Page 128: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/128.jpg)
![Page 129: Ionic, AngularJS,Cordova,NodeJS,Sass](https://reader035.vdocuments.mx/reader035/viewer/2022062412/58e49da21a28aba3458b5639/html5/thumbnails/129.jpg)