GSP1051

Descripción general

Cloud Spanner es el servicio de base de datos relacional de Google, completamente administrado y con escalabilidad horizontal. Clientes de servicios financieros, juegos, venta minorista y muchas otras industrias confían en él para ejecutar sus cargas de trabajo más exigentes, en las que la coherencia y la disponibilidad a gran escala son fundamentales.

En este lab, compilarás y, luego, implementarás una aplicación de Node.js conectada a una instancia de Cloud Spanner. Esta aplicación es una herramienta de visualización de precios de acciones llamada OmegaTrade. La aplicación OmegaTrade almacena precios de acciones en Cloud Spanner y renderiza visualizaciones con Gráficos de Google.

El servicio de backend usa el framework Express de Node.js y se conecta a Cloud Spanner con capacidades predeterminadas de agrupación de conexiones, sesión y tiempo de espera.

Actividades

• Configurar el entorno del proyecto
• Descargar y, luego, inspeccionar el código de la aplicación
• Implementar el componente de la aplicación de backend
• Importar datos de muestra de operaciones bursátiles a la base de datos
• Implementar el componente de la aplicación de frontend
• Realizar operaciones en la aplicación OmegaTrade

Configuración y requisitos

Antes de hacer clic en el botón Comenzar lab

Lee estas instrucciones. Los labs cuentan con un temporizador que no se puede pausar. El temporizador, que comienza a funcionar cuando haces clic en Comenzar lab, indica por cuánto tiempo tendrás a tu disposición los recursos de Google Cloud.

Este lab práctico te permitirá realizar las actividades correspondientes en un entorno de nube real, no en uno de simulación o demostración. Para ello, se te proporcionan credenciales temporales nuevas que utilizarás para acceder a Google Cloud durante todo el lab.

Para completar este lab, necesitarás lo siguiente:

• Acceso a un navegador de Internet estándar. Se recomienda el navegador Chrome.

Nota: Usa una ventana del navegador privada o de incógnito (opción recomendada) para ejecutar el lab. Así evitarás conflictos entre tu cuenta personal y la cuenta de estudiante, lo que podría generar cargos adicionales en tu cuenta personal.

• Tiempo para completar el lab (recuerda que, una vez que comienzas un lab, no puedes pausarlo).

Nota: Usa solo la cuenta de estudiante para este lab. Si usas otra cuenta de Google Cloud, es posible que se apliquen cargos a esa cuenta.

Cómo iniciar tu lab y acceder a la consola de Google Cloud

1. Haz clic en el botón Comenzar lab. Si debes pagar por el lab, se abrirá un diálogo para que selecciones la forma de pago. A la izquierda, se encuentra el panel Detalles del lab, que tiene estos elementos:

   • El botón para abrir la consola de Google Cloud
   • El tiempo restante
   • Las credenciales temporales que debes usar para el lab
   • Otra información para completar el lab, si es necesaria

2. Haz clic en Abrir la consola de Google Cloud (o haz clic con el botón derecho y selecciona Abrir el vínculo en una ventana de incógnito si ejecutas el navegador Chrome).

   El lab inicia recursos y abre otra pestaña en la que se muestra la página de acceso.

   Sugerencia: Ordena las pestañas en ventanas separadas, una junto a la otra.

   Nota: Si ves el diálogo Elegir una cuenta, haz clic en Usar otra cuenta.

3. De ser necesario, copia el nombre de usuario a continuación y pégalo en el diálogo Acceder.

   {{{user_0.username | "Username"}}}

   También puedes encontrar el nombre de usuario en el panel Detalles del lab.

4. Haz clic en Siguiente.

5. Copia la contraseña que aparece a continuación y pégala en el diálogo Te damos la bienvenida.

   {{{user_0.password | "Password"}}}

   También puedes encontrar la contraseña en el panel Detalles del lab.

6. Haz clic en Siguiente.

   Importante: Debes usar las credenciales que te proporciona el lab. No uses las credenciales de tu cuenta de Google Cloud. Nota: Usar tu propia cuenta de Google Cloud para este lab podría generar cargos adicionales.

7. Haz clic para avanzar por las páginas siguientes:

   • Acepta los Términos y Condiciones.
   • No agregues opciones de recuperación o autenticación de dos factores (esta es una cuenta temporal).
   • No te registres para obtener pruebas gratuitas.

Después de un momento, se abrirá la consola de Google Cloud en esta pestaña.

Nota: Para acceder a los productos y servicios de Google Cloud, haz clic en el menú de navegación o escribe el nombre del servicio o producto en el campo Buscar.

Activa Cloud Shell

Cloud Shell es una máquina virtual que cuenta con herramientas para desarrolladores. Ofrece un directorio principal persistente de 5 GB y se ejecuta en Google Cloud. Cloud Shell proporciona acceso de línea de comandos a tus recursos de Google Cloud.

1. Haz clic en Activar Cloud Shell en la parte superior de la consola de Google Cloud.

2. Haz clic para avanzar por las siguientes ventanas:

   • Continúa en la ventana de información de Cloud Shell.
   • Autoriza a Cloud Shell para que use tus credenciales para realizar llamadas a la API de Google Cloud.

Cuando te conectes, habrás completado la autenticación, y el proyecto estará configurado con tu Project_ID, . El resultado contiene una línea que declara el Project_ID para esta sesión:

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

gcloud es la herramienta de línea de comandos de Google Cloud. Viene preinstalada en Cloud Shell y es compatible con la función de autocompletado con tabulador.

3. Puedes solicitar el nombre de la cuenta activa con este comando (opcional):

gcloud auth list

4. Haz clic en Autorizar.

Resultado:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

5. Puedes solicitar el ID del proyecto con este comando (opcional):

gcloud config list project

Resultado:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} Nota: Para obtener toda la documentación de gcloud, en Google Cloud, consulta la guía con la descripción general de gcloud CLI.

Instancia de Cloud Spanner

Para que puedas avanzar más rápido en este lab, se crearon automáticamente la instancia, la base de datos y las tablas de Cloud Spanner necesarias para la aplicación OmegaTrade.

Estos son algunos detalles para tu referencia:

Elemento	Nombre	Detalles
Instancia de Cloud Spanner	omegatrade-instance	Esta es la instancia a nivel del proyecto.
Base de datos de Cloud Spanner	omegatrade-db	Esta es la base de datos específica de la instancia.
Tabla	Usuarios	Contiene cuentas de usuario.
Tabla	Empresas	Incluye el nombre de la empresa y el símbolo bursátil.
Tabla	CompanyStocks	Contiene valores de acciones.
Tabla	Simulaciones	Realiza un seguimiento del estado de cada simulación.

Tarea 1: Habilita las APIs de Google Cloud requeridas

Primero, habilita las APIs de Google Cloud para Cloud Spanner, Container Registry y Cloud Run.

1. En Cloud Shell, ingresa los siguientes comandos:

gcloud services enable spanner.googleapis.com gcloud services enable artifactregistry.googleapis.com gcloud services enable containerregistry.googleapis.com gcloud services enable run.googleapis.com

Tarea 2: Descarga y, luego, inspecciona el código de la aplicación

1. Descarga el repositorio de código para usarlo en este lab. En Cloud Shell, ingresa lo siguiente:

git clone https://github.com/GoogleCloudPlatform/training-data-analyst

2. Navega a la carpeta que contiene el código de la aplicación.

cd training-data-analyst/courses/cloud-spanner/omegatrade/

3. El código se divide principalmente en dos partes: backend y frontend. La arquitectura de la aplicación se representa en el siguiente diagrama:

4. La aplicación depende de un archivo específico de implementación llamado .env para comunicarse correctamente con la instancia de Cloud Spanner. Crearás este archivo en la próxima tarea.

5. Con respecto al backend, algunas de las interacciones vinculaciones y vinculaciones con las tablas de Cloud Spanner se administran con modelos de Node.js. Tres de estos, company.model.js, simulation.model.js y user.model.js, residen en la carpeta models. Ejecuta el siguiente comando para navegar a la carpeta models:

cd backend/app/models

6. Ejecuta el siguiente comando para inspeccionar el archivo company.model.js. Este archivo contiene operaciones de bases de datos para interactuar con la tabla companies.

more company.model.js

Presiona la barra espaciadora para avanzar por el archivo hasta el final. Si deseas cerrar antes el archivo, escribe q para cerrar el comando more.

7. Algunas de las interacciones de frontend con estos modelos y otras estructuras en el backend de Node.js se producen a través de componentes de Angular ubicados en la carpeta components. Ejecuta el siguiente comando para navegar a la carpeta components:

cd ../../../frontend/src/app/components

8. Por ejemplo, el componente company contiene el código base de la aplicación para administrar y actualizar la información de la empresa.

9. Ejecuta el siguiente comando para inspeccionar el archivo de configuración de TypeScript manage-company.component.ts. Este archivo contiene métodos para borrar o editar una empresa, entre otras acciones.

more company/manage-company/manage-company.component.ts

Presiona la barra espaciadora para avanzar por el archivo hasta el final. Si deseas cerrar antes el archivo, escribe q para cerrar el comando more.

Tarea 3: Crea e implementa el componente de backend

1. Navega a la carpeta que contiene el código necesario para crear e implementar el backend.

cd ../../../../backend

2. Crea el archivo .env. Como se mencionó anteriormente, este archivo contiene información específica del proyecto para que el componente de backend de la aplicación pueda comunicarse con la instancia de Cloud Spanner.

En Cloud Shell, ingresa el siguiente comando para invocar el editor de texto Nano y crear un nuevo archivo .env.

nano .env

Pega el bloque de código que se indica a continuación.

PROJECTID = {{{project_0.project_id|Project ID}}} INSTANCE = omegatrade-instance DATABASE = omegatrade-db JWT_KEY = w54p3Y?4dj%8Xqa2jjVC84narhe5Pk EXPIRE_IN = 30d

Presiona Ctrl+X para salir de Nano, Y para confirmar la actualización y, luego, Intro para guardar los cambios.

3. Antes de continuar, debes instalar los componentes actualizados para npm de modo que el backend se pueda compilar correctamente. npm es un administrador de paquetes para JavaScript. npm es el administrador de paquetes predeterminado para el entorno de ejecución de JavaScript Node.js.

nvm install 22.6 npm install npm -g npm install --loglevel=error

4. Luego, compila la aplicación de backend con un Dockerfile de referencia que existe en la carpeta del repositorio.

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 -f dockerfile.prod . Nota: Puedes ignorar de forma segura cualquier mensaje npm notice... que aparezca durante el proceso de compilación.

5. Antes de enviar el nuevo paquete de aplicación, ejecuta el siguiente comando para establecer permisos de configuración en Cloud Shell.

Ingresa "y" cuando se te pregunte si deseas continuar.

gcloud auth configure-docker

6. Envía el paquete de aplicación recién creado al Container Repository de tu proyecto de Qwiklabs.

docker push gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1

7. Por último, implementa la aplicación de backend con Cloud Run. Cloud Run es un framework de implementación sin servidores que abstrae la administración de la infraestructura y aumento o disminuye la escala verticalmente de forma automática y casi instantánea según el tráfico.

gcloud run deploy omegatrade-backend --platform managed --region {{{project_0.default_region|Default Region}}} --image gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 --memory 512Mi --allow-unauthenticated

8. Copia la URL proporcionada al final de la implementación. Conserva la URL en el bloc de notas, un archivo de texto o cualquier otra ubicación de fácil acceso. Esta URL se proporcionará a la aplicación de frontend para garantizar que la interfaz de usuario pueda comunicarse correctamente con la base de datos de Cloud Spanner a través del backend.

La URL del servicio de backend aparecerá en el siguiente formato:

https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app

Tarea 4: Importa datos de muestra de operaciones bursátiles a la base de datos

1. Para importar datos de muestra de empresas y bursátiles, ejecuta el siguiente comando en la carpeta actual (backend principal).

unset SPANNER_EMULATOR_HOST node seed-data.js

2. Recibirás una confirmación de que las tablas se cargaron correctamente.

Inserting Companies... done Inserting Simulations... done Inserting Stocks... done Data Loaded successfully

3. Haz clic en Revisar mi progreso para verificar el objetivo.

Importar datos de muestra de operaciones bursátiles a la base de datos

Tarea 5: Crea y, luego, implementa el componente de frontend

1. Navega al directorio que contiene el código de frontend. Navega específicamente a la carpeta environments para actualizar el archivo de configuración y que apunte a tu componente de backend.

cd ../frontend/src/environments

2. En Cloud Shell, ingresa el siguiente comando para invocar el editor de texto Nano y abrir el archivo environment.ts.

nano environment.ts

3. Borra con cuidado la cadena http://localhost:3000 y reemplázala por la URL de tu backend.

Nota: Asegúrate de conservar la parte /api/v1/ de la URL.

Presiona Ctrl+X para salir de Nano, Y para confirmar la actualización y, luego, Intro para guardar los cambios.

Tu archivo environment.ts actualizado debería verse como el ejemplo que se muestra a continuación.

export const environment = { production: false, name: "dev", // cambiar baseUrl según la URL del backend baseUrl:"https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app/api/v1/", // cambiar clientId al valor real que recibiste de la consola de Oauth clientId: "" };

4. Navega a la carpeta principal frontend.

cd ../..

5. Instala componentes actualizados para npm para que el frontend se pueda compilar correctamente.

npm install npm -g npm install --loglevel=error Nota: Puedes ignorar de forma segura cualquier mensaje npm WARN config... que aparezca durante el proceso de instalación.

6. A continuación, crea la aplicación de frontend con un Dockerfile de referencia que existe en la carpeta del repositorio. La compilación de frontend puede tardar entre 5 y 10 minutos en completarse.

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 -f dockerfile . Nota: Puedes ignorar de forma segura cualquier mensaje npm notice... que aparezca durante el proceso de compilación.

7. Envía el paquete de aplicación recién creado al Container Repository de tu proyecto de Qwiklabs.

docker push gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1

8. Por último, implementa la aplicación de frontend con Cloud Run.

gcloud run deploy omegatrade-frontend --platform managed --region {{{project_0.default_region|Default Region}}} --image gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 --allow-unauthenticated

9. La URL del servicio de frontend aparecerá en el siguiente formato. Puedes hacer clic directamente en la URL para abrirla o copiarla y pegarla en una nueva pestaña.

https://omegatrade-frontend-zzzyyyxx1x-uw.a.run.app

Tarea 6: Realiza operaciones en la aplicación OmegaTrade

1. En la página de inicio de la aplicación, haz clic en el vínculo de registro.

2. Usa los siguientes detalles para crear una cuenta nueva para una empresa ficticia llamada Spanner1.

Elemento	Valor
Correo electrónico empresarial	admin@spanner1.com
Nombre completo	Spanner1 Admin
Contraseña	Spanner1
Confirma tu contraseña	Spanner1

3. Se creará tu cuenta y se accederá a ella.

4. Para examinar la aplicación OmegaTrade, navega al Panel y elige Foobar Inc en el selector para ver el gráfico de rendimiento de acciones de Foobar Inc. Verás un rango de precios de acciones simulados a lo largo del tiempo para Foobar Inc.

5. Navega a Manage company y agrega Spanner1 como una nueva empresa.

6. Haz clic en Add company en el lado derecho de la página. En la ventana emergente, ingresa los siguientes valores:

Elemento	Valor
Nombre de la empresa	Spanner1
Código corto	SPN

Luego, haz clic en Guardar.

7. Spanner1 ahora está en la lista de empresas.

8. Navega al Panel y selecciona Spanner1 si aún no lo has hecho. Verás que no existe ninguna simulación para Spanner1. Haz clic en el vínculo titulado aquí para generar una simulación.

9. En Simulate Data, proporciona los siguientes detalles:

Elemento	Valor
Seleccionar empresa	Spanner1
Seleccionar intervalo	5
Cantidad de registros	50

Luego, haz clic en Simulate.

10. Navega al Panel, que actualizará de inmediato el gráfico de Spanner1 a medida que avance la simulación. La simulación tardará entre 3 y 6 minutos en completarse.

11. La aplicación OmegaTrade también te permite modificar la información existente de la empresa. En la pestaña Manage company, haz clic en el ícono de lápiz en Action para Acme Corp.

12. Actualiza el nombre de la empresa a Coyote Inc. Ten en cuenta que el código corto no se puede actualizar en la interfaz de usuario. Haz clic en Update para cerrar y aceptar el cambio.

13. La actualización del nombre de la empresa es inmediata. Navega al Panel y verás que Acme Corp ya no aparece y Coyote Inc tomó su lugar.

14. En ocasiones, se requieren cambios de datos que exceden las capacidades del código de la aplicación. Como usuario con permisos, tienes la capacidad de actualizar los datos que se usan en la aplicación OmegaTrade haciendo cambios directos en la base de datos de Cloud Spanner.

15. En la consola de Cloud, haz clic en el menú de navegación () > Ver todos los productos > Bases de datos > Spanner.

16. Acepta cualquier ventana de información o confirmación que pueda aparecer.

17. Haz clic en el nombre omegatrade-instance y, luego, en omegatrade-db en Bases de datos. En la lista de tablas que se encuentra en la parte inferior de la página, haz clic en companies.

18. Haz clic en Datos en el lado izquierdo del panel para ver el contenido de la tabla.

19. Actualizarás el nombre de la entidad Bar Industries.

20. Haz clic en la casilla de verificación de la fila Bar Industries. Luego, haz clic en Editar en las opciones que aparecen sobre las filas de la tabla.

21. Se te redirigirá a Spanner Studio. Haz clic en + Nueva pestaña. Ingresa la siguiente consulta para actualizar el valor de companyName de Bar Industries a Consolidated Enterprises Inc.

UPDATE companies SET companyName='Consolidated Enterprises Inc' WHERE companyName='Bar Industries'; Nota: En la ventana de consulta de Cloud Spanner, tienes la posibilidad de cambiar el valor de código corto. El código de la aplicación, tal como se diseñó, no permite que este valor se actualice a través de la interfaz de usuario.

22. Haz clic en Ejecutar para procesar la actualización.

23. Regresa a la página de la aplicación, actualiza tu navegador y navega a la pestaña Panel. Verás que Bar Industries ya no aparece y que Consolidated Enterprises Inc tomó su lugar.

¡Felicitaciones!

Ahora implementaste una aplicación de Node.js conectada a una instancia de Cloud Spanner y realizaste operaciones básicas en la base de datos con la aplicación, además de editar datos directamente en la base de datos.

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: 12 de mayo de 2025

Prueba más reciente del lab: 12 de mayo de 2025

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