Table des matières

Développement d'application Ionic

Présentation

Ionic est un framework front-end qui va vous permettre de créer des applications mobiles hybrides rapidement et aisément, Ionic se base sur d’autres frameworks et technologies web tels que :

AngularJs, pour la partie application web

Cordova pour la partie application mobile

Grace à celui-ci vous pourrez donc déployer votre application sur plusieurs environnements tel que iOS & Android.

Prérequis

installer Node JS

Créer une application

Tout d’abord il vous faut installer Ionic de manière globale avec l’outil avec le gestionnaire de package NPM, il suffit d’exécuter cette commande en ligne de commande :

npm install -g ionic cordova

Ensuite on va pouvoir créer notre premier projet avec une barre de menu sur le côté :

ionic start nomProjet typeProjet

où typeProjet peut être blank | tabs | sidemenu , et d'autres possibilités sont disponibles.

On peut maintenant tester notre application sur le navigateur web avec la commande

ionic serve

Cette commande va lancer un serveur http qui va être à l'écoute des modifications dans le projet et va recompiler le langage typescript. Le serveur écoute alors en local sur le port 8100.

http://localhost:8100

Pour visualiser le résultat dans le navigateur et simuler téléphone mobile , sous Firefox , menu : développement web | vue adaptative (F12 sous Chrome)

Création d'une nouvelle page

ionic generate page

Résultat  → création dossier dans pages avec 4 fichiers

Ajouter la page dans app.modules.ts

Bloc Import + ngModule

import { ExemplePage } from '../pages/exemple/exemple';

@NgModule({ declarations: [ MyApp, HomePage, ListPage, ExemplePage ],

entryComponents: [ MyApp, HomePage, ListPage, ExemplePage ],

Ajouter le lien dans le menu

Ajout/modifications des lignes ci-dessous dans app.component.ts

import { ExemplePage } from '../pages/exemple/exemple';

this.pages = [ { title: 'Home', component: HomePage }, { title: 'List', component: ListPage }, { title: 'Exemple', component: ExemplePage} ];

Générer le provider

Avec l'invite de commande :

ionic generate provider

Nom du provider : exemples (par convention, mettre les noms des providers au pluriel)

Résultat → création d'un dossier providers, un sous dossier et un fichier au nom du provider créé.

Modification automatique du fichier app.modules.ts pour intégrer le provider dans l'application ( vérifier ).