Exercício – Criar uma nova aplicação Web Express

Concluído

A Tailwind Traders encarregou-o de criar uma API simples usando a estrutura Express. O revendedor online quer avaliar o Express para ver se é fácil de utilizar. Como parte dessa avaliação, quer criar uma aplicação Web que funcione em diferentes rotas.

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 novo espaço de código GitHub na main ramificação do MicrosoftDocs/node-essentials repositório GitHub.

  2. Na página Criar espaço de código, revise as definições de configuração do espaço de código e selecione Criar novo espaço de código

    Screenshot of the confirmation screen before creating a new codespace.

  3. Aguarde até que o espaço de código inicie. Este processo de arranque pode demorar alguns minutos.

  4. Abra um novo terminal no codespace.

    Gorjeta

    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 Node.js 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 restantes exercícios deste projeto decorrem no contexto deste contentor de desenvolvimento.

Criar uma aplicação Web básica com o Express

Crie uma aplicação básica que processe pedidos.

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

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

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

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

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

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

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

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

  4. Em um editor de código na my-express-app pasta, 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 express() método. Esta é a função de nível superior exportada pelo módulo Express. Toda a configuração e funcionalidade adicionais são adicionadas através da app variável.

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

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

    Depois de configurar a rota, o código inicia o aplicativo Web invocando o listen() método:

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

  5. Abra um terminal para esta 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
    

    Deverá ver o seguinte resultado:

    Example app listening at http://localhost:3000
    

    Este resultado significa que a aplicação está operacional e pronta para receber pedidos.

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

    Hello World!
    
  8. No terminal, pressione Ctrl + C para parar o programa web Express.

Criar uma aplicação Web que devolve dados JSON

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

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

  2. Adicione o seguinte código após a sintaxe existente app.get após o código da 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 .js aplicativo 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 suas alterações no arquivo .js aplicativo e feche o arquivo.

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

    node app.js
    

    Deverá 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, , /productsao final da URL. Você deve ver a seguinte saída JSON:

    [{"id":1,"name":"hammer"},{"id":2,"name":"screwdriver"},{"id":3,"name":"wrench"}]
    
  7. No terminal, pressione Ctrl + C para parar o programa web Express.

Parabéns! Você implementou uma segunda rota que pode servir dados JSON estáticos.