Rumah > hujung hadapan web > tutorial js > Ionik: Angular CapacitorJS & SQLite

Ionik: Angular CapacitorJS & SQLite

Patricia Arquette
Lepaskan: 2024-11-26 01:03:10
asal
624 orang telah melayarinya

Ionic: 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
Salin selepas log masuk

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;
    }
  }
}
Salin selepas log masuk

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();
  }
}
Salin selepas log masuk

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();
  }
}
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan