GSP643

Descripción general

Hace doce años, Lily fundó la cadena de clínicas veterinarias Pet Theory. Esta 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 Patricio, de TI, y a Rita, una asesora, que diseñaran un sistema basado en la nube que se pueda escalar fácilmente. En este lab, compilarás una app 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í:

Objetivos

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

• Configurar la seguridad de Firestore para automatizar la autorización y autenticación del servidor
• Agregar el Acceso con Google a tu app web
• Configurar tu base de datos para que los usuarios puedan agregar su 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 app web

Requisitos previos

Este es un lab de nivel intermedio, 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:

• Importa datos a una base de datos de Firestore

Asimismo, se requiere cierta destreza en la edición de archivos. Puedes usar tu editor de texto favorito (como nano, vi, etc.) o 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.

Backend de Firebase

Rita le envía un correo electrónico a Patricio:

Rita le envía a Patricio 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:

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

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

Tarea 1: Registra una aplicación de Firebase

Abre una ventana de incógnito y navega a Firebase console.

Cuando se te solicite, ingresa la siguiente información:

• Nombre de usuario:
• Contraseña:

1. Si se te solicita, acepta los Términos y Condiciones de Firebase y haz clic en Continuar.

2. En la página Descripción general del proyecto, haz clic en + Agregar app y, luego, selecciona el ícono de Web.

3. Cuando se te pida completar el campo "Alias de la app", escribe Pet Theory.

4. Marca la casilla junto a Además, configura Firebase Hosting para esta app.

5. En el menú desplegable del sitio, selecciona Crear un sitio nuevo o asegúrate de que coincida con tu ID del proyecto (o como se indica en los detalles del lab).

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

7. En los pasos posteriores (Agrega el SDK de Firebase, Instala Firebase CLI y Realiza la implementación en Firebase Hosting), haz clic en Siguiente o en Ir a la consola para volver al panel principal.

Ya configuraste la aplicación de Firebase.

Prueba la tarea completada

Haz clic en Revisar mi progreso para verificar el objetivo.

Tarea 2: Habilita los productos de Firebase

Firebase Authentication

En Firebase console, configura Firebase Authentication para permitir que los usuarios accedan con Google.

1. En el menú de navegación de la izquierda, haz clic en Authentication (puedes encontrarlo en Accesos directos a proyectos o en Categorías de producto > Seguridad si no está fijado).

2. Si es la primera vez que usas este servicio, haz clic en Comenzar.

3. En la pestaña Método de acceso, selecciona Google en la lista de proveedores.

4. En el diálogo de configuración, haz clic en el botón de activación Habilitar.

5. Selecciona tu correo electrónico de asistencia en el menú desplegable y haz clic en Guardar.

6. Para agregar el dominio personalizado de la autorización, haz clic en la pestaña Configuración en la parte superior de la página Authentication.

7. Selecciona Dominios autorizados en el menú del lado izquierdo del panel de configuración.

8. Haz clic en el botón Agregar un dominio.

9. Ingresa el siguiente dominio (reemplaza PROJECT_ID por el ID de tu proyecto si es necesario):

   {{{ project_0.project_id | PROJECT_ID }}}.web.app

10. Haz clic en el botón Agregar.

Prueba la tarea completada

Haz clic en Revisar mi progreso para verificar el objetivo.

Firebase Firestore

Luego, configura la base de datos de Firestore.

1. En el menú de navegación de la izquierda, en Bases de datos y almacenamiento, haz clic en Firestore.

2. En la página de destino de Cloud Firestore, haz clic en el botón Crear base de datos.

3. En Paso 1: Seleccionar edición, elige Edición Standard y haz clic en Siguiente.

4. En Paso 2: ID y ubicación de la base de datos, selecciona la ubicación adecuada (p. ej., nam5 o acepta el valor predeterminado) y haz clic en Siguiente.

5. En Paso 3: Configurar, selecciona Comenzar en modo de prueba y haz clic en Crear.

6. Una vez que se aprovisione la base de datos, haz clic en la pestaña Reglas.

7. Reemplaza las reglas de seguridad por las siguientes para permitir que los usuarios autenticados lean y escriban sus propios datos:

   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; } } }

Haz clic en Publicar para implementar tus cambios en Firebase.

Ya configuraste Firebase Authentication y Firestore. La configuración del backend está completa.

Firebase en el host local

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, Patricio nunca habilitó Firebase Authentication ni implementó código en Firebase; por eso, le envía un correo electrónico a Rita para pedirle ayuda…

Tarea 3: Clona el repositorio e instala las dependencias

En esta tarea, usarás Cloud Shell y el Editor de Cloud Shell para clonar el código de la aplicación y, luego, instalar los paquetes de Node.js necesarios.

1. En la misma ventana de incógnito que usas para Firebase console, abre una pestaña nueva, navega a la consola de Google Cloud y acepta las Condiciones del Servicio si se te solicita.

2. Haz clic en Activar Cloud Shell en la barra de herramientas de la consola de Google Cloud.

3. En la terminal de Cloud Shell, ejecuta el siguiente comando para copiar los archivos del lab desde el bucket de Cloud Storage:

   gcloud storage cp -r gs://spls/gsp643/pet-theory .

4. Para ver y editar el código, haz clic en el botón Abrir editor en la barra de herramientas de Cloud Shell.

5. En el Editor de Cloud Shell, navega a la carpeta pet-theory/lab02 en el explorador de archivos.

6. Abre una terminal en el Editor de Cloud Shell (o usa la terminal de Cloud Shell existente) y cambia al directorio lab02:

   cd pet-theory/lab02

7. Ejecuta el siguiente comando para instalar los paquetes de Node.js:

   npm install Nota: El entorno de Cloud Shell viene con Node.js y npm preinstalados.

Ya puedes vincular la aplicación al proyecto de Firebase del backend.

Tarea 4: Autoriza el acceso a Firebase

En el IDE, conecta Firebase y, luego, implementa tu aplicación.

1. Escribe el siguiente comando para autorizar el acceso al proyecto de Firebase:

   firebase login --no-localhost

   Nota:

   Firebase intentará autorizar el entorno local para que se conecte con el proyecto de Firebase. Por lo tanto, asegúrate de que la actividad del navegador se realice en una ventana de incógnito para facilitar esta acción con las credenciales adecuadas.

2. Ingresa Y para habilitar las funciones de Gemini en Firebase.

3. Ingresa Y si se te pide autorización para que Firebase recopile información sobre informes de errores y, luego, presiona INTRO.

4. Haz clic en la URL generada para abrir otra pestaña en la misma ventana de incógnito.

5. Selecciona la cuenta de tu lab y haz clic en Permitir.

6. Haz clic en Yes, I just ran this command para continuar.

7. Haz clic en Yes, this is my session ID para confirmar tu ID de sesión.

8. Copia el código de acceso generado, pégalo en el prompt de Cloud Shell Enter authorization code: y, luego, presiona INTRO.

Deberías recibir un resultado similar a este:

Resultado de ejemplo:

Firebase ya está conectado y autorizado. El siguiente paso es inicializar los productos de Firebase que se usarán.

Tarea 5: Inicializa los productos de Firebase

En el IDE, infórmale a Firebase qué productos necesitas.

1. Inicializa un nuevo proyecto de Firebase en tu directorio de trabajo actual:

   firebase init

   Nota:

   Si ejecutas este comando, recibirás instrucciones para configurar el directorio de tu proyecto y tus productos de Firebase. Selecciona las funciones de Firebase CLI que deseas configurar en esta carpeta. Usa las teclas de flecha para desplazarte hacia arriba y abajo en la lista. Usa la BARRA ESPACIADORA para seleccionar la opción del producto.

2. Selecciona los siguientes productos:

   • Firestore
   • Hosting

3. 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

4. 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 el ID de tu proyecto en la lista y, luego, presiona Intro.
   • Presiona N y, luego, INTRO para conservar tu archivo firestore.rules.
   • Presiona N y, luego, INTRO para conservar tu archivo firestore.indexes.json.
   • Presiona INTRO para conservar tu directorio público.
   • Presiona N para inhabilitar las reescrituras en tu archivo index.html y, luego, presiona INTRO.
   • Presiona N cuando se te pregunte si deseas configurar implementaciones y compilaciones automáticas con GitHub, y presiona INTRO.
   • Presiona N cuando se te solicite reemplazar tu archivo 404.html.
   • Presiona N cuando se te solicite reemplazar tu archivo index.html.
   • Presiona Y cuando se te pregunte si quieres instalar habilidades de agentes para Firebase y, luego, presiona INTRO.

   Resultado de ejemplo:

   ✔ Agent skills installation started ✔ Wrote configuration info to firebase.json ✔ Wrote project information to .firebaserc ✔ Wrote .gitignore ✔ Firebase initialization complete!

Se completó la configuración local.

Tarea 6: Realiza la implementación en Firebase

Continúa en Cloud Shell para realizar este paso. Asegúrate de estar en el Editor de código, en la carpeta pet-theory/lab02.

1. Edita firebase.json y actualiza la sección hosting con la clave de site:

   { ... "hosting": { "site": "{{{ project_0.project_id | PROJECT_ID }}}", ... } }

2. Abre la terminal y, luego, implementa tu aplicación de Firebase con el valor de tu ID de sitio, por ejemplo:

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   Resultado:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id| "site" }}}.web.app

3. Haz clic en la URL de Hosting generada (debe ser similar a .web.app) para abrirla en una nueva pestaña de incógnito:

   https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

   Importante:

   No debes autenticarte con credenciales personales en este lab. Usa la cuenta para acceder con Google.

4. Haz clic en el botón Acceder con Google:

   Nota:

   Si ves un error que te 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.

   

   En Chrome, haz clic en el ícono del ojo en el extremo derecho de la pestaña de URL 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.

5. Accede con el nombre de usuario que se te proporcionó (p. ej., ). Se abre la siguiente página:

   

   Una empresa pequeña como Pet Theory no tiene los recursos ni el conjunto de habilidades requerido para realizar esta tarea. En este caso, puede ser beneficioso permitir que los usuarios de la aplicación accedan con sus Cuentas de Google existentes (o de cualquier otro proveedor de identidad).

   Nota:

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

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

Tarea 7: Agrega una página de clientes a tu app web

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

1. Abre el archivo public/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 public/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 de la terminal, ejecuta el siguiente comando:

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   Resultado:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

4. Ve a la pestaña de tu aplicación y ejecuta una actualización forzada de la página usando CMD + MAYÚS + R (macOS) o CTRL + MAYÚS + R (Windows). Si la actualizas de la forma habitual, no se mostrarán los cambios necesarios.

   

5. Inventa un nombre y un número de teléfono para ingresarlos como datos de un cliente:

   Customer name:

   John

   Customer phone:

   98473757454

6. Haz clic en Save profile.

7. Regresa a Firebase console.

8. Haz clic en Compilación > Base de datos de Firestore para ver la información de perfil guardada:

   

9. 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.

¡Fantástico!

Firestore actualiza los clientes (apps web y apps nativas para dispositivos móviles) en tiempo real, sin que el usuario tenga que actualizar ni volver a cargar la página.

¡Felicitaciones!

En este lab, creaste una app web sin servidores sólida 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 y, también, 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.

Próximos pasos y 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.

Última actualización del manual: 31 de mayo de 2026

Prueba más reciente del lab: 31 de mayo de 2026

Copyright 2026 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.