Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ionic, AngularJS,Cordova,NodeJS,Sass

2,296 views

Published on

Ionic, AngularJS,Cordova,NodeJS,Sass

Published in: Technology
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ◆◆◆ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ◆◆◆ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Ionic, AngularJS,Cordova,NodeJS,Sass

  1. 1. LOGO Développement Mobile Hybride IONIC Réalisé par : Baich Marwa Encadré par : Mr.Benlahmar Master SII
  2. 2. 1 Introduction General AngularJS1 Comment ionic fonctionne NodeJS3 Cordova2 Sass4 2 Première application IONIC 3 4 IONIC exploite plusieurs technologies :
  3. 3.  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.
  4. 4. Développement mobile natif Développement mobile Web Développement mobile hybride Développement Mobile Trois manières pour développer des applications mobiles :
  5. 5.  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
  6. 6. 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
  7. 7.  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
  8. 8.  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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. Appcelera or Titanium (gratuit) Win Dév mobile (payant) IBM Worklight Adobe Phone Gap Plateforme de développement mobile hybride IONIC (GRATUIT, OPENSOURC E)
  13. 13. 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.
  14. 14.  Introduction Applications SPA Concepts et fonctionnalités de NG  Directives & Liaison de données  Filtres  Vues, Contrôleurs, Scope  Modules, Routes, Services
  15. 15. Applications SPA
  16. 16. 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 attributs commenceront par : ng
  17. 17. 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
  18. 18. Concepts et fonctionnalités de NG
  19. 19. Télécharger AngularJS.
  20. 20. 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
  21. 21. 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
  22. 22.  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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. <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
  27. 27. <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>
  28. 28. 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
  29. 29. 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; });
  30. 30. <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
  31. 31. Routes - Structure ? Module Config Route View $scope Controller
  32. 32. 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 :
  33. 33. 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
  34. 34. 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 »
  35. 35. 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
  36. 36. Node.js
  37. 37. Node.js Descriptions Avantages Descriptions de V8 Comment V8 compile le code JS Architecture de NodeJs  Qu’est-ce que la programmation par callback ?  Les méthodes synchrones?  Les méthodes asynchrones? Qu’est-ce que NPM ?
  38. 38.  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
  39. 39. 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é
  40. 40.  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
  41. 41. Commet V8 compile le code JS ? V8 a deux compilateurs !  Un compilateur complet <<Full>>  Un compilateur D’optimisation
  42. 42. Architecture de NodeJs  Qu’est-ce que la programmation par callback ?  Les méthodes synchrones?  Les méthodes asynchrones?
  43. 43.  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
  44. 44. <<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
  45. 45. Exemple :
  46. 46.  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é
  47. 47. Exemple :
  48. 48.  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.
  49. 49. Synchrones vs asynchrones
  50. 50.  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 ?
  51. 51.  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
  52. 52. 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
  53. 53. CORDOVA  Définition  Les avantages  Comment cela fonctionne ?  Composants de base  Exemples des plugings  Installation  Construction d’un pluging
  54. 54. 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.
  55. 55. Les avantages de cordova sont nombreux : Cordova est OpenSource (Licence Apache) 1 Cordova est basée sur les standards du Web. 2 Cordova supporte la plupart des plateformes mobiles du marché 3
  56. 56. 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.
  57. 57. 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.
  58. 58. www.themegallery.com
  59. 59. 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
  60. 60. 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
  61. 61. 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
  62. 62.  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
  63. 63. Installation Exécuter la commande : ◦ npm install -g ionic cordova
  64. 64. 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 :
  65. 65. 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
  66. 66.  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
  67. 67. Installation Exécuter la commande : ◦ npm install -g ionic cordova
  68. 68. 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 :
  69. 69. 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 fi chier 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.
  70. 70. 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é natif Le nom de l'action à appeler sur le côté natif. Un tableau d'arguments à passer dans l'environnement natif.
  71. 71. www.themegallery.com  SASS c'est quoi ?  Installation  Les variables  L’héritage  L’imbrication
  72. 72.  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
  73. 73. Installation
  74. 74. o Sass est écrit en Ruby, et distribué via le package manager de Ruby
  75. 75. 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
  76. 76. Exemple 1:
  77. 77. 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.
  78. 78. Exemple 2 :
  79. 79. 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.
  80. 80. Exemple 3 :
  81. 81. www.themegallery.com
  82. 82. 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
  83. 83.  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.
  84. 84.  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 .
  85. 85. Structure d’un projet ionic
  86. 86. 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).
  87. 87. 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.
  88. 88. 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
  89. 89. 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”.
  90. 90. 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.
  91. 91. 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
  92. 92. 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.
  93. 93. Premier outil à installer : NodeJS
  94. 94. Installer Node JS Le chemin de NodeJS devrait être déclaré dans la variable d’environnement Path
  95. 95. 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
  96. 96. Créer une variable d’environnement JAVA_HOME Qui indique le chemin de du kit de développement java
  97. 97. Installation de cordova et ionic : Exécuter la commande : Exécuter la commande :
  98. 98. 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
  99. 99. 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
  100. 100. 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
  101. 101. Structure du projet
  102. 102. • Visualiser l’application en utilisant un serveur local Plateformes et déploiement Ionic 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
  103. 103. Résultat
  104. 104. 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:
  105. 105. 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 :
  106. 106. Construire l’application android : .APK Pour construire l’application on utilise la commande : ionic build android
  107. 107. 1- création de projet
  108. 108. 2- spécifier la Platforme de déploiement
  109. 109. 3-Génère l'application en android
  110. 110. 4- Structure de notre projet

×