-angular-data-storage-sqlite-app-starter
CAPACITOR 4
Ionic/Angular application demonstrating the use of the
capacitor-data-storage-sqlite
| Maintainer | GitHub | Social |
|---|---|---|
| Quéau Jean Pierre | jepiqueau |
To start building your App using this Starter App, clone this repo to a new directory:
git clone https://github.com/jepiqueau/angular-data-storage-sqlite-app-starter.git
cd angular-data-storage-sqlite-app-starter
git remote rm origin- then install it
npm install --save capacitor-data-storage-sqlite
npm install --save localforage- then go to the building process
npm run build
npx cap update
npx cap update @capacitor-community/electron
npm run build
npx cap copy
npx cap copy web
npx cap copy @capacitor-community/electronthe capacitor config parameters are:
"appId": "com.example.app.capacitor.datastoragesqlite"
"appName": "angular-data-storage-sqlite-app-starter"
npx cap servenpx cap open iosOnce Xcode launches, you can build your finally app binary through the standard Xcode workflow.
npx cap open androidOnce Android Studio launches, you can build your app through the standard Android Studio workflow.
npx cap open @capacitor-community/electronThe DataStore test was successful
At the end of the test, one un-encrypted store should have been created
storageSQLite.db
In Xcode, before building your app,
- Go to the
Pods/Development Pods/CapacitorDataStorageSqlitefolder, - Modify the
secretandnewsecretstrings in the Global.swift file.
In Android Studio, before building your app,
- Go to the
capacitor-data-storage-sqlite/java/com.jeep.plugin.capacitor/cdssUtilsfolder, - Modify the
secretandnewsecretstrings in the Global.java file.
A Angular Service has been defined as a wrapper to the capacitor-data-storage-sqlite plugin.
import { Injectable } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { CapacitorDataStorageSqlite,} from 'capacitor-data-storage-sqlite';
@Injectable({
providedIn: 'root'
})
export class StoreService {
store: any;
isService: boolean = false;
platform: string;
constructor() {
}
/**
* Plugin Initialization
*/
async init(): Promise<void> {
this.platform = Capacitor.getPlatform();
this.store = CapacitorDataStorageSqlite;
this.isService = true;
console.log('in init ',this.platform,this.isService)
}
/**
* Echo a value
* @param value
*/
async echo(value: string): Promise<any> {
if(this.isService && this.store != null) {
try {
return await this.store.echo(value);
} catch (err) {
console.log(`Error ${err}`)
return Promise.reject(new Error(err));
}
} else {
return Promise.reject(new Error("openStore: Store not opened"));
}
}
/**
* Open a Store
* @param _dbName string optional
* @param _table string optional
* @param _encrypted boolean optional
* @param _mode string optional
*/
async openStore(_dbName?:string,_table?:string,_encrypted?:boolean,_mode?:string): Promise<void> {
if(this.isService && this.store != null) {
const database: string = _dbName ? _dbName : "storage";
const table: string = _table ? _table : "storage_table";
const encrypted:boolean = _encrypted ? _encrypted : false;
const mode: string = _mode ? _mode : "no-encryption";
try {
console.log("in openStore Service ")
console.log(`database ${database}`)
console.log(`table ${table}`)
await this.store.openStore({database,table,encrypted,mode});
return Promise.resolve();
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("openStore: Store not opened"));
}
}
/**
* Close a store
* @param dbName
* @returns
*/
async closeStore(dbName: String): Promise<void> {
if(this.isService && this.store != null) {
try {
await this.store.closeStore({database:dbName});
return Promise.resolve();
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("close: Store not opened"));
}
}
/**
* Check if a store is opened
* @param dbName
* @returns
*/
async isStoreOpen(dbName: String): Promise<void> {
if(this.isService && this.store != null) {
try {
const ret = await this.store.isStoreOpen({database:dbName});
return Promise.resolve(ret);
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("isStoreOpen: Store not opened"));
}
}
/**
* Check if a store already exists
* @param dbName
* @returns
*/
async isStoreExists(dbName: String): Promise<void> {
if(this.isService && this.store != null) {
try {
const ret = await this.store.isStoreExists({database:dbName});
return Promise.resolve(ret);
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("isStoreExists: Store not opened"));
}
}
/**
* Create/Set a Table
* @param table string
*/
async setTable(table:string): Promise<void> {
if(this.isService && this.store != null) {
try {
await this.store.setTable({table});
return Promise.resolve();
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("setTable: Store not opened"));
}
}
/**
* Set of Key
* @param key string
* @param value string
*/
async setItem(key:string,value:string): Promise<void> {
if(this.isService && this.store != null) {
if(key.length > 0) {
try {
await this.store.set({ key, value });
return Promise.resolve();
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("setItem: Must give a key"));
}
} else {
return Promise.reject(new Error("setItem: Store not opened"));
}
}
/**
* Get the Value for a given Key
* @param key string
*/
async getItem(key:string): Promise<string> {
if(this.isService && this.store != null) {
if(key.length > 0) {
try {
const {value} = await this.store.get({ key });
console.log("in getItem value ",value)
return Promise.resolve(value);
} catch (err) {
console.log(`$$$$$ in getItem key: ${key} err: ${JSON.stringify(err)}`)
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("getItem: Must give a key"));
}
} else {
return Promise.reject(new Error("getItem: Store not opened"));
}
}
async isKey(key:string): Promise<boolean> {
if(this.isService && this.store != null) {
if(key.length > 0) {
try {
const {result} = await this.store.iskey({ key });
return Promise.resolve(result);
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("isKey: Must give a key"));
}
} else {
return Promise.reject(new Error("isKey: Store not opened"));
}
}
async getAllKeys(): Promise<Array<string>> {
if(this.isService && this.store != null) {
try {
const {keys} = await this.store.keys();
return Promise.resolve(keys);
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("getAllKeys: Store not opened"));
}
}
async getAllValues(): Promise<Array<string>> {
if(this.isService && this.store != null) {
try {
const {values} = await this.store.values();
return Promise.resolve(values);
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("getAllValues: Store not opened"));
}
}
async getFilterValues(filter:string): Promise<Array<string>> {
if(this.isService && this.store != null) {
try {
const {values} = await this.store.filtervalues({ filter });
return Promise.resolve(values);
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("getFilterValues: Store not opened"));
}
}
async getAllKeysValues(): Promise<Array<any>> {
if(this.isService && this.store != null) {
try {
const {keysvalues} = await this.store.keysvalues();
return Promise.resolve(keysvalues);
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("getAllKeysValues: Store not opened"));
}
}
async removeItem(key:string): Promise<void> {
if(this.isService && this.store != null) {
if(key.length > 0) {
try {
await this.store.remove({ key });
return Promise.resolve();
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("removeItem: Must give a key"));
}
} else {
return Promise.reject(new Error("removeItem: Store not opened"));
}
}
async clear(): Promise<void> {
if(this.isService && this.store != null) {
try {
await this.store.clear();
return Promise.resolve();
} catch (err) {
return Promise.reject(err.message);
}
} else {
return Promise.reject(new Error("clear: Store not opened"));
}
}
async deleteStore(_dbName?:string): Promise<void> {
const database: string = _dbName ? _dbName : "storage";
await this.init();
if(this.isService && this.store != null) {
try {
await this.store.deleteStore({database});
return Promise.resolve();
} catch (err) {
return Promise.reject(err.message);
}
} else {
return Promise.reject(new Error("deleteStore: Store not opened"));
}
}
async isTable(table:string): Promise<boolean> {
if(this.isService && this.store != null) {
if(table.length > 0) {
try {
const {result} = await this.store.isTable({ table });
return Promise.resolve(result);
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("isTable: Must give a table"));
}
} else {
return Promise.reject(new Error("isTable: Store not opened"));
}
}
async getAllTables(): Promise<Array<string>> {
if(this.isService && this.store != null) {
try {
const {tables} = await this.store.tables();
return Promise.resolve(tables);
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("getAllTables: Store not opened"));
}
}
async deleteTable(table?:string): Promise<void> {
if(this.isService && this.store != null) {
if(table.length > 0) {
try {
await this.store.deleteTable({table});
return Promise.resolve();
} catch (err) {
return Promise.reject(err);
}
} else {
return Promise.reject(new Error("deleteTable: Must give a table"));
}
} else {
return Promise.reject(new Error("deleteTable: Store not opened"));
}
}
}The process described below follows the instructions provided in the Capacitor Documentation
ionic start myStorageApp tabs --type=angular --capacitor
cd ./myStorageAppnpx cap init myStorageApp com.example.appYour App information [appName] [appId] can be whathever you would like. Here we choose for the example [myStorageApp] [com.example.app]
npm install --save capacitor-data-storage-sqlite
npm install --save @capacitor-community/electron@nextng g service sqliteIn your favorite editor open the store.services.ts file under the src/app/servicesfolder and input the code as described above
import { StoreService } from '../services/store.service'; constructor(private _StoreService: StoreService) {
} async ngAfterViewInit() {
// Initialize the CapacitorDataStorageSQLite plugin
await this._StoreService.init();
...
}async fooMethod(): Promise<void> {
...
if(this._StoreService.isService) {
// open the data storage
let result:any = await this._StoreService.openStore();
console.log('storage retCreate result',result)
if (result) {
await this._StoreService.clear();
// store data in the first store
await this._StoreService.setItem("session","Session Opened");
result = await this._StoreService.getItem("session");
console.log('result ',result)
...
}
} else {
console.log("CapacitorDataStorageSqlite Service is not initialized");
}
...
}When the database is open, use the other methods provided by the Angular Service to setItem, getItem, removeItem, clear, ...
npm run buildnpx cap add ios
npx cap add android
npx cap add @capacitor-community/electronnpm run build
npx cap copy
npx cap copy @capacitor-community/electronnpx cap open iosOnce Xcode launches, you can build your finally app binary through the standard Xcode workflow.
npx cap open androidOnce Android launches,
- Edit the MainActivity.java and add the following import:
import com.jeep.plugin.capacitor.CapacitorDataStorageSqlite;- Add the CapacitorDataStorageSQLite declaration in the this.init method
add(CapacitorDataStorageSqlite.class);- you can then build your app through the standard Android Studio workflow.
In the Electron folder of your application
npm install --save sqlite3
npm install --save-dev @types/sqlite3
npm install --save-dev electron-rebuildModify the Electron package.json file by adding a script "rebuild-deps" if it is not existing
"scripts": {
"rebuild-deps": "electron-rebuild"
},Execute the postinstall script
npm run rebuild-depsGo back in the main folder of your application and then build the application
npx cap update
npx cap update @capacitor-community/electron
npm run build
npx cap copy
npx cap open @capacitor-community/electronThe datastores created are under YourApplication/Electron/DataStorage
Follow this process:
npm install --save capacitor-data-storage-sqlite@latest
npx cap update
npx cap update @capacitor-community/electron
npm run build
npx cap copy
npx cap copy @capacitor-community/electron
npx cap open ios
npx cap open android
npx cap open @capacitor-community/electron
ionic serveThe capacitor-data-storage-sqlite test is accessible in the Tab2 of the Application by clicking on the Store test button.
Thanks goes to these wonderful people (emoji key):
 Jean Pierre Quéau 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent