IONIC 7 ANGULAR

FIREBASE-CRUD
MODULE:Technologie connexe de développement mobile
Mamadou Lamine Coly INE :
N00465920201
Tamsir Fode Mbaye INE :
N02558820201
Abdoulaye Diallo INE :
N06092520201
Cheikh Tidiane Gueye INE :
N06836820201
Maguette Faye Diallo INE :
N03203320202
 Projet sur les opérations Ionic Angular Crud. Un didacticiel complet étape par
étape sur la création d'une application mobile d'opération Ionic Angular CRUD à
l'aide de Firebase. Dans ce didacticiel Ionic Firebase Angular, nous apprendrons
comment créer une application CRUD (Créer, Lire, Mettre à jour, Supprimer).
 Dans cette application mobile CRUD pour rendez-vous chez le médecin, nous
apprendrons comment stocker les données d'application dans la base de
données NoSQL en temps réel Firebase.
 Firebase est une base de données NoSQL en temps réel basée sur le modèle
orienté document et aide à créer des applications mobiles et Web de premier
ordre.
 Firebase stocke et synchronise les données des applications Web et mobiles de
manière assez fluide.
Comment créer l'application Ionic 7
Firebase CRUD avec Angular
Nous allons créer une application de rendez-vous chez le médecin
permettant aux utilisateurs de prendre rendez-vous. L'utilisateur pourra voir
tous les rendez-vous, mettre à jour et supprimer les rendez-vous sous un
même toit.
Nous aurons besoin des packages, Framework et outils suivants pour
commencer:
 Nœud
 Ionique
 Angulaire
 Éditeur de texte
 Compte Firebase
 Bibliothèque NPM Firebase
 Outil ou terminal de ligne de commande
Tableau des matières

1. 1.Générer un projet ionique

2. Configurer Firebase dans Ionic et Angular
3. Configuration d'itinéraires
4. Créer une opération CRUD avec AngularFire
5. Ajout d'un élément dans la base de données Firebase
6. Supprimer un élément de la liste des données
7. Modifier l'élément dans Ionic
8. Conclusion
Générer un projet ionique
 Choisir un répertoire(cd nom du dossier) avant d’exécutez la
commande suivante dans le cmd pour générer une toute nouvelle
application Ionic/Angular :
ionic start ionic-firebase-crud blank --type=angular

 Choisir Ngmodules
 Ensuite pour entrer dans le projet taper la commande:
Pour notre projet la commande sera : cd ionic-firebase-
crud
 Exécutez la commande ci-dessous pour ajouter le
package principal natif:
npm install @ionic-native/core --legacy-peer-deps
Pour ouvrir le projet dans votre vs code entrer: code .
(Code espace point)
Générer un projet ionique

 Pour éviter les problèmes de compilation de TypeScript, il suffit d'ouvrir le

fichier tsconfig.json :
 d’abord, définissez la propriété ci-dessous sous la
propriété « compilerOptions » .
"compilerOptions": {
"strictPropertyInitialization": false,
"skipLibCheck": true
...
}
Générer un projet ionique

 Deuxièmement, ajoutez les accessoires donnés

sous « angularCompilerOptions » .
"angularCompilerOptions": {
"strictTemplates": false,
...
}
Configurer Firebase dans
Ionic et Angular

 Afin de faire fonctionner Firebase dans notre application Ionic, nous devons
disposer d'une clé de configuration Firebase.
 Pour obtenir les clés de configuration, accédez à console.firebase.google.com ,
créez un compte et obtenez les clés de configuration Firebase.
Cliquer sur ce lien pour pouvoir associer votre application ionic à firebase
Installer le module Firebase dans Ionic
Angular
 Installer le module Firebase dans Ionic Angular
Pour installez le module Firebase dans le projet Ionic Angular. Exécutez la
commande suivante dans le terminal.
npm install @angular/fire [email protected] --legacy-peer-deps
 Insérer les clés de configuration Firebase dans Ionic Angular
Insérez les clés de configuration Firebase dans le fichier (environnement de
production) Environment.ts .
Installer le module Firebase dans Ionic Angular
Installer le module Firebase dans Ionic
Angular
Importer et enregistrer les services Firebase dans Ionic

 Nous allons maintenant importer et enregistrer les services Firebase

et l'objet d'environnement dans le fichier app.module.ts .

 Dans ce didacticiel, nous avons uniquement besoin

que AngularFireDatabaseModule soit importé et enregistré dans
la classe AppModule.
 Installer le module Firebase dans Ionic
Angular
Importer et enregistrer les services Firebase dans Ionic
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// Firebase
import { AngularFireModule } from '@angular/fire/compat';import { AngularFireAuthModule } from
'@angular/fire/compat/auth';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';import { AngularFirestoreModule } from
'@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';import { environment } from
'../environments/environment';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
AngularFirestoreModule,
AngularFireStorageModule,
AngularFireDatabaseModule,
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}
Configuration d'itinéraires

 Afin de naviguer dans notre application Ionic Firebase, nous devons

configurer des itinéraires. Exécutez les commandes suivantes pour
créer des pages dans Ionic.
ng generate page make-appointment
ng generate page edit-appointment
Pour afficher la liste des rendez-vous nous utiliserons la page d'accueil,
la make-appointmentpage sera utilisée pour prendre les rendez-vous.
Dans la edit-appointmentpage, nous modifierons les rendez-vous.
Ouvrez le app/app-routing.module.ts fichier et ajoutez le code
suivant pour configurer les itinéraires dans l'application.
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [

{
path: 'home',
loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'make-appointment',
loadChildren: () => import('./make-appointment/make-appointment.module').then( m =>
m.MakeAppointmentPageModule)
},
{
path: 'edit-appointment/:id',
loadChildren: () => import('./edit-appointment/edit-appointment.module').then( m =>
m.EditAppointmentPageModule)
},
];

@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
Configuration d'itinéraires
 Ensuite, ouvrez le app.component.html fichier et ajouter les ion-router-
outlet onglets inferieur ionic pour activer les elements de navigation.

 La balise routerLinkActive="" annonce la classe active sur l'élément de

navigation sélectionné dans Ionic/Angular.

 La balise routerLink ="" facilite la navigation d'une page à une autre

page dans Ionic/Angular.
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>

<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button routerLinkActive="tab-selected" routerLink="/home" class="ios" tab="home">
<ion-icon name="list-box"></ion-icon>
<ion-label>Appointments</ion-label>
</ion-tab-button>

<ion-tab-button routerLinkActive="tab-selected" routerLink="/make-appointment" class="ios"

tab="make-appointment">
<ion-icon name="add-circle"></ion-icon>
<ion-label>Book Appointment</ion-label>
</ion-tab-button>
</ion-tab-bar>
 Créer une opération CRUD avec

AngularFire
Ensuite, créez le dossier shared/ , créez le fichier Appointment.ts , ajoutez également le code
donné dans le fichier.
export class Appointment {
$key: string;
name: string;
email: string
mobile: number;
}

Executer la commande pour creer shared/appointment un fichier à l’interieur.

ng generate service shared/appointment

Ensuite, incluez le code suivant dans shared/appointment.service.ts :

import { Injectable } from '@angular/core';
import { Appointment } from '../shared/Appointment';
import {
AngularFireDatabase,
AngularFireList,
AngularFireObject,
} from '@angular/fire/compat/database';

@Injectable({
providedIn: 'root',
})

export class AppointmentService {

bookingListRef: AngularFireList<any>;
bookingRef: AngularFireObject<any>;

constructor(private db: AngularFireDatabase) { }

// Create
createBooking(apt: Appointment) {
return this.bookingListRef.push({
name: apt.name,
email: apt.email,
mobile: apt.mobile,
});
}

// Get Single
getBooking(id: string) {
this.bookingRef = this.db.object('/appointment/' + id);
return this.bookingRef;
}
// Update
updateBooking(id: any, apt: Appointment) {
return this.bookingRef.update({
name: apt.name,
email: apt.email,
mobile: apt.mobile,
});
}

// Delete
deleteBooking(id: string) {
this.bookingRef = this.db.object('/appointment/' + id);
this.bookingRef.remove();
}
}
 Ajout d'un élément dans la base de
données Firebase
 Nous allons vous montrer comment ajouter des éléments à la base de données Firebase Realtime,
mais pour travailler, obtenez d'abord les informations utilisateur dont nous avons besoin pour créer
un formulaire. Pour travailler avec des formulaires, vous devez importer et
enregistrer ReactiveFormsModule dans le fichier make-appointment.module.ts .
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule, FormsModule,
]
})
export class MakeAppointmentPageModule { }
 Ajout d'un élément dans la base de
données Firebase
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder } from '@angular/forms';
import { AppointmentService } from './../shared/appointment.service';
@Component({
selector: 'app-make-appointment',
templateUrl: './make-appointment.page.html',
styleUrls: ['./make-appointment.page.scss'],
})
export class MakeAppointmentPage implements OnInit {
bookingForm: FormGroup;
ngOnInit() {
this.bookingForm = this.fb.group({
name: [''],
email: [''],
mobile: [''],
});
}

formSubmit() {
if (!this.bookingForm.valid) {
return false;
} else {
return this.aptService
.createBooking(this.bookingForm.value)
.then((res) => {
console.log(res);
this.bookingForm.reset();
this.router.navigate(['/home']);
})
.catch((error) => console.log(error));
}
}
}
Ajout d'un élément dans la base
de données Firebase
 Pour configurer le formulaire, importez d’abord les services
FormGroup et FormBuilder Reactive Forms dans Ionic. Définissez une
variable avec FormGroup, injectez le FormBuilder dans le
constructeur et créez un FormControl à l'intérieur du
this.bookingForm à l'aide de l'objet FormBuilder.

 Ensuite, classe AppointmentService , injectez à l’intérieur du

constructeur. Soumettez les valeurs du formulaire en accédant à
l'API AppointmentService CRUD et redirigez l'utilisateur vers la page
de liste de rendez-vous à l'aide du service Angular Router.

 Ensuite, utilisez la directive *ngFor pour créer le formulaire de

rendez-vous à l'aide des composants Ionic UI. Ouvrez make-
<ion-header>
<ion-toolbar class="ios hydrated">
<ion-title class="ios title-ios
hydrated">Booking</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list lines="full">
<form [formGroup]="bookingForm"
(ngSubmit)="formSubmit()">
<ion-item>
<ion-label position="floating">Name</ion-
label>
<ion-input formControlName="name"
type="text" required></ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">Email</ion-
label>
<ion-input formControlName="email"
type="text" required>
<ion-item>
<ion-label
position="floating">Mobile</ion-label>
<ion-input
formControlName="mobile" type="text"
required>
</ion-input>
</ion-item>

<ion-row>
<ion-col>
<ion-button type="submit"
color="primary" shape="full"
expand="block">Book Appointment</ion-
button>
</ion-col>
</ion-row>
</form>
</ion-list>
</ion-content>
Supprimer un élément de la
liste des données
 Pour afficher la liste, importez AppointmentService puis injectez dans
le constructeur.

 Obtenez la liste de rendez-vous via la fonction getBookingList() .

 Pour supprimer l'élément de la base de données, nous utilisons la

méthode deleteBooking(id) et transmettons l'identifiant ou la clé de
l'élément.

 Ouvrez home.page.ts le fichier et ajoutez le code suivant.

import { Component, OnInit } from '@angular/core';
import { Appointment } from '../shared/Appointment';
import { AppointmentService } from './../shared/appointment.service';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
Bookings: any = [];

constructor(private aptService: AppointmentService) {}

ngOnInit() {
this.fetchBookings();
let bookingRes = this.aptService.getBookingList();
bookingRes.snapshotChanges().subscribe((res) => {
this.Bookings = [];
res.forEach((item) => {
let a: any = item.payload.toJSON();
a['$key'] = item.key;
this.Bookings.push(a as Appointment);
});
});
}
fetchBookings() {
this.aptService
.getBookingList()
.valueChanges()
.subscribe((res) => {
console.log(res);
});
}
deleteBooking(id: any) {
console.log(id);
if (window.confirm('Do you really want to delete?')) {
this.aptService.deleteBooking(id);}
}
}
 Pour afficher les éléments, ouvrez le fichier home.page.html et insérez-y le code suivant.
<ion-header>
<ion-toolbar>
<ion-title>
Doctors App
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list class="ios list-ios hydrated">
<ion-list-header class="ios hydrated">
Appointments
</ion-list-header>
<on-item *ngFor="let booking of Bookings" class="user-list">
<ion-label>
<h5> <ion-icon name="person"></ion-icon> {{booking.name}}</h5>
<p><ion-icon name="call"></ion-icon> {{booking.mobile}}</p>
</ion-label>
<div class="item-note" item-end>
<button ion-button clear [routerLink]="['/edit-appointment/', booking.$key]">
<ion-icon name="create" style="zoom:2.0"></ion-icon>
</button>
<button ion-button clear (click)="deleteBooking(booking.$key)" <ion-icon
name="trash" style="zoom:2.0"></ion-icon>
</button>
</div>
</ion-item>
</ion-list>
Supprimer un élément de la
liste des données
 Modifier l'élément dans Ionic
 Pour modifier l’élément, importez AppointmentService, puis injectez-le dans la classe
constructeur. Importez le ReactiveFormsModule dans edit-appointment.module.ts le fichier.
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule, FormsModule,
]
})
export class MakeAppointmentPageModule { }

 Ensuite, insérez le code suivant dans edit-appointment.page.ts le fichier.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import { FormGroup, FormBuilder } from "@angular/forms";
import { AppointmentService } from './../shared/appointment.service';

@Component({
selector: 'app-edit-appointment',
templateUrl: './edit-appointment.page.html',
styleUrls: ['./edit-appointment.page.scss'],
})

export class EditAppointmentPage implements OnInit {

updateBookingForm: FormGroup;
id: any;
constructor(
private aptService: AppointmentService,
private actRoute: ActivatedRoute,
private router: Router,
public fb: FormBuilder
){
this.id = this.actRoute.snapshot.paramMap.get('id');
this.aptService.getBooking(this.id).valueChanges().subscribe(res => {
this.updateBookingForm.setValue(res);
});
}
ngOnInit() {
this.updateBookingForm = this.fb.group({
name: [''],
email: [''],
mobile: ['']
})
console.log(this.updateBookingForm.value)
}
updateForm() {
this.aptService.updateBooking(this.id, this.updateBookingForm.value)
.then(() => {
this.router.navigate(['/home']);
}) .catch(error => console.log(error));
}}
 Pour afficher le formulaire d'édition, ajoutez le code HTML Ionic suivant dans edit-
appointment.page.htmlle fichier.
<ion-header>
<ion-toolbar>
<ion-title> Edit Appointmen> </ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list lines="full">
<form [formGroup]="updateBookingForm" (ngSubmit)="updateForm()">
<ion-item>
<ion-label position="floating">Name</ion-label>
<ion-input formControlName="name" type="text" required></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Email</ion-label>
<ion-input formControlName="email" type="text" required>
</ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Mobile</ion-label>
<ion-input formControlName="mobile" type="text" required>
</ion-input>
</ion-item>
<ion-row>
<ion-col>
<ion-button type="submit" color="primary" shape="full" expand="block">Update Appointment</ion-
button>
</ion-col>
</ion-row>
</form>
</ion-list>
Modifier l'élément dans Ionic

 Pour démarrer l'application, vous pouvez essayer les commandes

suivantes :
Exécutez la commande suivante pour installer le mode laboratoire.
npm i @ionic/lab --legacy-peer-deps
 Démarrez le projet Ionic Firebase CRUD.
ionic serve -l
Conclusion

Nous avons terminé le projet Ionic Firebase dans lequel nous avons
appris à créer une application mobile CRUD avec Angular.

Dans ce projet, nous nous sommes concentrés sur la façon de définir

Firebase dans Ionic et Angular, ainsi que sur la façon de définir les
opérations CRUD dans le service Angular .

Enfin, nous avons également vérifié comment utiliser les API REST
Firebase pour effectuer une opération CRUD.