Ionik: Angular CapacitorJS & SQLite

Penyepaduan SQLite dalam Aplikasi Kendiri Sudut 18 dan CapacitorJS

Tutorial ini menerangkan cara mengintegrasikan SQLite ke dalam aplikasi Angular 18 yang menggunakan komponen dan Isyarat kendiri. Kami akan menggunakan pemalam @capacitor-community/sqlite untuk mendayakan fungsi SQLite untuk kedua-dua platform Android dan iOS.

---

Prasyarat

Pastikan anda telah memasang yang berikut:

• Node.js dan npm
• KapasitorJS
• Sudut 18 dengan komponen kendiri dan Isyarat

---

Langkah 1: Pasang Pakej Diperlukan

Jalankan arahan berikut untuk memasang kebergantungan yang diperlukan:

npm install @capacitor-community/sqlite
npx cap sync

Arahan ini memasang pemalam SQLite dan menyegerakkan perubahan dengan platform asli.

---

Langkah 2: Buat Perkhidmatan Pangkalan Data

Logik pangkalan data akan dirangkumkan dalam perkhidmatan untuk kebolehselenggaraan yang lebih baik.

// 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;
    }
  }
}

---

Langkah 3: Mulakan Perkhidmatan Pangkalan Data dalam Komponen Root

Dalam komponen akar aplikasi anda, mulakan Perkhidmatan Pangkalan Data.

// 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();
  }
}

---

Langkah 4: Gunakan Perkhidmatan Pangkalan Data dalam Komponen

Kini anda boleh menggunakan Perkhidmatan Pangkalan Data dalam mana-mana komponen untuk melaksanakan operasi 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();
  }
}

---

Nota

• Ketekalan Sambungan: Pastikan anda menyemak ketekalan sambungan menggunakan checkConnectionsConsistency() untuk mengelakkan ralat sambungan pendua.
• Singleton Service: Gunakan Angular's @Injectable dengan providedIn: 'root' untuk memastikan DatabaseService ialah singleton.
• Ujian pada Kedua-dua Platform: Sentiasa uji pelaksanaan anda pada kedua-dua peranti Android dan iOS.

---

Kesimpulan

Dengan langkah ini, anda telah berjaya menyepadukan SQLite ke dalam aplikasi kendiri Angular 18 anda dengan CapacitorJS. Pelaksanaan ini memastikan ketekalan sambungan dan merangkum operasi pangkalan data dalam perkhidmatan boleh guna semula.

Atas ialah kandungan terperinci Ionik: Angular CapacitorJS & SQLite. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!