[Dúvida] integração com o front end? | Node.js: criando API Rest com autenticação, perfis de usuários e permissões

Olá, Higor, tudo bem?

Primeiramente, é ótimo ver seu entusiasmo e progresso no curso de Node.js, criando API Rest com autenticação, perfis de usuários e permissões. Parabéns pelos avanços!

A integração do backend (no caso, a API que você desenvolveu) com o frontend é uma etapa essencial para que os dados processados pelo servidor possam ser apresentados de forma amigável ao usuário final. Vamos explorar como isso acontece de forma simples e objetiva.

Existem várias formas de realizar essa integração, e a escolha depende muito das tecnologias que você e sua equipe do frontend estão utilizando. Algumas das abordagens mais comuns incluem o uso de HTML, JavaScript (com ou sem frameworks) e até mesmo engines de template.

HTML e JavaScript puro: Se você está construindo uma aplicação web simples, pode utilizar HTML e JavaScript puro para realizar a integração. O backend, por meio das rotas e endpoints que você criou, envia dados ao frontend em formato JSON ou XML, por exemplo. O frontend, então, utiliza JavaScript para consumir esses dados e manipulá-los, atualizando o conteúdo da página para o usuário. Um exemplo prático de como isso pode ser feito:

<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
    <title>Exemplo de Integração</title>
</head>
<body>
    <h1 id="titulo"></h1>
    <p id="conteudo"></p>

    <script>
        // JavaScript
        fetch('/api/dados') // Faz uma requisição GET à rota /api/dados no backend
            .then(response => response.json())
            .then(data => {
                // Atualiza os elementos HTML com os dados recebidos do backend
                document.getElementById('titulo').innerText = data.titulo;
                document.getElementById('conteudo').innerText = data.conteudo;
            })
            .catch(error => console.error('Erro ao obter os dados:', error));
    </script>
</body>
</html>

Framework React: Se o frontend estiver construído com o React, a integração com o backend pode ser feita por meio de requisições HTTP usando bibliotecas como o axios ou o próprio fetch. O React permite criar componentes que podem ser atualizados com os dados recebidos do backend, mantendo a aplicação reativa e eficiente. Um exemplo usando React e axios:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState({});

  useEffect(() => {
    axios.get('/api/dados')
      .then(response => setData(response.data))
      .catch(error => console.error('Erro ao obter os dados:', error));
  }, []);

  return (
    <div>
      <h1>{data.titulo}</h1>
      <p>{data.conteudo}</p>
    </div>
  );
};

export default App;

Engines de Template: Algumas vezes, o backend pode renderizar diretamente o HTML, utilizando engines de template como Pug (antigo Jade) ou EJS. Essa abordagem é mais comum em aplicações que utilizam o padrão MVC (Model-View-Controller), em que o backend é responsável por renderizar as views. Nesse caso, o backend pode enviar diretamente o HTML renderizado para o frontend, contendo os dados necessários para exibição. Um exemplo com a engine de template EJS:
```
// Exemplo com Node.js e Express
app.get('/pagina', (req, res) => {
  const dados = {
    titulo: 'Título da página',
    conteudo: 'Conteúdo da página',
  };
  res.render('pagina.ejs', { dados });
});
```
```

<!DOCTYPE html>
<html>
<head>
    <title><%= dados.titulo %></title>
</head>
<body>
    <h1><%= dados.titulo %></h1>
    <p><%= dados.conteudo %></p>
</body>
</html>
```

Essas são apenas algumas das abordagens comuns para realizar a integração entre o backend e o frontend. É importante ressaltar que a escolha da melhor abordagem dependerá das necessidades específicas do seu projeto e das tecnologias utilizadas pela equipe do frontend.

Caso você ache interessante eu vou deixar alguns links bem interessantes onde é bem visível a interação entre Front e Back:

Laravel: https://cursos.alura.com.br/formacao-laravel
React com node: https://cursos.alura.com.br/formacao-full-stack-react-node-js
Symfony: https://cursos.alura.com.br/course/symfony-framework-criando-aplicacao-mvc
NextJS: https://cursos.alura.com.br/course/nextjs-full-stack-lambdas

Espero que essas explicações tenham te ajudado a entender um pouco mais sobre como ocorre a interação entre o backend e o frontend. Se tiver mais dúvidas, não hesite em perguntar! Bons estudos!

Espero que tenha te ajudado, bons estudos!

Mergulhe em programação