Criar um aplicativo Web com a estrutura Express

  • 8 minutos

Frequentemente, as empresas armazenam um grande volume de dados em sistemas de arquivos e bancos de dados. Eles acessam esses dados fornecendo-os por meio de aplicativos Web a partir de APIs via HTTP.

Servidores Web e aplicativos Web

Um servidor Web é um software que responde a solicitações de clientes. Um aplicativo Web fica na parte superior do servidor Web. Alguns ambientes, como o Node.js, disponibilizam o servidor Web e o aplicativo Web em uma estrutura. Neste módulo, o servidor Web é fornecido pelo módulo HTTP. O aplicativo Web é fornecido pela estrutura do Express.js e inclui o servidor Web.

Saiba mais:

  • Aplicativos Web: O aplicativo fornece um aplicativo Web para o cliente:
    • Visualmente com HTML, CSS e JavaScript
    • Dados por meio de APIs
    • Visual e dados com uma combinação de HTML, CSS, JavaScript e APIs. Isso é considerado um aplicativo monolítico.
  • Roteamento de URL: O roteamento de URL é um mecanismo para fornecer funcionalidade do servidor Web quando um endereço de URL específico é solicitado. Por exemplo, a URL /products pode estar associada a uma função que retorna uma lista de produtos. A URL /products/1 pode estar associada a uma função que retorna um produto específico.
  • Cabeçalhos HTTP: Estes são pares chave-valor que são enviados do cliente para o servidor. Eles contêm informações sobre a solicitação ou resposta.
    • Suporte para diferentes tipos de conteúdo: Um cliente pode solicitar dados em um formato específico e pode retornar nesse formato, como texto sem formatação, JSON, HTML ou CSV.
    • Autenticação/autorização: alguns dados podem ser confidenciais. Um usuário pode precisar entrar ou pode precisar de uma função ou nível de permissão específico para acessar os dados. Isso é tratado no cabeçalho HTTP.
  • Troca de dados: Talvez os usuários precisem exibir e adicionar dados ao sistema. Para adicionar dados, os usuários poderão inseri-los em um formulário ou carregar arquivos.
  • Tempo para comercialização: Para criar aplicativos Web e APIs de maneira eficiente, escolha ferramentas e estruturas que fornecem soluções para problemas comuns. Essas opções ajudam o desenvolvedor a atender rapidamente aos requisitos de negócios do trabalho.

Módulo HTTP no Node.js

O Node.js é fornecido com um módulo HTTP interno. Trata-se de um módulo razoavelmente pequeno que processa a maioria dos tipos de solicitações. Isso dá suporte a tipos comuns de dados, como cabeçalhos, URL e dados.

O exemplo de código a seguir é um servidor Web simples que escuta solicitações de entrada na porta 3.000. Ele responde com uma mensagem de texto hello world simples para o cliente, independentemente da rota de URL ou dos cabeçalhos HTTP usados.

// Include the HTTP module
const http = require('http');

// Set the port to 3000
const PORT = 3000;

// 1. Process incoming requests (req), reply with response (res)
const requestHandler = (req, res) => {

  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('hello world');
}

// 2. Create a server with the requestHandler
const server = http.createServer(requestHandler);

// 3. Start listening for incoming requests on port
server.listen(PORT, () => {
  console.log(`listening on port ${PORT}`)
})

Esse exemplo configura o aplicativo Web com as seguintes etapas:

  1. requestHandler: A função faz a leitura da solicitação (req) e determina qual resposta (res) enviar.
  2. servidor: O método createServer() é definido com o manipulador de solicitação. Como há apenas um manipulador de solicitação, o servidor sempre responderá com a mesma resposta. Em um aplicativo do mundo real, você teria vários manipuladores de solicitação para atender a diferentes tipos de solicitações e rotas. Isso será abordado em mais detalhes posteriormente.
  3. server.listen: O método listen() é invocado por uma porta especificada. Após a chamada ao método listen(), o servidor fica pronto para aceitar as solicitações do cliente. Quando executado localmente, o aplicativo estará disponível em http://localhost:3000. A instrução console.log é executada para informar ao desenvolvedor que o servidor está pronto para uso.

Este exemplo de código Express.js usa vários estilos de funções:

  • retorno de chamada em server.listen(PORT string, callback_function)
  • função de seta em requestHandler = (req, res) => {}, a qual tem regras de escopo diferentes de uma função regular

Estrutura do Express.js

Até agora, você aprendeu sobre as funcionalidades do módulo HTTP no Node.js. Trata-se de uma opção perfeitamente válida para aplicativos Web menores. Se um aplicativo ficar grande, uma estrutura como o Express poderá ajudar você a criar sua arquitetura de maneira escalonável.

Após criar alguns aplicativos Web, observe que você solucionará os mesmos problemas várias vezes. Problemas como gerenciamento de rotas, autenticação e autorização e gerenciamento de erros são comuns. Nesse ponto, você começa a procurar uma estrutura como o Expresso que resolva alguns desses problemas ou todos eles.

Gerenciamento de rotas no Express

Quando um cliente envia uma solicitação a um aplicativo Web, ele usa uma URL, ou seja, um endereço que indica um servidor específico. Uma URL pode ser parecida com o seguinte:

http://localhost:3000/products

O termo localhost na URL se refere ao seu computador. Uma URL com aparência de produção talvez tenha substituído o termo localhost por um nome de domínio, como microsoft.com. A parte final da URL é a rota. Ela decide um local lógico específico para entrar no servidor. Nesse caso, a rota é /products.

A estrutura Express usa a URL, a rota e os verbos HTTP para o gerenciamento de rota. Verbos HTTP como post, put e get descrevem a ação desejada pelo cliente. Cada verbo HTTP tem um significado específico relacionado ao que deve acontecer aos dados. O Express ajuda a registrar rotas e a emparelhá-las com os verbos HTTP apropriados para organizar o aplicativo Web. O Express tem métodos dedicados para processar diferentes verbos HTTP, bem como um sistema inteligente para associar diferentes rotas a diferentes partes do código.

No seguinte exemplo, o Express ajuda a processar solicitações voltadas a uma rota com o endereço /products associado ao verbo HTTP get:

app.get('/products', (req, res) => {
  // handle the request
})

O Expresso visualiza app.get para /products como diferente de app.post para /products, conforme mostrado neste próximo exemplo de código:

app.get('/products', (req, res) => {
  // handle the request
})

app.post('/products', (req, res) => {
  // handle the request
})

O verbo HTTP get significa que um usuário deseja ler dados. O verbo HTTP post significa que ele deseja gravar dados. É comum dividir o aplicativo de modo que diferentes emparelhamentos de rotas ou verbos executem partes distintas do código. Esse conceito será discutido em mais detalhes posteriormente.

Fornecer diferentes tipos de conteúdos

O Express dá suporte a muitos formatos de conteúdo diferentes que podem ser retornados para o cliente autor da chamada. O objeto res é fornecido com um conjunto de funções auxiliares para retornar diferentes tipos de dados. Para retornar um texto sem formatação, você usará o método send() da seguinte maneira:

res.send('plain text')

Para obter outros tipos de dados, como o JSON, há métodos dedicados que garantem a execução adequada de tipos de conteúdos e conversões de dados. Para retornar o JSON no Express, use o método json(), desta forma:

res.json({ id: 1, name: "Catcher in the Rye" })

O método do código do Express anterior é equivalente a este código do módulo HTTP:

res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ id: 1, name: "Catcher in the Rye" }))

O cabeçalho Content-Type em HTTP é definido e a resposta também é convertida de um objeto do JavaScript em uma cadeia de caracteres antes de ser retornada ao cliente de chamada.

Comparando os dois exemplos de código, você pode ver que o Express economiza algumas linhas de digitação usando métodos auxiliares para tipos de arquivo comuns, como JSON e HTML.

Criar um aplicativo Express

Para começar a desenvolver um aplicativo Node.js usando a estrutura Express, você precisará instalá-lo como uma dependência. Também recomendamos que primeiro você inicialize um projeto Node.js para que todas as dependências baixadas terminem no arquivo package.json. Essa é uma recomendação geral para qualquer aplicativo desenvolvido para o runtime do Node.js. Os benefícios de fazer isso surgem ao efetuar push do código para um repositório como o GitHub. Qualquer pessoa que buscar o código no GitHub poderá usar com facilidade o código que você escrever instalando as dependências dele primeiro.

Para criar um aplicativo Web com a estrutura Expresso, as etapas típicas incluem:

  1. Criar o aplicativo Web: crie uma instância do aplicativo Web. Neste ponto, o servidor Web não é executável, mas você tem algo que pode estender.
  2. Definir rotas e manipuladores de rotas: defina quais rotas o aplicativo deve escutar. O gerenciamento de rotas típico inclui:
    • rota raiz: '/'
    • rotas de recurso: '/products'
    • rota abrangente: '*'
  3. Configurar o middleware: O middleware é um trecho de código que pode ser executado antes ou depois de uma solicitação. Exemplos incluem autenticação, validação de dados e registro em log.
  4. Iniciar o aplicativo: defina uma porta e instrua o aplicativo a escutá-la. Agora, o aplicativo está pronto para receber solicitações.