Ionic Sqlite and crhome webrowser for test app

How i can using sqlite with ionic2 and using chrome for test my app?
don’t make this https://www.thepolyglotdeveloper.com/2015/12/use-sqlite-in-ionic-2-instead-of-local-storage/
Thanks advanced!

I am also interested in this topic.
If someone has CRUD (lists, forms, search) demo with SQLite database.

You cannot test SQLite storage in chrome since it is using Cordova SQLite plugin. You can test in emulator or test via mobile in debug mode.

2 Likes

you could try using something like this

I will tried!, thanks!

I finally made it. This works.
In “providers” add this

constructor(platform: Platform) {
platform.ready().then(() => {
if (platform._platforms[0] == ‘cordova’) {
this.db = win.sqlitePlugin.openDatabase({ name: DB_NAME , location:“default”});
} else {
this.db = win.openDatabase(DB_NAME, “1”, “dbf1”, 1024 * 1024 * 100);
}
this.create_TBL();
});
}

Please post code complete!!!
Thanks!

hi.

Can you please post the complete code? it should be this.platform.ready()… right?

Here is my database providers and this is all explained
https://github.com/driftyco/ionic/issues/8269
and
https://gist.github.com/NickStemerdink/64c782807fc31b7bc9b529ad4b1d56d5

Open debug Chrome Application-> Web SQL and your database is here.
But I’m stuck here. I can not get list rows on another page
In emulator everything works.

/** database.ts **/
import { Injectable } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;

const DB_NAME: string = ‘dbf1.db’;
const win: any = window;

@Injectable()
export class Database {
private db: any;
vdknj_nzv: any;
constructor(platform: Platform) {
platform.ready().then(() => {

  if (platform._platforms[0] == 'cordova') {
        this.db = win.sqlitePlugin.openDatabase({ name: DB_NAME , location:"default"});
    } else {
        this.db = win.openDatabase(DB_NAME, "1", "dbf1", 1024 * 1024 * 100);
    }   
        this.create_TBL();			
        this.ins_TBL();			
   });

}

create_TBL() {
this.query(‘CREATE TABLE IF NOT EXISTS def (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT UNIQUE, usr TEXT UNIQUE, psw TEXT ,lnk TEXT,tip TEXT, vdknj_id INTEGER,instm TEXT, insusr TEXT, updtm TEXT, updusr TEXT,exptm TEXT, expusr TEXT)’).catch(err => {
console.error(‘Storage: Unable to create initial storage tables’, err.tx, err.err); });
}

ins_TBL = function () {

  this.query("INSERT INTO def (id,usr,psw,lnk,tip,v_id,instm,insusr,updtm,updusr,exptm,expusr)  VALUES (1,'admin','12345','-','-',1,'-','admin',' ','admin',NULL,NULL);");

}

query(query: string, params: any[] = []): Promise {
return new Promise((resolve, reject) => {
try {
this.db.transaction((tx: any) => {
tx.executeSql(query, params,
(tx: any, res: any) => resolve({ tx: tx, res: res }),
(tx: any, err: any) => reject({ tx: tx, err: err }));
},
(err: any) => reject({ err: err }));
} catch (err) {
reject({ err: err });
}
});
}
/**
* Get the value in the database identified by the given key.
* @param {string} key the key
* @return {Promise} that resolves or rejects with an object of the form { tx: Transaction, res: Result (or err)}
*/
get(key: string): Promise {
return this.query(‘select key, value from kv where key = ? limit 1’, [key]).then(data => {
if (data.res.rows.length > 0) {
return data.res.rows.item(0).value;
}
});
}

/**
 * Set the value in the database for the given key. Existing values will be overwritten.
 * @param {string} key the key
 * @param {string} value The value (as a string)
 * @return {Promise} that resolves or rejects with an object of the form { tx: Transaction, res: Result (or err)}
 */
set(key: string, value: string): Promise<any> {
    return this.query('insert or replace into kv(key, value) values (?, ?)', [key, value]);
}

/**
 * Remove the value in the database for the given key.
 * @param {string} key the key
 * @return {Promise} that resolves or rejects with an object of the form { tx: Transaction, res: Result (or err)}
 */
remove(key: string): Promise<any> {
    return this.query('delete from kv where key = ?', [key]);
}

/**
 * Clear all keys/values of your database.
 * @return {Promise} that resolves or rejects with an object of the form { tx: Transaction, res: Result (or err)}
 */
clear(): Promise<any> {
    return this.query('delete from kv');
}

}

Now works and lists.:slight_smile:
I used the Ripple emulator in Chrome.
That was wrong.