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

Neste tutorial, mostramos como usar Gemini para Google Cloud, uma solução com tecnologia de IA colaborador no Google Cloud, para explorar, criar, modificar, testar e implantar exemplo de aplicativo Node.js.

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

Este guia é destinado a desenvolvedores Node.js que querem usar Gemini para acelerar o processo de desenvolvimento. Ele pressupõe que você é familiarizadas com conceitos básicos de nuvem, mas não necessariamente com o Google Cloud.

Objetivos

Neste tutorial, você vai aprender a usar o Gemini para seguintes:

  • 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: um colaborador sempre ativo 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 oferecer uma integração de assistência, o Gemini está incorporado em vários produtos do Google Cloud.
  • Plug-in do Cloud Code para Cloud Shell: um plug-in de ambiente de desenvolvimento integrado. que oferece suporte ao ciclo de desenvolvimento de apps que serão executados 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 Preços do Cloud Run e use o Calculadora de preços para gerar uma estimativa de custo com base na projeção de uso.

Antes de começar

  1. Criar um projeto do Google Cloud se você não tiver um projeto 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. Ativar o Gemini para Cloud Shell selecionando o projeto que recebeu acesso 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 escreve nos comentários do código. A quanto mais código você escreve e mais contexto você fornece ao Gemini, melhor o Gemini pode ajudar você a desenvolver seu app. Observação que as respostas do Gemini podem variar dependendo da pergunta perguntas ou descrever o contexto, por isso é uma boa prática rever o Gemini antes de aceitar as sugestões durante o processo de desenvolvimento.

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

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

No editor do Cloud Shell, selecione content_copy do Explorer e abra o que você criou no terminal do Cloud Shell.

Instalar pacotes

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

  1. No painel à esquerda do Cloud Shell Editor, clique em despertar 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 parecida com a seguintes:

    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 terminal do Cloud Shell.

Criar arquivos de aplicativos

Depois de instalar os pacotes, use o Gemini para saber como Adicione os pacotes instalados no 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 seu 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 usar no seu arquivo app.js.

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

Gerar código com comentários

O plug-in Cloud Code tem um recurso que permite que o Gemini usar comentários de arquivo para gerar código. Por exemplo, quando você adiciona um comentário como marcador de posição no arquivo, você pode pedir que o Gemini gere o código conforme descrito no comentário.

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

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

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

    A resposta do Gemini terá duas linhas de código abaixo da semelhante ao seguinte:

    // 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 como achar adequado.

A seguir, adicione mais comentários para gerar os recursos básicos do Express para a Web app.

  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 antes.

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

    Os comentários no seu arquivo app.js agora serão acompanhados com 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 seu 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 iniciar Gemini e inserir um comando como:

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

    A resposta do Gemini precisa sugerir o script inicial e dependências a serem especificadas e será semelhante ao seguinte:

    Claro! Este é um arquivo package.json que você pode usar com seu app.js arquivo:

    {
      "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)
    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 do 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 é possível e confirme 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 na parte de cima. à direita da barra de tarefas do Cloud Shell. Depois, selecione o número da porta no menu exibido. O Cloud Shell abre URL de visualização em uma nova janela do navegador.

Criar testes de unidade

Depois de confirmar que seu app Node.js funciona, você pode criar testes de unidade no seu test.js antes de implantar o app no Cloud Run. Na exemplo abaixo, vai pedir ajuda ao Gemini em gerar 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 a seguir 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 digite 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 deve responder com algo semelhante seguintes:

    Claro! Confira um teste de unidade para a rota inicial no app.js que garante o código de resposta é 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: no seu terminal:

    npm i mocha supertest
    
  5. Atualize o arquivo package.json para incluir o novo script de teste e o pacotes. 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 você quiser adicionar fazer mais testes para seus outros trajetos, continue perguntando ao Gemini para sugestões de adição ao arquivo test.js.

Implantar no Cloud Run

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

  1. Na conversa do Gemini, pergunte como implantar ao Cloud Run diretamente do seu código-fonte usando gcloud:

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

    O Gemini vai responder com algo semelhante a:

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

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

    gcloud run deploy app --source .
    

    Esse comando cria uma imagem de contêiner do seu arquivo app.js e implanta no Cloud Run.

    Também é possível usar a flag --region para especificar a região em que implantar o app. Por exemplo, para implantar o app na região us-central1, use o seguinte comando:

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

    Para mais informações sobre como fazer implantações no Cloud Run a partir da origem consulte a documentação do Cloud Run.

  2. Use o comando gcloud que o Gemini forneceu a resposta.

  3. Siga as instruções para selecionar uma região e selecione a opção para permitir invocações não autenticadas do app de teste. Após a implantação do app corretamente, a saída vai retornar um URL de serviço.

Limpar

Para evitar cobranças dos recursos na sua conta do Google Cloud neste tutorial, é possível excluir o projeto do Google Cloud criados 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 existente para as tarefas neste documento, quando você o exclui, você também exclui qualquer outro trabalho feito no projeto.
    • Os IDs do projeto personalizados são perdidos. Quando você criou o projeto, talvez você tenha criado um ID do projeto personalizado para usar futuro. Para preservar os URLs que usam o ID do projeto, como um appspot.com, exclua os recursos selecionados do projeto em vez de excluir todo o projeto.
  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 a 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 excluir o projeto.

A seguir