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