Introducción a las pruebas con Gemini Code Assist

1. Introducción

En este lab, usarás Gemini Code Assist, un colaborador potenciado por IA en Google Cloud, para agregar pruebas a una aplicación web de Python existente y encontrar y corregir errores en esa aplicación expuestos por las pruebas. Luego, usarás Code Assist para crear pruebas de funcionalidades nuevas y generar código para pasar esas pruebas y extender la app.

Actividades

  • Usarás el editor de Cloud Shell para descargar el código de una aplicación web existente.
  • Usarás el chat de Gemini Code Assist en el Editor de Cloud Shell para hacer preguntas generales sobre Google Cloud.
  • Usarás la asistencia de código integrada de Gemini Code Assist en el editor de Cloud Shell para generar pruebas para la aplicación, ejecutarlas, encontrar y corregir errores, y, luego, extender la funcionalidad de la aplicación.

Qué aprenderás

  • Cómo usar Gemini Code Assist para varias tareas de desarrollador, como la generación de pruebas y de código
  • Cómo usar Gemini Code Assist para obtener información sobre Google Cloud.

Qué necesitarás

  • Navegador web Chrome
  • Una cuenta de Gmail
  • Un proyecto de Cloud con la facturación habilitada
  • Gemini Code Assist habilitado para tu proyecto de Cloud

Este lab está dirigido a desarrolladores de todos los niveles, incluidos principiantes. Aunque la aplicación de muestra está en lenguaje Python, no es necesario que conozcas la programación en ese lenguaje para entender lo que está sucediendo. Nuestro enfoque será familiarizarse con las funciones de Gemini Code Assist para desarrolladores.

2. Configuración

Ya deberías tener un proyecto de Cloud con la facturación habilitada para usarlo en este lab. Ahora habilitaremos la API de Gemini en nuestro proyecto de Google Cloud. Sigue los pasos que se indican a continuación:

  1. Ve a https://console.cloud.google.com y asegúrate de haber seleccionado el proyecto de Google Cloud con el que planeas trabajar en este lab. Haz clic en el ícono de Gemini que aparece en la parte superior derecha.

GeminiBanner.png

  1. Se abrirá la ventana de Gemini para la consola de Cloud en el lado derecho de la consola. Haz clic en el botón Habilitar si se muestra a continuación. Si no ves el botón Habilitar, pero aparece una interfaz de chat, significa que ya habilitaste Gemini para Cloud en el proyecto y puedes ir directamente al siguiente paso.

GeminiApiEnable.png

  1. Una vez que esté habilitado, puedes probar Gemini solicitando una o dos consultas. Se muestran algunas consultas de ejemplo, pero puedes probar algo como ¿Qué es Cloud Run?

GeminiChatWindow.png

Code Assist responderá con tu pregunta. Puedes hacer clic en el ícono f68286b2b2ea5c0a.png de la esquina superior derecha para cerrar la ventana de chat de Code Assist.

Habilita Gemini en el Editor de Cloud Shell

Gemini Code Assist está disponible y se comporta de manera similar en varios IDE populares. En este codelab, usarás el editor de Google Cloud Shell, que se ejecuta por completo en tu navegador web. Debes habilitar y configurar Gemini en el Editor de Cloud Shell. Los pasos se indican a continuación:

  1. Inicia Cloud Shell con el ícono que se muestra a continuación. El inicio de la instancia de Cloud Shell puede tardar uno o dos minutos.

72dc3df7b007fcde.png

  1. Haz clic en el botón Editor o Abrir editor (según corresponda) y espera hasta que aparezca el editor de Cloud Shell. Si ves el botón Probar el nuevo editor, haz clic en él.

CloudShellEditor.png

  1. Haz clic en el botón Cloud Code - Acceder en la barra de estado de la parte inferior como se muestra. Autoriza el complemento según las instrucciones. Si ves "Cloud Code (ningún proyecto)" en la barra de estado, selecciónalo y elige el proyecto específico de Google Cloud de la lista de proyectos con los que planeas trabajar.

CloudCodeSignIn.png

  1. Si no ves el ícono de Gemini en la barra de estado de la parte inferior derecha, deberás habilitarlo en Cloud Code. Antes de hacerlo, asegúrate de que Gemini (antes conocido como Duet AI para desarrolladores) esté habilitado en el IDE. Para ello, ve a Cloud Code Extension → Configuración y, luego, ingresa el texto Duet AI: Enable como se muestra a continuación. Asegúrate de que la casilla de verificación esté seleccionada. Deberías volver a cargar tu IDE. De esta manera, se habilitará Gemini en Cloud Code, y la barra de estado de Gemini aparecerá en el IDE.

EnableDuetAiSetting.png

  1. Haz clic en el botón Gemini en la esquina inferior derecha como se muestra y selecciona el proyecto de Google Cloud correcto para el que habíamos habilitado la API de Cloud AI Companion.

GeminiSelectGoogleCloudProject.png

  1. Una vez que selecciones tu proyecto de Google Cloud, asegúrate de que puedes verlo en el mensaje de estado de Cloud Code en la barra de estado y de que tienes Gemini habilitado a la derecha, en la barra de estado, como se muestra a continuación:

GeminiEnabledStatusBar.png

Gemini Code Assist está listo para que lo uses

3. Descarga y examina la aplicación

En la ventana de la terminal, ejecuta el comando para clonar el repositorio con el código de inicio y, luego, cambia al directorio nuevo (si la ventana de la terminal ya no está abierta, haz clic en el botón Terminal o Abrir terminal para restablecerla):

git clone https://github.com/GoogleCloudPlatform/testing-with-duet-ai-codelab.git
cd testing-with-duet-ai-codelab

Abre main.py en el editor y, luego, haz clic en el ícono de chat de Gemini en el lado izquierdo del editor para abrir la ventana de Gemini Chat. Esta ventana de Gemini Chat se encuentra dentro del IDE y tiene el código en el IDE disponible como contexto para el debate. Ingresa la instrucción Explicar esto y mira la respuesta:

GeminiChatExplainThis.png

Puedes desplazarte por esta ventana de chat para ver la respuesta completa. La explicación indica que podemos ejecutar este programa de forma local con el comando python3 main.py en la ventana de terminal.

4. Ejecuta de forma local

Si es necesario, cambia al directorio del repositorio con cd ~/testing-with-duet-ai-codelab y, si es necesario, ingresa el comando python3 main.py en la ventana de la terminal:

3bf558e9cea15375.png

Haz clic en el vínculo http://127.0.0.1:8080 para abrir una nueva pestaña del navegador en la página principal de la aplicación:

fb06f382a4c03e4c.png

La aplicación se está ejecutando “de forma local”. En realidad, el editor de Cloud Shell hizo un poco de magia aquí. La aplicación se está ejecutando en Cloud Shell, no en tu propia computadora. Cuando hiciste clic en el vínculo, se abrió una pestaña que no conducía a la dirección local real http://127.0.0.1:8080, sino a un servidor proxy configurado solo para este propósito por Cloud Shell. El efecto es el mismo que si lo ejecutaras de forma local.

Pruébalo. Ingresa 25 y presiona Convertir.

e1b9d5832f6d0058.png

¡Así es, 25 es XXV en números romanos! Debes terminar aquí.

Quizás quieras revisar algunos números más. 25 funcionaron, ¿y 24?

37982e385e17baac.png

Quizás nos apresuramos a pensar que todo estaba bien. ¿XXIIII es la conversión correcta para 24? ¿No debería ser XXIV?

Podría decirse que la XXIIII es correcta, pero no es realmente lo que las personas esperan. Sin embargo, como no está realmente incorrecto (ten en cuenta que muchos relojes muestran 4 como número romano IIII), deja ese problema para una mejora futura.

¿Qué te parece probar con números negativos? ¿Cero? No hay forma de representar esos números en números romanos. Al parecer, el usuario no vuelve a responder nada, lo que parece ser un error que se debe corregir.

Las pruebas pueden ayudar a detectar y eliminar errores, y Gemini Code Assist puede ayudarnos a escribir y usar pruebas.

5. Cómo agregar pruebas

Regresa a la ventana de Gemini Chat y haz una

How can I test the number_to_roman function?

Lee la respuesta, que debe incluir el análisis del módulo unittest y el módulo pytest.

Es posible que quieras que Gemini Code Assist realmente escriba estas pruebas por ti. Abre calendar.py, donde se encuentra el código de conversión real. En el editor, vuelve a la ventana de chat de Gemini y vuelve a preguntar.

How can I test the number_to_roman function?

La respuesta es más específica ahora, incluso incluye un módulo de prueba de unidades que puedes copiar o insertar en un archivo nuevo:

import unittest
import calendar

class NumberToRomanTest(unittest.TestCase):

    def test_convert_1(self):
        self.assertEqual(calendar.number_to_roman(1), "I")

    def test_convert_4(self):
        self.assertEqual(calendar.number_to_roman(4), "IV")

    def test_convert_9(self):
        self.assertEqual(calendar.number_to_roman(9), "IX")

    def test_convert_40(self):
        self.assertEqual(calendar.number_to_roman(40), "XL")

    def test_convert_90(self):
        self.assertEqual(calendar.number_to_roman(90), "XC")

    def test_convert_400(self):
        self.assertEqual(calendar.number_to_roman(400), "CD")

    def test_convert_900(self):
        self.assertEqual(calendar.number_to_roman(900), "CM")

    def test_convert_1990(self):
        self.assertEqual(calendar.number_to_roman(1990), "MCMXC")

    def test_convert_2023(self):
        self.assertEqual(calendar.number_to_roman(2023), "MMXXIII")

Es posible que veas un código diferente al del ejemplo anterior. Los modelos subyacentes de Gemini Code Assist se actualizan periódicamente, por lo que las respuestas no siempre serán las mismas. Si ves un conjunto de código diferente, ahora puedes elegir si deseas continuar con las muestras que se muestran en este codelab copiando el código que se muestra aquí, o bien puedes probar la respuesta alternativa que Gemini Code Assist te proporciona. Si tienes tiempo, incluso puedes probar ambas rutas. Gemini Code Assist es un asistente de programación que puedes usar como creas conveniente.

Haz clic en la flecha de doble punta ubicada en la esquina superior derecha de la ventana de chat de Gemini para crear un archivo nuevo que contenga el código de prueba de unidades o usa el IDE para crear un archivo nuevo y pegar el código que se muestra en este lab. Presiona CTRL-S o CMD-S en esa ventana para guardarla y llama al archivo guardado calendar-unittest.py.

Regresa a la terminal y presiona CTRL-C para detener el servidor web que dejaste en ejecución antes y obtén una ventana de shell. Ingresa el comando

python3 calendar-unittest.py

para ejecutar las pruebas nuevas.

No hay resultados. No es lo que esperaba. ¿Todo pasó en silencio? Te gustaría saberlo. Mira la respuesta de Gemini Code Assist que incluyó el código de prueba. Debajo del código, había más información sobre cómo ejecutar el caso de prueba:

run-unittest.png

Prueba ejecutar el comando recomendado:

python -m unittest discover

Es posible que tengas un problema si tu máquina no asigna un alias al comando python3 para python, en cuyo caso se ejecuta:

python3 -m unittest discover

Se ejecuta el comando, pero se muestra Ran 0 tests in 0.000s. El módulo tiene varias pruebas. ¿Qué sucede?

Es la última palabra del comando, discover. ¿De dónde provino? Al parecer, Gemini Code Assist esperaba que el código de prueba se guardara en un archivo llamado discover o discover.py, pero no especificó que es lo que debías hacer. Como guardaste el archivo en calendar-unittest.py, intenta ejecutar el comando:

python3 -m unittest calendar-unittest

Ahora verás muchos resultados que comienzan con algo como lo siguiente:

$ python3 -m unittest calendar-unittest
.F.FFFFFF
======================================================================
FAIL: test_convert_1990 (calendar-unittest.NumberToRomanTest)
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/home/charles_engelke/testing-with-duet-ai-codelab/calendar-unittest.py", line 28, in test_convert_1990
    self.assertEqual(calendar.number_to_roman(1990), "MCMXC")
AssertionError: 'MDCCCCLXXXX' != 'MCMXC'
- MDCCCCLXXXX
+ MCMXC

La primera línea muestra un punto para cada prueba aprobada y un F para cada una con errores. La mayoría de las pruebas fallan. Luego, enumera las pruebas fallidas de forma individual y muestra el resultado esperado y el resultado real. No está un poco claro en qué orden se ejecutaron estas pruebas. Estaba en orden alfabético por nombre de prueba, no por el orden en que aparecen las pruebas en el archivo. Primero, se ejecutó test_convert_1, test_convert_1990, luego test_convert_2023, y así sucesivamente. Los casos de prueba de 1 y 2023 son los únicos que se aprobaron.

Cuando probaste este código por primera vez, notaste que convirtió 24 en XXIIII, lo que no era exactamente lo correcto, pero no era la forma común en la que IIII se convierte en IV. Todas las pruebas fallidas fueron para casos similares. Cuando se detectó este problema por primera vez, el lab dijo: "Sin embargo, como no es realmente incorrecto (ten en cuenta que muchos relojes muestran 4 como número romano IIII), deja ese problema para una mejora futura".

Podrías cambiar los casos de prueba de modo que esperen y aceptar las respuestas "en realidad no incorrectas" que se proporcionan en el código, o puedes aceptar que es momento de esa "mejora en el futuro". El siguiente paso es corregir el código, con la ayuda de Gemini Code Assist, para dar las respuestas más aceptables que esperan las pruebas.

6. Mejora el código

Recuerda que respuestas como XXIIII para 24, en lugar de las XXIV más comunes, se consideraron "no realmente incorrectas" y se pospusieron para una mejora futura. Ese futuro es ahora. Esas respuestas que dicen "que no son realmente incorrectas" siguen siendo molestas.

La primera regla para los dígitos repetidos en números romanos es la siguiente: cada vez que tenga cuatro dígitos idénticos en una fila, se deberán reemplazar por uno de los dígitos seguido del siguiente dígito más alto. Por lo tanto, XXIIII debe reemplazarse por XXIV. Del mismo modo, XXXX debe cambiarse a XL, y CCCC debe convertirse en CD.

Pídele a Gemini Code Assist cómo cambiar el valor de la variable roman de esta manera, justo antes de que la muestre number_to_roman:

If the final value of roman has IIII in it, that should be replaced by IV. Similarly XXXX should be replaced by XL, and CCCC should become CD. How can I make those changes?

Te sugerimos agregar código al final:

6437c3fa2c5fabd1.png

Copia y pega o escribe esas líneas en el editor y, luego, observa lo que sucede:

dcefa568cab82fb7.png

Gemini Code Assist agregó más líneas para manejar los casos con los que puedes terminar después de realizar el primer conjunto de sustituciones. Por ejemplo, 19 se convertiría al XVIIII, luego a XVIV y, finalmente, al XIX.

Si Gemini Code Assist hizo sugerencias útiles, presiona Tab para aceptarlas, guardar el archivo y volver a ejecutar el servidor web. De lo contrario, agrega manualmente las líneas que se muestran en este ejemplo y guarda el archivo. Intenta una conversión difícil: 1999:

a206999587fdc9.png

Correcto.

Vuelve a ejecutar las pruebas ahora. ¡Todos aprueban!

La aplicación web parece estar lista para llevar a producción.

7. Implementarla en Cloud Run

Cloud Run ejecutará una aplicación alojada en contenedores en Internet por ti. Para las aplicaciones escritas con frameworks comunes, como Flash, el comando gcloud run deploy incluso compilará ese contenedor por ti antes de implementarlo. Ejecuta el siguiente comando:

gcloud run deploy

En la terminal Cuando se te solicite la ubicación del código fuente, presiona Intro para aceptar la ubicación correcta que sugiere. Del mismo modo, cuando se te solicite un nombre de servicio, presiona Intro para aceptar la sugerencia.

El comando puede fallar porque gcloud no puede determinar qué proyecto usar. En ese caso, ejecuta el siguiente comando:

gcloud config set core/project <project-id>

En el ejemplo anterior, se reemplaza por el ID de tu proyecto, que puede ser igual a su nombre. Luego, vuelve a ejecutar el comando gcloud run deploy.

  • El comando te indicará que se necesitan ciertas APIs y que aún no están habilitadas. Ingresa “y” para habilitarlas.
  • Cuando se te solicite que selecciones una región, elige una que te resulte conveniente. Ingresar el número correspondiente a us-central1 es una opción segura.
  • Cuando se te solicite, ingresa Y para continuar.
  • Deberás permitir invocaciones unauthenticated de este servicio de Cloud Run. La opción de autenticación que usa Cloud Run es adecuada para que la usen los programas que llaman al servicio. Dado que este es un sitio web, no usarás autenticación.

Google Cloud compilará el contenedor, lo implementará, enrutará el tráfico a él y establecerá políticas de acceso; luego, te mostrará el vínculo a la página principal:

94ba7d8d63a44afd.png

Puedes ir a ese vínculo y acceder a tu aplicación.

a2e51666dfd33a9f.png

Ingresa un número, presiona Intro y ¡Listo!

5021535ac991a95c.png

¿Qué?

Funcionó en tu máquina. ¿Por qué no terminó?

Averígualo. Haz una pregunta a Gemini Code Assist

Why am I getting an internal server error on cloud run?

4b24321251d6eddf.png

Aparentemente, Gemini Code Assist puede leer el archivo de registro con un mensaje similar. Preguntémosle a Gemini Code Assist cómo puedes ver los registros por tu cuenta:

92d1855be73ef1d.png

Adelante, hazlo. Busca líneas con indicadores de error rojos con !!, como se muestra a continuación:

9bed4f9ed82de21c.png

Luego, muchas líneas de detalles sobre la pila de llamadas llegan hasta aquí:

47fc93be845f4e3f.png

Cuando observas tu archivo calendar.py, ves la función number_to_roman ahí mismo. Y sabes que es correcto porque funcionó en tu máquina. ¿Qué podría ser diferente en Cloud Run?

La respuesta es complicada. Hay un módulo estándar incluido en Python3 llamado calendar, al igual que el archivo calendar.py en el que está definida la función number_to_roman. En tu máquina local, cuando Python buscó un módulo llamado calendar, primero buscó el directorio de tu aplicación. Al parecer, Python en Cloud Run buscó módulos estándar primero, los importó y no encontró una función number_to_roman.

Este tipo de diferencias en los entornos siempre son posibles. Por suerte, cuando una aplicación está alojada en contenedores, lleva su entorno dentro de ella, por lo que dondequiera que la ejecutes, puedes esperar el mismo comportamiento. Si hubieras ejecutado la misma aplicación alojada en contenedores de manera local que Cloud Run, habrías tenido el mismo problema.

Solucionar este problema. Debes cambiar el nombre de tu módulo de calendario local por uno que no sea también un nombre de módulo estándar. Cambia el nombre del archivo calendar.py a my_calendar.py y, luego, cambia las líneas import calendar de main.py y calendar-unittest.py a import my_calendar. Finalmente, cambia la línea

roman = calendar.number_to_roman(number)

para

roman = my_calendar.number_to_roman(number)

Pruébalo de manera local, ejecuta las pruebas y, luego, vuelve a implementar:

gcloud run deploy

Ahora funciona:

ed288801c6825eb1.png

Puedes compartir esta URL y todas las personas que necesiten una herramienta de conversión de números romanos podrán usar la tuya.

8. Opcional: Dale un aspecto más agradable

La aplicación se ejecuta bien y cualquier persona en la Web puede acceder a ella. Pero es algo sencillo. Antes de contarles a todo el mundo sobre ella, ¿por qué no pedirles a Gemini Code Assist que mejore su aspecto?

Abre el archivo templates/index.html. En la ventana de chat de Gemini, pregunta lo siguiente:

Make this index.html file use material design.

La respuesta es hacer incorporaciones en el archivo actual, lo que da como resultado algo similar a lo siguiente:

<!DOCTYPE html>
<html>
<head>
    <title>Roman Numerals</title>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">   
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>     
</head>
<body>
    <h1 class="mdl-typography--title">Roman Numerals</h1>
    <form action="/convert" method="post">
        <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="number" name="number" required />
            <label class="mdl-textfield__label" for="number">Enter a number:</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
            Convert!
          </button>
    </form>
</body>
</html>

Usa el ícono para copiar el código sugerido y pega el contenido existente de index.html. En la terminal, ejecuta python3 main.py y haz clic en el vínculo para abrir una ventana de vista previa. Ahora la página es un poco menos sencilla:

295643ec03fcaafc.png

Si lo deseas, puedes repetir este proceso con el archivo convert.html.

Gemini Code Assist sabe bastante sobre CSS, y puedes hacer que te ayude a diseñar las páginas de la aplicación de varias maneras. Esto es solo el comienzo.

Dado que quieres compartir esta aplicación, no olvides volver a implementarla en Cloud Run:

gcloud run deploy

Puedes pasar la URL a las personas que necesiten la conversión a números romanos.

9. ¡Felicitaciones!

¡Felicitaciones! Trabajaste correctamente con Gemini Code Assist para agregar pruebas a una aplicación, corregir errores y agregar funcionalidades mejoradas.

Cuando termines de usar la aplicación que compilaste, puedes borrarla del panel de la consola de Cloud para detener los posibles cargos futuros.

Documentos de referencia