ionic, angularjs,cordova,nodejs,sass

LOGO

Développement Mobile Hybride

IONIC

Réalisé par : Baich Marwa

Encadré par : Mr.Benlahmar

Master SII

Plan1

Introduction General

AngularJS1

Comment ionic fonctionne

NodeJS3

Cordova2

Sass4

2

Première application IONIC

3

4

IONIC exploite plusieurs technologies :

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.

Développement mobile natif

Développement mobile Web

Développement mobile hybride

Développement Mobile

Trois manières pour développer des applications mobiles :

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

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

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

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


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


• 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

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)


Appceleraor

Titanium (gratuit)

Win Dév mobile

(payant) IBM

WorklightAdobe

Phone Gap

Plateforme de développement mobile hybride

IONIC (GRATUIT, OPENSOURCE)

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.

IntroductionApplications SPAConcepts et fonctionnalités de NG

Directives & Liaison de données Filtres Vues, Contrôleurs, Scope Modules, Routes, Services

Applications SPA

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


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

Concepts et fonctionnalités de NG

Télécharger AngularJS.

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

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

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" >



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

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

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

<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

<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>

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

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;});

<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

Routes - Structure ?

Module

Config

Route

View $scope Controller

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 :

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

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 »

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

Node.js

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 ?

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

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é

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

Commet V8 compile le code JS ?

V8 a deux compilateurs !

Un compilateur complet <<Full>> Un compilateur D’optimisation

Architecture de NodeJs

Qu’est-ce que la programmation par callback ?

Les méthodes synchrones?

Les méthodes asynchrones?

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

<<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

Exemple :

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é

Exemple :

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.

Synchrones vs asynchrones

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 ?

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

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

CORDOVA

Définition Les avantages Comment cela fonctionne ? Composants de base Exemples des plugings Installation Construction d’un pluging

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.

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

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.


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.

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

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

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

Installation Exécuter la commande :

◦ npm install -g ionic cordova

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 :

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

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

Installation Exécuter la commande :

◦ npm install -g ionic cordova

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 :

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.

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.


SASS c'est quoi ? Installation Les variables L’héritage L’imbrication

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

Installation

o Sass est écrit en Ruby, et distribué via le package manager de Ruby

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

Exemple 1:

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.

Exemple 2 :

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.

Exemple 3 :

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

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.

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 .

Structure d’un projet ionic

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).

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.


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

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”.

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.


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

https://creator.ionic.io/





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.

Premier outil à installer : NodeJS

Installer Node JS

Le chemin de NodeJS devrait être déclaré dans la variable d’environnement Path

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

Créer une variable d’environnement JAVA_HOME Qui indique le chemin de du kit de développement java

Installation de cordova et ionic :

Exécuter la commande :

Exécuter la commande :


Le premier et le plus basique est la création d’une application vide. Pour cela, tapez la commande suivante dans le terminal:

Blank


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

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 :


Tabs

Structure du projet

• 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

Résultat

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:

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 :

Construire l’application android : .APK

Pour construire l’application on utilise la commande :ionic build android

1- création de projet

2- spécifier la Platforme de déploiement

3-Génère l'application en android

4- Structure de notre projet

ionic, angularjs,cordova,nodejs,sass

Technology