Implantar automaticamente o aplicativo da Web Genkit de IA generativa do Node.js do controle de versões para o Cloud Run

1. Visão geral

Implantar um aplicativo da Web pela primeira vez pode ser assustador. Mesmo depois da primeira implantação, se o processo for muito trabalhoso, você poderá evitar a implantação de novas versões do aplicativo. Com a implantação contínua, é possível implantar automaticamente as mudanças do seu aplicativo com facilidade.

Neste laboratório, você vai escrever um aplicativo da Web e configurar o Cloud Run para implantar automaticamente o aplicativo quando uma mudança for feita no código-fonte. Em seguida, modifique e implante o aplicativo novamente.

O que você vai aprender

• Escrever um aplicativo da Web com o editor do Cloud Shell
• Armazenar o código do aplicativo no GitHub
• Implantar automaticamente seu aplicativo no Cloud Run

• Adicionar IA generativa ao seu aplicativo usando o Genkit
• Gerenciar comandos de LLM usando a biblioteca dotprompt

2. Pré-requisitos

1. Se você ainda não tiver uma Conta do Google, crie uma.
   • Use uma conta pessoal em vez de uma conta escolar ou de trabalho. As contas escolares e de trabalho podem ter restrições que impedem a ativação das APIs necessárias para este laboratório.
2. Se você ainda não tiver uma conta no GitHub, crie uma
   .
   • Se você já tiver uma conta, use-a, porque é mais provável que o GitHub bloqueie uma conta nova como spam.
   • Configure a autenticação de dois fatores na sua conta do GitHub para reduzir as chances de sua conta ser marcada como spam.

3. Configurar o projeto

1. Faça login no Console do Google Cloud.
2. Ative o faturamento no Console do Cloud.
   • A conclusão deste laboratório custa menos de US $1 em recursos do Cloud.
   • Siga as etapas no final deste laboratório para excluir recursos e evitar mais cobranças.
   • Novos usuários podem aproveitar a avaliação sem custos financeiros de US$300.
   • Vai participar de um evento sobre IA generativa para desenvolvedores? Um crédito de US$1 pode estar disponível.
3. Crie um projeto ou reutilize um projeto existente.
4. Confirme se o faturamento está ativado em Meus projetos no Faturamento do Cloud
   • Se o novo projeto mostrar Billing is disabled na coluna Billing account:
     1. Clique nos três pontos na coluna Actions.
     2. Clique em Mudar faturamento.
     3. Selecione a conta de faturamento que você quer usar.
   • Se você estiver participando de um evento de IA generativa para desenvolvedores, a conta provavelmente será chamada de Conta de faturamento de avaliação do Google Cloud Platform.

4. Abrir editor do Cloud Shell

1. Acesse o editor do Cloud Shell.
2. Se o terminal não aparecer na parte de baixo da tela, abra-o:
   • Clique no menu de navegação .
   • Clique em Terminal.
   • Clique em Novo Terminal.
3. No terminal, defina o projeto com este comando:
   • Formato:

     gcloud config set project [PROJECT_ID]
     

   • Exemplo:

     gcloud config set project lab-project-id-example
     

   • Se você não se lembrar do ID do projeto:
     • Para listar todos os IDs de projeto, use:

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
4. Se for preciso autorizar, clique em Autorizar para continuar.
5. Você vai receber esta mensagem:

   Updated property [core/project].
   

   Se você encontrar um WARNING e receber a pergunta Do you want to continue (Y/N)?, provavelmente inseriu o ID do projeto de forma incorreta. Pressione N, Enter e tente executar o comando gcloud config set project novamente.

5. Ativar APIs

No terminal, ative as APIs:

gcloud services enable \
  run.googleapis.com \
  cloudbuild.googleapis.com \
  aiplatform.googleapis.com

Esse comando pode levar alguns minutos para ser concluído, mas vai gerar uma mensagem de sucesso semelhante a esta:

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

6. Configurar o Git

1. Defina seu e-mail de usuário global do Git:

   git config --global user.email "[e-mail]"
   

2. Defina seu nome de usuário global do Git:

   git config --global user.name "Your Name"
   

3. Defina sua ramificação padrão global do Git como main:

   git config --global init.defaultBranch main
   

7. Escrever o código

Para escrever um aplicativo em Node.js:

1. Navegue até o diretório principal:

   cd ~
   

2. Crie o diretório codelab-genai:

   mkdir codelab-genai
   

3. Navegue até o diretório codelab-genai:

   cd codelab-genai
   

4. Crie um arquivo index.js:

   touch index.js
   

5. Crie o arquivo package.json:

   npm init es6 -y
   

6. Adicionar express como uma dependência

   npm install express
   

7. Adicionar arquivo .gitignore para evitar o commit de node_modules

   echo node_modules/ >> .gitignore
   

8. Abra o arquivo index.js no editor do Cloud Shell:

   cloudshell edit index.js
   

   Um arquivo vazio vai aparecer na parte de cima da tela. É aqui que você pode editar o arquivo index.js.
9. Copie o código a seguir e cole no arquivo index.js aberto:

   import express from 'express';
   
   const app = express();
   app.get('/', async (req, res) => {
       res.send('Hello world!');
   });
   
   const port = process.env.PORT || 8080;
   app.listen(port, () => {
       console.log(`codelab-genai: listening on port ${port}`);
   });
   

   Depois de alguns segundos, o Cloud Shell Editor vai salvar seu código automaticamente. Esse código responde a solicitações HTTP com a saudação "Hello world!".

O código inicial do aplicativo está concluído e pronto para ser armazenado no controle de versão.

8. Criar um repositório

1. Volte ao terminal do Cloud Shell na parte de baixo da tela.
2. Verifique se você ainda está no diretório correto:

   cd ~/codelab-genai
   

3. Inicializar o repositório Git

   git init -b main
   

4. Faça login na CLI do GitHub

   gh auth login
   

   Pressione Enter para aceitar as opções padrão e siga as instruções na ferramenta de CLI do GitHub, incluindo:
   1. Em qual conta você quer fazer login? GitHub.com
   2. Qual é seu protocolo preferido para operações do Git neste host? HTTPS
   3. Autenticar o Git com suas credenciais do GitHub? Y (pule se esta opção não aparecer).
   4. Como você quer autenticar a CLI do GitHub? Login with a web browser
   5. Copie o código único
   6. Abra https://github.com/login/device.
   7. Cole o código de uso único
   8. Clique em Autorizar o GitHub.
   9. Conclua o login
5. Confirme que você fez login:

   gh api user -q ".login"
   

   Se você tiver feito login, seu nome de usuário do GitHub vai aparecer.
6. Criar uma variável GITHUB_USERNAME

   GITHUB_USERNAME=$(gh api user -q ".login")
   

7. Confirme se você criou a variável de ambiente:

   echo ${GITHUB_USERNAME}
   

   Se você tiver criado a variável, seu nome de usuário do GitHub vai aparecer.
8. Crie um repositório vazio do GitHub chamado codelab-genai:

   gh repo create codelab-genai --private
   

   Se você receber o erro:

   GraphQL: Name already exists on this account (createRepository)
   

   Então você já tem um repositório chamado codelab-genai. Você tem duas opções para continuar seguindo este tutorial:
   • Excluir o repositório do GitHub atual
   • Crie um repositório com um nome diferente e não se esqueça de mudá-lo nos comandos a seguir.
9. Adicione o repositório codelab-genai como o controle remoto origin:

   git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
   

9. Compartilhar seu código

1. Confirme se você está no diretório correto:

   cd ~/codelab-genai
   

2. Adicione todos os arquivos no diretório atual a este commit:

   git add .
   

3. Crie o primeiro commit:

   git commit -m "add http server"
   

4. Envie o commit para a ramificação main do repositório origin:

   git push -u origin main
   

Execute este comando e acesse o URL resultante para conferir o código do aplicativo no GitHub:

echo -e "\n\nTo see your code, visit this URL:\n \
    https://github.com/${GITHUB_USERNAME}/codelab-genai/blob/main/index.js \n\n"

10. Configurar implantações automáticas

1. Deixe a guia do editor do Cloud Shell aberta. Vamos voltar a essa guia mais tarde.
2. Em uma nova guia, acesse a página do Cloud Run.
3. Selecione o projeto correto do Google Cloud no console
4. Clique em CONECTAR REPO.
5. Clique em CONFIGURAR COM O CLOUD BUILD
   .
   1. Selecione GitHub como o Provedor de repositório
      .
      • Se você não tiver feito login na sua conta do GitHub no navegador, faça login com suas credenciais.
   2. Clique em Autenticar e em Continuar.
   3. Depois de fazer login, você vai ver uma mensagem na página do Cloud Run informando que O app GitHub não está instalado em nenhum dos seus repositórios.
   4. Clique no botão INSTALAR O GOOGLE CLOUD BUILD.
      • Na página "Configuração da instalação", selecione Somente repositórios selecionados e escolha o repositório codelab-genai que você criou usando a CLI.
      • Clique em Instalar.
      • Observação: se você tiver muitos repositórios do GitHub, isso pode levar alguns minutos para carregar.
   5. Selecione your-user-name/codelab-genai como o repositório
      .
      • Se o repositório não estiver presente, clique no link Gerenciar repositórios conectados.
   6. Deixe Ramificação como ^main$
   7. Clique em Go, Node.js, Python, Java, .NET Core, Ruby ou PHP via buildpacks do Google Cloud
      • Deixe os outros campos (Build context directory, Entrypoint e Function target) como estão.
   8. Clique em Salvar.
6. Role a tela para baixo até Autenticação.
7. Clique em Permitir invocações não autenticadas.
8. Clique em CRIAR.

Quando o build terminar (o que leva vários minutos), execute este comando e acesse o URL resultante para ver o aplicativo em execução:

echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

11. Mudar o código

Volte ao editor do Cloud Shell.

Se você ainda tiver o editor do Cloud Shell aberto, pule estas etapas.

1. Acesse o editor do Cloud Shell.
2. Se o terminal não aparecer na parte de baixo da tela, abra-o:
   • Clique no menu de navegação .
   • Clique em Terminal.
   • Clique em Novo Terminal.
3. No terminal, defina o projeto com este comando:
   • Formato:

     gcloud config set project [PROJECT_ID]
     

   • Exemplo:

     gcloud config set project lab-project-id-example
     

   • Se você não se lembrar do ID do projeto:
     • Para listar todos os IDs de projeto, use:

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
4. Se for preciso autorizar, clique em Autorizar para continuar.
5. Você vai receber esta mensagem:

   Updated property [core/project].
   

   Se você encontrar um WARNING e receber a pergunta Do you want to continue (Y/N)?, provavelmente inseriu o ID do projeto de forma incorreta. Pressione N, Enter e tente executar o comando gcloud config set project novamente.

Adicionar o Genkit e a Vertex AI ao seu aplicativo

1. Volte ao terminal do Cloud Shell na parte de baixo da tela.
2. Verifique se você ainda está no diretório correto:

   cd ~/codelab-genai
   

3. Instale o SDK do Genkit para Node.js:

   npm install @genkit-ai/ai
   

4. Instale o SDK do Genkit para Node.js na Vertex AI:

   npm install @genkit-ai/vertexai
   

5. Reabra index.js no editor do Cloud Shell.

   cloudshell edit ~/codelab-genai/index.js
   

6. Substitua o código no arquivo index.js por:

   import express from 'express';
   const app = express();
   
   import { genkit } from 'genkit';
   import { gemini15Flash, vertexAI } from '@genkit-ai/vertexai';
   
   const ai = genkit({
       plugins: [
           vertexAI({ location: 'us-central1' }),
       ],
   });
   
   app.get('/', async (req, res) => {
       const animal = req.query.animal || 'dog';
       const prompt = `Give me 10 fun facts about ${animal}. Return this as html without backticks.`
       const llmResponse = await ai.generate({
           model: gemini15Flash,
           prompt: prompt,
       });
       const html = llmResponse.text;
       res.send(html);
   });
   
   const port = process.env.PORT || 8080;
   app.listen(port, () => {
       console.log(`codelab-genai: listening on port ${port}`);
   });
   

1. Confirme se você ainda está no diretório correto no Cloud Shell:

   cd ~/codelab-genai
   

2. Execute estes comandos para confirmar uma nova versão do aplicativo no repositório git local:

   git add .
   git commit -m "add latest changes"
   

3. Envie as mudanças para o GitHub:

   git push
   

4. Quando o build terminar, execute este comando e acesse o aplicativo implantado:

   echo -e "\n\nOnce the build finishes, visit your live application:\n \
       "$( \
           gcloud run services list | \
           grep codelab-genai | \
           awk '/URL/{print $2}' | \
           head -1 \
       )" \n\n"
   

Pode levar vários minutos para que o build seja concluído e as mudanças apareçam.

Confira o histórico de todas as revisões aqui: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

12. (Opcional) Usar arquivos .prompt com o Genkit

1. Volte ao terminal do Cloud Shell na parte de baixo da tela.
2. Verifique se você ainda está no diretório correto:

   cd ~/codelab-genai
   

3. Crie uma pasta prompts para armazenar seus comandos:

   mkdir prompts
   

4. Crie um arquivo animal-facts.prompt para criar seu primeiro comando:

   touch prompts/animal-facts.prompt
   

5. Abra o arquivo animal-facts.prompt no editor do Cloud Shell:

   cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
   

6. Edite animal-facts.prompt e cole o seguinte código:

   ---
   model: vertexai/gemini-1.5-flash
   input:
       schema:
           animal: string
   ---
   
   Give me 10 fun facts about {{animal}}. Return the results as HTML without markdown backticks.
   

7. Abra o arquivo index.js no editor do Cloud Shell:

   cloudshell edit ~/codelab-genai/index.js
   

8. Substitua o código no arquivo index.js por:

   import express from 'express';
   const app = express();
   
   import { genkit } from 'genkit';
   import { vertexAI } from '@genkit-ai/vertexai';
   
   const ai = genkit({
       plugins: [
           vertexAI({ location: 'us-central1' }),
       ],
   });
   
   app.get('/', async (req, res) => {
       const animal = req.query.animal || 'dog';
       const animalPrompt = ai.prompt('animal-facts');
       const llmResponse = await animalPrompt({animal});
       const html = llmResponse.text;
       res.send(html);
   });
   
   const port = process.env.PORT || 8080;
   app.listen(port, () => {
       console.log(`codelab-genai: listening on port ${port}`);
   });
   

1. Confirme se você ainda está no diretório correto no Cloud Shell:

   cd ~/codelab-genai
   

2. Execute estes comandos para confirmar uma nova versão do aplicativo no repositório git local:

   git add .
   git commit -m "add latest changes"
   

3. Envie as mudanças para o GitHub:

   git push
   

4. Quando o build terminar, execute este comando e acesse o aplicativo implantado:

   echo -e "\n\nOnce the build finishes, visit your live application:\n \
       "$( \
           gcloud run services list | \
           grep codelab-genai | \
           awk '/URL/{print $2}' | \
           head -1 \
       )" \n\n"
   

Pode levar vários minutos para que o build seja concluído e as mudanças apareçam.

Confira o histórico de todas as revisões aqui: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

13. (Opcional) Usar comandos do sistema

Nesta etapa, presume-se que você já tenha adicionado arquivos .prompt na etapa anterior.

1. Volte ao terminal do Cloud Shell na parte de baixo da tela.
2. Verifique se você ainda está no diretório correto:

   cd ~/codelab-genai
   

3. Abra o arquivo animal-facts.prompt no editor do Cloud Shell:

   cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
   

4. Edite animal-facts.prompt e cole o seguinte código:

   ---
   model: vertexai/gemini-1.5-flash
   config:
       temperature: 0.9
   input:
       schema:
           animal: string
   ---
   
   role "system"
   The user should have submitted an animal.
   If the user requests anything besides animal fun facts, respond in a kind and firm manner that you only provide information about fun facts.
   Give the user 10 fun facts about the animal the user provided.
   All responses should be valid HTML without markdown backticks.
   
   role "user"
   {{animal}}
   

1. Confirme se você ainda está no diretório correto no Cloud Shell:

   cd ~/codelab-genai
   

2. Execute estes comandos para confirmar uma nova versão do aplicativo no repositório git local:

   git add .
   git commit -m "add latest changes"
   

3. Envie as mudanças para o GitHub:

   git push
   

4. Quando o build terminar, execute este comando e acesse o aplicativo implantado:

   echo -e "\n\nOnce the build finishes, visit your live application:\n \
       "$( \
           gcloud run services list | \
           grep codelab-genai | \
           awk '/URL/{print $2}' | \
           head -1 \
       )" \n\n"
   

Pode levar vários minutos para que o build seja concluído e as mudanças apareçam.

Confira o histórico de todas as revisões aqui: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

14. Parabéns

Neste laboratório, você escreveu um aplicativo da Web e configurou o Cloud Run para implantar automaticamente o aplicativo quando uma mudança fosse feita no código-fonte. Em seguida, você modificou e implantou o aplicativo novamente.

Se você gostou deste laboratório, tente de novo em outra linguagem de programação ou framework:

• Python
• Node.js
• Go
• Java
• Angular
• Next.js

Confira algumas opções para continuar aprendendo:

• Documentos do Genkit: Começar
• Codelab para adicionar observabilidade ao seu aplicativo Node.js: Técnicas práticas de observabilidade para aplicativos de IA generativa em JavaScript
• Codelab para adicionar um front-end ao seu aplicativo com o Next.js: Implantar automaticamente um aplicativo da Web Next.js de IA generativa do controle de versão para o Cloud Run
• Codelab para mostrar como usar chamadas de função: Como usar chamadas de função do Gemini com o Cloud Run
• Codelab para usar a IA no processamento de conteúdo de vídeo: Como usar a API Video Intelligence do Cloud Run Jobs para processar um vídeo cena por cena