Usa Duet AI durante el ciclo de vida del desarrollo de software

1. Descripción general

Un día en la vida de un desarrollador de Google Cloud suele implicar el uso de varios productos y servicios de Google Cloud. Estos productos permiten desarrollar, probar, implementar y administrar aplicaciones en la nube. Con la asistencia de Duet AI, un desarrollador puede aumentar su productividad cuando usa los productos de Google Cloud gracias al chat interactivo, la asistencia para código y las integraciones incorporadas de Duet AI.

Nota: Como tecnología en etapa inicial, Duet AI puede generar resultados que parecen posibles, pero que no son correctos. Te recomendamos que valides todos los resultados de Duet AI antes de usarlos. Para obtener más información, consulta Duet AI en Google Cloud y la IA responsable.

En este lab, se usa la asistencia de Duet AI para implementar “Cymbal Superstore” aplicación web de comestibles. Luego, desarrollarás e implementarás una función nueva y compilarás el frontend y el backend de la app. También obtendrás ayuda de Duet para escribir pruebas para tu app y verás cómo se puede integrar Duet en otras herramientas de Google Cloud.

Objetivos

Aprenderás a hacer lo siguiente:

• Mejora una aplicación web existente con la ayuda de Duet AI.
• Implementar la aplicación en Cloud Run
• Indica a Duet AI que explique un error en la aplicación y proporcione una solución.
• Desarrolla pruebas para la aplicación con la ayuda de Duet AI.
• Consulta los registros de las aplicaciones con la ayuda de Duet AI.

Requisitos previos

• Una cuenta de Google Cloud Platform y un proyecto con facturación habilitada
• Experiencia básica de Linux

2. Configuración

En esta sección, se explica todo lo que debes hacer para comenzar este lab.

Crea un proyecto

Para facilitar la limpieza, crearemos un nuevo proyecto de Google Cloud.

• Navega a https://console.cloud.google.com.
• Haz clic en el menú desplegable del selector de proyectos.
• Selecciona Crear proyecto.
• Asígnale un nombre memorable, como introducción a los contenedores

Habilita Duet AI en el proyecto de Google Cloud

Ahora habilitaremos la API de Duet AI en el proyecto de Google Cloud. Sigue los pasos que se indican a continuación:

1. Ve al panel de la página 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 Duet AI que ves en la esquina superior derecha.

2. La ventana de chat de Duet AI se abrirá en el lado derecho de la consola. Haz clic en el botón Habilitar como se muestra a continuación. Si no ves el botón Habilitar y, en su lugar, ves una interfaz de chat, es probable que ya hayas habilitado Duet AI para el proyecto y puedas ir directamente al siguiente paso.

3. Una vez que esté habilitada, haz una o dos consultas para probar Duet AI. Se muestran algunas consultas de ejemplo, pero puedes intentar algo como “¿Qué es Cloud Run?”

Duet AI responderá tu pregunta. Puedes hacer clic en el ícono _ en la esquina superior derecha para cerrar la ventana de chat de Duet AI.

Habilita Duet AI en el IDE de Cloud Shell

Usaremos el IDE de Cloud Shell en el resto del codelab. Debemos habilitar y configurar Duet AI en el IDE 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.

2. Haz clic en el botón Editor o Abrir editor (según sea el caso) y espera hasta que aparezca el IDE de Cloud Shell. Usarás la función "new" editor, no el heredado.

3. Haz clic en el botón Cloud Code - Acceder en la barra de estado inferior, como se muestra. Autoriza el complemento según las instrucciones. Si ves el mensaje “Cloud Code - no project” (Cloud Code: sin proyecto) en la barra de estado, selecciónalo y, luego, elige el proyecto específico de Google Cloud de la lista de proyectos con los que planeas trabajar.

4. Haz clic en el botón de Duet AI 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.

5. Una vez que selecciones y autorices tu proyecto de Google Cloud, asegúrate de poder verlo en el mensaje de estado de Cloud Code en la barra de estado y de que Duet AI esté habilitado a la derecha, en la barra de estado, como se muestra a continuación:

Duet AI está listo para usarse.

3. Usa Duet AI

Como parte de este lab, crearás una app web. En el lab, se mencionan varios lugares para probar Duet. Pero, si tienes curiosidad, también puedes tomarte el tiempo para pedírselo a Duet en cualquier parte del lab.

Por ejemplo, usarás Terraform para crear e implementar la aplicación básica. Si no sabes qué es Terraform, puedes preguntarle a Duet. Si quieres comprender qué hace cada uno de los pasos, Duet puede explicarlos. ¿Quieres abrir el código y preguntar sobre líneas específicas? Prueba Duet.

Nota: Como tecnología en etapa inicial, Duet AI puede generar resultados que parecen posibles, pero que no son correctos. Te recomendamos que valides todos los resultados de Duet AI antes de usarlos. Para obtener más información, consulta Duet AI en Google Cloud y la IA responsable.

4. Crea la app web

En este lab, se usa “Cymbal Superstore” aplicación web de comestibles. En tareas posteriores de este lab, usarás Duet AI para desarrollar e implementar una función nueva en esta app. Para ver cómo Duet AI te ayuda a comprender el código existente, necesitarás un código existente con el que trabajar, por lo que compilarás los componentes de frontend y backend de esta app ahora.

Cuando trabajes en este proyecto, pasarás de Cloud Shell al editor de Cloud Shell. Una manera fácil de hacerlo es usar los botones en la parte superior de la pantalla:

Configura el entorno

Ejecuta los comandos en Cloud Shell.

1. Configura el ID del proyecto:

gcloud config set project <Google Cloud Project ID>

2. Para ejecutar el auxiliar de credenciales de Docker, ejecuta el siguiente comando:

gcloud auth configure-docker

3. Cuando se te pregunte si deseas continuar, escribe Y.
4. Para descargar “Cymbal Superstore”, haz lo siguiente: código de la aplicación, ejecuta el siguiente comando desde tu directorio raíz en Cloud Shell. Obtendrá el código de Cymbal Superstore de GitHub.

git clone https://github.com/GoogleCloudPlatform/cymbal-superstore

5. Deberás habilitar varias APIs para que este código se ejecute correctamente. En Cloud Shell, ingresa el siguiente comando:

gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com 

6. Cambia al directorio de Terraform en el código que descargaste:

cd cymbal-superstore/terraform

5. Como en este lab no se usará Spanner, usaremos una versión de las instrucciones de Terraform que no instala Spanner. En Cloud Shell, ingresa el siguiente comando:

mv main.tf.nospanner main.tf

8. Para que no tengas que ingresar el nombre y el número de tu proyecto cada vez que ejecutes un comando de Terraform, crea un archivo llamado terraform.tfvars en este directorio terraform. Agrega dos líneas a este archivo con la siguiente información y guárdalo. Puedes encontrar esta información en el panel del proyecto.

project_id="Your project id"
project_number=Your project number

9. Inicializa Terraform con la siguiente línea:

terraform init

10. Por último, implementa los recursos de Terraform en tu proyecto con el siguiente comando. Es posible que debas escribir “sí” durante esta implementación. Este proceso puede tardar hasta 10 minutos, por lo que te recomendamos que examines el diagrama de arquitectura en https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png. También puedes consultar el código existente y usar Duet para comprenderlo.

terraform apply

Una vez que este comando se complete con éxito, deberías ver un resultado similar al siguiente:

11. Actualiza el frontend para que se comunique con el backend inventory_cr_endpoint en el resultado. Para ello, copia el valor de tu inventory_cr_endpoint, abre cymbal-superstore/frontend/.env.production y reemplaza el valor de REACT_APP_INVENTORY_URL.
12. Vuelve a ejecutar terraform apply. Este proceso solo debería tardar un minuto, ya que volverá a implementar tu app de frontend de React en Cloud Storage con la URL de backend actualizada.
13. Abre tu frontend_ip en un navegador. Deberías ver el frontend de Cymbal Superstore. Los cambios pueden tardar unos minutos en propagarse, por lo que es posible que debas verificarlos más de una vez.

14. Haz clic en Novedades, en el lado izquierdo de la página principal de Cymbal. Deberías ver la simulación de una página de frontend con marcadores de posición para los productos. Esto es de esperarse, ya que implementarás el código de la API de Inventory para el backend para publicar la nueva página de productos en la próxima tarea de este lab.

Si tienes problemas para ver la aplicación en el navegador, debes verificar que Cloud Run se haya implementado de forma correcta. Para ello, sigue estos pasos:

• Navega a Cloud Run desde el menú principal de la consola de Cloud.
• Selecciona el servicio inventory de la lista de servicios.
• Selecciona REVISIONS en las pestañas de la página de inventario.

• Asegúrate de que la aplicación de Cloud Run esté implementada cuando lo esperabas:

Si no está implementado, puede implementarlo seleccionando EDIT & IMPLEMENTA NUEVA REVISIÓN en la parte superior de la página y acepta los valores predeterminados.

5. Modifica el backend de la app web

Ahora, usemos Duet AI para agregar funcionalidad al backend de nuestra app web.

En esta tarea, le pedirás a Duet AI que complete el código para implementar el extremo /newproducts en la app. Crearás un extremo en el backend para recuperar los productos nuevos desde Firestore y probarás este extremo antes de implementar el cambio.

Desarrolla el extremo /newproducts

1. Abre el archivo cymbal-superstore/backend/index.ts en el editor de Cloud Shell.
2. En el archivo index.ts, desplázate hasta el comentario de DEMO TASK START, alrededor de la línea 95, donde verás un grupo de líneas con comentarios para esta tarea. Quita todas las líneas comentadas y reemplázalas por la siguiente instrucción de Duet AI:

// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)

3. Para indicarle a Duet AI que genere el código de la función, selecciona el comentario completo y haz clic en la bombilla ( ).
4. En el menú Más acciones, selecciona Generar código.
5. Coloca el cursor sobre el código generado y, en la barra de herramientas de Duet AI, haz clic en Aceptar. Duet AI propaga el código de la función para el extremo /newproducts.

Nota: Es posible que Duet AI genere varias versiones del código de tu instrucción. Puedes elegir una versión específica de la lista en la barra de herramientas.

6. El código generado debería ser similar al siguiente:

app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .where("quantity", ">", 0)
    .get();
  const productsArray: any[] = [];
  products.forEach((product) => {
    const p: Product = {
      id: product.id,
      name: product.data().name,
      price: product.data().price,
      quantity: product.data().quantity,
      imgfile: product.data().imgfile,
      timestamp: product.data().timestamp,
      actualdateadded: product.data().actualdateadded,
    };
    productsArray.push(p);
  });
  res.send(productsArray);
});

Es posible que muchas de las líneas estén subrayadas para advertirte sobre posibles problemas relacionados con las licencias. En este lab, puedes aplicar una corrección rápida, pero, en el futuro, revisa estas advertencias.

7. Si el código generado no es equivalente al ejemplo del paso anterior, es posible que desees reemplazarlo ahora o ver cómo Duet puede ayudar a depurarlo más tarde. También hay una versión del código con el error esperado en el archivo scripts/solutioncode-with-bug.ts ..
8. Guarda el archivo index.ts.

Prueba y depura el extremo /``newproducts

1. En Cloud Shell, ve al directorio cymbal-superstore/backend. Escribe el comando:

npm run start

Esto iniciará el extremo.

2. Para ver los resultados del extremo, abre otra terminal con el signo + en la barra de menú de Cloud Shell y ejecuta el comando:

curl localhost:8000/newproducts

Es posible que veas el error curl: (52) Empty reply from server en la terminal nueva y un mensaje de error largo con los detalles 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' en la terminal que ejecuta el extremo.

3. Corrijamos ese error. Pero primero debemos entender qué significa el mensaje de error. Para ello, le pediremos a Duet. Abre el chat de Duet AI desde el menú del lado izquierdo del editor de Cloud Shell y pregunta lo siguiente:

I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

Duet debería ofrecerte algunas opciones para corregirlo, incluida la eliminación de uno de los filtros de desigualdad. Para resolverlo, borra la línea .where("quantity", ">", 0) de index.ts de modo que solo tengamos un filtro en nuestra consulta.

4. Repite los dos primeros pasos anteriores para reiniciar el servidor y obtener la lista de productos. Debería tener éxito en este momento, pero, si no es así, usa Duet para resolver el problema (o usa la solución corregida en scripts/solutioncode-bug-fixed.ts para continuar).

Implementa el cambio

Para implementar la aplicación modificada, simplemente vuelve a ejecutar terraform apply desde el directorio terraform en Cloud Shell. Luego, podrás ver la app en la dirección IP que proporciona Terraform.

6. Escritura de pruebas

Una tarea importante que a menudo no se prioriza es crear pruebas para el código de un proyecto. Como te habrás dado cuenta, Duet puede ayudar a crear estas pruebas.

Creemos pruebas para el código newproducts que acabamos de crear.

1. Abre backend/index.test.ts. Usa el chat de Duet AI para generar una prueba para la función newproducts() con la siguiente instrucción:

Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

Notarás que proporciona líneas import que ya están en el archivo. Copia solo la prueba describe() en el archivo en las líneas que se indican. Guarda el archivo.

Como alternativa, puedes mejorar la instrucción y decirle a Duet que no incluya ninguna sentencia de importación, por lo que deberías obtener solo el código que necesitas.

2. Para ver los resultados de la prueba, ve a Cloud Shell, cambia el directorio a la carpeta backend y ejecuta el comando:

npm run test

7. Logging

Duet AI puede ayudar a tu proyecto incluso después de implementarlo. En esta sección, veremos los registros con la ayuda de Duet AI.

Regresa a la consola de Cloud y asegúrate de que Duet se esté ejecutando. Pregúntale a Duet dónde encontrar los registros. Puedes probar tu propia instrucción, pero si no da una respuesta adecuada, la siguiente debería funcionar.

How can I view the Cloud Run logs for the service called 'inventory'?

Duet AI debería sugerir ir a la página de Cloud Run, seleccionar el servicio de inventario y, luego, examinar los registros de ese servicio. Deberías ver algo como lo siguiente:

Selecciona uno de los elementos y pídele a Duet AI que lo explique. Deberías obtener una descripción de la entrada en lenguaje natural.

También puedes ver las entradas de registro en el Explorador de registros, el cual puedes abrir desde la opción Logging en el menú principal. Una ventaja de ver las entradas de registro desde el Explorador de registros es que la opción para explicar las entradas está integrada, como se muestra a continuación:

8. ¡Felicitaciones!

¡Felicitaciones! Usaste Duet AI de forma correcta para comprender códigos que quizás nunca antes viste. Mejoraste este código, creaste pruebas para él y usaste Duet para comprender las entradas de registro.

Limpieza

Borrar proyecto

Para realizar la limpieza, simplemente borramos nuestro proyecto.

• En el menú de navegación, selecciona IAM y Administrador
• Luego, haz clic en Configuración en el submenú
• Haz clic en el ícono de la papelera con el texto “Delete Project”.
• Sigue las instrucciones que aparecen.

En este lab, aprendimos a realizar las siguientes tareas:

• Mejora una aplicación web existente con la ayuda de Duet AI.
• Implementar la aplicación en Cloud Run
• Indica a Duet AI que explique un error en la aplicación y proporcione una solución.
• Desarrolla pruebas para la aplicación con la ayuda de Duet AI.
• Consulta los registros de las aplicaciones con la ayuda de Duet AI.