Guía 10: Firebase: Realtime Database y SDK

Objetivo específico

Integrar Firebase Realtime Database utilizando su SDK para el almacenamiento y recuperación de datos en tiempo real desde una landing page desarrollada con JavaScript y TailwindCSS, permitiendo una experiencia de usuario dinámica e interactiva.

Actividades previas

Firebase: Proyecto

1. Acceda a Firebase con su cuenta personal de Google.

2. En Firebase Console, cree el proyecto landing. No es necesario configurar Google Analytics para este proyecto.

3. Utilice un cliente de IAG para explicar los servicios, y sus casos prácticos de uso, que ofrece Firebase.

Ambiente de desarrollo

1. Acceda a su proyecto landing en Codespaces o en su máquina local.

2. Cree y utilice la(s) rama(s) de desarrollo.

3. Instale los paquetes y levante el servidor, con:

   npm install
   npm run dev
   

Actividades en clases

HTML

1. En el documento index.html, agregue una sección registrar el voto por un producto y mostrar el resultado de la votación.

   Ver el código

   <section class="bg-slate-50 dark:bg-gray-900"> ... </section>
   
   <section class="flex flex-col items-center justify-center bg-white py-8">
       <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
          <h2 class="text-2xl font-bold mb-6 text-center text-gray-800">Vota por tu producto preferido</h2>
   
          <div class="mb-6">
          <form id="form_voting" class="relative flex items-center">
             <select id="select_product"
                class="block appearance-none w-full bg-white border border-gray-300 text-gray-700 py-3 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <option value="" disabled selected>Seleccione un producto</option>
                <option value="product1">Producto 1</option>
                <option value="product2">Producto 2</option>
                <option value="product3">Producto 3</option>
             </select>
             <button
                class="ml-4 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                VOTAR
             </button>
          </form>
          </div>
   
          <div id="results" class="border border-gray-300 rounded-lg h-52 w-full p-2 bg-gray-50">
             <p class="text-gray-500 text-center mt-16">Resultado de la votación</p>
          </div>
       </div>
   </section>
   
   <div id="toast-interactive" ... > </div>
   

Firebase: App - web

1. En su proyecto de Firebase:

   1. Junto a Project Overview, despliegue el menú de configuración del proyecto y escoja Project settings.

   2. En la pestaña General, desplácese hasta la sección Your apps.

   3. Haga clic en el ícono de elemento HTML para crear una web app.

2. En la ventana modal Add Firebase to your web app

   1. Ingrese un nombre para su aplicación web y haga clic en Register app.

   2. En Add Firebase SDK, seleccione la opción Use a <script> tag y copie la configuración para establecer la conexión con Firebase.

   const firebaseConfig = {
     apiKey: "API_KEY",
     authDomain: "PROJECT_ID.firebaseapp.com",
     projectId: "PROJECT_ID",
     storageBucket: "PROJECT_ID.firebasestorage.app",
     messagingSenderId: "SENDER_ID",
     appId: "APP_ID",
   };
   

3. Con un cliente de IAG, explique cómo se utiliza el objeto de configuración de Firebase en la inicialización de la aplicación web y en la conexión con los servicios con Vanilla Javascript.

Realtime Database

1. Dentro de su proyecto en Firebase, acceda a la categoría de productos Build, en la opción Realtime Database.

2. Cree una base de datos en tiempo real seleccionando Create Database.

   1. Seleccione la ubicación de la base de datos, preferiblemente la más cercana a su usuario final.

   2. En Security rules, elija Start in Test Mode para permitir el acceso sin restricciones durante el desarrollo inicial.

   Atención

   Nota de seguridad: El modo de prueba permite que cualquier persona pueda leer y escribir en la base de datos sin autenticación. Esto es útil para pruebas, pero asegúrese de cambiar a un modo más seguro antes de desplegar su aplicación en producción.

3. Utilice una cliente de IAG para explicar cómo se estructura la base de datos en tiempo real de Firebase.

.env

1. En la raíz de su proyecto, cree un archivo llamado .env.

2. En este archivo, agregue las siguiente variables de entorno y pegue los valores correspondientes de la configuración de Firebase que copió anteriormente:

   VITE_FIREBASE_API_KEY="API_KEY"
   VITE_FIREBASE_AUTH_DOMAIN="PROJECT_ID.firebaseapp.com"
   VITE_FIREBASE_PROJECT_ID="PROJECT_ID"
   VITE_FIREBASE_STORAGE_BUCKET="PROJECT_ID.firebasestorage.app"
   VITE_FIREBASE_MESSAGING_SENDER_ID="SENDER_ID"
   VITE_FIREBASE_APP_ID="APP_ID"
   

3. Asegúrese de que el archivo .env esté incluido en su archivo .gitignore para evitar subirlo al repositorio.

   ...
   
   # Firebase environment variables
   .env
   

   Atención

   Al versionar, omita el archivo .env en el versionamiento local y remoto, para evitar exponer las credenciales de Firebase.

4. Con un cliente de IAG, explique la importancia de las variables de entorno para mantener la seguridad de las credenciales de Firebase y cómo se utilizan en el código en Vite.

JS: Conexión a Firebase

JavaScript en tu proyecto web en Agrega Firebase al proyecto de JavaScript.

1. Cree el documento javascript js/firebase.js, agregue el siguiente código:

   1. Desde el CDN, importe la última versión(firebase@x.y.z) de las funciones de Firebase para inicializar la aplicación (initializeApp), acceder a la base de datos en tiempo real (getDatabase, ref), crear datos (set, push) y obtener datos (get y child) .

      import { initializeApp } from "https://www.gstatic.com/firebasejs/x.y.z/firebase-app.js";
      import { getDatabase, ref, set, push, get, child } from "https://www.gstatic.com/firebasejs/x.y.z/firebase-database.js";
      

   2. Utilice las variables de entorno definidas en el archivo .env para configurar la conexión a Firebase, considerando que utiliza Vite como herramienta de construcción.

      ...
      
      const firebaseConfig = {
        apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
        ...,
        appId: import.meta.env.VITE_FIREBASE_APP_ID,
      };
      

   3. Inicialice la aplicación Firebase utilizando el objeto de configuración importado desde las variables de entorno.

      const firebaseConfig = { ... };
      
      const app = initializeApp(firebaseConfig);
      

   4. Obtenga una referencia a la base de datos en tiempo real de Firebase asociada con la aplicación.

      const app = ...;
      
      const database = getDatabase(app);
      

   5. Aún no exporte las funciones.

2. Con un cliente de IAG, explique cómo se utiliza el SDK de Firebase para enviar datos a la base de datos en tiempo real.

JS: Guardar votos en Firebase

1. En el documento javascript js/firebase.js, implemente el siguiente código:

   1. Define una función flecha saveVote, que reciba un parámetro productID.

   2. Dentro de la función, tome como referencia la documentación de Operaciones básicas de escritura:

      1. Obtenga una referencia a la colección votes de la base de datos, con la función ref().

      2. Crea una nueva referencia para un usuario utilizando la función push().

      3. Guarda los datos (productID y la fecha actual) en la base de datos con la función set().

      4. Maneje el resultado de la función set() como una promesa, devuelva un objeto con un estado y un mesaje de éxito o de error.

   3. Exporta la función saveVote para que pueda ser utilizada en otros archivos.

2. Con un cliente de IAG, explique cómo se utiliza el SDK de Firebase para realizar las operaciones CRUD (Create, Read, Update, Delete).

JS: Enviar datos desde un formulario

En el documento js/file01.js.

1. Importe la función saveVote desde js/firebase.js.

2. Implemente la siguiente funcionalidad:

   1. Defina la función flecha enableForm (antes de la función de autoejecución).

   2. Dentro de la función flecha, obtenga una referencia al formulario HTML con el identificador 'form_voting'.

   3. Con la referencia al formulario, utilice addEventListener para el evento 'submit' y un listener que:

      1. Use el evento del callback para prevenir el comportamiento por defecto del formulario. Use el método preventDefault.

      2. Obtenga la referencia al elemento con identificador 'select_product' y extraiga el valor mediante el atributo value.

      3. Llame a la función saveVote con el valor obtenido del campo de texto. Maneje la promesa y muestre el resultado con un mensaje de alerta.

   4. Invoque la función enableForm en la función de autoejecución.

3. En el navegador, verifique que al enviar el formulario se guarden los votos en Firebase y que se muestre un mensaje de éxito o error.

4. Con un cliente de IAG, explique cómo se maneja la interacción entre el JavaScript y la interfaz de usuario, y cómo se envían los datos a Firebase.

JS: Obtener votos en Firebase

1. Modifique el código del archivo js/firebase.js, de acuerdo con las siguientes especificaciones:

   1. Defina getVotes y asigne una función flecha asíncrona.

   2. Dentro de la función, tome como referencia la documentación de Lee los datos una sola vez:

      1. Obtenga una referencia a la colección votes de la base de datos, con la función ref().

      2. Utilice la función get para esperar por los datos de la colección.

      3. Si existen datos, retorne un objeto con el estado y los datos obtenidos, con la función val(). De lo contrario, retorne un objeto con un estado y un mensaje indicando que no hay datos.

   3. Exporte la función getVotes para que pueda ser utilizada en otros archivos.

3. Con un cliente de IAG, explique cómo se utiliza el SDK de Firebase para obtener datos de la base de datos.

JS: Mostrar datos en una tabla

En el documento js/file01.js.

1. Importe la función getVotes desde js/firebase.js.

2. Implemente la siguiente funcionalidad:

   1. Defina displayVotes y asigne una función flecha asíncrona.

   2. Dentro de la función, use la función getVotes y espere por los votos.

   3. Itere sobre los votos obtenidos y cree una tabla donde cada fila represente un voto. En cada fila, muestre el producto votado y el total de votos.

   4. Inserte la tabla en el elemento HTML con el identificador results.

   5. Invoque la función displayVotes en la función de autoejecución.

3. En el navegador, verifique que al cargar la página se muestren los votos almacenados en Firebase en una tabla.

Versionamiento

1. Versione local y remotamente la(s) rama(s) de desarrollo en el repositorio landing.

2. Genere la(s) solicitud(es) de cambios (pull request) para la rama principal y apruebe los cambios.

Vercel

Atención

Agregue las variables de entorno con el nombre y valor que aparecen en el archivo .env.

1. Verifique el despliegue continuo (CD) del proyecto en Vercel.

Conclusiones

Preguntas de cierre

• ¿Qué desafíos conceptuales encontraste al interpretar el código generado por IA para integrar Firebase en tu landing page?

• ¿Qué modificaciones realizaste al código sugerido por la IA para adaptarlo a los requerimientos específicos de tu landing page?

• ¿Cómo aseguras que el uso de IA en la implementación de Firebase no sustituya tu comprensión del flujo de datos ni tu responsabilidad en el manejo seguro de la información del usuario?

Actividades autónomas

Recursos extras

En redes:

🔥 #Firebase está preparando un nuevo SDK para JavaScript que hará la librería más ligera y traerá cambios importantes que nos harán refactorizar nuestras apps si queremos aprovechas sus ventajas.

🧵 Te las cuento en el hilo 👇 pic.twitter.com/oJHLopDw1J

— Carlos Azaustre 💻 (@carlosazaustre) July 30, 2021