En esta ocasión vamos a aprender cómo conectar Vue.js con Firebase, pero antes de comenzar, por si no sabés qué es Firebase, se trata de una plataforma de Google para aplicaciones web y mobile. Básicamente lo que haremos en este tutorial es crear una base de datos con Firebase e interactuar con la misma desde una aplicación hecha en Vue.
Primero que nada, en esta publicación vamos a usar la consola de node, por lo cual si no tenés node instalado en tu máquina, te invito a descargarte el instalador desde aquí:
Creando nuestra base de datos desde Firebase
Vamos a la siguiente URL:
Luego nos dirigimos a la parte superior derecha, donde dice: ‘Console’ o más fácil a:
https://console.firebase.google.com/
Luego vamos a añadir un proyecto nuevo
Nos pedirá que le pongamos un nombre y un país
En mi caso, yo le puse a mi proyecto ‘miko-quir’
Una vez dentro nos dirigimos a la barra izquierda donde dice: ‘Database’
Nos va a preguntar qué tipo de base de datos queremos crear, elegimos la segunda ‘Realtime Database’
Y ‘Empezar con el modo de prueba’.
Hay que aclarar en este punto que nuestra base de datos sólo servirá para hacer pruebas y cualquier persona que tenga el código que veremos a continuación, podrá acceder sin ningún problema, lo que significa que esta opción no está protegido por un usuario autentificado.
Luego vamos a crear nuestra base de datos. La misma debe ser una base de datos no relacional, con un formato JSON.
Si te complica usar la interfaz, podés crear tu propio JSON e importarlo. Por ejemplo en mi caso, mi base de datos tiene este formato:
{
"compras" : [ {
"cantidad" : 2,
"nombre" : "tomates"
}, {
"cantidad" : 3,
"nombre" : "Botellas de agua"
} ]
}
Puedo crear un archivo .json con este formato y luego importarlo.
Listo ya tenemos nuestra base de datos.
Creando nuestra aplicación
Si ya tenemos instalado Node para usar la consola con NPM, entonces podemos entrar a nuestra carpeta de proyectos, en mi caso:
cd C:\Program Files\nodejs
También vamos a instalar vue-cli, si nunca lo hicimos antes:
npm install -g vue-cli
Y vamos a instalar un nuevo proyecto Vue:
vue init webpack#1.0 miko_quir
(webpack#1.0 es el nombre del template y miko_quir el nombre que quise ponerle a mi proyecto)
Nos va a hacer algunas preguntas como nombre, descripción y autor del proyecto. Al resto le ponemos todo que no)
Entramos a nuestro proyecto:
cd miko_quir
E instalamos las dependencias:
npm install
Luego vamos a instalar las dependencias necesarias para usar firebase y vuefirebase:
npm install firebase vuefire --save
Corremos nuestra aplicación para verificar que hicimos todos los pasos correctamente:
npm run dev
Ahora vamos al código:
Primero a nuestro archivo index.html, en la raíz del proyecto y agregamos el siguiente código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Ejemplo de Vue y Firebase </title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Toastr -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body>
<app></app>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Toastr -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</body>
</html>
Para entender un poco el código, simplemente agregamos dos hojas de estilo, una de Twitter Bootstrap y otra de la librería Toasr, esta última para mostrar notificaciones con un aspecto visual agradable:
<!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Toastr --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
También agregamos tres librerías de Javascript: Jquery, Bootrstrap y Toastr:
<!-- Jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Bootstrap --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Toastr --> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
Luego nos dirigimos a src/main.js e importamos la librería de vuefire:
import Vue from 'vue' import VueFire from 'vuefire' import App from './App' Vue.use(VueFire)
Continuamos editando el archivo src/App.vue. Empezamos modificando la vista:
<template>
<div id="app" class="container">
<div class="page-header">
<h1> Lista de compras </h1>
</div>
<form>
<table class="table table-responsive">
<thead>
<tr>
<th> Nombre </th>
<th> Cantidad </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr v-for="compra in compras">
<td>
<input type="text" class="form-control" placeholder="Ingrese el nombre del producto" v-model="compra.nombre" />
</td>
<td>
<input type="number" class="form-control" placeholder="Ingrese la cantidad" v-model="compra.cantidad" />
</td>
<td>
<a href="javascript:void(0);" title="Modificar" v-if="validarCompra(compra)" v-on:click="modificar(compra)">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</a>
|
<a href="javascript:void(0);" title="Eliminar" v-on:click="eliminar(compra)">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" placeholder="Ingrese el nombre del producto" v-model="compra_nueva.nombre" />
</td>
<td>
<input type="number" class="form-control" placeholder="Ingrese la cantidad" v-model="compra_nueva.cantidad" />
</td>
<td>
<a href="javascript:void(0);" title="Agregar" v-if="validarCompra(compra_nueva)" v-on:click="agregar()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</template>
Importamos la librería de firebase:
import Firebase from 'firebase'
Y realizamos la configuración para conectar con Firebase:
let config = {
//Datos de configuración
}
let app = Firebase.initializeApp(config);
let db = app.database();
let compras = db.ref('compras');
En primer lugar vamos a detenernos aquí. Los datos de configuración podemos obtenerla de la siguiente forma, dentro de:
https://console.firebase.google.com
Ingresamos a nuestro proyecto y luego: ‘Añade Firebase a tu aplicación web’
Y nos copiamos los datos de configuración:
Copiamos el código y lo pegamos dentro de:
let config = { //Datos de configuración }
Y por último creamos las acciones del componente:
export default {
name: 'App',
firebase: {
compras: compras
},
data(){
return {
compra_nueva: {
nombre: '',
cantidad: ''
}
}
},
methods:{
agregar: function() {
compras.push(this.compra_nueva, function(error){
if (error){
toastr.error('Error al intentar agregar el registro.', 'Aviso');
}else{
toastr.success('Registro agregado correctamente.', 'Aviso');
}
});
this.compra_nueva.nombre = '';
this.compra_nueva.cantidad = '';
},
modificar: function(p_compra){
compras.child(p_compra['.key']).set({
nombre: p_compra.nombre,
cantidad: p_compra.cantidad
}, function(error){
if (error){
toastr.error('Error al intentar modificar el registro.', 'Aviso');
}else{
toastr.success('Registro modificado correctamente.', 'Aviso');
}
});
},
eliminar: function(p_compra){
compras.child(p_compra['.key']).remove(function(error){
if (error){
toastr.error('Error al intentar eliminar el registro.', 'Aviso');
}else{
toastr.success('Registro eliminado correctamente.', 'Aviso');
}
});
},
validarCompra: function(p_compra){
return (
p_compra.nombre.split(' ').join('') != '' &&
!isNaN(parseInt(p_compra.cantidad, 10))
);
}
}
}
Finalmente obtendremos algo cómo esto:
Vamos a repasar nuestro código:
El método agregar() va a crear una nueva compra, enviando el objeto compra_nueva, el cual contiene los datos temporales cada vez que necesitamos crear un registro nuevo. Una vez enviado, limpia sus propiedades y se refresca la lista de compras en tiempo real.
Los métodos modificar() y eliminar() reciben como parámetro la compra a la cual se quiere aplicar la acción:
compras.child(p_compra['.key'])
Se usa set() para modificar el registro y remove() para eliminarlo.
Excelente tutorial, me funciona perfecto.
El código se entiende, muy prolijo.
Felicitaciones
Gracias querido.
Saludos!