Exercício – Criar um aplicativo Web Express

  • 5 minutos

A Tailwind Traders tem a tarefa de criar uma API simples usando a estrutura Expresso. O varejista online deseja avaliar o Express para determinar se é fácil trabalhar com ele. Como parte dessa avaliação, ele deseja que você crie um aplicativo Web que atenda rotas diferentes.

Abrir projeto no contêiner de desenvolvimento

Use o contêiner de desenvolvimento fornecido para concluir os exercícios neste módulo. O contêiner de desenvolvimento é pré-configurado com as ferramentas necessárias para concluir os exercícios.

  1. Inicie o processo para criar um GitHub Codespace no branch main do repositório GitHub MicrosoftDocs/node-essentials.

    Abra este projeto no Codespaces do GitHub

  2. Na página Criar codespace , analise as definições de configuração do codespace e selecione Criar novo codespace

    Screenshot of the confirmation screen before creating a new codespace.

  3. Aguarde até que o codespace seja iniciado. Esse processo de inicialização pode levar alguns minutos.

  4. Abra um novo terminal no codespace.

    Dica

    Você pode usar o menu principal para navegar até a opção de menu Terminal e, em seguida, selecionar a opção Novo Terminal.

    Screenshot of the codespaces menu option to open a new terminal.

  5. Valide se o .NET 7 está instalado em seu ambiente:

    node --version

    O contêiner de desenvolvimento usa uma versão Node.js LTS, como v20.5.1. A versão exata pode ser diferente.

  6. Os exercícios restantes neste projeto ocorrem no contexto desse contêiner de desenvolvimento.

Criar um aplicativo Web básico com o Express

Crie um aplicativo básico que processa solicitações.

  1. Abra um terminal no contêiner de desenvolvimento.

  2. Use os seguintes comandos para criar um novo projeto do Node.js e instalar a estrutura Expresso:

    mkdir my-express-app
cd my-express-app
npm init -y
npm install express

    O comando init cria um arquivo package.json padrão para seu projeto Node.js. O comando install instala a estrutura Express.

  3. Em um editor de código, abra o arquivo package.json.

    Na seção dependencies, localize a entrada express:

    "dependencies": {
  "express": "^4.18.2"
  ...
}

    Essa entrada indica que a estrutura Express está instalada. Sua versão pode ser mais recente. Este código de exemplo usa a versão 4 da estrutura Expresso.

  4. Em um editor de código na pasta my-express-app, crie um arquivo chamado app.js e adicione o seguinte código:

    const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => res.send('Hello World!'));

app.listen(port, () => console.log(`Example app listening on port ${port}! http://localhost:${port}/`));

    O código cria uma instância de um aplicativo Express invocando o método express(). Essa é a função de nível superior exportada pelo módulo Expresso. Toda a configuração e funcionalidade adicionais são adicionadas por meio da variável app.

    Observe como o código configura uma rota para barra /, a raiz, com a sintaxe:

    app.get('/', (req, res) => res.send('Hello World!'));

    Após a configuração da rota, o código inicia o aplicativo Web invocando o método listen():

    app.listen(port, () => console.log('Example app listening on port ${port}!'));

  5. Abra um terminal para essa subpasta clicando com o botão direito do mouse no nome da subpasta e selecionando Abrir no terminal integrado.

  6. No terminal, execute o seguinte comando para iniciar o aplicativo Web Express:

    node app.js

    Você verá a seguinte saída:

    Example app listening at http://localhost:3000

    Essa saída significa que o aplicativo está em funcionamento e pronto para receber solicitações.

  7. Você pode clicar com o botão direito do mouse e selecionar a URL no terminal ou abrir o navegador quando o Visual Studio Code mostrar uma notificação perguntando se deseja Abrir no navegador. Você deve ver o seguinte resultado:

    Hello World!

  8. No terminal, pressione CTRL + C para interromper o programa Express na Web.

Criar um aplicativo Web que retorna dados JSON

Use o mesmo arquivo app.js para adicionar uma nova rota.

  1. Em um editor de código, abra o arquivo app.js.

  2. Adicione o seguinte código após a sintaxe app.get existente após o código para a primeira rota, /:

     app.get('/products', (req, res) => {
     const products = [
         { id: 1, name: 'hammer' },
         { id: 2, name: 'screwdriver' },
         { id: 3, name: 'wrench' },
     ];

     res.json(products);
 });

  3. Verifique se o arquivo app.js se parece com este exemplo:

     const express = require('express');
 const app = express();
 const port = 3000;

 app.get('/', (req, res) => res.send('Hello World!'));

 app.get('/products', (req, res) => {
     const products = [
         { id: 1, name: 'hammer' },
         { id: 2, name: 'screwdriver' },
         { id: 3, name: 'wrench' },
     ];

     res.json(products);
 });

 app.listen(port, () => {
     console.log(`Example app listening on port ${port}! http://localhost:${port}/`);
 });

  4. Salve as alterações no arquivo app.js e feche-o.

  5. No terminal, execute o seguinte comando para reiniciar o aplicativo Web Express:

    node app.js

    Você deve ver o seguinte resultado:

    Example app listening at http://localhost:3000

  6. Em um navegador, retorne à guia da etapa anterior e adicione a nova rota, /products, ao final da URL. Você deverá visualizar a seguinte saída do JSON:

    [{"id":1,"name":"hammer"},{"id":2,"name":"screwdriver"},{"id":3,"name":"wrench"}]

  7. No terminal, pressione CTRL + C para interromper o programa Express na Web.

Parabéns! Você implementou uma segunda rota que pode fornecer conteúdo JSON estático.