Como usar a Duet AI durante todo o ciclo de vida do desenvolvimento de software

1. Visão geral

Um dia na vida de um desenvolvedor do Google Cloud geralmente envolve usar vários produtos e serviços dessa infraestrutura. Com esses produtos, o profissional pode desenvolver, testar, implantar e gerenciar aplicativos na nuvem. Com a ajuda da Duet AI, um desenvolvedor pode se tornar mais produtivo ao usar os produtos do Google Cloud usando o chat interativo, a assistência de código e as integrações incorporadas da Duet AI.

Observação:por ser uma tecnologia em estágio inicial, a Duet AI pode gerar uma saída plausível, mas que é factualmente incorreta. Recomendamos validar todas as saídas da Duet AI antes de usá-la. Para mais informações, consulte Duet AI no Google Cloud e IA responsável.

Este laboratório usa a assistência da Duet AI para implantar a "Cymbal Superstore" app da Web de supermercado. Depois você vai desenvolver e implantar um novo recurso e criar a frente e o back-end do app. Você também vai receber ajuda para criar testes para seu app e conferir como ela pode ser integrada a outras ferramentas do Google Cloud.

Objetivos

Você vai aprender a:

• Aprimore um aplicativo da Web atual com a ajuda da Duet AI.
• Implantar o aplicativo no Cloud Run.
• solicite que a Duet AI explique um erro no aplicativo e forneça uma correção.
• Desenvolver testes para o aplicativo com a ajuda da Duet AI.
• Confira os registros do aplicativo com a ajuda da Duet AI.

Pré-requisitos

• uma conta do Google Cloud Platform e um projeto com faturamento ativado;
• Experiência básica com Linux

2. Configuração

Nesta seção, você vai encontrar tudo o que precisa fazer para começar o laboratório.

Criar um projeto

Para facilitar a limpeza, vamos criar um novo projeto do Google Cloud.

• Acesse https://console.cloud.google.com.
• Clique no menu suspenso do seletor de projetos
• Selecione Criar projeto
• Use um nome memorável, como introdução aos contêineres.

Ativar a Duet AI no projeto do Google Cloud

Agora ative a API Duet AI no projeto do Google Cloud. Siga estas etapas:

1. Acesse o painel https://console.cloud.google.com e verifique se você selecionou o projeto do Google Cloud com que pretende trabalhar neste laboratório. Clique no ícone da Duet AI no canto superior direito.

2. A janela de chat da Duet AI vai abrir no lado direito do console. Clique no botão "Ativar" como mostrado abaixo. Se o botão "Ativar" não aparecer e, em vez disso, uma interface de chat aparecer, é provável que você já tenha ativado a Duet AI para o projeto e passe diretamente para a próxima etapa.

3. Depois da ativação, é possível testar a Duet AI com uma ou duas consultas. Você verá alguns exemplos de consulta, mas é possível tentar algo como "O que é o Cloud Run?"

A Duet AI vai responder à pergunta. Clique no ícone _ no canto superior direito para fechar a janela de chat da Duet AI.

Ativar a Duet AI no Cloud Shell IDE

Vamos usar o Cloud Shell IDE no restante do codelab. É necessário ativar e configurar a Duet AI nesse ambiente. Por isso, siga as etapas abaixo:

1. Inicie o Cloud Shell com o ícone mostrado abaixo. Esse processo pode levar um ou dois minutos.

2. Clique no botão "Editor" ou "Abrir editor" (conforme o caso) e aguarde até que o ambiente de desenvolvimento integrado do Cloud Shell apareça. Você vai usar o campo "novo" não o editor legado.

3. Clique no botão "Cloud Code - Fazer login" na barra de status da parte de baixo, conforme mostrado. Autorize o plug-in conforme instruído. Se a mensagem "Cloud Code - no project" for exibida Na barra de status, selecione o projeto específico do Google Cloud na lista de projetos com que você pretende trabalhar.

4. Clique no botão da Duet AI no canto inferior direito, conforme mostrado, e selecione o projeto correto do Google Cloud em que a API Cloud AI Companion foi ativada.

5. Depois de selecionar e autorizar seu projeto do Google Cloud, verifique se aparece na mensagem de status do Cloud Code na barra de status e se a Duet AI também está ativada à direita, na barra de status, conforme mostrado abaixo:

A Duet AI está pronta para uso.

3. Como usar a Duet AI

Você criará um app da Web neste laboratório. O laboratório aponta muitos lugares para testar a Duet AI. Se tiver curiosidade, pergunte à Duet AI em qualquer lugar do laboratório.

Por exemplo, você vai usar o Terraform para criar e implantar o aplicativo básico. Se você não sabe o que é o Terraform, pergunte à Duet AI. Se você quiser entender a função de cada uma das etapas, a Duet AI pode explicá-las. Quer realmente abrir o código e perguntar sobre linhas específicas? Teste a Duet AI.

Observação:por ser uma tecnologia em estágio inicial, a Duet AI pode gerar uma saída plausível, mas que é factualmente incorreta. Recomendamos validar todas as saídas da Duet AI antes de usá-la. Para mais informações, consulte Duet AI no Google Cloud e IA responsável.

4. criar o app da Web

Este laboratório usa a Cymbal Superstore app da Web de supermercado. Nas próximas tarefas deste laboratório, você vai usar a Duet AI para desenvolver e implantar um novo recurso neste app. Para entender como o Gemini ajuda a entender o código atual, você vai precisar de um código que já existe para trabalhar, então você vai criar os componentes de front-end e back-end desse app agora.

Você alternará entre o Cloud Shell e o Editor do Cloud Shell enquanto trabalha neste projeto. Uma maneira fácil de fazer isso é usar os botões na parte superior da tela:

Configurar o ambiente

Execute os comandos no Cloud Shell.

1. Defina o ID do projeto:

gcloud config set project <Google Cloud Project ID>

2. Para executar o recurso de ajuda de credencial do Docker, execute o seguinte comando:

gcloud auth configure-docker

3. Quando aparecer uma mensagem perguntando se você quer continuar, digite Y.
4. Para fazer o download da "Cymbal Superstore" código do aplicativo, execute o seguinte comando no seu diretório raiz no Cloud Shell. Ele vai receber o código da Cymbal Superstore no GitHub.

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

5. Você precisa ativar várias APIs para que esse código funcione corretamente. No Cloud Shell, digite o comando abaixo:

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

6. Mude para o diretório do Terraform no código que você salvou:

cd cymbal-superstore/terraform

5. Como este laboratório não vai usar o Spanner, vamos usar uma versão das instruções do Terraform que não instala o Spanner. No Cloud Shell, digite o comando abaixo:

mv main.tf.nospanner main.tf

8. Para não precisar inserir o nome e o número do projeto sempre que executar um comando do Terraform, crie um arquivo chamado terraform.tfvars no diretório terraform. Adicione duas linhas a esse arquivo com as informações abaixo e salve o arquivo. É possível encontrar essas informações no painel do projeto.

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

9. Inicialize o Terraform com a linha:

terraform init

10. Por fim, use o comando abaixo para implantar os recursos do Terraform no seu projeto. Talvez você precise digitar "yes" durante a implantação. Como esse processo pode levar até 10 minutos, você pode examinar o diagrama de arquitetura disponível em https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png. Você também pode analisar o código existente e usar a Duet AI para nos ajudar a entendê-lo.

terraform apply

Depois que o comando for concluído, você verá uma resposta semelhante a esta:

11. Atualize seu front-end para se comunicar com o back-end inventory_cr_endpoint em sua saída. Para fazer isso, copie o valor do inventory_cr_endpoint, abra cymbal-superstore/frontend/.env.production e substitua o valor de REACT_APP_INVENTORY_URL.
12. Execute terraform apply novamente. Isso leva apenas um minuto, porque ele reimplanta seu app React de front-end no Cloud Storage usando o URL de back-end atualizado.
13. Abra o frontend_ip em um navegador. Você verá o front-end da Cymbal Superstore. As alterações podem levar alguns minutos para serem propagadas, então talvez seja necessário verificá-las mais de uma vez.

14. Clique em "Novidades" no lado esquerdo da página inicial da Cymbal. Haverá uma página de front-end fictícia com produtos marcadores de posição. Isso é esperado, já que você vai implementar o código da API Inventory do back-end para exibir a nova página de produtos na próxima tarefa deste laboratório.

Se você não conseguir ver o aplicativo no navegador, verifique se o Cloud Run foi implantado corretamente. Para fazer isso:

• Navegue até o Cloud Run no menu principal do console do Cloud.
• Selecione o inventory na lista de serviços.
• Selecione REVISÕES nas guias da página do inventário.

• Verifique se o aplicativo do Cloud Run foi implantado quando você esperava que ele estivesse:

Se ele não estiver implantado, você pode implantá-lo selecionando EDIT & IMPLANTAR NOVA REVISÃO na parte superior da página e aceitar os valores padrão.

5. modificar o back-end do app da Web

Agora, vamos usar a Duet AI para adicionar funcionalidade ao nosso back-end de app da Web.

Nesta tarefa, você vai solicitar o preenchimento de código à Duet AI para implementar o endpoint /newproducts no app. Você criará um endpoint no back-end para recuperar os novos produtos do Firestore e testará esse endpoint antes de implantar a alteração.

Desenvolver o endpoint /newproducts

1. Abra o arquivo cymbal-superstore/backend/index.ts no editor do Cloud Shell.
2. No arquivo index.ts, role até o comentário de DEMO TASK START, próximo à linha 95, onde você verá um grupo de linhas comentadas para essa tarefa. Remova todas as linhas comentadas e substitua-as pelo seguinte comando da Duet AI:

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

3. Para solicitar que a Duet AI gere o código de função, selecione o comentário inteiro e clique na lâmpada ( ).
4. No menu "Mais ações", selecione "Gerar código".
5. Passe o cursor sobre o código gerado e clique em "Aceitar" na barra de ferramentas da Duet AI. A Duet AI preenche o código da função do endpoint /newproducts.

Observação: a Duet AI pode gerar várias versões do código para seu comando. Role pela lista na barra de ferramentas para escolher uma versão específica.

6. O código gerado deve ser semelhante ao seguinte:

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);
});

Muitas linhas podem ser sublinhadas para avisar sobre possíveis problemas de licenciamento. Neste laboratório, é possível aplicar uma correção rápida, mas, no futuro, verifique esses avisos.

7. Se o código gerado não parecer equivalente ao exemplo da etapa anterior, é possível substituí-lo agora ou conferir como a Duet AI pode ajudar a depurar mais tarde. Há também uma versão do código com o erro esperado no arquivo scripts/solutioncode-with-bug.ts .
8. Salve o arquivo index.ts.

Como testar e depurar o endpoint /``newproducts

1. No Cloud Shell, mova para o diretório cymbal-superstore/backend. Digite o comando:

npm run start

Isso vai iniciar o endpoint.

2. Para ver os resultados do endpoint, abra outro terminal usando "+" na barra de menus do Cloud Shell e execute o comando:

curl localhost:8000/newproducts

O erro curl: (52) Empty reply from server pode aparecer no novo terminal e uma mensagem longa com os detalhes 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' no terminal que executa o endpoint.

3. Vamos corrigir esse erro. Mas primeiro precisamos entender o que a mensagem de erro significa. Para isso, vamos perguntar à Duet AI. Abra o chat da Duet AI no menu do lado esquerdo do editor do Cloud Shell e faça o seguinte:

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

A Duet AI oferece algumas opções para corrigir isso, incluindo a remoção de um dos filtros de desigualdade. Para resolver isso, exclua a linha .where("quantity", ">", 0) de index.ts para que tenhamos apenas um filtro na consulta.

4. Repita as duas primeiras etapas acima para reiniciar o servidor e receber a lista de produtos. Ela deve dar certo agora. Caso contrário, use a Duet AI para descobrir o problema ou use a solução corrigida em scripts/solutioncode-bug-fixed.ts para seguir em frente.

Como implantar a mudança

Para implantar o aplicativo alterado, execute terraform apply novamente no diretório terraform no Cloud Shell. Em seguida, visualize o app no endereço IP fornecido pelo Terraform.

6. Como programar testes

Uma tarefa importante que muitas vezes não é priorizada é a criação de testes para o código em um projeto. Como você deve ter percebido, a Duet AI pode ajudar a criar esses testes.

Vamos criar testes para o código newproducts que acabamos de criar.

1. Abra backend/index.test.ts. Use o chat da Duet AI para gerar um teste para a função newproducts() com o comando:

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.

Você notará que ele fornece linhas import, que já estão no arquivo. Copie apenas o teste describe() para o arquivo nas linhas indicadas. Salve o arquivo.

Como alternativa, é possível melhorar o comando e dizer à Duet AI para não incluir instruções de importação. Assim, você receberá apenas o código necessário.

2. Para acessar os resultados do teste, acesse o Cloud Shell, altere o diretório para a pasta backend e execute o comando:

npm run test

7. Logging

A Duet AI pode ajudar seu projeto mesmo após a implantação. Nesta seção, vamos analisar os registros com a ajuda da Duet AI.

Volte para o console do Cloud e verifique se a Duet AI está em execução. Pergunte à Duet AI onde encontrar os registros. Fique à vontade para testar seu próprio comando, mas se ele não der uma resposta adequada, o comando a seguir vai funcionar.

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

O Gemini deve sugerir que você acesse a página do Cloud Run, selecione o serviço de inventário e examine os registros desse serviço. Você verá um código como este:

Selecione um dos itens e peça à Duet AI para explicar. Você vai receber uma descrição da entrada em linguagem natural.

Também é possível ver as entradas de registro na Análise de registros, que pode ser aberta na opção "Geração de registros" no menu principal. Uma vantagem de visualizar as entradas de registro na Análise de registros é que a opção para explicar entradas está integrada, conforme mostrado abaixo:

8. Parabéns!

Parabéns! Você usou corretamente a Duet AI para entender um código que talvez nunca tenha visto antes. Você aprimorou esse código, criou testes e usou a Duet AI para entender as entradas de registro.

Limpeza

Excluir projeto

Para fazer a limpeza, basta excluir o projeto.

• No menu de navegação, selecione IAM & Administrador
• Em seguida, clique em "Configurações" no submenu.
• Clique no ícone de lixeira com o texto "Delete Project" (Excluir projeto).
• Siga as instruções dos comandos.

Neste laboratório, você aprendeu a:

• Aprimore um aplicativo da Web atual com a ajuda da Duet AI.
• Implantar o aplicativo no Cloud Run.
• solicite que a Duet AI explique um erro no aplicativo e forneça uma correção.
• Desenvolver testes para o aplicativo com a ajuda da Duet AI.
• Confira os registros do aplicativo com a ajuda da Duet AI.