TP : Gestion d'une Liste de Tâches avec SQLite et Ionic
Objectifs :
1. Comprendre comment intégrer SQLite dans une application Ionic/Angular.
2. Savoir effectuer des opérations CRUD (Create, Read, Update, Delete) sur une base
de données locale.
3. Apprendre à utiliser un plugin Cordova/Capacitor pour SQLite.
1. Création du Projet Ionic
a. Installer Ionic :
npm install -g @ionic/cli
b. Créer un nouveau projet :
ionic start GestionTaches blank --type=angular
cd GestionTaches
c. Lancer le projet pour vérifier :
ionic serve
2. Installation du Plugin SQLite
d. Installer le plugin Capacitor SQLite :
npm install @capacitor-community/sqlite
e. Ajouter Capacitor et initialiser la plateforme :
ionic cap add android
ionic cap add ios
f. Synchroniser Capacitor :
ionic cap sync
3. Configuration SQLite
g. Créer un service Angular pour gérer SQLite :
ionic g service services/sqlite
h. Dans le fichier [Link], ajouter la gestion de la base de données :
import { Injectable } from '@angular/core';
import { CapacitorSQLite, SQLiteDBConnection } from '@capacitor-
community/sqlite';
@Injectable({
providedIn: 'root',
})
export class SqliteService {
private db: SQLiteDBConnection | null = null;
constructor() {}
async initializeDatabase() {
try {
const dbName = '[Link]';
const connection = await
[Link]({
database: dbName,
version: 1,
readonly: false,
});
if (connection) {
[Link] = connection;
await [Link]();
await [Link]();
} else {
[Link]('Impossible de créer la connexion à la
base de données.');
}
} catch (error) {
[Link]('Erreur lors de l’initialisation de la base
de données :', error);
}
}
private async createTable() {
const query = `
CREATE TABLE IF NOT EXISTS taches (
id INTEGER PRIMARY KEY AUTOINCREMENT,
nom TEXT NOT NULL,
termine INTEGER DEFAULT 0
);
`;
await [Link]?.execute(query);
}
async addTache(nom: string) {
const query = 'INSERT INTO taches (nom) VALUES (?);';
await [Link]?.run(query, [nom]);
}
async getTaches() {
const query = 'SELECT * FROM taches;';
const result = await [Link]?.query(query);
return result?.values || [];
}
async deleteTache(id: number) {
const query = 'DELETE FROM taches WHERE id = ?;';
await [Link]?.run(query, [id]);
}
}
4. Création de l'Interface Utilisateur
a. Modifier le fichier [Link] pour inclure une liste de tâches et un formulaire :
<ion-header>
<ion-toolbar>
<ion-title>Liste de Tâches</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let tache of taches">
<ion-label>{{ [Link] }}</ion-label>
<ion-button color="danger"
(click)="supprimerTache([Link])">Supprimer</ion-button>
</ion-item>
</ion-list>
<ion-item>
<ion-input placeholder="Nouvelle tâche"
[(ngModel)]="nouvelleTache"></ion-input>
<ion-button (click)="ajouterTache()">Ajouter</ion-button>
</ion-item>
</ion-content>
b. Modifier le fichier [Link] pour connecter l'interface au service SQLite :
import { Component } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms'; // Pour utiliser
ngModel
import { CommonModule } from '@angular/common'; // Pour les
directives Angular de base
@Component({
selector: 'app-home',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
standalone: true,
imports: [IonicModule, FormsModule, CommonModule],
})
export class HomePage {
taches: any[] = [];
nouvelleTache: string = '';
ajouterTache() {
if ([Link]()) {
[Link]({ nom: [Link] });
[Link] = '';
}
}
supprimerTache(index: number) {
[Link](index, 1);
}
}
c.
5. Test de l'Application
a. Exécuter l'application :
ionic serve
b. Tester sur un appareil physique ou un émulateur :
ionic cap run android
7. Amélioration
Proposer une version améliorée du projet. Voici, à titre d’exemple quelques pistes
d’amélioration :
• Ajouter date/ heure de la tâche
• Ajouter une option pour marquer une tâche comme terminée.
• Rechercher une tâche
• Trier les tâches par ordre alphabétique.
• ……
