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 após a 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, você pode implantar mudanças no seu aplicativo de forma automática e fácil.

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

O que você vai aprender

• Programar um aplicativo da Web com o Cloud Shell Editor
• Armazenar o código do aplicativo no GitHub
• Implantar seu aplicativo automaticamente 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 tem uma Conta do Google, crie uma.
   • Use uma conta pessoal em vez de uma conta de trabalho ou escolar. 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 do GitHub, crie uma
   .
   • Use uma conta do GitHub existente, se você tiver uma. O GitHub tem mais probabilidade de bloquear uma nova conta 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 deve custar menos de US $1 em recursos do Cloud.
   • Siga as etapas no final deste laboratório para excluir recursos e evitar cobranças.
   • Novos usuários estão qualificados para o teste sem custo financeiro de US$300.
   • Vai participar de um evento da IA generativa para desenvolvedores? Um crédito de US$1 pode estar disponível.
3. Crie um novo projeto ou reutilize um projeto atual.
4. Confirme se o faturamento está ativado em Meus projetos no Cloud Billing
   .
   • 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 de última geração para desenvolvedores, a conta provavelmente terá o nome Conta de faturamento de teste 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 souber o ID do projeto:
     • É possível listar todos os IDs de projetos com:

       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ê receber uma WARNING e receber uma solicitação Do you want to continue (Y/N)?, provavelmente inseriu o ID do projeto incorretamente. Pressione N, pressione 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 o e-mail do 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 a ramificação padrão global do Git como main:

   git config --global init.defaultBranch main
   

7. Escrever seu 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 e cole o código abaixo 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 editor do Cloud Shell vai salvar o código automaticamente. Esse código responde a solicitações HTTP com a saudação "Hello world!".

O código inicial do aplicativo foi concluído e está 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 seu repositório do Git

   git init -b main
   

4. Fazer login na CLI do GitHub

   gh auth login
   

   Pressione Enter para aceitar as opções padrão e siga as instruções na ferramenta 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 não aparecer)
   4. Como você quer autenticar o GitHub CLI? Login with a web browser
   5. Copiar o código único
   6. Abra https://github.com/login/device.
   7. Cole seu código único
   8. Clique em Autorizar GitHub.
   9. Concluir o login
5. Confirme que você fez login:

   gh api user -q ".login"
   

   Se você tiver feito login, o 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ê criou a variável, o nome de usuário do GitHub vai ser exibido.
8. Crie um repositório do GitHub vazio chamado codelab-genai:

   gh repo create codelab-genai --private
   

   Se você receber o erro:

   GraphQL: Name already exists on this account (createRepository)
   

   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
   • Crie um repositório com um nome diferente e mude o nome nos comandos a seguir.
9. Adicione o repositório codelab-genai como o origin remoto:

   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 a primeira confirmação:

   git commit -m "add http server"
   

4. Envie a confirmação 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 esta 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 REPOSITÓRIO.
5. Clique em CONFIGURAR COM O CLOUD BUILD
   .
   1. Selecione GitHub como o provedor do 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, uma mensagem vai aparecer 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 INSTALL GOOGLE CLOUD BUILD.
      • Na página de configuração da instalação, selecione Somente repositórios selecionados e escolha o repositório codelab-genai que você criou pela CLI.
      • Clique em Instalar.
      • Observação: se você tiver muitos repositórios do GitHub, o carregamento pode levar alguns minutos.
   5. Selecione your-user-name/codelab-genai como 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 usando os 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 levará vários minutos), execute este comando e acesse o URL resultante para conferir 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

Voltar ao editor do Cloud Shell

Se o editor do Cloud Shell ainda estiver 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 souber o ID do projeto:
     • É possível listar todos os IDs de projetos com:

       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ê receber uma WARNING e receber uma solicitação Do you want to continue (Y/N)?, provavelmente inseriu o ID do projeto incorretamente. Pressione N, pressione 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. Reabrir 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. Verifique 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 local do Git:

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

3. Envie as alterações 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 você possa conferir as mudanças.

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 as instruções:

   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. Verifique 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 local do Git:

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

3. Envie as alterações 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 você possa conferir as mudanças.

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, presumimos 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. Verifique 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 local do Git:

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

3. Envie as alterações 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 você possa conferir as mudanças.

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ê criou um aplicativo da Web e configurou o Cloud Run para implantar automaticamente o aplicativo quando uma mudança for feita no código-fonte. Em seguida, você modificou o aplicativo e o implantou novamente.

Se você gostou deste laboratório, tente fazer 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: Primeiros passos
• 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 o aplicativo da Web Next.js de IA generativa do controle de versão para o Cloud Run
• Codelab para mostrar como usar a chamada de função: Como usar a chamada de função do Gemini com o Cloud Run
• Codelab para usar a IA para processar conteúdo de vídeo: Como usar a API Video Intelligence do Cloud Run Jobs para processar um vídeo cena por cena