Ionique : condensateur angulaireJS et SQLite

Intégration SQLite dans une application autonome Angular 18 et CapacitorJS

Ce tutoriel explique comment intégrer SQLite dans une application Angular 18 qui utilise des composants et des signaux autonomes. Nous utiliserons le plugin @capacitor-community/sqlite pour activer la fonctionnalité SQLite pour les plates-formes Android et iOS.

---

Conditions préalables

Assurez-vous que les éléments suivants sont installés :

• Node.js et npm
• CondensateurJS
• Angular 18 avec composants et signaux autonomes

---

Étape 1 : Installer les packages requis

Exécutez les commandes suivantes pour installer les dépendances nécessaires :

npm install @capacitor-community/sqlite
npx cap sync

Ces commandes installent le plugin SQLite et synchronisent les modifications avec les plateformes natives.

---

Étape 2 : Créer un service de base de données

La logique de la base de données sera encapsulée dans un service pour une meilleure maintenabilité.

// src/app/services/database.service.ts
import { Injectable } from '@angular/core';
import { CapacitorSQLite, SQLiteConnection, SQLiteDBConnection } from '@capacitor-community/sqlite';

@Injectable({
  providedIn: 'root',
})
export class DatabaseService {
  private sqlite: SQLiteConnection;
  private db: SQLiteDBConnection | null = null;

  constructor() {
    this.sqlite = new SQLiteConnection(CapacitorSQLite);
  }

  async initializeDatabase(): Promise<void> {
    try {
      // Check connection consistency
      const retCC = (await this.sqlite.checkConnectionsConsistency()).result;

      // Check is connected
      const isConnection = (await this.sqlite.isConnection('appDB', false)).result;

      if (!isConnection && !retCC) {
        // Create a new connection
        this.db = await this.sqlite.createConnection('appDB', false, 'no-encryption', 1, false);
        await this.db.open();
        await this.createTables();
      } else {
        // Retrieve existing connection
        this.db = await this.sqlite.retrieveConnection('appDB', false);
        await this.db.open();
      }
    } catch (error) {
      console.error('Error initializing the database:', error);
    }
  }

  private async createTables(): Promise<void> {
    if (!this.db) throw new Error('Database connection is not open');
    const createTableQuery = `
      CREATE TABLE IF NOT EXISTS users (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        name TEXT NOT NULL,
        age INTEGER NOT NULL
      );
    `;
    await this.db.execute(createTableQuery);
  }

  async addUser(name: string, age: number): Promise<void> {
    if (!this.db) throw new Error('Database connection is not open');
    const insertQuery = `INSERT INTO users (name, age) VALUES (?, ?);`;
    await this.db.run(insertQuery, [name, age]);
  }

  async getUsers(): Promise<any[]> {
    if (!this.db) throw new Error('Database connection is not open');
    const result = await this.db.query('SELECT * FROM users;');
    return result.values || [];
  }

  async closeDatabase(): Promise<void> {
    if (this.db) {
      await this.sqlite.closeConnection('appDB');
      this.db = null;
    }
  }
}

---

Étape 3 : initialiser le service de base de données dans le composant racine

Dans le composant racine de votre application, initialisez le DatabaseService.

// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { DatabaseService } from './services/database.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnDestroy, AfterViewInit {
  constructor(private databaseService: DatabaseService) {}

  // Important: Initialize the database connection when the component is created  
  async ngAfterViewInit() {
    await this.databaseService.initializeDatabase();
  }

  // Important: Close the database connection when the component is destroyed
  async ngOnDestroy() {
    await this.databaseService.closeDatabase();
  }
}

---

Étape 4 : utiliser le service de base de données dans un composant

Vous pouvez désormais utiliser DatabaseService dans n'importe quel composant pour effectuer des opérations CRUD.

// src/app/components/user-list/user-list.component.ts
import { Component, OnInit } from '@angular/core';
import { DatabaseService } from '../../services/database.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private databaseService: DatabaseService) {}

  async ngOnInit() {
    await this.databaseService.addUser('Max Mustermann', 25);
    await this.databaseService.addUser('Erika Musterfrau', 30);
    this.users = await this.databaseService.getUsers();
  }
}

---

Remarques

• Cohérence de la connexion : assurez-vous de vérifier la cohérence de la connexion à l'aide de checkConnectionsConsistency() pour éviter les erreurs de connexion en double.
• Service Singleton : utilisez @Injectable d'Angular avec provideIn: 'root' pour vous assurer que DatabaseService est un singleton.
• Test sur les deux plates-formes : testez toujours votre implémentation sur les appareils Android et iOS.

---

Conclusion

Avec ces étapes, vous avez intégré avec succès SQLite dans votre application autonome Angular 18 avec CapacitorJS. Cette implémentation garantit la cohérence de la connexion et encapsule les opérations de base de données dans un service réutilisable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!