Refactor y referencias de Firebase

Antes de empezar a agregar la funcionalidad de like en nuestra aplicación vamos a ordenar un poco nuestro código. En el componente de LoginView había quedado toda la lógica de Firebase. Movamos eso a otro archivo llamado firebase.js

Ya no vamos a importar firebase de esta manera en nuestro archivo LoginView.js:

import * as firebase from 'firebase';

Sino que lo haremos así, importando nuestro archivo local:

import firebase from './firebase';

Y en ese archivo, debemos mover la lógica de firebase, junto a la parte de auth también:

import * as firebase from "firebase";

const config = {
  apiKey: "AIzaSyDSxlKNdr4GZQjTZVo-8C_IKdHUKCJeHqM",
  authDomain: "platzimusic-57d2c.firebaseapp.com",
  databaseURL: "https://platzimusic-57d2c.firebaseio.com",
  storageBucket: "platzimusic-57d2c.appspot.com",
  messagingSenderId: "637626608564"
}

firebase.initializeApp(config);

export const firebaseAuth = firebase.auth();

export default firebase

Podemos tener tantos exports nombrados (como el caso de firebaseAuth) como queramos, pero sólo un default.

Las variables (o constantes) tienen el mismo nombre por lo que todo debe seguir andando igual. Ya tenemos todo lo relativo a firebase separado en un módulo aparte.

Ahora vamos a pasar a la parte de la base de datos realtime de Firebase. La parte de instalación y configuración de Firebase ya la tenemos lista, así que vamos a aprender cómo estructurar los datos dentro de Firebase. En Firebase no existen arrays como tales, como puede suceder en otras bases de datos como MongoDb

Con firebase.database() podemos obtener una referencia a nuestra base de datos en tiempo real. Así que podemos hacer lo mismo que con firebase.auth() en nuestro archivo de firebase.js pero ahora con database:

export const firebaseDatabase = firebase.database();

En Firebase, para acceder a las “colecciones” o “tablas” de datos o a los mismos objetos guardados en la base de datos debemos definir primero una referencia a cada una de ellos, con un string y luego podemos modificar sus valores o escuchar cambios que sucedan sobre ellos, como en este ejemplo que podemos encontrar en la documentación de Firebase:

var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value', function(snapshot) {
  updateStarCount(postElement, snapshot.val());
});

En el siguiente video de vamos a agregar la funcionalidad para hacer like en cada artista.