jepiqueau / angular-sqlite-app-refactor

Angular Application to test the refactor of the @capacitor-community/plugin

Ionic/Angular SQLite App Refactor

angular-sqlite-app-refactor

Ionic/Angular application demonstrating the use of the

@capacitor-community/sqlite

Maintainers

Maintainer	GitHub	Social
Quéau Jean Pierre	jepiqueau

Installation

To start building your App using this Starter App, clone this repo to a new directory:

git clone https://github.com/jepiqueau/angular-sqlite-app-refactor.git 
cd angular-sqlite-app-refactor
git remote rm origin

• then install it

npm install
cd electron
npm install
cd ..

• then go to the building process

npm run build
npx cap sync
npx cap sync @capacitor-community/electron
npm run build
npx cap copy
npx cap copy web
npx cap copy @capacitor-community/electron

the capacitor config parameters are:

  "appId": "io.ionic.starter",
  "appName": "test-capacitor-sqlite",

Building Web Code

The @capacitor-community/sqlite is not implemented for Web Browsers. if you run

npx cap serve

you will get the following messages:

SQLite Plugin not available for Web Platform

Building Native Project

Android

npx cap open android

Once Android Studio launches, you can build your app through the standard Android Studio workflow.

iOS

npx cap open ios

Electron

npx cap open @capacitor-community/electron

Test SQLite access

The @capacitor-community/sqlite tests are accessible through the home page.

• Test 2 Databases

The application uses a service class as a wrapper to the @capacitor-community/sqlite plugin

Resulting Output

At the end of the test, three databases should have been created,

• testNewSQLite.db
• testSetSQLite.db encrypted password sqlite secret
• test-updversionSQLite.db

Angular Service

A Angular Service has been defined as a wrapper to the @capacitor-community/sqlite plugin and from release 2.9.0-alpha.5 can be used at a singleton service initialized in app.component.ts and imported as a provider in app.module.ts. In this case the DBConnection can be used through Pages (see example in existingconnection.page.ts which can be called after the execution of test2dbs.page.ts).

import { Injectable } from '@angular/core';

import { Plugins, Capacitor } from '@capacitor/core';
import '@capacitor-community/sqlite';
import { SQLiteDBConnection, SQLiteConnection, capSQLiteSet,
         capEchoResult, capSQLiteResult } from '@capacitor-community/sqlite';
const { CapacitorSQLite } = Plugins;

@Injectable()

export class SQLiteService {
    sqlite: SQLiteConnection;
    isService: boolean = false;
    platform: string;

    constructor() {
    }
      /**
   * Plugin Initialization
   */
    initializePlugin(): Promise<boolean> {
        return new Promise (resolve => {
            this.platform = Capacitor.platform;
            console.log("*** platform " + this.platform)
            const sqlitePlugin: any = CapacitorSQLite;
            this.sqlite = new SQLiteConnection(sqlitePlugin);
            this.isService = true;
            console.log("$$$ in service this.isService " + this.isService + " $$$")
            resolve(true);
        });
    }
    async echo(value: string): Promise<capEchoResult> {
        console.log("&&&& in echo this.sqlite " + this.sqlite + " &&&&")
        if(this.sqlite != null) {
            return await this.sqlite.echo(value);
        } else {
            return null;
        }
    }
    async addUpgradeStatement(database:string, fromVersion: number,
                              toVersion: number, statement: string,
                              set?: capSQLiteSet[])
                                        : Promise<capSQLiteResult> {
        if(this.sqlite != null) {
            return await this.sqlite.addUpgradeStatement(database,
                fromVersion, toVersion, statement, set ? set : []);
        } else {
            return null;
        }                             
    }
    
    async createConnection(database:string, encrypted: boolean,
                           mode: string, version: number
                           ): Promise<SQLiteDBConnection | null> {
        if(this.sqlite != null) {
            const db: SQLiteDBConnection = await this.sqlite.createConnection(
                                database, encrypted, mode, version);
            if (db != null) {
                return db;
            } else {
                return null
            }
        } else {
            return null;
        }
    }
    async closeConnection(database:string): Promise<capSQLiteResult> {
        if(this.sqlite != null) {
            return await this.sqlite.closeConnection(database);
        } else {
            return null;
        }
    }
    async retrieveConnection(database:string): 
            Promise<SQLiteDBConnection | null | undefined> {
        if(this.sqlite != null) {
            return await this.sqlite.retrieveConnection(database);
        } else {
            return null;
        }
    }
    async retrieveAllConnections(): 
                    Promise<Map<string, SQLiteDBConnection>> {
        if(this.sqlite != null) {
            const myConns =  await this.sqlite.retrieveAllConnections();
            let keys = [...myConns.keys()];
            keys.forEach( (value) => {
                console.log("Connection: " + value);
              }); 
              return myConns;
        } else {
            return null;
        }               
    }
    async closeAllConnections(): Promise<capSQLiteResult> {
        if(this.sqlite != null) {
            return await this.sqlite.closeAllConnections();
        } else {
            return null;
        }
    }

}

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Jean Pierre Quéau 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

angular-sqlite-app-refactor's Issues

Using the refactor code in a service

I had two issues in implementing the refactor code. Maybe the documentation or test app could be expanded to include these.

1. The sql calls are contained in a service, and not in the page.ts
2. The initial page is a list page that queries the database. The query must not run before the database is connected and opened.

This is how I solved these.

In app.component.ts:

      this.databaseService.dbReady.subscribe(isReady => {
        if (isReady) {
          SplashScreen.hide();
 ...```

In databaseService.service.ts:
```  dbReady = new BehaviorSubject(false);
...
  async init() {
    await this._SQLiteService.initializePlugin().then(retInit => {
      this.initPlugin = retInit;
    })
    this.db = await this._SQLiteService.retrieveConnection("example");
    if(this.db == null) {
      this.db = await this._SQLiteService.createConnection("example");
    }
    let ret: any = await this.db.open();
    let retExe = await this.db.execute(createSchema);
    this.dbReady.next(true);
  }

All other calls to the database use "this.db." instead of "db.".

Then in list.page.ts:

this.databaseService.dbReady.subscribe(isReady => {
        if (isReady) {
          this.getList();
        ...