Como construir uma aplicação CRUD: o mais simples possível

Hoje vamos aprender como fazer operações CRUD usando JavaScript e criar a parte lógica de um app de mídia social.
Vamos lá! 👨🏻‍💻

Partindo do básico: O que é CRUD?

CRUD é um tipo de mecanismo que permite criar dados, ler dados, editar e excluir esses dados.

• C: Criar um novo registro
• R: Ler as informações de um registro
• U: Atualizar os dados de um registro
• D: Excluir um registro

Configuração Inicial do projeto

• Crie 3 arquivos chamados: index.html, style.css e main.js
• Copiar os códigos do arquivo html & css que subi neste repositório "x.github.com"

Para o tutorial não ficar muito extenso, vou explicar somente a parte lógica da aplicação ou seja o JavaScript.

Este é o fluxograma do nosso projeto 👇

Se você não entendeu, não tem problema, vai ficar mais fácil ao decorrer da leitura desse artigo.
Agora que conhecemos o fluxograma, vamos lá...

Validação do Formulário

Primeiro, precisamos criar as variáveis no JS puxando os elementos do HTML pelos seus respectivos ID's.
Dessa maneira: 👇

let form = document.getElementById("form");
let input = document.getElementById("input");
let msgErro = document.getElementById("msgErro");
let posts = document.getElementById("posts");

Depois, criamos um evento 'submit' para o form e com ele podemos previnir o comportamento padrão.

form.addEventListener("submit", (event) => {
  // Previnindo o comportamento padrão do formulário
  event.preventDefault();
  // Testando o clique no botão
  console.log("Botão clicado!");

  validarFormulario(); // Pré-definindo função
});

Na sequência, criamos uma função para validar o formulário.

let validarFormulario = () => {};

Agora, vamos criar declarações condicionais dentro de validarFormulario() para previnir os usuários de enviar com o valor do campo branco ou vazio.

let validarFormulario = () => {
  // Se o campo estiver vazio:
  if (input.value === "") {
    msgErro.innerHTML = "Preencha o campo!";
    console.log("Dados não foram aceitos.");
    // Dar foco no campo com erro é uma boa prática
    input.focus();
  // Se o campo não estiver vazio:
  } else {
    console.log("Dados aceitos.");
    msgErro.innerHTML = ""; // Limpando a msg de erro
  }
};

Agora como poderemos ver, uma mensagem de erro será mostrado se o usuário tentar enviar o formulário em branco.

Como aceitar os dados recebidos no campo de entrada

Quaisquer que sejam os dados que obtivermos dos campos de entrada, armazenaremos em um objeto dados.
Vamos criar este objeto e uma função chamada aceitarDados().

let dados = {};
let aceitarDados = () => {};

A ideia principal aqui é que, usando essa função coletamos os dados do input e armazenamos no nosso objeto dados.

let aceitarDados = () => {
  dados["Valor de Entrada"] = input.value;
  console.log(dados);
};

Também precisamos da função aceitarDados para funcionar quando o usuário clicar no botão enviar.
Para isso, nós vamos declarar a função na condicional else da nossa função validarFormulario(). 👇

let validarFormulario = () => {
  if (input.value === "") {
    // Outros códigos aqui
  } else {
    // Outros códigos aqui
    aceitarDados(); // Escrevendo aceitar dados
  }
};

Quando inserimos dados e enviamos o formulário, no console podemos ver um objeto contendo os valores de entrada do nosso usuário. Tipo assim: 👇

Como criar as postagens usando Template Strings

Para postar nossos dados de entrada na div posts, precisamos criar um elemento div e anexá-lo ao div posts. Primeiro, vamos criar uma função e escrever estas linhas: 👇

let criarPost = () => {
  posts.innerHTML += ``;
};

Os são template strings.
O que escrevermos dentro dele funcionará como HTML.
Aqui, precisamos criar 3 coisas: um div pai, apresentar o valor da entrada no input e o div de opções que carregará os ícones de edição e exclusão.
Vamos em frente finalizar nossa função!

let criarPost = () => {
  posts.innerHTML += `
    <div>
        <p>${dados["Entrada de Texto"]}</p>
        <span class="options">
            <i onClick="editPost(this)" class="fas fa-edit"></i>
            <i onClick="deletePost(this)" class="fas fa-trash-alt"></i>
        </span>
    </div>
  `;
  // Depois de criar a postagem, limpamos o input
  input.value = "";
};

Na nossa função aceitarDados(), nós vamos declarar a função criarPost().
Assim: 👇

let aceitarDados = () => {
  // Outros códigos aqui

  criarPost();
};

O resultado até aqui deve estar parecido com isso:

Como deletar posts

Para excluir um post, primeiro precisamos criar uma função responsável por essa tarefa dentro do nosso arquivo javascript.

let deletarPost = (event) => {};

Em seguida, adicionar essa função deletarPost() dentro de todos os nossos ícones de exclusão usando o atributo onClick.
Você escreverá essas linhas em HTML e no template string. 👇

<i onClick="deletePost(this)" class="fas fa-trash-alt"></i>

A palavra this vai fazer referência ao elemento que acionou o evento.
Nesse caso, fará referência ao botão de delete.

Muita atenção agora no HTML, o parent do botão delete é o span com a classe opções.

Então, vamos escrever parentElement duas vezes para pularmos do ícone com a função delete até a div onde aparece a tarefa para remove-lá por completo.

let deletarPost = (event) => {
  event.parentElement.parentElement.remove();
};

E agora você também pode deletar os posts que adicionou: 👇

Como editar os posts

Para editar um post, primeiro precisamos criar a respectiva função dentro do nosso arquivo JavaScript.

let editarPost = (event) => {};

Em seguida, adicionar essa função editarPost() dentro de todos os nossos ícones de edição usando o atributo onClick.
Você escreverá essas linhas em HTML e no template string:

<i onClick="editPost(this)" class="fas fa-edit"></i>

A palavra this vai fazer referência ao elemento que acionou o evento.
Nesse caso, fará referência ao botão de edição.

Muita atenção agora no HTML, o parent do botão delete é o span com a classe opções.

Então, vamos escrever parentElement duas vezes para pularmos do ícone com a função editar até a div onde aparece a tarefa.

Então, qualquer que seja os dados inseridos no post, nós traremos isso de volta ao input para editar.

let editarPost = (event) => {
  input.value = event.parentElement.previousElementSibling.innerHTML;
  event.parentElement.parentElement.remove();
};

E agora também podemos editar os posts já adicionados: 👇

Em uma entrevista geralmente essa task serviria para avaliar sua capacidade lógica, entendendo bem esse artigo você está dois passos a frente e conseguiria resolver o problema de uma maneira bem simples e completamente funcional.

Agora claro, você pode e deve recriar esse projeto sozinho em busca de entender todos os conceitos envolvidos na criação, melhorar o layout e até mesmo adicionar novas features ao seu aplicativo CRUD.

Espero que tenham gostado e evoluído seus conhecimentos com esse artigo! ✨