Vue.js y Firebase

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í:

https://nodejs.org/es/

Creando nuestra base de datos desde Firebase

Vamos a la siguiente URL:

https://firebase.google.com/

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.

Descargar ejemplo


2 Respuestas a “Vue.js y Firebase”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *