¿Cómo conectar mi App de Ionic Framework con una base de datos de Firebase?
Usando Cloud Firestore Database
La idea principal de este tutorial es mostrarles cómo subir datos desde una aplicación de ionic a una base de datos en Firebase Cloud Firestore.
Vamos a utilizar un formulario simple para interactuar con el usuario con tan solo 3 atributos:
- nombre
- apellido
- edad
Para más información sobre formularios y validaciones en Ionic framework les dejo un tutorial super completo.
Por otro lado, para interactuar con la base de datos de firebase desde nuestra aplicación hecha con Ionic Framework, vamos a utilizar angularfire2 plugin.
¿Cómo hacer un formulario en Ionic y enviar los datos a Firebase?
Para comenzar vamos a crear una aplicación en Ionic. Puedes descargarte gratuitamente éste ejemplo o puedes crear tu propia app de cero.
Si eres completamente nuevo en este mundo de Ionic te sugiero que revises Ionic Framework introduction and key components.
Para instalar el plugin de angularfire2 que mencionamos en la introducción, debemos correr el siguiente comando desde nuestra consola.
npm install firebase angularfire2 --saveConfiguración de Firebase
Una vez instalado el plugin que vamos a utilizar para comunicar nuestra Ionic app con Firebase, debemos crear un nuevo proyecto en Firebase. Para crear tu proyecto, dirígete a la consola de firebase, donde verás el siguiente menú:
Haz click en “Add Firebase to your web app” para ver las credenciales de tu nueva aplicación de Firebase. Estas credenciales las vamos a precisar para decirle a nuestra aplicación de Ionic que se comunique con nuestra aplicación de Firebase.
El próximo paso es agregar estas credenciales en nuestro proyecto de ionic. Para esto usaremos el archivo environment.ts ubicado en src/environment/ y le agregaremos lo siguiente:
export const environment = {
production: false,
firebase: {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_SENDER_ID"
}
};Ten en cuenta que tienes que reemplazar las constantes con tus valores.
Si quieres empezar a desarrollar tu aplicación con Ionic pero no sabes por dónde empezar, te recomiendo que pruebes Ion2FullApp ELITE. Es un template que podrás usar para crear tu ionic app y ahorrarte cientos de horas de desarrollo y diseño. Si quieres un descuento especial por haber leído este post escríbeme a contact@ionicthemes.com
Felicitaciones! Hemos terminado con el proceso de instalación. En este momento estamos prontos para seguir con la implementación.
Conectando Ionic con Firebase
En nuestro ejemplo hemos creado una aplicación que cuenta con un formulario con los tres campos ya mencionados y un botón de agregar el nuevo “Usuario” a la base de datos.
Para realizar la operación de agregar éste usuario a la base de datos de firebase, vamos a crear un servicio el cual contará con un método que realice dicha funcionalidad.
export class FirebaseService {
constructor(
public afs: AngularFirestore,
){}
addUser(value){
return new Promise<any>((resolve, reject) => {
this.afs.collection('/users').add({
name: value.name,
surname: value.surname,
age: parseInt(value.age)
})
.then((res) => {
resolve(res)
},err => reject(err))
})
}
}Con este método guardamos en la collection users los datos que se escribieron en el formulario. Cabe destacar que la collection ‘users’ se crea en Firestore automáticamente al insertar el primer elemento.
La base de datos debería verse de la siguiente manera:
Por último veremos el método de accionar el botón “ADD” al completar el formulario:
add(value){
this.firebaseService.addUser(value)
.then( res => {
let toast = this.toastCtrl.create({
message: 'User was created successfully',
duration: 3000
});
toast.present();
this.resetFields();
}, err => {
console.log(err)
})
}Este método recibe los valores ingresado en el formulario, lo que nos permite llamar al método de FirebaseService que vimos previamente para crear el nuevo registro en la base de datos.
Conclusión
En este tutorial aprendimos a guardar datos en una base de datos de firebase Cloud Firestore desde una aplicación hecha con Ionic Framework. Además aprendimos cómo crear un formulario simple en una aplicación de Ionic.
Si quieres aprender más sobre Firebase estate atento a los próximos tutoriales en donde estaré escribiendo sobre como interactuar entre firebase Storage y Cloud Firestore.
Puedes suscribirte a nuestra newsletter para enterarte cuando el tutorial esté disponible.
Si no has leído el post anterior en donde aprendimos a usar el Storage de Firebase para subir archivos, te recomiendo que le eches un vistazo:
Espero que este tutorial sobre Ionic Framework te haya sido de gran ayuda, si tienes alguna pregunta no dudes en dejar un comentario en la sección de abajo.
Para más tutoriales y ejemplos prácticos puedes visitar nuestro blog oficial en IonicThemes.
