Aitor Sánchez - Blog - Nov. 1, 2023, 6:21 p.m.
¿Necesitas persistir datos en tu app de Ionic y has pensado en utilizar Couchbase? O, quizás, has caido aquí sin saber lo que es o solo quieres aclarar alguna duda sobre ella ¿verdad?
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en el artículo de hoy aprenderás lo básico para que puedas comenzar a partir de ahí con Couchbase Ionic. Sera un vistazo rápido a lo que puede hacer por ti este componente y cómo lo puedes usar para tu app.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Y ahora si, comenzamos. Let´s go!
Cómo todos los módulos desacoplados del core, necesitamos hacer una instalación para poder usarlos. Para ello vamos a usar las dos siguientes líneas de código:
$ ionic cordova plugin add couchbase-lite-phonegap-plugin
$ npm install --save @ionic-native/couchbase-lite
La primera incluirá el plugin que se comunicará con la parte nativa del sistema donde se esté ejecutando la aplicación, y la segunda instalará el código TS para poder comunicarnos con el plugin.
Bien, pues si estás utilizando una versión inferior a Ionic 4, o no quieres/puedes usar el módulo NGX de ionic tendrás que incluir a los providers de tu clase el componente para poder usar el plugin. Se hace de la siguiente manera:
...
import { CouchbaseLite } from "@ionic-native/couchbase-lite/ngx";
...
providers[
...,
CouchbaseLite,
...
]
...
Recordamos, cómo en todos los tutos, que es de buenas prácticas incluir este tipo de módulos desacoplados solo en los componentes donde vayas a usarlos. Así, a parte, mejorarás el rendimiento de las apps de manera exponencial.
Cómo era de esperar, se trata de un módulo nativo, así que está disponible para:
En el navegador no tendría mucho sentido, la verdad. Ya hay cosas hechas para este mejores.
Pues bien, llegados a este punto, y cómo en todos los tutos, aquí va el código de ejemplo y luego comentamos sobre él.
import { CouchbaseLite } from '@ionic-native/couchbase-lite/ngx';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable'
url:string;
constructor(private couchbase: CouchbaseLite, private platform:Platform,private _http:Http) {
this.initMethod();
}
22
initMethod() {
this.couchbase.getURL().then((url)=> {
this.url = url;
})
}
getUrl() {
return this.url;
}
// Base de datos //
createDatabase(database_name:string) {
let url = this.getUrl();
url = url+database_name;
return this._http
.put(url)
.map(data => { this.results = data['results'] })
.catch((error:any) => {
return Observable.throw(error.json() || 'Couchbase Lite error');
})
}
deleteDatabase(database_name:string) {
let url = this.getUrl();
url = url+database_name;
return this._http
.delete(url)
.map(data => { this.results = data['results'] })
.catch((error:any) => {
return Observable.throw(error.json() || 'Couchbase Lite error');
})
}
getAllDbs() {
let url = this.getUrl();
url = url+'_all_dbs';
return this._http
.get(url)
.map(data => { this.results = data['results'] })
.catch((error:any) => {
return Observable.throw(error.json() || 'Couchbase Lite error');
})
}
// Documentos de datos //
getAllDocuments(database_name:string){
let url = this.getUrl();
// include_docs=true will include a doc inside response, it is false by default
url = url + database_name + '/_all_docs?include_docs=true';
return this._http
.get(url)
.map(data => { this.results = data['results'] })
.catch((error:any) => {
return Observable.throw(error.json() || 'Couchbase Lite error');
});
}
insertDocument(database_name:string,document){
let url = this.getUrl();
url = url + database_name;
return this._http
.post(url,document)
.map(data => { this.results = data['results'] })
.catch((error:any) => {
return Observable.throw(error.json() || 'Couchbase Lite error');
});
}
createDocument(){
let document = {
_id:'Sera el ID único del documento, si creas otro con el mismo ID que uno que ya está se sobreescibirá',
data:{name:'sandman',age:25,city:pune}
}
createDocument('justbe', document).suscribe((result)=>{
// Respuesta satisfactoria
{ "id": "string","rev": "string","ok": true }
});
}
updateDocument(database_name:string,document){
let url = this.getUrl();
url = url + database_name + '/' + document._id;
return this._http
.put(url,document)
.map(data => { this.results = data['results'] })
.catch((error:any) => {
return Observable.throw(error.json() || 'Couchbase Lite error');
});
}
// Para poder actualizar un documento, este tendrá que contener el ID de revisión más reciente.
// Por cada actualización del documento se genera un nuevo ID de revisión
// Esta sería una respuesta satisfactoria de actualización de documento.
//{ "id": "string","rev": "string(new revision id)","ok": true }
deleteDocument(database_name:string,document){
let url = this.getUrl();
url = url + database_name + '/' + document._id +'?rev='+doc._rev;
return this._http
.delete(url)
.map(data => { this.results = data['results'] })
.catch((error:any) => {
return Observable.throw(error.json() || 'Couchbase Lite error');
});
}
¡Genial! Pues en primer lugar importamos CouchbaseLite, del módulo “@ionic-native/couchbase-lite/ngx”, Http del módulo “@angular/http” y Observable del módulo “rxjs/Observable”.
Inyectamos una instancia de CouchbaseLite en el constructor junto a otra del módulo Http.
Nota: Es posible que tengas que incluir el módulo Http en tus providers (depende de la versión de Ionic). Si no funciona, es por eso, impórtalo.
Pues bien, para lo único que vamos a usar la instancia de CouchbaseLite es para obtener la ruta de nuestra base de datos. Que será la ruta local, o remota, donde se aloje esta.
En el ejemplo de código tienes disponibles el resto de las funciones propias con las que montamos un curl bastante interesante sobre la base de datos. Es más, este ejemplo podría servir perfectamente para una aplicación pequeñita que requiera algo de bases de datos.
Recordemos que Couchbase es una base de datos no relacional, por lo que no hay unos campos “definidos” y relaciones entre sí. Cada documento es dueño de sus propios campos y pares.
Si no sabes lo que es una base de datos NoSql, aquí te dejo un enlace con una lectura ligerita donde podrás profundizar un poco más sobre esto.
Bueno, pues nuestra clase CouchbaseLite solo cuenta con una función propia. Recordad que no detallo funciones de los padres aquí. Así que veamos cuales es esta. Aunque ya hayamos visto ya en el ejemplo:
Prácticamente nos devuelve la URL de la base de datos. Con esta URL vamos a realizar todas las operaciones.
Retorna una promesa que hay que controlar. Si todo ha ido bien se resolverá y llevará consigo la url que hemos comentado.
La verdad que hoy estamos un poco faltos de contenido. Este vídeo no aclara al 100% el uso, por que está disponible para Ionic 1, no para el actual, pero más o menos lo entenderás, verás.
Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.
Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.
Geniete, pues ya hemos terminado. Espero que te haya ayudado a entender e intentar implementar Couchbase en tu app y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!