 |
| Figura 1. Portada del post |
Migrando de la versión 8 a la 9 de Firebase.
Firebase es
una plataforma para el desarrollo de aplicaciones web y aplicaciones
móviles lanzada en 2011 y adquirida por Google en 2014
Es una plataforma ubicada en la nube,
integrada con Google Cloud Platform, que usa un conjunto de herramientas
para la creación y sincronización de proyectos que serán dotados de alta
calidad, haciendo posible el crecimiento del número de usuarios y dando
resultado también a la obtención de una mayor monetización.
Cuando creamos un nuevo proyecto con
algún Framework de JavaScript como Vue.js, React, etc y queremos usar los
servicios de Firebase como Backend, a día de hoy disponemos de dos SDK (Software
Development Kit) o Kit de Desarrollo de Software, estos son la versión 8 y la
9.
La versión 8 fue lanzada el 26 de
Octubre de 2020, las sucesivas mejoras se fueron implementando y en
aproximadamente un año de lanzó la versión 9 el 25 de agosto de 2021.
La versión 9 introdujo una nueva API
modular, que permite la modificación del árbol y la reducción del tamaño del
paquete entre otras ventajas. En pocas palabras la principal ventaja es que en
la versión 9 se han “modularizado” los servicios, de forma que no necesitas descargar
todo el paquete si, por ejemplo solo vas a usar la autentificación y la base de
datos de datos en tiempo real Firestore, pues simplemente descargas los módulos
de esos dos servicios obviando el resto de paquetes, así se consigue un mejor
Bounce de la aplicación.
A fecha de esta entrada del blog, se
siguen utilizando ambas versiones del SDK, pero los usuarios de la versión 8
tendrán que actualizar su código si quieren que siga funcionando con la versión
9 y superiores.
Google ha proporcionado un paquete “compat”
para facilitar la migración, que veremos en esta entrada del blog y también
veremos cómo empezar de cero con la versión 9.
Motivo
de esta pequeña guía
Si ya tienes experiencia trabajando
con distintas versiones de Firebase y diferentes Frameworks, probablemente ya
sepas cómo migrar de tecnología, refactorizar tu código para adaptarlo a los
cambios y mejoras, leer y entender en la documentación estos cambios, etc. El
problema suele surgir cuando estás aprendiendo una nueva tecnología y aunque ya
sepas programar eres un poco noobie.
Imaginemos que estás aprendiendo Vuejs
y quieres construir tu primera App usando Firebase, como backend. Lo más probable
es que busques algún buen curso o tutorial, en alguna plataforma como Udemy o
incluso en YouTube, y es aquí cuando la cosa se empieza a enredar. Puede
ocurrir y de hecho ocurre, que el curso o turorial, no tenga ni un un año, pero
el creador del curso estuviera trabajando con el SDK 8 de Firebase, miestras
que tú, tal vez sin ni siquiera saberlo hayas instalado la versión 9, o
viceversa y es aquí cuando, si eres nuevo las cosas se empiezan a complicar ya
que aunque tu código puede estar bien escrito, no funciona y no entiendes muy
bien por qué. Tú estás centrado en aprender tu nuevo Framework y has
configurado el Servicio de Firebase como
te han indicado en tu curso pero no va¡ y es algo muy frustrante.
Por otro lado, en mi opinión,
enfrentar este tipo de problemas es muy bueno para tu aprendizaje, ya que si en
vez de frustrarte, investigas qué demonios está ocurriendo, es cuando de verdad
empiezas a aprender, a tomar conciencia de cómo son las cosas y lo más
importante a resolver los problemas por ti mismo leyendo documentación e
investigando a fondo la tecnología que estás aprendiendo. Y que nadie te
engañe, en este mundo de la tecnología todos hemos sido nuevos, todos hemos
copiado y pegagado código de Stack Overflow y todos nos hemos sentido frustrados
al no entender por qué no compilaba un código después de revisarlo un millón de
veces hasta las 4 de la madrugada.
Vue
js
Los ejemplos ficticios que voy a
mostrar son de Vuejs, aunque salvo pequeñas diferencias son válidos para el
framework en el que trabajes, REACT, ANGULAR… Claro está deberás investigar
cuales son los matices de tu framework a la hora de trabajar con Firebase.
No voy a tratar el tema de cómo empezar
de cero con Firebase 8, porque no tiene sentido, si vas a empeza una nueva App
de cero que trabaje con Firebase, debes empezar directamente con la última
versión estable, en nuestro caso y a día de hoy Firebase 9. Lo que si haré es tratar el asuto cómo haer
compatible un código basado en el SDK 8 para que pueda funcionar con el SDK 9,
e intentaré tratar los casos de la forma más ordenda posible, recuerda estoy
trabajando con Vue js 3.
CREANDO UN PROYECTO VUE 3 FIREBASE 9
Creando el proyecto en la consola
En una entrada anterior vimos cómo
crear un proyecto Vue js con CLI, imaginemos que ya tenemos nuestro proyecto
creado y hemos implementado una navegación con todo lo necesario para poder
registrarnos, logearnos y deslogearnos y ya estamos en el punto de necesitar el
servicio de autentificación de firebase.
Bién pues lo primero que tenemos que hacer es crear un nuevo proyecto en la plataforma para posteriormente registrar nuestra pequeña App
 |
| Figura 2. Creando un nuevo proyecto en la consola de Firebase |
Le damos un nombre a nuestro proyecto,
en este caso ficcticio es Pets
 |
| Figura 3. Dando nombre al proyecto |
Para el ejemplo no vamos a necesitar
Google Analithics, así que no lo activaríamos, en cualquier caso esto es algo
que podemos hacer posteriormente si lo necesitamos:
 |
| Figura 4. Habilitar i no Analytics |
Se crea el proyecto, se nos indica que agregemos Firebase a nuestra App, le indicaremos la tecnología que vamos a usar en este caso web:
 |
| Figura 4. Tecnología web |
Le daremos el sobrenombre a la
app, en este caso la llamo igual, pets. No voy a poner en producción esta app
de momento así no configuro el hosting.
Ya solo queda registrar la aplicación.
Elección del SDK (La versión de
Firebase)
Si leemos bien la pantalla que se
nos muestra para agregar Firebase a nuestra app, veremos que si usamos npm (o
yarn) se nos instalará la versión más reciente de Firebase el sdk v9:
 |
| Figura 5. Configuración del proyecto |
Entonces, siguiendo las
indicaciones iremos a la consola de nuestro VSCode o la que usemos e Instalaremos firebase SDK 9 en la app , Para ello nos situaremos con la consola
en la raíz del proyecto y lanzaremos el comando:
npm i firebase
En la carpeta raíz del proyecto creo un nuevo archivo que llamaré firebase.js
 |
| Figura 6. Archivo firebase.js en la raíz del proyecto |
Este nuevo archivo que hemos
creado Firebase.js, es el archivo de configuración de Firebase en nuestra App,
en el pegaremos la configuración que se
nos ha mostrado en la web de Firebase cuando hemos creado el proyecto:
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
Resaltado en violeta, podemos ver
cómo por defecto, se nos muestra un mensaje indicándonos que podemos empezar a
añadir los módulos del SDK que necesitemos usar y nos da una URL a la
documentación donde podremos ver ejemplos de uso.
Volviendo a nuestro caso,
quedamos en que íbamos a necesitar el servicio de autentificación de Firebase,
así que en nuestro archivo de configuración importaremos el módulo correspondiente
“getAuth”, además vamosa importar dos módulos más, getFirestore y getStorage,
que son los correspondientes a la base de datos en tiempo real y al
almacenamiento, respectivamente. Si por ejemplo de momento no vamos a usar
Storge “getStorage” lo podemos dejar comentado de forma que no aumente el peso
de la app, hasta que lo neesitemos, puedes ver ls importaciones de estos
módulos remarcados en Violeta:
Luego tendríamos la configuración
en sí, de nuestro proyecto Firebase, que se nos ha dado al crear el proyecto en
la web (en naranja).
Por último, guardaríamos en
constantes los módulos que heoms importado de Firebase, para poder exportarlos,
de modo que estén disponibles desde cualquier punto de la APP (en verde)
import { initializeApp } from "firebase/app";
//Importo más funciones del SDK 9
import
{ getAuth } from "firebase/auth";
// Your web app's Firebase configuration
const firebaseConfig
= {
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app)
const db = getFirestore(app)
Una vez tengo configurado mi
servicio de Firebase, y exportados los módulos que quiero usar. Puedo hacer uso
de las funciones de que cada uno de estos módulos dispone.
Este es un concepto muy
importante que se debe entender y que supone la principal diferencia entre la
versión 8 y la 9 del SDK de firebase.
Por ejemplo hablando de
autentificación, con la versión 8 al haber exportado el módulo getAuth en la
constante auth, teníamos todos los métodos de este módulo disponibles solo con
llamar a esa constate auth desde cualquier archivo de la App, sin embargo con
la versión 9, además de llamar a esa constate auth, deberemos invocar los
métodos contenidos en ese módulo que quramos utilizar, veamos un eejemplo:
Imaginemos que quiero usar los
métodos SignInWithEmailAndPassword, createUserWithEmailAndPassword
y signOut,
que són tres métodosque me
permiten hacer login con user y pasword, crear un nuevo usuario y hacer logout
respectiamente. Antes con el SDK 8 PODÍA INVOCARLOS DIRECTMENTE DESDE
CUALQUIER ARCHIVO, Ahora con el SDK 9 no, para poder usarlos deberé importar en
el archivo no solo la constante auth (que gardaba el módulo getAuth) sino los
métodos porpios de getAuth que quiero usar:
·
Módulo getAuth (en verde)
·
Métodos de getAuth (en naranja)
import { auth } from "../firebase.js"
import { SignInWithEmailAndPassword,
Por supuesto en la zona donde se
deba hacer la importción en función del framework que uses, en el caso de Vue
se hace en el apartado script al principio del todo (en azul)
</template>
<script>
import { auth } from "../firebase.js"
import { SignInWithEmailAndPassword,
export default {
setup() {},
</script>
<style>
//Código…
</style>
COMO USAR LOS MÉTODOS
DE CADA MÓDULO
Supongamos que ya tenemos importados los métodos necesarios
para crear una acción asíncrona, en Vuex que acometa una mutación del estado
para crear un nuevo usuario, imaginemos que es una acción que recibe como
payload, desde una vista, el nombre el password y el email de un usuario nuevo:
await updateProfile(auth.currentUser, {
})
commit("setUser", auth.currentUser)
Como se puede ver remarcado en naranja, estamos usando el
método createUsrWithEmailAndPassword, al que, además del payload hay
que pasarle el módulo auth, para que ese método pueda
funcionar y hacer su trabajo.
Por supuesto los métodos de cada módulo y su sintaxis están
explicados en la documentación, pero deberás buscar en la documentación del SDK
con el que est´s trabajando 8 o 9.
HACIENDO COMPATIBLE
UNA APP VUE 3 CREDA BAJO EL SDK 8 CON EL
SDK 9
Si tu caso es que la App ya funciona con el código basado en
el SDK 8 PERO NECESITAS HACERL COMPATIBLE CON EL SDK 9 y no refactorizar todo
el código, tienes la opción de configurar Firebase del siguiente modo:
Archivo Firebase.js
Donde la clave es
añadir la palabara compat a las importaciones (en violeta)
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export const db = firebase.firestore();
No hay comentarios:
Publicar un comentario