Puntos de control
Register your app
/ 30
Set up authentication
/ 35
Add a customer page to your web app
/ 35
Compila una aplicación web sin servidores con Firebase
- GSP643
- Descripción general
- Objetivos
- Tarea 1. Aprovisiona el entorno de Firebase
- Tarea 2. Instala Firebase CLI
- Tarea 3. Configura una base de datos de Firestore
- Tarea 4. Crea un proyecto de Firebase
- Tarea 5. Registra tu app
- Tarea 6. Autentícate en Firebase y realiza la implementación
- Tarea 7. Configura la autenticación y una base de datos
- Tarea 8. Situación: configura la aplicación
- Tarea 9. Configura la autenticación de Firestore y agrega acceso a tu app web
- Tarea 10. Implementa tu aplicación
- Tarea 11: Agrega una página de clientes a tu aplicación web
- Tarea 12: Permite que los usuarios programen citas
- Tarea 13: Visualiza actualizaciones de Firestore en tiempo real
- ¡Felicitaciones!
GSP643
Descripción general
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 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:
- 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 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:
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:
Rita, 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
-
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.
-
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.
-
Clona el repositorio de GitHub a partir de la línea de comandos:
-
En el panel izquierdo, haz clic en el ícono de Explorer y, luego, en Open Folder > pet-theory > lab02. Haz clic en OK.
-
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. -
Para volver a abrir una terminal, haz clic en el menú Application () > Terminal > New terminal.
-
Instala los paquetes de nodo necesarios:
Resultado:
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.
- Crea una base de datos de Firestore:
gcloud firestore databases create --location={{{project_0.default_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.
-
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.
-
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.
-
Acepta las condiciones de Firebase y haz clic en Continuar. Confirma el plan de facturación de pago por uso.
-
Haz clic en Continuar y en la siguiente página inhabilita la opción de Google Analytics para tu proyecto de Firebase.
-
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.
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.
- Selecciona el ícono web (que se destaca a continuación) de la lista de íconos “Comienza por agregar Firebase a tu app”:
-
Cuando se te pida completar el campo “Sobrenombre de la app”, escribe Pet Theory.
-
Luego, marca la casilla junto a “Configurar Firebase Hosting para esta app también”.
-
Haz clic en el botón Registrar app.
-
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.
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.
- Usa este comando para autenticarte en Firebase:
-
Escribe Y si se te pide autorización para que Firebase pueda recopilar información de Error Reporting y, luego, presiona Intro.
-
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).
-
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:
-
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:
- Ahora inicializa un nuevo proyecto de Firebase en tu directorio de trabajo actual:
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 y la barra espaciadora para seleccionar Firestore y Hosting. Asegúrate de que tu shell coincida con lo siguiente y, luego, presiona Intro:
- 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:
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.
-
Haz clic en el botón Descripción general del proyecto en el menú de navegación de la izquierda.
-
Selecciona el mosaico Autenticación y, luego, haz clic en Comenzar:
-
Haz clic en Método de acceso y, luego, en el elemento de Google.
-
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:
- 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.
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…
Patricio, 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:
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 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.
- Ejecuta el siguiente comando para generar una lista de las carpetas y los archivos de tu directorio
lab02
:
- Asegúrate de que tu resultado sea similar al siguiente:
- Usa el editor de código para abrir
pet-theory/lab02/firestore.rules
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.
- Ejecuta el siguiente comando para implementar tu aplicación de Firebase:
Resultado:
- Copia la URL de Hosting (debería ser similar a
[PROJECT-ID].web.app
) y ábrela en una pestaña nueva. - Haz clic en el botón Acceder con Google:
- Selecciona tu Cuenta de Google. Se abre la siguiente página:
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.
- Abre el archivo
customer.js
y copia y pega el siguiente código:
- Abre el archivo
styles.css
y pega el siguiente código:
- En la línea de comandos, ejecuta el siguiente comando:
Resultado:
- 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.
- Vuelve a Firebase console y haz clic en Compilación > Base de datos de Firestore para ver la información de perfil guardada:
- 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.
Tarea 12: Permite que los usuarios programen citas
Diseña la página que permitirá que los usuarios programen citas.
-
Regresa a la pestaña del editor de código. Agregarás código en dos archivos del directorio
public
. -
En el menú lateral, selecciona appointments.html y pega el siguiente código:
- Ahora, abre el archivo appointments.js y pega el siguiente código:
- Ahora que ya se compilaron tus archivos, visualiza tus cambios. Ejecuta el siguiente comando en Cloud Shell para implementar tu aplicación:
Resultado:
- Actualiza la pestaña de la aplicación web, en la que antes obtuviste la página en blanco. Ahora, programa algunas citas.
-
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. -
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.
-
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.
-
Coloca las dos pestañas del navegador en paralelo. En la primera ventana del navegador, programa una nueva cita.
-
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.
- 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.
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: 24 de junio de 2024
Prueba más reciente del lab: 24 de junio 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.