Integração com Backend para Processamento de Dados

Quando desenvolvemos aplicações web em HTML5, muitas vezes precisamos enviar dados do formulário preenchido pelos usuários para o servidor e processá-los de alguma forma.

Esse processo de envio e processamento de dados é conhecido como integração com o backend.

O backend é a parte da aplicação que é executada no servidor e é responsável por receber, processar e armazenar os dados enviados pelo frontend (parte em HTML, CSS e JavaScript que roda no navegador do usuário).

1. Como Funciona a Integração com Backend:
Para realizar a integração com o backend, utilizamos o método HTTP POST, que é uma das formas de enviar dados para o servidor.

Quando o usuário preenche um formulário e clica no botão “Enviar”, o JavaScript do frontend coleta os dados preenchidos e envia esses dados para o servidor usando o método POST.

2. Exemplo de Integração com Backend em JavaScript:

Vamos supor que temos um formulário simples com campos de nome e email, e queremos enviar esses dados para o servidor para serem processados.

<form id="meuForm">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">

  <input type="submit" value="Enviar">
</form>

<script>
  const form = document.getElementById("meuForm");

  form.addEventListener("submit", function(event) {
    event.preventDefault();

    // Coletando os dados do formulário
    const nome = form.nome.value;
    const email = form.email.value;

    // Enviando os dados para o servidor usando o método POST
    const xhr = new XMLHttpRequest();
    const url = "https://meuservidor.com/processar-dados";
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/json");

    // Convertendo os dados para formato JSON
    const data = JSON.stringify({ nome: nome, email: email });

    // Enviando os dados para o servidor
    xhr.send(data);

    // Manipulando a resposta do servidor (opcional)
    xhr.onload = function() {
      if (xhr.status === 200) {
        console.log("Dados enviados com sucesso!");
      } else {
        console.error("Erro ao enviar os dados!");
      }
    };
  });
</script>

3. Processando os Dados no Backend:
No lado do servidor, é necessário ter uma aplicação que receba os dados enviados pelo frontend e execute as ações desejadas com esses dados.

Essa aplicação pode ser desenvolvida em várias linguagens, como Node.js, PHP, Python, Ruby, entre outras.

Exemplo de código usando Node.js e Express.js para processar os dados enviados pelo frontend:

const express = require("express");
const app = express();
const bodyParser = require("body-parser");

// Configurando o body-parser para converter os dados JSON em objeto JavaScript
app.use(bodyParser.json());

// Rota para receber os dados enviados pelo frontend
app.post("/processar-dados", (req, res) => {
  const dados = req.body;

  // Processando os dados recebidos (exemplo: salvando em um banco de dados)
  // Aqui você pode adicionar a lógica específica para o processamento dos dados

  res.status(200).send("Dados recebidos com sucesso!");
});

// Iniciando o servidor na porta 3000
app.listen(3000, () => {
  console.log("Servidor rodando na porta 3000");
});

A integração com backend é uma etapa importante no desenvolvimento de aplicações web, pois permite que os dados coletados dos usuários sejam processados e armazenados.

Com o JavaScript, podemos enviar os dados para o servidor usando o método POST e, no lado do servidor, processar esses dados de acordo com as necessidades da aplicação.

Dessa forma, podemos criar aplicações web mais dinâmicas e interativas, proporcionando uma melhor experiência para os usuários.

Por fim, prepare-se para fazer exercícios sobre tudo que foi apresentado no módulo 5. Então vamos lá.

Compartilhar

Compartilhar

Siga-me