Ionic: Angular CapacitorJS および SQLite-jsチュートリアル-php.cn

Ionic: Angular CapacitorJS および SQLite

Patricia Arquette

リリース： 2024-11-26 01:03:10

オリジナル

625 人が閲覧しました

Ionic: Angular CapacitorJS & SQLite

Angular 18 スタンドアロンアプリケーションと CapacitorJS での SQLite の統合

このチュートリアルでは、スタンドアロンコンポーネントとシグナルを使用する Angular 18 アプリケーションに SQLite を統合する方法について説明します。 @capacitor-community/sqlite プラグインを使用して、Android と iOS の両方のプラットフォームで SQLite 機能を有効にします。

前提条件

以下がインストールされていることを確認してください:

Node.js と npm
CapacitorJS
スタンドアロンコンポーネントとシグナルを備えた Angular 18

ステップ 1: 必要なパッケージをインストールする

次のコマンドを実行して、必要な依存関係をインストールします。

npm install @capacitor-community/sqlite
npx cap sync

ログイン後にコピー

これらのコマンドは SQLite プラグインをインストールし、変更をネイティブプラットフォームと同期します。

ステップ 2: データベースサービスを作成する

データベースロジックは、保守性を高めるためにサービスにカプセル化されます。

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

ログイン後にコピー

ステップ 3: ルートコンポーネントでデータベースサービスを初期化する

アプリケーションのルートコンポーネントで、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();
  }
}

ログイン後にコピー

ステップ 4: コンポーネントでデータベースサービスを使用する

任意のコンポーネントで DatabaseService を使用して 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();
  }
}

ログイン後にコピー

注意事項

接続の一貫性: 重複した接続エラーを避けるために、checkConnectionsConsistency() を使用して接続の一貫性を確認してください。
シングルトンサービス: Angular の @Injectable を providedIn: 'root' とともに使用して、DatabaseService がシングルトンであることを確認します。
両方のプラットフォームでテストする: 常に Android デバイスと iOS デバイスの両方で実装をテストします。