GSP643

Descripción general

En los labs de Google Cloud Run Serverless Workshop, leerás el caso de un negocio ficticio y ayudarás a los personajes con su plan de migración sin servidores.

Hace doce años, Lily fundó la cadena de clínicas veterinarias Pet Theory, la cual se expandió rápidamente durante el último tiempo. Su viejo sistema de citas no puede gestionar el aumento de la carga ni permite que los clientes programen sus propias citas. Por eso, Lily les pidió a Patrick, de TI, y a Ruby, una asesora, que diseñaran un sistema basado en la nube que se pueda escalar fácilmente.

En el lab anterior, Cómo migrar datos a una base de datos de Firestore, aprendiste a usar Firestore para alojar datos de clientes. En este lab, compilarás una aplicación web de Firebase completa que permita que los usuarios registren información y programen citas en tiempo real.

Arquitectura

En este diagrama, se muestra una descripción general de los servicios que usarás y la manera en que se conectan entre sí:

Qué aprenderás

En este lab, aprenderás a hacer lo siguiente:

• Habilitar la API de Firebase en tu proyecto de Google Cloud
• Crear y configurar un proyecto de Firebase
• Configurar la seguridad de Firestore para automatizar la autorización y autenticación del servidor
• Agregar Acceso con Google a tu aplicación web
• Configurar tu base de datos para que los usuarios puedan agregar tu información de contacto
• Explorar e implementar código que permita que los usuarios programen citas
• Explorar actualizaciones en tiempo real de Firebase en tu aplicación web

Requisitos previos

Este es un lab de nivel básico, Lo que supone que el usuario tiene conocimientos previos sobre los entornos de shell y la consola de Cloud. Será útil tener experiencia en Firebase, pero no es obligatorio. Se recomienda que, antes de realizar este lab, hayas completado el siguiente lab en Qwiklabs:

• Cómo importar datos a una base de datos de Firestore

Además, debe sentirse cómodo editando archivos. Puedes usar tu editor de texto favorito (como nano, vi, etc.) o puedes iniciar el editor de código de Cloud Shell, que se encuentra en la cinta superior:

Cuando esté todo listo, desplázate hacia abajo y sigue los pasos que se muestran a continuación para configurar el entorno de tu lab.

Tarea 1. Aprovisiona el entorno de Firebase

Ruby le envía un correo electrónico a Patrick:

Ruby, asesora de software	Hola, Patrick: Hicimos un gran trabajo la semana pasada. Es genial ver que los datos de la clínica se migraron a Firestore. Al parecer, la siguiente tarea es usar Firebase para alojar el sitio web de Pet Theory. Ruby
Patrick, administrador de TI	Hola, Ruby: No estoy familiarizado con Firebase Hosting. ¿Cuáles son los beneficios? ¿Por dónde debería empezar? Patrick
Ruby, asesora de software	Hola, Patrick: El principal beneficio de Firebase Hosting es que es sin servidores; por lo tanto, no se debe administrar ninguna infraestructura. Las reglas de seguridad también están incorporadas en la aplicación, por lo que se pueden restringir los permisos para minimizar los problemas durante el manejo de datos de los clientes. Además, cuenta con un modelo de pago por consumo, lo que significa que Firebase es una plataforma de desarrollo móvil integral para nuestro caso práctico. Ruby
Patrick, administrador de TI	Hola, Ruby: Parece que Firebase facilitará aún más la administración de la infraestructura y la seguridad (una gran parte de mi trabajo). Además, me entusiasma dejar de recibir facturas por servidores inactivos. Patrick

Ruby envía a Patrick un correo electrónico con información general y organizan una reunión para determinar las actividades clave. En la reunión, deciden que él debe hacer lo siguiente:

• Agregar la CLI de Firestore al proyecto de Google Cloud
• Crear una base de datos de Firestore
• Configurar un proyecto de Firebase
• Establecer políticas de seguridad

A continuación, ayuda a Patrick a realizar estas tareas.

Tarea 2. Instala Firebase CLI

Nota: El entorno de desarrollo está preconfigurado con herramientas de Firebase.

1. Copia el vínculo del IDE del panel de detalles del lab y pégalo en una pestaña del navegador nueva para abrir Cloud Code.

2. Abre una terminal para acceder a la línea de comandos. En el panel de la izquierda, haz clic en el menú Application () > Terminal > New terminal.

3. Clona el repositorio de GitHub a partir de la línea de comandos:

git clone https://github.com/rosera/pet-theory.git

4. En el panel izquierdo, haz clic en el ícono de Explorer y, luego, en Open Folder > pet-theory > lab02. Haz clic en OK.

5. Abre una terminal

6. Instala los paquetes de nodo necesarios:

npm i && npm audit fix --force

Resultado:

+ firebase-tools@10.7.0 added 3 packages from 11 contributors, removed 1 package and updated 8 packages in 79.808s

Ahora está todo listo para crear una base de datos de Firestore.

Tarea 3. Configura una base de datos de Firestore

En la terminal, prepara el entorno para usar una base de datos de Firestore.

1. Configura la región de tu proyecto en :

gcloud config set compute/region {{{project_0.default_region|REGION}}}

2. Habilita las aplicaciones de App Engine:

   gcloud app create --region={{{project_0.startup_script.app_region|REGION}}}

3. Crea una base de datos de Firestore:

   gcloud firestore databases create --region={{{project_0.startup_script.app_region|REGION}}}

Ya está todo listo para crear un proyecto de Firestore y vincularlo a tu cuenta de Google Cloud.

Tarea 4. Crea un proyecto de Firebase

Abre Firebase console en una ventana de incógnito.

Nota: En el lab, se incluyen permisos para Firebase. Copia el vínculo de Firebase console para acceder a la plataforma. Utiliza el nombre de usuario y la contraseña proporcionados en el lab para autenticarte en Firebase.

1. Haz clic en el ícono de la cuenta, en la esquina superior derecha de la página, y asegúrate de que estés usando la cuenta de estudiante de Qwiklabs que se te proporcionó para este lab.

2. Luego, haz clic en Agregar proyecto. Cuando se te solicite un nombre de proyecto, usa el ID del proyecto que aparece en el menú desplegable.

3. Acepta las condiciones de Firebase y haz clic en Continuar. Confirma el plan de facturación de pago por uso.

4. Haz clic en Continuar y en la siguiente página inhabilita la opción de Google Analytics para tu proyecto de Firebase.

5. Luego, haz clic en Agregar Firebase. Cuando se te informe que tu proyecto nuevo está listo, haz clic en Continuar:

Prueba la tarea completada

Haz clic en Revisar mi progreso para verificar el objetivo.

Crear un proyecto de Firebase

Tarea 5. Registra tu app

Después de completar el último paso, deberías estar en Firebase console. Si cierras esa página, abre otra pestaña de incógnito y usa el siguiente vínculo a Firebase console.

1. Selecciona el ícono web (que se destaca a continuación) de la lista de íconos “Comienza por agregar Firebase a tu app”:

2. Cuando se te pida completar el campo “Sobrenombre de la app”, escribe Pet Theory.

3. Luego, marca la casilla junto a “Configurar Firebase Hosting para esta app también”.

4. Haz clic en el botón Registrar app.

5. Haz clic en Siguiente > Siguiente > Ir a la consola. Ahora deberías estar en la siguiente página:

Ya configuraste Firebase para el proyecto. A continuación, inicializarás el proyecto para hacer referencia a tu host de Firebase.

Prueba la tarea completada

Haz clic en Revisar mi progreso para verificar el objetivo.

Registrar tu aplicación

Tarea 6. Autentícate en Firebase y realiza la implementación

Usa el IDE para conectarte a Firebase y, luego, implementa tu aplicación. Escribe los comandos en la terminal disponible en el editor.

1. Usa este comando para autenticarte en Firebase:

firebase login --no-localhost

2. Escribe Y si se te pide autorización para que Firebase pueda recopilar información de Error Reporting y, luego, presiona Intro.

3. Copia y pega la URL generada en una nueva pestaña de incógnito del navegador y presiona Intro (hacer clic directamente en el vínculo generará un error).

4. Selecciona tu cuenta de labs y haz clic en Allow. Haz clic en Yes, I just ran this command para proceder y, luego, confirma el ID de tu sesión haciendo clic en Yes, this is my session ID. A continuación, recibirás un código de acceso:

5. Copia el código de acceso y pégalo en el prompt de Cloud Shell Enter authorization code:, y presiona Enter. Deberías recibir un resultado similar al que se muestra a continuación:

Resultado:

✔ Success! Logged in as gcpstaging86673_student@qwiklabs.net

6. Ahora inicializa un nuevo proyecto de Firebase en tu directorio de trabajo actual:

firebase init

Si ejecutas este comando, recibirás instrucciones para configurar el directorio de tu proyecto y tus productos de Firebase.

7. Se te pedirá que selecciones las funciones de Firebase CLI que deseas configurar en esta carpeta. Usa las teclas de flecha y la barra espaciadora para seleccionar Firestore y Hosting. Asegúrate de que tu shell coincida con lo siguiente y, luego, presiona Intro:

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default insta ◉ Firestore: Configure security rules and indexes files for Firestore ◯ Functions: Configure a Cloud Functions directory and its files ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage

8. Luego, ejecuta el resto de los pasos para configurar Firebase:

• Usa la flecha hacia abajo para ir hasta Use an existing project y presiona Intro.
• Selecciona tu ID del proyecto de Qwiklabs en la lista (es el que comienza con "qwiklabs-gcp-") y, luego, presiona Intro.
• Presiona Intro y, luego, N para conservar tu archivo firestore.rules.
• Presiona Intro y, luego, Y para conservar tu archivo firestore.indexes.json.
• Presiona Intro para conservar tu directorio público y, luego, N para inhabilitar las reescrituras en tu archivo /index.html.
• Presiona Intro para configurar implementaciones y compilaciones automáticas con GitHub y presiona N.
• Ingresa N cuando se te solicite reemplazar tu archivo 404.html.
• Ingresa N cuando se le solicite reemplazar tu archivo index.html.

Deberías recibir el siguiente resultado:

✔ Wrote public/404.html ✔ Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebase... i Writing gitignore file to .gitignore... ✔ Firebase initialization complete!

Se completó la configuración local. Ahora, debes completar el paso de autenticación de la base de datos para proporcionar acceso entre los servicios.

Tarea 7. Configura la autenticación y una base de datos

Vuelve a Firebase console para completar este paso.

1. Haz clic en el botón Descripción general del proyecto en el menú de navegación de la izquierda.

2. Selecciona el mosaico Autenticación y, luego, haz clic en Comenzar:

3. Haz clic en Agregar proveedor nuevo y, luego, en el elemento de Google.

4. Haz clic en el botón de activación para habilitar en la esquina superior derecha; para Correo electrónico de asistencia del proyecto, selecciona tu cuenta del lab de la lista desplegable. Ahora, tu página debería verse de la siguiente manera:

5. Después de verificar lo anterior, haz clic en el botón Guardar.

Ya configuraste la autenticación de Firestore. En el siguiente paso, te dedicarás a alojar la aplicación con Firebase.

Prueba la tarea completada

Haz clic en Revisar mi progreso para verificar el objetivo.

Configurar la autenticación y una base de datos

Tarea 8. Situación: configura la aplicación

Ayudaste a Patrick a configurar un entorno de trabajo de Firebase Hosting, en el que un desarrollador web puede implementar su código. Sin embargo, Patrick nunca habilitó Firebase Authentication ni implementó código en Firebase; por eso, le envía un correo electrónico a Ruby para pedirle ayuda…

Patrick, administrador de TI	Hola, Ruby: Gracias por todas las sugerencias. Parece que ya está configurado todo el entorno de Firebase. Mi siguiente tarea es implementar el código de los desarrolladores del sitio web. ¿Podrías explicarme qué implica esto y qué debo hacer a continuación? Patrick
Ruby, asesora	Hola, Patrick: ¡Qué buena noticia! Te enviaré instrucciones para ejecutar la aplicación y agregar las siguientes funciones: Configurar la autenticación web para el acceso Permitir el registro de los detalles de los clientes en la página de perfil Crear un portal de autoservicio para citas Ruby
Patrick, ingeniero de DevOps	Hola, Ruby: Al parecer, el trabajo no será tan sencillo. ¿Eso significa que tendré que hacer cambios estructurales cada vez que quiera agregar algo nuevo? Sin mencionar el tiempo que tendremos que esperar para ver esos cambios… Patrick
Ruby, asesora	Hola, Patrick: Puedes usar las bibliotecas de Firebase para hacer gran parte del trabajo pesado. Para ver las actualizaciones en tu navegador, solo tienes que ejecutar firebase deploy en la línea de comandos. Puedes hacer los cambios, implementarlos y visualizarlos en el sitio web. Ruby
Patrick, administrador de TI	Hola, Ruby: Es reconfortante saber eso. Firebase Hosting me parece cada vez más interesante. :-) Patrick

Ahora que Patrick entiende mejor qué se necesita, lo ayudarás a implementar Pet Theory como una aplicación de Firebase.

Tarea 9. Configura la autenticación de Firestore y agrega acceso a tu app web

Vuelve a la terminal para realizar este paso. Todavía deberías tener tu sesión de línea de comandos abierta de cuando inicializaste Firebase antes.

1. Ejecuta el siguiente comando para generar una lista de las carpetas y los archivos de tu directorio lab02:

ls -1

2. Asegúrate de que tu resultado sea similar al siguiente:

README.md firebase.json firestore.indexes.json firestore.rules node_modules package-lock.json package.json public solution

3. Usa el editor de código para abrir pet-theory/lab02/firestore.rules

rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /customers/{email} { allow read, write: if request.auth.token.email == email; } match /customers/{email}/{document=**} { allow read, write: if request.auth.token.email == email; } } } Nota: La configuración garantizará que el usuario de la base de datos de Firestore solo pueda acceder a sus propios datos. El archivo firestore.rules se usa para proporcionar seguridad a la base de datos de Firestore. Obtén más información sobre la seguridad de las bases de datos en Firestore.

Tarea 10. Implementa tu aplicación

Con todos los cambios que hiciste, ya está todo listo para implementar la aplicación. Asegúrate de que todavía estés en la carpeta pet-theory/lab02.

1. Ejecuta el siguiente comando para implementar tu aplicación de Firebase:

firebase deploy

Resultado:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

2. Copia la URL de Hosting (debería ser similar a [PROJECT-ID].web.app) y ábrela en una pestaña nueva.
3. Haz clic en el botón Acceder con Google:

Nota: Si ves un error en el que se advierte que no se admite el navegador o es posible que se inhabiliten las cookies y los datos de terceros, asegúrate de habilitar las cookies en el navegador. Para hacerlo, haz clic en el ícono del eye en el extremo derecho de la pestaña de URL en Chrome y sigue los vínculos azules de la ventana emergente. Haz clic en el vínculo ¿No funciona el sitio? para actualizar la configuración del navegador y aceptar las cookies.

4. Selecciona tu Cuenta de Google. Se abre la siguiente página:

Nota: Administrar las contraseñas es una tarea difícil y podría implicar un riesgo adicional para tu empresa. Además, los usuarios no quieren crear otro ID de usuario y otra contraseña.

Una empresa pequeña como Pet Theory no tiene los recursos ni el conjunto de habilidades requerido para hacer esto. En esta ocasión, es mucho mejor permitir que los usuarios de la aplicación accedan con sus Cuentas de Google existentes (o de cualquier otro proveedor de identidad).

Ya implementaste el código que permite que los usuarios usen la autenticación de Google para acceder a la aplicación de citas.

Tarea 11: Agrega una página de clientes a tu aplicación web

Vuelve a la terminal y usa el editor para ver los archivos en la carpeta public.

1. Abre el archivo customer.js y copia y pega el siguiente código:

let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); db.collection("customers").doc(user.email).onSnapshot(function(doc) { const cust = doc.data(); if (cust) { document.getElementById('customerName').setAttribute('value', cust.name); document.getElementById('customerPhone').setAttribute('value', cust.phone); } document.getElementById('customerEmail').innerText = user.email; }); } }); document.getElementById('saveProfile').addEventListener('click', function(ev) { const db = firebase.firestore(); var docRef = db.collection('customers').doc(user.email); docRef.set({ name: document.getElementById('customerName').value, email: user.email, phone: document.getElementById('customerPhone').value, }) })

2. Abre el archivo styles.css y pega el siguiente código:

body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } }

3. En la línea de comandos, ejecuta el siguiente comando:

firebase deploy

Resultado:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

4. Ve a la pestaña de tu aplicación y ejecuta una actualización forzada de la página usando CMND+SHIFT+R (Mac) o CTRL+SHIFT+R (Windows). Si la actualizas de la forma habitual, no se mostrarán los cambios necesarios. Ingresa algunos datos de los clientes: inventa un nombre y un número de teléfono, y haz clic en Save profile.

5. Vuelve a la Firebase console y haz clic en Compilación > Base de datos de Firestore para ver la información de perfil guardada:

6. Regresa a la página de la app web y haz clic en el vínculo Appointments. Verás una página en blanco porque todavía no se implementó el código de citas.

Prueba la tarea completada

Haz clic en Revisar mi progreso para verificar el objetivo.

Agregar una página de clientes a tu aplicación web

Tarea 12: Permite que los usuarios programen citas

Diseña la página que permitirá que los usuarios programen citas.

1. Regresa a la pestaña del editor de código. Agregarás código en dos archivos del directorio public.

2. En el menú lateral, selecciona appointments.html y pega el siguiente código:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pet Theory appointments</title> <script src="/__/firebase/6.4.2/firebase-app.js"></script> <script src="/__/firebase/6.4.2/firebase-auth.js"></script> <script src="/__/firebase/6.4.2/firebase-firestore.js"></script> <script src="/__/firebase/init.js"></script> <link type="text/css" rel="stylesheet" href="styles.css" /> </head> <body> <div id="message"> <h2>Scheduled appointments</h2> <div id="appointments"></div> <hr/> <h2>Schedule a new appointment</h2> <select id="timeslots"> <option value="0">Choose time</option> </select> <br><br> <button id="makeAppointment">Schedule</button> </div> <script src="appointments.js"></script> </body> </html>

3. Ahora, abre el archivo appointments.js y pega el siguiente código:

let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); const appColl = db.collection('customers').doc(user.email).collection('appointments'); appColl.orderBy('time').onSnapshot(function(snapshot) { const div = document.getElementById('appointments'); div.innerHTML = ''; snapshot.docs.forEach(appointment => { div.innerHTML += formatDate(appointment.data().time) + '<br/>'; }) if (div.innerHTML == '') { div.innerHTML = 'No appointments scheduled'; } }); } }); const timeslots = document.getElementById('timeslots'); getOpenTimes().forEach(time => { timeslots.add(new Option(formatDate(time), time)); }); document.getElementById('makeAppointment').addEventListener('click', function(ev) { const millis = parseInt(timeslots.selectedOptions[0].value); if (millis > 0) { const db = firebase.firestore(); db.collection('customers').doc(user.email).collection('appointments').add({ time: millis }) timeslots.remove(timeslots.selectedIndex); } }) function getOpenTimes() { const retVal = []; let startDate = new Date(); startDate.setMinutes(0); startDate.setSeconds(0); startDate.setMilliseconds(0); let millis = startDate.getTime(); while (retVal.length < 5) { const hours = Math.floor(Math.random() * 5) + 1; millis += hours * 3600 * 1000; if (isDuringOfficeHours(millis)) { retVal.push(millis); } } return retVal; } function isDuringOfficeHours(millis) { const aDate = new Date(millis); return aDate.getDay() != 0 && aDate.getDay() != 6 && aDate.getHours() >= 9 && aDate.getHours() <= 17; } function formatDate(millis) { const aDate = new Date(millis); const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; return days[aDate.getDay()] + ' ' + aDate.getDate() + ' ' + months[aDate.getMonth()] + ', ' + aDate.getHours() + ':' + (aDate.getMinutes() < 10? '0'+aDate.getMinutes(): aDate.getMinutes()); }

4. Ahora que ya se compilaron tus archivos, visualiza tus cambios. Ejecuta el siguiente comando en Cloud Shell para implementar tu aplicación:

firebase deploy

Resultado:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

5. Actualiza la pestaña de la aplicación web, en la que antes obtuviste la página en blanco. Ahora, programa algunas citas.

6. Ahora ve a Firebase console, haz clic en Compilación > Base de datos de Firestore y selecciona la colección appointments que acabas de crear en tu usuario.

7. Deberías ver una colección de códigos de citas similar a esta:

Tarea 13: Visualiza actualizaciones de Firestore en tiempo real

Firestore es una base de datos en tiempo real. Agrega actualizaciones en tiempo real a la aplicación para aprovechar esta característica.

1. Abre una nueva pestaña del navegador y redirecciónala a [ID DE PROYECTO].web.app. Luego, usa el botón de Google para acceder y haz clic en Appointments.

2. Coloca las dos pestañas del navegador en paralelo. En la primera ventana del navegador, programa una nueva cita.

3. Ahora, observa la otra pestaña del navegador. Deberías ver que la cita se agregó automáticamente sin tener que actualizar:

¡Fantástico! Firestore actualiza clientes (aplicaciones web y nativas para dispositivos móviles) en tiempo real, sin que el usuario tenga que actualizar o volver a cargar la página.

4. Ve a Firebase console, haz clic en la pestaña Datos de Cloud Firestore y edita los datos. Incluso puedes borrar la colección appointments en tu registro de usuario. Ambas ventanas se seguirán actualizando en tiempo real.

¡Felicitaciones!

En este lab, creaste una aplicación web sin servidores robusta con Firebase. Después de crear y configurar un proyecto de Firebase, agregaste seguridad de Firestore para automatizar la autorización y autenticación del servidor. Luego, agregaste Acceso con Google a tu aplicación web y configuraste tu base de datos para que los usuarios puedan agregar información de contacto y citas. Por último, exploraste e implementaste código que permite que los usuarios programen citas y visualizaste actualizaciones en tiempo real de Firebase en tu app web. Ahora está todo listo para que realices otros labs de esta ruta de aprendizaje.

Finaliza la Quest

Este lab de autoaprendizaje forma parte de las Quests Google Cloud Run Serverless Workshop y Build Apps & Website with Firebase. Una Quest es una serie de labs relacionados que forman una ruta de aprendizaje. Si completas esta Quest, obtendrás una insignia como reconocimiento por tu logro. Puedes hacer públicas tus insignias y agregar vínculos a ellas en tu currículum en línea o en tus cuentas de redes sociales. Inscríbete en cualquier Quest que contenga este lab y obtén un crédito inmediato de finalización. Consulta el catálogo de Google Cloud Skills Boost para ver todas las Quests disponibles.

Realiza tu próximo lab

Continúa tu Quest con el siguiente lab de la serie, Cómo usar Cloud Run para compilar una aplicación sin servidores que crea archivos PDF o Cómo implementar un sitio web de Hugo con una canalización de Cloud Build y Firebase.

Próximos pasos/Más información

Google Cloud: ¿Qué es el procesamiento sin servidores?

Capacitación y certificación de Google Cloud

Recibe la formación que necesitas para aprovechar al máximo las tecnologías de Google Cloud. Nuestras clases incluyen habilidades técnicas y recomendaciones para ayudarte a avanzar rápidamente y a seguir aprendiendo. Para que puedas realizar nuestros cursos cuando más te convenga, ofrecemos distintos tipos de capacitación de nivel básico a avanzado: a pedido, presenciales y virtuales. Las certificaciones te ayudan a validar y demostrar tus habilidades y tu conocimiento técnico respecto a las tecnologías de Google Cloud.

Actualización más reciente del manual: 28 de septiembre de 2023

Prueba más reciente del lab: 28 de septiembre de 2023

Copyright 2024 Google LLC. All rights reserved. Google y el logotipo de Google son marcas de Google LLC. Los demás nombres de productos y empresas pueden ser marcas de las respectivas empresas a las que estén asociados.