Como as alterações feitas no cliente são enviadas para o servidor e armazenadas na base de dados?

Geralmente, as alterações feitas pelo utilizador numa aplicação web (no cliente) são enviadas para o servidor através de uma requisição HTTP.

Tipos de requisições HTTP:

• POST: Usado para criar um novo recurso ou enviar dados para processamento pelo servidor. Frequentemente utilizado para dados de formulários.
• PUT: Usado para atualizar um recurso existente. Transmite o estado completo do recurso.
• PATCH: Usado para atualizar parcialmente um recurso. Apenas os campos modificados são transmitidos.
• DELETE: Usado para eliminar um recurso.

Exemplo de fluxo de dados:

1. O utilizador insere dados num formulário na página web.
2. JavaScript no lado do cliente recolhe esses dados (por exemplo, num objeto JSON).
3. É feita uma requisição HTTP (por exemplo, POST ou PUT) a um endpoint específico da API do servidor. Os dados são anexados ao corpo da requisição.

   // Exemplo de envio de dados ao servidor usando fetch API
   const data = { username: 'newuser', email: 'newuser@example.com' };
   
   fetch('/api/users', {
     method: 'POST', // ou 'PUT', 'PATCH'
     headers: {
       'Content-Type': 'application/json',
       // Outros cabeçalhos, por exemplo, para autorização
     },
     body: JSON.stringify(data), // Convertendo o objeto JavaScript para uma string JSON
   })
   .then(response => response.json()) // Analisando a resposta do servidor em JSON
   .then(data => {
     console.log('Sucesso:', data);
     // Processamento da resposta bem-sucedida
   })
   .catch((error) => {
     console.error('Erro:', error);
     // Processamento do erro
   });
   

4. A aplicação do servidor recebe a requisição, encaminha-a para o manipulador correspondente (controlador).
5. O controlador extrai os dados do corpo da requisição.
6. Os dados passam por validação e saneamento no lado do servidor para garantir segurança e correção.
7. A lógica de negócio processa os dados recebidos (por exemplo, verifica a unicidade do nome de utilizador, realiza cálculos necessários).
8. O controlador interage com a camada de acesso a dados (Data Access Layer - DAL) ou ORM (Object-Relational Mapper).
9. DAL/ORM gera uma consulta SQL ou usa métodos do banco de dados para guardar, atualizar ou eliminar dados na(s) tabela(s) correspondente(s).

   -- Exemplo de SQL INSERT
   INSERT INTO users (username, email) VALUES ('newuser', 'newuser@example.com');
   
   -- Exemplo de SQL UPDATE
   UPDATE users SET email = 'updated_email@example.com' WHERE username = 'newuser';
   

10. O banco de dados executa a operação e devolve o resultado (sucesso ou erro).
11. DAL/ORM transmite o resultado ao controlador.
12. O controlador forma uma resposta para o cliente (por exemplo, JSON com confirmação de sucesso, código de estado HTTP 200 OK, ou erro com código de estado 400 Bad Request, 500 Internal Server Error, etc.).
13. O servidor envia a resposta ao cliente.
14. JavaScript no lado do cliente processa a resposta (por exemplo, exibe uma mensagem de sucesso, atualiza a interface ou mostra um erro).

As tecnologias utilizadas dependem do stack específico:

• Cliente: HTML, CSS, JavaScript (React, Angular, Vue.js, etc.)
• Servidor: Frameworks (Node.js/Express, Python/Django/Flask, Ruby/Rails, Java/Spring, PHP/Laravel, etc.)
• Base de dados: SQL (PostgreSQL, MySQL, SQL Server), NoSQL (MongoDB, Cassandra)

Todo o processo deve ser seguro (HTTPS, autenticação, autorização, validação) e tratar possíveis erros em cada etapa.