Menu

Conectando tu App en Vue a Firebase

vue - October 20, 2018 por Carlos Rojas | Edita este Post.
Vue CLI3.2 .1

Cuando estes desarrollando tu App con Vue te vas a dar cuenta que necesitaras tareas comunes como Autenticar Usuarios, Almacenar info y Almacenar imagenes para estas tareas tenemos Firebase el cual es un PaSS que es muy facil de integrar.

¿ Que es Firebase ?

Firebase es una plataforma de soluciones en la Web que viene a reemplazar el desarrollo de servicios en el Servidor. Entre las cosas que podremos hacer en Firebase están: Autenticar usuarios, Almacenar información de nuestra App en una base de datos en Tiempo Real, Almacenar imagenes y videos de nuestros Usuarios, Realizar operaciones de computing entre nuestros Servicios, entre otras.

Paso 1: Instalando lo necesario.

Para comenzar nuestro primer proyecto en Vue vamos a utilizar el CLI oficial que podemos encontrar en cli.vuejs.org.

$npm install -g @vue/cli

Adicionalmente, voy a instalar el cli-service-global que es necesario si quiero correr un servidor local.

$npm install -g @vue/cli-service-global

una vez tenga todo listo podemos verificar con:

$vue --version

Paso 2: Crear un Proyecto nuevo.

El CLI me ayudara a crear toda la estructura necesaria para iniciar my proyecto en Vue.

$vue create vue-firebase

con esto tendremos todos los archivos necesarios para comenzar nuestro proyecto.

Paso 3: Agregar Firebase al proyecto.

$npm install firebase vuefire --save

Una vez termine de agregar las dependencias debemos abrir el archivo main.js y decirle a Vue que vamos a usar VueFire.

import Vue from 'vue'
import App from './App.vue'
import VueFire  from 'vuefire';

// explicit installation is required in a module environment
Vue.use(VueFire);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Paso 4: Conectar nuestra App con Firebase.

En este tutorial asumimos que ya tienes una cuenta en Firebase y ya has creado un Proyecto nuevo. Tambien que sabes donde encontrar la información para inicializar el App (Si No. Puedes ver este link).

Ahora voy a crear un archivo firebase.js e inicializar nuestra App con Firebase.

import Firebase from 'firebase/firebase';

let config = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  storageBucket: "...",
  messagingSenderId: "..."
};

const app = Firebase.initializeApp(config);

export const db = app.database();

Ahora con esto actualizamos nuestro archivo main.js para agregarle la inicialización que necesitamos.

import './firebase';

import Vue from 'vue'
import App from './App.vue'
import VueFire  from 'vuefire';

Paso 5: Conectar nuestra App con Firebase.

Ahora en nuestro proyecto de Firebase vamos al Database y creamos un Realtime Database que vamos a provisionar de la siguiente manera.

Con esto tenemos algunos datos a mostrar en nuestra App.

Paso 6: Usando una directiva y trayendo la info.

Por ultimo tenemos que entrar a nuestro archivo App.vue y agregar el firebase.js y obtener la info de los datos con nuestra refencia a todos

import HelloWorld from './components/HelloWorld.vue';

import {db} from './firebase';

export default {
  name: 'app',
  firebase: {
    items:  db.ref('todos')
  },
  components: {
    HelloWorld
  }
}

Una vez hecho esto tendremos la lista de elementos que se encuentran en ese nodo y desde el template en App.vue vamos a imprimirlos.

  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <ul>
      <li v-for="item in items" :key="item.id">
         - 
      </li>
    </ul>
  </div>

notese que hemos utilizado la directiva v-for la cual nos va a permitir facilmente iterar sobre esa colección.

Eso es todo por ahora y espero que sea de ayuda :)

Ver código

Recuerda:

Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

esto es para descargar todas las dependencias del proyecto.

¡Compártelo!