// Crear un nuevo proyecto Ionic (MiApp)
ionic start MiApp blank
cd MiApp
// Descargar el plugin Cordova SQLite storage
ionic cordova plugin add cordova-sqlite-storage
// Añadir el plugin SQLite al proyecto
npm install --save @ionic-native/sqlite
// Descargar el plugin SQLite Porter
ionic cordova plugin add uk.co.workingedge.cordova.plugin.sqliteporter
// Añadir el plugin SQLite-Porter al proyecto
npm install --save @ionic-native/sqlite-porter
// Crear un proveedor para el proyecto
ionic g provider BaseDatosLocal
CrearBaseDatos.sql
Guardar en src/assets
CREATE TABLE IF NOT EXISTS tableItems(
id INTEGER PRIMARY KEY AUTOINCREMENT,
unTextoCorto TEXT,
unTextoLargo TEXT,
unNumeroEntero INTEGER,
unNumeroReal REAL,
unaFecha TEXT,
unBooleano INTEGER,
unaImagen TEXT);
INSERT INTO tableItems
(unTextoCorto, unTextoLargo, unNumeroEntero, unNumeroReal, unaFecha, unBooleano, unaImagen) VALUES
('Uno', 'El primer valor', 1111, 111.11, '2001-01-01 01:01:01', 1, 'uno.png');
INSERT INTO tableItems
(unTextoCorto, unTextoLargo, unNumeroEntero, unNumeroReal, unaFecha, unBooleano, unaImagen) VALUES
('Dos', 'El segundo valor', 2222, 222.22, '2002-02-02 02:02:02', 0, 'dos.png');
INSERT INTO tableItems
(unTextoCorto, unTextoLargo, unNumeroEntero, unNumeroReal, unaFecha, unBooleano, unaImagen) VALUES
('Tres', 'El tercer valor', 3333, 333.33, '2003-03-03 03:03:03', 1, 'tres.png');
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpModule } from '@angular/http';
import { SQLite } from '@ionic-native/sqlite';
import { SQLitePorter } from '@ionic-native/sqlite-porter';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { BaseDatosLocalProvider } from '../providers/base-datos-local/base-datos-local';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
SQLite,
SQLitePorter,
{provide: ErrorHandler, useClass: IonicErrorHandler},
BaseDatosLocalProvider
]
})
export class AppModule {}
base-datos-local.ts
//import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Platform, AlertController } from 'ionic-angular';
import 'rxjs/add/operator/map';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
import { SQLitePorter } from '@ionic-native/sqlite-porter';
import { Http } from '@angular/http';
import { BehaviorSubject } from 'rxjs/Rx';
@Injectable()
export class BaseDatosLocalProvider {
// Array donde se almacenará la información contenida en la BD
datos: any = [];
// Variable que se usará con subscribe para detectar BD preparada
private databaseReady: BehaviorSubject<boolean>;
constructor(public http: Http, private platform: Platform,
private sqlite: SQLite, private sqliteporter: SQLitePorter,
private alertCtrl: AlertController) {
// Inicialmente se indica que la BD no está aún proeparada
this.databaseReady = new BehaviorSubject(false);
this.abrirBaseDatos();
}
abrirBaseDatos() {
// Make ready to platform
this.platform.ready()
.then(() => {
// Crear o abrir la base de datos MiAppBD.db
this.sqlite.create({
name: 'MiAppBD.db',
location: 'default'
})
.then((db: SQLiteObject) => {
// Consulta para comprobar si ya existen los datos
db.executeSql('SELECT * FROM tableItems', [])
.then(res => {
// Los datos ya estaban en la BD
this.alertCtrl.create({
title: 'Información',
message: 'Los datos ya estaban en la BD',
buttons: ['Aceptar']
}).present();
// Procesar los datos de la base de datos
this.datos = this.obtenerDatos(db);
// Informar que la base de datos está lista
this.databaseReady.next(true);
})
.catch(res => {
// Los datos no están en la BD. Hay que importarlos
this.alertCtrl.create({
title: 'Información',
message: 'Se van a importar los datos a la BD',
buttons: ['Aceptar']
}).present();
// Obtener el archivo que contiene las sentencias SQL
this.http.get('assets/CrearBaseDatos.sql')
.map(res => res.text())
.subscribe(sql => {
// Ejecutar las sentencias SQL del archivo
this.sqliteporter.importSqlToDb(db, sql)
.then(() => {
// Procesar los datos de la base de datos
this.datos = this.obtenerDatos(db);
// Informar que la base de datos está lista
this.databaseReady.next(true);
}).catch(e => {
alert("Error al importar la base de datos");
console.error("Error al importar la base de datos", e.message);
});
})
});
});
}).catch(e => alert('Platform is not ready.'));
}
obtenerDatos(baseDatos) {
let resultado = [];
// Realizar la consulta a la BD para extraer los datos
baseDatos.executeSql('SELECT * FROM tableItems', [])
.then(resSelect => {
// Recorrer todas las filas obtenidas
for (var i = 0; i < resSelect.rows.length; i++) {
// Añadir al array de datos la información desglosada
resultado.push({
unTextoCorto: resSelect.rows.item(i).unTextoCorto,
unTextoLargo: resSelect.rows.item(i).unTextoLargo
});
}
}).catch(e => {
alert("Error: No se ha podido consultar los datos",);
console.error("Error en Select de consulta de datos", e.message);
});
return resultado;
}
/*
* Método para obtener el Observable que se utilizará con susbcribe
* para detectar cuándo está lista la base de datos
*/
getDatabaseState() {
return this.databaseReady.asObservable();
}
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BaseDatosLocalProvider } from './../../providers/base-datos-local/base-datos-local';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
datos: any = [];
constructor(public navCtrl: NavController, private baseDatosLocalProvider: BaseDatosLocalProvider) {
// Suscripción para detectar cuándo la BD ha terminado de cargar datos
let suscripcionBDPreparada = baseDatosLocalProvider.getDatabaseState()
.subscribe(baseDatosPreparada => {
if (baseDatosPreparada) {
// Mantener una referencia a los datos como una propiedad de esta clase
this.datos = baseDatosLocalProvider.datos;
// Terminar la suscripción
suscripcionBDPreparada.unsubscribe();
}
});
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
Demo Ionic Script SQL
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let dato of datos">
<h2>{{ dato.unTextoCorto }}</h2>
<p>{{ dato.unTextoLargo }}</p>
</ion-item>
</ion-list>
</ion-content>