Desenvolva um app Node.js com o Gemini para receber assistência do Google Cloud

Neste tutorial, mostramos como usar o Gemini para Google Cloud para o Google Cloud, um colaborador com tecnologia de IA no Google Cloud, para explorar, criar, modificar, testar e implantar um app de exemplo em Node.js.

Para as etapas a seguir, considere que você é um desenvolvedor do Node.js e quer criar um aplicativo da Web simples em JavaScript que use um formulário básico. Nesse cenário, você usará o framework Express para o app e os modelos EJS para o formulário HTML.

Este guia é destinado a desenvolvedores Node.js que querem usar o Gemini para acelerar o processo de desenvolvimento. Você precisa conhecer os conceitos básicos da nuvem, mas não necessariamente do Google Cloud.

Objetivos

Neste tutorial, você aprende a usar o Gemini para:

  • Desenvolver um app da Web Node.js no Cloud Shell.
  • Criar testes de unidade para seu app da Web em Node.js.
  • Implante seu app da Web em Node.js no Cloud Run.

Produtos do Google Cloud usados

Neste tutorial, usamos os seguintes produtos do Google Cloud.

  • Gemini: uma colaboradora sempre ativa no Google Cloud que oferece assistência com tecnologia de IA generativa para uma ampla gama de usuários, incluindo desenvolvedores e cientistas de dados. Para fornecer uma experiência de assistência integrada, o Gemini está incorporado em muitos produtos do Google Cloud.
  • Plug-in Cloud Code para Cloud Shell: uma extensão de plug-in de ambiente de desenvolvimento integrado que oferece suporte ao ciclo de desenvolvimento para apps que serão executados no Google Cloud.
  • Cloud Run: um serviço totalmente gerenciado que permite criar e implantar aplicativos conteinerizados. O Google Cloud lida com o escalonamento e outras tarefas de infraestrutura para que você possa se concentrar na lógica de negócios do seu código. Para informações sobre preços, consulte a página Preços do Cloud Run e use a calculadora de preços para gerar uma estimativa de custo com base no uso projetado.

Antes de começar

  1. Crie um projeto do Google Cloud se você não tiver um projeto atual do Google Cloud que possa ser usado para este tutorial.
  2. Ative o Cloud Shell.
  3. Verifique se o Gemini está configurado para sua conta de usuário e seu projeto do Google Cloud.
  4. Ative o Gemini para Cloud Shell selecionando o projeto que tem acesso aos recursos do Gemini.

Solicitar que o Gemini gere um código Node.js

O Gemini pode ajudar você a gerar código Node.js com base nos comandos que você fornece no chat e nas descrições que você escreve nos comentários de código. Quanto mais código você escrever e mais contexto fornecer ao Gemini, melhor ele poderá ajudar você a desenvolver seu app. As respostas podem variar dependendo de como você faz perguntas ou descreve o contexto. Por isso, é recomendável analisar as respostas do Gemini antes de aceitar as sugestões durante o processo de desenvolvimento.

Antes de pedir ao Gemini para ajudar a gerar o código inicial, use o terminal do Cloud Shell para criar um diretório vazio e adicione dois arquivos vazios.

mkdir node-js-with-gemini
cd node-js-with-gemini
touch app.js test.js

No editor do Cloud Shell, selecione content_copy Explorador e abra a pasta que você acabou de criar no terminal do Cloud Shell.

Instalar pacotes

Você sabe que quer instalar os pacotes express e ejs para seu app Node.js. Para pedir ajuda ao Gemini na instalação desses pacotes, siga estas etapas:

  1. No painel à esquerda do editor do Cloud Shell, clique em spark Gemini.

  2. No painel Gemini, insira um comando como:

    What is the command to install express and ejs packages for node.js?

  3. Clique em Enviar Enviar.

    O Gemini retorna uma resposta semelhante a esta:

    Para instalar os pacotes Express e ejs para Node.js, use o seguinte comando:

    npm install express ejs
    
  4. Copie o comando fornecido pelo Gemini e execute-o no seu terminal do Cloud Shell.

Criar arquivos de aplicativos

Depois de instalar os pacotes, use o Gemini para orientações sobre como adicionar os pacotes instalados ao seu arquivo app.js.

  1. Abra o arquivo app.js no editor do Cloud Shell.
  2. Na conversa do Gemini, digite um comando como:

    How do I add these packages to my app.js file?

    A resposta do Gemini vai ser semelhante a esta:

    Para adicionar os pacotes Express e ejs ao arquivo app.js, use o seguinte código:

    const express = require('express');
    const ejs = require('ejs');
    

    Isso exigirá os pacotes Express e ejs e os disponibilizará para uso no arquivo app.js.

  3. Adicione o código fornecido pelo Gemini ao seu arquivo app.js.

Gerar código com comentários

Com o plug-in Cloud Code, o Gemini usa comentários de arquivos para gerar código. Por exemplo, ao adicionar um comentário como marcador de posição no arquivo, você pode pedir que o Gemini gere código, conforme descrito no comentário.

Para usar esse recurso no arquivo app.js, verifique se o Gemini está ativado no editor do Cloud Shell.

  1. No final do arquivo, adicione um marcador de posição de comentário para inicializar o app da Web. Por exemplo:

    // Initialize express web app using ejs templating engine
    
  2. Mova o cursor de texto até o final do comentário e pressione Control+Enter (no Windows e Linux) ou Control+Return (no MacOS). Em seguida, pressione Tab para usar os recursos de geração de código do Gemini e gerar código.

    A resposta do Gemini terá duas linhas de código abaixo do comentário, semelhante a esta:

    // Initialize express web app using ejs templating engine
    
    const app = express();
    app.set('view engine', 'ejs');
    

    Se a saída da geração de código for diferente do esperado, modifique ou exclua o conteúdo extra conforme achar adequado.

Em seguida, adicione mais comentários para gerar os recursos básicos do seu app da Web Express.

  1. Vá até a parte de baixo do arquivo app.js e adicione os seguintes comentários:

    // add urlencoded middleware to parse form data
    
    // define the home route
    
    // create a /greeting POST route with a `name` parameter
    
    // create a /greeting route that accepts a name parameter
    
    // start the server on port 8080
    
  2. Gere um código para cada comentário de arquivo da mesma forma que você gerou o código antes.

  3. Antes de aceitar as sugestões, revise o código gerado para garantir a precisão.

    Os comentários no arquivo app.js agora serão acompanhados pelo código correspondente, semelhante ao seguinte:

    // add urlencoded middleware to parse form data
    app.use(express.urlencoded({ extended: true }));
    
    // define the home route
    app.get('/', (req, res) => {
      res.render('index');
    });
    
    // create a /greeting POST route with a `name` parameter
    app.post('/greeting', (req, res) => {
      const name = req.body.name || 'World';
      res.render('greeting', { name });
    });
    
    // start the server
    const port = process.env.PORT || 8080;
    app.listen(port, () => {
      console.log(`App listening on port ${port}`);
      console.log('Press Ctrl+C to quit.');
    });
    
    // create a /greeting route that accepts a name parameter
    app.get('/greeting/:name', (req, res) => {
      res.render('greeting', { name: req.params.name });
    });
    

Crie um arquivo package.json

Depois que o código for gerado para o aplicativo base, crie e adicione conteúdo ao arquivo package.json.

  1. Crie um arquivo package.json no mesmo diretório que seu arquivo app.js.
  2. No editor do Cloud Shell, selecione spark Gemini e insira um comando como:

    Based on my app.js file, can you create a package.json file?

    A resposta do Gemini vai sugerir o script inicial e as dependências a serem especificadas e será semelhante a esta:

    Sem problemas! Veja um arquivo package.json que pode ser usado com seu arquivo app.js:

    {
      "name": "my-app",
      "version": "1.0.0",
      "description": "A simple Node.js web app using Express and EJS.",
      "main": "app.js",
      "scripts": {
        "start": "node app.js"
      },
    
      "dependencies": {
        "express": "^4.17.1",
        "ejs": "^3.1.6"
      }
    }
    

    Esse arquivo package.json inclui as seguintes informações:

    O nome do app (my-app)
    A versão do app (1.0.0)
    Uma descrição do app (um app da Web simples em Node.js que usa Express e EJS.)
    O arquivo principal do app (app.js)
    Os scripts que podem ser executados no app (início)
    As dependências do app (express e ejs)

  3. Copie e cole apenas o conteúdo fornecido pelo Gemini no seu arquivo package.json.

Criar modelos em ejs

Para concluir seu app da Web, crie um diretório views para seus modelos ejs no mesmo diretório dos arquivos app.js e package.json.

  1. No seu terminal, digite o seguinte:

    mkdir views
    touch views/index.ejs views/greeting.ejs
    
  2. Abra o arquivo index.ejs no editor e cole o seguinte:

    <html>
    <body>
        <form action="/greeting" method="post">
        <label for="name">What's your name?</label>
        <input type="text" id="name" name="name" autofocus />
        <button type="submit">Submit</button>
        </form>
    </body>
    </html>
    
  3. Abra o arquivo greeting.ejs no editor e cole o seguinte:

    <html>
    <body>
        <a href="/">Home</a>
        <p>Hello <%= name %>~</p>
    </body>
    </html>
    

Visualizar o app em um navegador

Depois de concluir o código, os modelos e os requisitos do app, agora você pode confirmar se o app funciona.

  1. Execute o comando a seguir para instalar as dependências:

    npm install
    
  2. Execute este comando para iniciar o app:

    npm start
    
  3. Confirme se o app funciona. Selecione o botão Visualização da Web localizado no canto superior direito da barra de tarefas do Cloud Shell. Em seguida, selecione o número da porta no menu exibido. O Cloud Shell abre o URL de visualização em uma nova janela do navegador.

Criar testes de unidade

Depois de confirmar que seu app Node.js funciona, é possível gravar testes de unidade no arquivo test.js antes de implantar o app no Cloud Run. No exemplo abaixo, você vai pedir ajuda ao Gemini na geração de um teste de unidade para quando o código de resposta HTTP for 200.

  1. Na parte de baixo do arquivo app.js, adicione a linha abaixo para exportar o arquivo do app.

    module.exports = app;
    
  2. Abra seu arquivo test.js.

  3. Para testar quando a resposta retorna um código de status HTTP 200, abra o painel de chat do Gemini e insira um comando como:

    Can you generate a unit test for my home route in app.js to assert that the response code is 200?

    O Gemini vai responder com algo semelhante ao seguinte:

    Sem problemas! Veja um teste de unidade para a rota inicial no app.js que garante que o código de resposta seja 200:

    const assert = require('assert');
    const request = require('supertest');
    
    const app = require('./app.js');
    describe('GET /', () => {
      it('should return a 200 response code', async () => {
        const response = await request(app).get('/');
        assert.equal(response.status, 200);
      });
    });
    

    Esse teste verifica se a rota inicial retorna um código de status 200.

    Adicione o bloco de código sugerido ao arquivo test.js.

  4. Instale os pacotes de teste mocha e superteste executando o seguinte comando no terminal:

    npm i mocha supertest
    
  5. Atualize o arquivo package.json para incluir o novo script de teste e os pacotes dele. Exemplo:

    {
      "name": "my-app",
      "version": "1.0.0",
      "description": "A simple Node.js web app using Express and EJS.",
      "main": "app.js",
      "scripts": {
        "start": "node app.js",
        "test": "mocha"
      },
      "dependencies": {
      "express": "^4.17.1",
      "ejs": "^3.1.6",
      "mocha": "^10.2.0",
      "supertest": "^6.3.3"
      }
    }
    
  6. Use o seguinte comando para executar os testes:

    npm test
    

Se não houver erros, o teste será exibido como aprovado. Se quiser adicionar outros testes aos seus outros trajetos, continue pedindo ao Gemini sugestões para adicionar ao arquivo test.js.

Implantam no Cloud Run

Com o app em execução localmente, é possível continuar a implantação no Google Cloud. O Cloud Run funciona bem para esse cenário porque é possível implantar a partir do código-fonte e não precisar gerenciar nenhuma infraestrutura ao executar o app.

  1. No chat do Gemini, pergunte ao Gemini como implantar no Cloud Run diretamente do seu código-fonte usando a gcloud:

    What is the gcloud command for deploying a Cloud Run service from source code?

    O Gemini vai responder com algo semelhante a:

    Implante diretamente no Cloud Run a partir do código-fonte no diretório atual usando a gcloud. Para fazer isso, use o comando gcloud run deploy com o --source flag. Essa sinalização instrui a gcloud a usar seu código-fonte para criar uma imagem de contêiner e implantá-la no Cloud Run.

    Por exemplo, para implantar o código no arquivo app.js no Cloud Run, você usaria o seguinte comando:

    gcloud run deploy app --source .
    

    Esse comando criará uma imagem de contêiner do seu arquivo app.js e a implantará no Cloud Run.

    Também é possível usar a sinalização --region para especificar a região em que você quer implantar o aplicativo. Por exemplo, para implantar o aplicativo na região us-central1, use o seguinte comando:

    gcloud run deploy app --source . --region us-central1
    

    Para mais informações sobre implantação no Cloud Run a partir do código-fonte, consulte a documentação do Cloud Run.

  2. Use o comando gcloud que o Gemini fornece na resposta.

  3. Siga os prompts para selecionar uma região e selecione a opção para permitir invocações não autenticadas para seu aplicativo de teste. Depois que o aplicativo for implantado, a saída retornará um URL de serviço.

Limpar

Para evitar cobranças na sua conta do Google Cloud pelos recursos usados neste tutorial, exclua o projeto do Google Cloud criado para este tutorial. A outra opção é excluir os recursos individuais.

  1. Cuidado: excluir um projeto tem os seguintes efeitos:
    • Tudo no projeto é excluído. Se você usou um projeto atual para as tarefas neste documento, quando ele for excluído, também vai excluir qualquer outro trabalho feito no projeto.
    • Os IDs do projeto personalizados são perdidos. Ao criar o projeto, é possível que você tenha criado um ID do projeto personalizado para usar no futuro. Para preservar os URLs que usam o ID do projeto, como um URL appspot.com, exclua os recursos selecionados do projeto em vez de excluir o projeto inteiro.
  2. Se você planeja explorar várias arquiteturas, tutoriais ou guias de início rápido, a reutilização de projetos pode evitar que você exceda os limites de cota do projeto.No console do Google Cloud, acesse a página Gerenciar recursos.

    Acessar "Gerenciar recursos"

  3. Na lista de projetos, selecione o projeto que você quer excluir e clique em Excluir.

  4. Na caixa de diálogo, digite o ID do projeto e clique em Encerrar para excluí-lo.

A seguir