GSP1330

Descripción general

Gemini es un colaborador potenciado por IA que ayuda a los equipos de desarrollo a crear, implementar y operar aplicaciones con mayor rapidez y eficiencia.

En este lab, descubrirás cómo Gemini para desarrolladores puede ayudarte a depurar tu código y generar pruebas de unidades, como evaluar condiciones de frontera en tu código.

Los labs de este curso abarcan un ciclo de vida del desarrollo de software (SDLC) típico desde el punto de vista de los desarrolladores de aplicaciones. Otros aspectos del SDLC (requisitos, seguridad, supervisión, etc.) se abordarán en otros cursos.

Objetivos

Este lab se enfoca el uso de Gemini para desarrolladores para lograr lo siguiente:

• Identificar y corregir errores de tiempo de ejecución con la ayuda de Gemini para desarrolladores
• Generar pruebas de unidades para funciones

Qué aprenderás

Cymbal Superstore es una plataforma de compras en línea próspera que busca mejorar continuamente para seguir siendo competitiva en el mercado. Como parte de sus iniciativas de desarrollo continuas, diseñó una nueva función llamada "Productos nuevos", que les permite a los usuarios descubrir con facilidad las adiciones más recientes al inventario de la tienda.

El nuevo extremo, newproducts, se implementó en etapa de pruebas, pero no es exactamente lo que quiere el propietario de la empresa. Por lo tanto, debes hacer algunas modificaciones y depurar el código nuevo. Para mantener el lab enfocado en cómo Gemini para desarrolladores puede ayudarte, se agregará el código nuevo a la base de código original. También se te pedirá que desarrolles algunas pruebas de unidades de los servicios de backend.

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.

Tarea 1: Investiga, genera y prueba el código

Configura las variables de entorno

1. En Cloud Shell, ejecuta el siguiente comando para configurar las variables de entorno necesarias.

export PROJECT_ID=$(gcloud config get-value project) export REGION={{{project_0.default_region|Lab Region}}} export ZONE={{{project_0.startup_script.lab_zone|Lab Zone}}}

2. Copia los archivos necesarios de un bucket de Cloud Storage a Cloud Shell.

gsutil -m cp -r gs://duet-appdev/cymbal-superstore .

Investiga el código

Además de la capacidad de Gemini para explicar segmentos de código que no conoces, también puede crear comentarios para que los agregues a tu código y sea más entendible durante los ciclos de mantenimiento futuros.

3. Abre el editor haciendo clic en la opción Open Editor que se encuentra en la parte superior derecha de la ventana de Cloud Shell.

Se abrirá el editor de Visual Studio Code. Puedes ver el editor en una ventana nueva con la opción presente en la barra de menú de Cloud Shell.

4. Navega a File > Open Folder….

5. Selecciona el directorio cymbal-superstore y haz clic en OK.

Ahora la carpeta seleccionada debería ser visible en la sección Explorer del editor de Visual Studio Code.

6. Abre el archivo index.ts en la carpeta backend.

7. En la parte superior derecha del archivo, haz clic en la flecha junto a Gemini .

8. Haz clic en Select Gemini Code Assist Project para seleccionar el proyecto que se usará en Gemini. En la lista, selecciona el ID del proyecto.

9. Si aparece un mensaje en la parte inferior del editor que indica que Gemini Code Assist no está habilitado para el proyecto seleccionado, haz clic en el botón Enable API en el mensaje para habilitar la API.

Genera el código

10. En el archivo index.ts, desplázate a la línea 102, en la que verás el siguiente texto: /newproducts endpoint code goes here. Reemplaza esa línea por el comentario que se muestra a continuación.

{{{project_0.startup_script.prompt_1 | "Comment 1"}}} {{{project_0.startup_script.prompt_2 | "Comment 2"}}}

11. Selecciona el comentario recién agregado y haz clic en el ícono de bombilla amarilla que aparece. En la lista, haz clic en la siguiente opción: Gemini: Generate code.

12. Gemini muestra algunas sugerencias de código. Revisa el código sugerido y acéptalo haciendo clic en OK o presionando la tecla Tab. La respuesta debería ser similar a esta:

Notas:

1. Gemini conocía el significado de "están en stock". Es una frase común que se entiende fácilmente, por lo que Gemini la usó aquí. Si tu requisito es menos común, es posible que necesites agregar un ejemplo.
2. El uso de una propiedad de datos llamada cantidad permitió que Gemini la asociara con el concepto de "en stock". Si asignas nombres a tus variables, propiedades y métodos con abreviaturas o términos no estándar, no solo tu código será más difícil de mantener para otras personas, sino que Gemini será menos específico con sus sugerencias.
3. Aunque no se mencionó, Gemini sugirió código en el que se ejecuta la comprobación de la base de datos para que sea coherente con otros extremos del archivo.

Prueba el código

13. Vuelve a la terminal de Cloud Shell con el botón Open Terminal que se encuentra en la barra de herramientas de la ventana de Cloud Shell. En la terminal de Cloud Shell, ejecuta el siguiente comando:

cd ~/cymbal-superstore/backend npm run start

El resultado debería ser similar a este:

14. Abre otra terminal en Cloud Shell haciendo clic en la opción + en la barra de herramientas de la ventana de Cloud Shell y, luego, llama al extremo en localhost.

curl localhost:8000/newproducts

En la 1ª terminal, verás un resultado que indica que se canceló y se produjo un error.

El resultado debería ser similar a este:

Haz clic en Revisar mi progreso para verificar el objetivo. Generar y probar el código

Tarea 2: Investiga con el chat de Gemini

1. Abre el archivo index.ts en el editor.

2. Abre el chat de Gemini como se muestra en la captura de pantalla y escribe el mensaje de error en la instrucción.

{{{project_0.startup_script.prompt_2_1 | "Error message to be entered in the prompt"}}}

El resultado debería ser similar a este:

Nota: Cada vez que se ejecuta Gemini, produce un resultado diferente, por lo que los resultados que veas podrían no coincidir con tu respuesta.

3. Analiza el código para resolver el problema existente. Determinas que el error se debe al siguiente comando:

const query = firestore const products = await firestore .collection("inventory") .where("timestamp", ">", new Date(Date.now() - 604800000)) .where("quantity", ">", 0); .where("timestamp", ">=", sevenDaysAgo) .where("quantity", ">", 0) .get();

La respuesta de Gemini te permite modificar los filtros para que sean de igualdad o borrar uno de los filtros de desigualdad.

Primero, quitemos el filtro de cantidad de la llamada a Firestore para resolver el error.

4. Para quitar el filtro de desigualdad de cantidad, quita el siguiente fragmento de código del archivo index.ts.

.where("quantity", ">", 0);

Este código se puede quitar para que la función opere sin errores. Los productos con una cantidad de 0 no podrán filtrarse de la respuesta de la API, por lo que no cumplirán con el requisito comercial y fallarán. Debemos tener cuidado de no insertar elementos agotados. Hay varios enfoques adecuados para hacerlo, pero algunos pueden funcionar mejor que otros. Por lo tanto, le pediremos ayuda a Gemini.

5. Haz la siguiente pregunta en el chat de Gemini y asegúrate de que esté abierto el archivo index.ts.

{{{project_0.startup_script.prompt_2_2 | "Question to the Gemini Chat"}}}

El resultado debería ser similar a este:

Incluso después de restablecer el chat, si Gemini te sugiere una y otra vez que agregues dos cláusulas where, aquí tienes una técnica para obtener una respuesta diferente.

{{{project_0.startup_script.prompt_2_3 | "Different question approach to the Gemini Chat"}}}

A menudo, Gemini ofrecerá alternativas que podrás probar. Tal vez debas restablecer el chat y modificar tu instrucción varias veces para ver una opción que no sea Firestore.

Nota: A veces, Gemini no funciona como se espera y solo muestra opciones aleatorias (e ilegales) de Firestore. En este caso, el estudiante deberá usar la sugerencia ofrecida.

El resultado debería ser similar a este:

6. Modifica el código existente agregando el fragmento de código en el archivo index.ts.

if (p.quantity > 0) { productsArray.push(p); }

Después de la modificación, el código debería verse así:

Prueba el código con los cambios anteriores

7. Abre la terminal de Cloud Shell y pega el siguiente comando.

cd ~/cymbal-superstore/backend npm run start

8. Abre una segunda pestaña de la terminal y llama al extremo localhost.

curl localhost:8000/newproducts

El resultado debería ser similar a este:

9. Probemos otra forma con un comentario intercalado y quitemos la condición que agregamos antes. El código final sería similar a este:

10. Antes de la línea productsArray.push(p), agrega el comentario que se indica a continuación. Presiona Ctrl + Intro para generar código. Acepta el código si devuelve if (p.quantity > 0).

{{{project_0.startup_script.prompt_2_4 | "Comment message"}}}

Marca como comentario el filtro para que se vea así:

Haz clic en Revisar mi progreso para verificar el objetivo. Investigar con el chat de Gemini

Nota: En resumen, como existen varias formas de programar esta corrección, Gemini puede ofrecer muchas sugerencias. Cuando suceda, deberás evaluar las opciones. Esto también puede causar que debas aplicar parches en la sintaxis, como se mostró anteriormente.

Tarea 3: Ejecuta las pruebas

1. Ve a la terminal de Cloud Shell y ejecuta el siguiente comando.

cd cymbal-superstore/backend npm run test

El resultado debería ser similar a este:

2. Abre el archivo index.test.ts en la carpeta backend. Este archivo contiene algunas pruebas sencillas que se desarrollaron con una herramienta llamada supertest usando el framework de prueba Jest. Revisa las pruebas existentes y pídele a Gemini que te explique cualquier punto que no esté claro.

Tarea 4: Desarrolla pruebas con la ayuda de Gemini

En esta tarea, escribirás una prueba para la API de productos nuevos en el backend con la ayuda de Gemini.

Desarrolla la prueba

1. Abre el archivo index.test.ts en la carpeta backend. En la parte inferior del archivo, agrega los siguientes comentarios.

{{{project_0.startup_script.prompt_3_1 | "Comment message 1 in index.test.ts"}}} {{{project_0.startup_script.prompt_3_2 | "Comment message 2 in index.test.ts"}}}

2. Selecciona el comentario recién agregado y haz clic en el ícono de bombilla amarilla que aparece. En la lista, haz clic en la siguiente opción: Gemini: Generate code. Presiona Tab para aceptar la sugerencia.

Este es un ejemplo del código generado. También puedes pegar el código que se indica a continuación.

describe('GET /newproducts', () => { it('should return a 200 status code', async () => { const response = await request(app) .get('/newproducts'); {{{project_0.startup_script.prompt_3_3 | "Generated code line from Gemini"}}}; }); it('should return a list of new products with length 8', async () => { const response = await request(app) .get('/newproducts'); expect(response.body.length).toBe(8); }); });

Ejecuta la prueba

3. Ejecuta los siguientes comandos en la terminal de Cloud Shell.

cd ~/cymbal-superstore/backend npm run test

El resultado debería ser similar a este:

4. Investiga qué prueba falló desplazándote por los resultados en los datos de salida de la terminal.

Nota: Deberías ver esta respuesta, que indica que la prueba falló. El valor 10 es el recuento de newproducts, que incluye los productos con cantidad 0. Los nuevos requisitos comerciales establecen que los artículos que no están en stock deben filtrarse, pero la prueba revela que algo está mal.

Haz clic en Revisar mi progreso para verificar el objetivo. Escribir pruebas para la API de productos nuevos

Corrige el error

5. Abre index.ts en la carpeta backend y quita el comentario del filtro que se agregó en la última tarea. El código actualizado debería verse así:

//do not insert products that are out of stock if (p.quantity > 0) productsArray.push(p);

6. Vuelve a ejecutar la prueba desde la terminal de Cloud Shell.

cd ~/cymbal-superstore/backend npm run test

El resultado debería ser similar a este:

Tarea 5: Prueba la condición de frontera

Puede ser difícil realizar pruebas de condición de frontera. Esto se debe a la necesidad de considerar situaciones inesperadas, como listas vacías o saldos negativos, que no deberían ocurrir, pero que podrían surgir durante la ejecución. Veamos si Gemini puede ser de ayuda en estos casos.

1. Para proporcionar la respuesta más genérica, cierra todos los archivos abiertos. Restablece el Chat de Gemini haciendo clic en el ícono Nuevo chat (+) que se encuentra sobre el chat y, luego, ingresa la siguiente instrucción:

{{{project_0.startup_script.prompt_4_1 | "Prompt for boundary conditions"}}}

El resultado debería ser similar a este:

Sí, puedo ayudarte a crear pruebas para condiciones de frontera. El análisis de valores de frontera es una parte clave de las pruebas de software. Implica realizar pruebas en los "extremos" o las "fronteras" de los dominios de entrada, ya que los errores suelen esconderse en esos lugares. Para ayudarte mejor, necesito más información. Por ejemplo: - ¿Qué lenguaje de programación usas? - ¿Podrías compartir el código (o un fragmento de él) que quieres probar? - ¿Cuáles son las entradas y sus rangos válidos esperados?

2. Abre el archivo index.ts en la carpeta backend para proporcionarle información contextual a Gemini. Pregúntale a Gemini sobre las pruebas de fronteras para el extremo /newproducts. Abre el chat de Gemini y escribe lo siguiente:

{{{project_0.startup_script.prompt_4_2 | "Prompt for boundary tests for the /newproducts endpoint"}}}

El resultado debería ser similar a este:

Nota: Es evidente que algunos de estos resultados se generaron en función del código (como "agregado en los últimos 7 días" y "están en stock") y de condiciones de frontera más generales que Gemini detectó con frecuencia en este tipo de código. Esta información es muy útil para comenzar a crear un conjunto sólido de condiciones de frontera.

3. Para convertir los resultados en pruebas reales, abre el archivo index.test.ts. Copia el comentario que aparece a continuación y agrégalo al final del archivo.

{{{project_0.startup_script.prompt_4_3 | "Comment message in index.test.ts file"}}}

El resultado debería ser similar a este:

4. Agrega el siguiente código después del comentario anterior en el archivo index.test.ts.

describe('GET /newproducts', () => { it('should not return products that are out of stock', async () => { const response = await request(app) .get('/newproducts'); response.body.forEach((product: any) => { expect(product.quantity).toBeGreaterThan(0); }); }); });

5. Vuelve a ejecutar la prueba en la terminal de Cloud Shell. Deberías ver el resultado que se muestra a continuación.

El resultado debería ser similar a este:

Haz clic en Revisar mi progreso para verificar el objetivo. Probar la condición de frontera

¡Felicitaciones!

En este lab, adquiriste experiencia en el uso de Gemini para desarrolladores para mejorar las capacidades de depuración de código y optimizar la generación de pruebas de unidades, en especial cuando se evalúan condiciones de frontera dentro del código.

Actualización más reciente del manual: 17 de octubre de 2025

Prueba más reciente del lab: 17 de octubre 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.