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을 제공된In: 'root'와 함께 사용하여 DatabaseService가 싱글톤인지 확인하세요.
• 두 플랫폼 모두에서 테스트: 항상 Android 및 iOS 기기 모두에서 구현을 테스트하세요.

---

결론

이러한 단계를 통해 CapacitorJS를 사용하여 SQLite를 Angular 18 독립 실행형 애플리케이션에 성공적으로 통합했습니다. 이 구현은 연결 일관성을 보장하고 재사용 가능한 서비스에 데이터베이스 작업을 캡슐화합니다.

위 내용은 Ionic: Angular CapacitorJS 및 SQLite의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!