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 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í:

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 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 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:

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

Además, debe sentirse a gusto 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.

Backend de Firebase

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

Rita, asesora de software	Hola, Patricio: 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. Rita
Patricio, administrador de TI	Hola, Rita: No estoy familiarizado con Firebase Hosting. ¿Cuáles son los beneficios? ¿Por dónde debería empezar? Patricio
Rita, asesora de software	Hola, Patricio: 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. Rita
Patricio, administrador de TI	Hola, Rita: 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. Patricio

Rita 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 para acceder a la URL de Firebase console.

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

• nombre de usuario como
• contraseña como

Nota:
Se aprovisionó un proyecto de Firebase etiquetado como . Selecciona este proyecto para acceder a los productos de Firebase y sigue este instructivo.

En la pantalla Descripción general del proyecto de Firebase, ingresa los siguientes comandos:

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.

   Pet Theory

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

4. Haz clic en el menú desplegable de implementación y selecciona Crear un sitio nuevo.

5. Modifica el valor predeterminado para incluir el prefijo del estudiante.

   student-bucket-{{{ project_0.project_id | "PREFIX" }}}-1 Nota:
   Asegúrate de que el menú desplegable del sitio contenga student-bucket--1 antes de continuar. El dominio del sitio se basará en este parámetro de configuración.

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

7. Haz clic en Siguiente > Siguiente > Ir a la consola.

   Nota:
   Cambiar el dominio predeterminado del sitio de Firebase requerirá cambios en el entorno local.
   Específicamente, debemos hacer lo siguiente:
   1. Actualiza firebase.json para incluir el ID de sitio personalizado. Configura objetivos de implementación para tus sitios
   2. Usa el ID del sitio cuando uses el comando firebase deploy --only hosting:student-bucket--1.

Ya configuraste la aplicación de Firebase.

Prueba la tarea completada

Haz clic en Revisar mi progreso para verificar el objetivo.

Registrar tu app de Firebase

Tarea 2. Habilita los productos de Firebase

Firebase Authentication

En Firebase console, configuraremos Firebase Authentication.

1. Haz clic en el botón desplegable Compilación en el panel de navegación de la izquierda.

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

3. Haz clic en la pestaña Método de acceso 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.

   {{{ user_0.username | "USERNAME" }}}

   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.

   Nota:
   Cuando uses un dominio personalizado con Firebase, también deberás modificar la configuración de Dominios autorizados.

6. Haz clic en la pestaña Configuración.

7. En el encabezado Dominios, haz clic en el elemento de menú Dominios autorizados.

   Ahora, tu página debería verse de la siguiente manera:

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

9. Ingresa el siguiente dominio:

   student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.web.app Nota:
   Agregar el dominio personalizado permitirá que el flujo de OAuth de Firebase funcione correctamente.

10. Haz clic en el botón Agregar.

Prueba la tarea completada

Haz clic en Revisar mi progreso para verificar el objetivo.

Configurar Firebase Authentication

Firebase Firestore

En Firebase console, configuraremos Firebase Authentication.

1. Haz clic en el botón desplegable Compilación en el panel de navegación de la izquierda.

2. Selecciona la tarjeta Base de datos de Firestore y, luego, haz clic en Crear base de datos:

3. Acepta la configuración predeterminada y haz clic en Siguiente.

4. Haz clic en Crear para aprovisionar Cloud Firestore.

5. Haz clic en la pestaña Reglas.

   Nota:
   Queremos actualizar las reglas de seguridad de la base de datos de Firestore para usar la autenticación. En las reglas nuevas, permitimos la lectura y escritura en la base de datos si el usuario está autenticado.

6. Actualiza las reglas de la siguiente manera:

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

Ya configuraste Firebase Authentication y Firestore con un identificador de sitio personalizado. Se completó la configuración del backend.

Firebase Localhost

Ayudaste a Patricio a configurar un entorno de trabajo de hosting de Firebase, 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…

Patricio, administrador de TI	Hola, Rita: 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? Patricio
Rita, asesora	Hola, Patricio: ¡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 Rita
Patricio, ingeniero de DevOps	Hola, Rita: 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… Patricio
Rita, asesora	Hola, Patricio: Puedes usar las bibliotecas de Firebase para hacer gran parte del trabajo pesado. Firebase tiene excelentes herramientas de línea de comandos para ayudarte a conectar tu localhost al proyecto de Firebase de backend. Usa firebase init para indicarle a Firebase qué productos deseas usar. Una vez que tu proyecto esté configurado, solo tienes que llamar a firebase deploy desde la línea de comandos. Rita
Patricio, administrador de TI	Hola, Rita: Es reconfortante saber eso. Firebase Hosting me parece cada vez más interesante. :-) Patricio

Tarea 3. Instala Firebase CLI

Usa el IDE para conectarte a Firebase y, luego, implementa tu aplicación.

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

1. Copia el vínculo del IDE del panel de detalles del lab.

   {{{ project_0.startup_script.service_url | "IDE" }}}

2. Pega el vínculo en una nueva pestaña de incógnito del navegador para abrir Cloud Code.

3. Para abrir una terminal, haz clic en el menú Application () > Terminal > New terminal.

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

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

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

   Nota:
   Si aparece la ventana emergente Do you trust the authors of the files in this folder?, marca la casilla y haz clic en Yes, I trust the authors.

6. Para volver a abrir una terminal, haz clic en el menú Application () > Terminal > New terminal.

7. Actualiza los paquetes de nodos:

   npm i

   Resultado de ejemplo:

   added 630 packages, and audited 631 packages in 42s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities npm notice npm notice New minor version of npm available! 10.7.0 -> 10.8.3 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.3 npm notice To update run: npm install -g npm@10.8.3 npm notice npm warn using --force Recommended protections disabled. up to date, audited 631 packages in 2s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities

Ya puedes vincular la aplicación al proyecto de Firebase de 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. 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 la cuenta de tu lab y haz clic en Permitir.

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

6 Confirma tu ID de sesión haciendo clic en Yes, this is my session ID.

7. A continuación, recibirás un código de acceso:

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

Deberías recibir un resultado similar al que se muestra a continuación:

Resultado de ejemplo:

✔ Success! Logged in as student-02-21ab4a7ce0d1@qwiklabs.net Nota:
En este punto, el host local está vinculado al proyecto de Firebase de backend.

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 se necesitan.

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. Se te pedirá que selecciones 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. Necesitamos 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 Intro y, luego, N para conservar tu archivo firestore.rules.
   • Presiona Intro y, luego, N 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 te solicite reemplazar tu archivo index.html.

   Resultado de ejemplo:

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

Tarea 6. Implementa en Firebase

Continúa en la terminal para realizar este paso. Asegúrate de que todavía estés en la carpeta pet-theory/lab02.

1. Edita firebase.json y actualiza la sección de hosting con el sitio.

   Resultado esperado

   { ... "hosting": { "site": "student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1", ... } }

2. Implementa tu aplicación de Firebase con el valor de tu ID de sitio, p. ej.:

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

   Resultado:

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

3. Copia la URL de Hosting (debe ser similar a .web.app) y ábrela en una nueva pestaña de incógnito.

   https://student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.web.app Importante:
   No se deben usar credenciales personales como autenticación 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 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 ojo en el extremo derecho de la pestaña URL de 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.

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

   

   Una empresa pequeña como Pet Theory no tiene los recursos ni el conjunto de habilidades requerido para hacer esto. 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 tu 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 usen 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:student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1

   Resultado:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://student-bucket-{{{ project_0.project_id| "site" }}}-1.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.

   

5. Ingresa algunos datos del cliente: inventa un nombre y un número de teléfono.

   Nombre del cliente:

   John

   Teléfono del cliente:

   98473757454

6. Haz clic en Guardar perfil.

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.

Agregar una página de clientes a tu app web

¡Fantástico!

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

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

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: 16 de octubre de 2024

Prueba más reciente del lab: 16 de octubre de 2024

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.