Ionic project with database - angularjs

Question

I am trying to create a mobile project , which is my first project in Ionic platform.
for same , I have to learn Angular and Ionic. So I decided to make a simple mobile project.
I have googled too much for Database in mobile technology so I got many of database like- MongoDb, SQLite, Firebase etc. so I was the bit confused about which database should I use in the ionic mobile project?
And Is there any beginners documentation for any database that helps me to implement the database in my ionic project?
Thank you so much.

Answer 1

Instead of try to get it all at once, for training purposes, I would suggest starting only with Angular itself. Then, on a second project, try Ionic.
Some good starting points for angular are:
https://www.codecademy.com/pt-BR/learn/learn-angularjs
http://www.learn-angular.org/
Then, for Ionic I used:
https://thinkster.io/ionic-framework-tutorial
Now, specifically about database:
Ionic works with cordova, which maker the link between web development and mobile native functions. It makes it through plugins.
Nativelly Android and IOS support SQLite. So, if you want to use the most native resources possible, I think SQLite is the best option.
The best plugin (IMHO) is https://github.com/litehelpers/Cordova-sqlite-storage.
It's very easy to use this plugin:
On a Ionic cordova project, run
cordova plugin add cordova-sqlite-storage
Then, in your code, access the DB with
var db = window.sqlitePlugin.openDatabase({name: 'my.db', location: 'default'}, successcb, errorcb);
Then, simply run your SQLs:
db.executeSql("select length('tenletters') as stringlength", [], function (res) {
var stringlength = res.rows.item(0).stringlength;
console.log('got stringlength: ' + stringlength);
document.getElementById('deviceready').querySelector('.received').innerHTML = 'stringlength: ' + stringlength;
});
On the plugin site, there are more completes examples.
But, once again, I suggest learn the peaces first.
EDIT
Responding to comment:
To add information on Database is simple, almost like the SELECT sample above. Just pass your data as an array, on 2º argument of executeSQL(). Like this:
db.executeSql('INSERT INTO MyTable VALUES (?)', ['test-value'], function (resultSet) {
console.log('resultSet.insertId: ' + resultSet.insertId);
console.log('resultSet.rowsAffected: ' + resultSet.rowsAffected);
}, function(error) {
console.log('SELECT error: ' + error.message);
});
Take a look at the documentation, there are others examples there.

Answer 2

I have been swimming through article after article of "not quite what I am looking for" answers. I found a video in french. Here it is: Ionic 3 Store Data
That being said, here is how to setup your code to make ionic 3 cordova sqlite workable.
1) Import your native sqlite by running these 2 commands in your npm or cmd prompt.
ionic cordova plugin add cordova-sqlite-storage
npm install --save #ionic-native/sqlite
2) Import into your app.module.ts
import { SQLite} from '#ionic-native/sqlite';
3) Add as a provider in your app.module.ts
providers: [
...
SQLite,
...
]
4) Create a new folder(if you want to make it a different component) and make a database ts file. For the sake of ease I called mine database.ts
5) Add the following code (Please note this is not real code that I use. Just an example. Usernames and passwords should not be stored in this way):
import { Injectable } from '#angular/core';
import { SQLite, SQLiteObject } from '#ionic-native/sqlite';
#Injectable()
export class Database {
theConsole: string = "Console Messages";
options: any = {
name: data.db,
location: 'default',
createFromLocation: 1
}
private db: SQLiteObject;
constructor(private sqlite: SQLite) {
this.connectToDb();
}
private connectToDb():void {
this.sqlite.create(this.options)
.then((db: SQLiteObject) => {
this.db = db;
var sql = 'create table IF NOT EXISTS `user` (username VARCHAR(255), password VARCHAR(255))';
//IF you move the below statment out of here then the db variable will not be initialized
//before you can use it to execute the SQL.
this.db.executeSql(sql, {})
.then(() => this.theConsole += 'Executed SQL' + sql)
.catch(e => this.theConsole += "Error: " + JSON.stringify(e));
})
.catch(e => this.theConsole += JSON.stringify(e));
}
addUser(username, password):void {
var sql = "INSERT INTO `user` (username,password) VALUES ('"+username+"','"+ password+"')";
this.db.executeSql(sql,{})
.then(() => this.theConsole += "\n" + 'Executed SQL' + sql)
.catch(e => this.theConsole += "Error: " + JSON.stringify(e));
}
getDealer() {
var sql = "SELECT * FROM user";
this.db.executeSql(sql, {})
.then((result) => {
this.theConsole += JSON.stringify(result);
if (result.rows.length > 0) {
this.theConsole += 'Result' + result.rows.item(0);
}
this.theConsole += "\n" + result.rows.item(0).username+ result.rows.item(0).password;
this.theConsole += "\n" +'Rows' + result.rows.length;
})
.catch(e => this.theConsole += JSON.stringify(e));
}
getConsoleMessages() {
return this.theConsole;
}
}
Then you just have to import the database component(Class) into one of your pages and you can access the database by running these functions or by making your own RunSQL function that you can throw whatever you want into it.
What is really the part that confused me from ionic's website was the fact that they were showing the create but not the reuse of the SQLiteObject.
By adding the:
private db: SQLiteObject;
to my code in the declaration of class variables and in the initializing of the db object:
...
this.sqlite.create(this.options)
.then((db: SQLiteObject) => {
this.db = db;
...
I was able to reuse the db variable without having to open the db connection over and over again.
6) Import your component class into a page
import { Database } from '../../data/database';
I used this site: ionic native sqlite to get the main understanding of how to set it up and the french video mentioned earlier. I wish I would have found I hopefully can help others hitting this same sqlite wall. I wish I would have found what I found today sooner. I hopefully can help others hitting this same sqlite wall.