Comment créer une application mobile avec ionic 4
Ionic est un Framework de création d’application hybride multi-plateformes (Android, IOS, Windows etc.). Elle se base sur développement Angular pour la création de ces composants.
Le but de cet article est de vous apprendre à créer une application mobile en utilisant le Framework Ionic V4.
#1: Comment installer Ionic 4 ?
Pour installer Ionic 4 vous devez d’abord installer Nodes Js sur votre ordinateur, disponible sur le site web officiel de NodeJS.
Node JS servira de gestionnaire de dépendance pour les différents composant de notre projet. Après avoir installé Node js, nous allons maintenant installer Ionic grâce à la commande ci-dessous
$ install -g ionic
#2: Démarrer un projet
Rien de plus simple que de créer une application mobile sur Ionic. Il suffit d’être bien sûr d’avoir installé Node JS sur votre ordinateur puis d’exécuter la commande ci-dessous dans votre terminal :
$ ionic start myApp blank
L’or de la création de votre application sur Ionic, vous devez sélectionner un template prédéfinir que Ionic propose pour créer le projet. C’est aussi le cas dans la création des applications mobiles avec Android studio. Sur Ionic nous avons trois types de Template qui peuvent-être définir l’or de la création d’une application nous avons :
- Blank, d’où la commande $ ionic start myApp blank qui nous permet de créer notre projet avec une page complètement blanche;
- Tabs , avec pour commande $ ionic start myApp tabs: Qui nous permet de créer notre projet avec des pages présentant cette disposition de contenu;
- sidemenu, avec pour commande $ ionic start myApp sidemenu : Qui nous permet de créer notre projet avec des pages présentant cette disposition de contenu.
L’image ci-dessous permet d’illustrer les différents template que vous propose Ionic l’or de la création de votre projet.
Après avoir créé votre projet il vous suffira tout l’simplement de l’exécuter grâce à la commande suivante :
$ ionic serve
Au cas où vous souhaitez avoir les aperçus de votre application sur les différentes plateforme mobiles pour lesquelles vous pouvez générer votre application Ionic, vous devez ajouter à votre commande le paramètre suivant –lab
$ ionic serve --lab
#3: Exemple d’application
Maintenant nous allons créer une application mobile pour mieux comprendre la création d’application mobile avec Ionic. Dans le carde de cet exemple, nous allons créer un projet nommé “myNote” pour cela nous allons créer le projet via la commande suivante :
$ ionic start myNote blank
Après avoir exécuter cette commande Node JS se chargera d’installer les dépendances du projet comme le présente l’image ci-dessous :
Après avoir télécharger toutes les dépendances de votre nous allons donc l’exécuter grâce à la commande suivante :
cd myNote $ ionic serve --lab
Arborescence du projet que nous avons créé est architecture comme le présente l’image ci dessous :
Nous avons une page home qui a été généré dans le répertoire src/app. Elle est l’unique page que compote l’application, dans ce répertoire nous avons 5 fichiers:
- home.module.ts qui est une classe qui regroupe les éléments que peuvent contenir une page, un composant, directive, pipe etc., sa structure de base est présente comme suit :
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HomePage } from './home.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
])
],
declarations: [HomePage]
})
export class HomePageModule {}
- home.page.html qui est le fichier qui contiendra les différentes balises qui vont nous permettre de créer nos vues. Elle admet plusieurs types de balises parmi lesquelles les balises ionic, html, Angular etc … sa structure de base est présente comme suit :
<ion-header>
<ion-toolbar color="primary">
<ion-title>
My book
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div padding="" text-center="">
<div>
<ion-icon ios="ios-book" md="md-book"></ion-icon></div>
<div>
<ion-label>Mon application mobile</ion-label></div>
</div>
</ion-content>
- home.page.scss qui contient les différentes déclarations de mise en forme de notre page html sa structure est présenté comme suit :
ion-content{
ion-icon{
margin-top: 40%;
font-size: 120px;
}
}
- home.page.spec.ts qui est un fichier qui a été ajouté à Ionic 4 pour gérer les tests unitaires de nos composants. En fonction des éléments constitutifs de notre projet sa structure de base est présenté comme suit :
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HomePage } from './home.page';
describe('FormModal', () => {
let component: HomePage;
let fixture: ComponentFixture<HomePage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomePage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
- home.page.ts qui permet de traiter directement tous les évènements qui sont liés à notre page html. Sa structure de base est présenté comme suit :
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {}
}
Dans ce répertoire src/app nous avons aussi les fichiers tel que :
- app.module.ts : Ce fichier contient les différentes déclarations des différents modules qui dépendent de notre application mobile
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {RouteReuseStrategy} from '@angular/router';
import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {StatusBar} from '@ionic-native/status-bar/ngx';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule,
IonicModule.forRoot(),
AppRoutingModule ],
providers: [
StatusBar,
SplashScreen,
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
],
bootstrap: [AppComponent]
})
export class AppModule {
}
- app-routing.module.ts : Ce fichier contient toutes les déclarations des différentes routes qui nous permettrons d’accéder au différentes pages de notre application
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{path: '', loadChildren: './home/home.module#HomePageModule'},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Dans le répertoire src/assets nous avons les différents fichiers supplémentaires que nous utiliserons pour la réalisation de notre projet. Ces fichiers peuvent être desimages, vidéos, js etc.
Dans le fichier src/global.scss nous avons toutes les déclarations de styles globales qui permettra d’impacter sur tous les composants indexés dans le projet
Dans le fichier src/theme/variables.scss nous avons les déclarations des variables scss qui serons exploités dans les différents fichiers scss de notre projet
Le fichier src/index.html est le fichier principal qui est lancé lorsque notre application Android démarrera.
Créer une application mobile en utilisant Ionic 4 vous offres plusieurs avantages parmi lesquels nous avons:
- Le gain en temps dans la réalisation de notre applications;
- Le temps de réponse de Evénements de votre applications qui est plus élevé que dans les versions précédente de Ionic.
Au terme de cet article, il était question pour nous de créer une application mobile en utilisant ionic 4. Cette technologie est simple et vous offre un développement multi plateforme.
