Como ocorre a interação entre front-end e back-end?

A interação é realizada através do protocolo HTTP(S) usando vários métodos (GET, POST, PUT, DELETE, etc.). O frontend envia pedidos ao backend para obter ou enviar dados. O backend processa esses pedidos, interage com o banco de dados se necessário, e envia uma resposta.

Principais formas de interação:

• API REST: Abordagem mais comum. O backend fornece um conjunto de pontos finais (endpoints) aos quais o frontend pode aceder para realizar operações. Os dados geralmente são transmitidos em formato JSON.

  // Exemplo de resposta JSON do backend
  {
    "users": [
      {
        "id": 1,
        "name": "Alex"
      },
      {
        "id": 2,
        "name": "Elena"
      }
    ]
  }
  

• GraphQL: Alternativa ao REST. O frontend solicita apenas os dados de que precisa numa única requisição. Isto permite reduzir o número de pedidos e o volume de dados transmitidos.

• WebSockets: Permitem estabelecer uma ligação bidirecional permanente entre o frontend e o backend. Usado em aplicações que requerem troca de dados em tempo real (sistemas de chat, notificações).

• Server-Sent Events (SSE): Permitem ao backend enviar dados ao frontend de forma unidirecional através de uma ligação HTTP. Usado para receber atualizações do servidor sem pedidos constantes do cliente.

Cenário típico de interação:

1. O utilizador realiza uma ação no frontend (por exemplo, clica num botão).
2. O frontend envia uma requisição HTTP para o endpoint correspondente do backend.
3. O backend recebe a requisição, processa-a (por exemplo, faz uma consulta à base de dados).
4. O backend constrói uma resposta (normalmente em formato JSON) e envia-a ao frontend.
5. O frontend recebe a resposta, processa os dados e atualiza a interface do utilizador.

Exemplo de requisição AJAX no frontend usando JavaScript:

// Envio de uma requisição GET para obter a lista de utilizadores
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Processamento dos dados recebidos
    console.log('Utilizadores recebidos:', data.users);
  })
  .catch(error => {
    // Tratamento de erros
    console.error('Erro ao obter utilizadores:', error);
  });