Como construir uma aplicao CRUD: o mais simples possvel

Hoje vamos aprender como fazer operaes CRUD usando JavaScript e criar a parte lgica de um app de mdia social.
Vamos l!

Partindo do bsico: 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 informaes de um registro
• U: Atualizar os dados de um registro
• D: Excluir um registro

Configurao Inicial do projeto

• Crie 3 arquivos chamados: index.html, style.css e main.js
• Copiar os cdigos do arquivo html & css que subi neste repositrio "x.github.com"

Para o tutorial no ficar muito extenso, vou explicar somente a parte lgica da aplicao ou seja o JavaScript.

Este o fluxograma do nosso projeto

Se voc no entendeu, no tem problema, vai ficar mais fcil ao decorrer da leitura desse artigo.
Agora que conhecemos o fluxograma, vamos l...

Validao do Formulrio

Primeiro, precisamos criar as variveis 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 padro.

form.addEventListener("submit", (event) => {  // Previnindo o comportamento padro do formulrio  event.preventDefault();  // Testando o clique no boto  console.log("Boto clicado!");  validarFormulario(); // Pr-definindo funo});

Na sequncia, criamos uma funo para validar o formulrio.

let validarFormulario = () => {};

Agora, vamos criar declaraes condicionais dentro de validarFormulario() para previnir os usurios 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 no foram aceitos.");    // Dar foco no campo com erro  uma boa prtica    input.focus();  // Se o campo no 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 usurio tentar enviar o formulrio 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 funo chamada aceitarDados().

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

A ideia principal aqui que, usando essa funo coletamos os dados do input e armazenamos no nosso objeto dados.

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

Tambm precisamos da funo aceitarDados para funcionar quando o usurio clicar no boto enviar.
Para isso, ns vamos declarar a funo na condicional else da nossa funo validarFormulario().

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

Quando inserimos dados e enviamos o formulrio, no console podemos ver um objeto contendo os valores de entrada do nosso usurio. 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 funo e escrever estas linhas:

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

Os so 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 opes que carregar os cones de edio e excluso.
Vamos em frente finalizar nossa funo!

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 funo aceitarDados(), ns vamos declarar a funo criarPost().
Assim:

let aceitarDados = () => {  // Outros cdigos aqui  criarPost();};

O resultado at aqui deve estar parecido com isso:

Como deletar posts

Para excluir um post, primeiro precisamos criar uma funo responsvel por essa tarefa dentro do nosso arquivo javascript.

let deletarPost = (event) => {};

Em seguida, adicionar essa funo deletarPost() dentro de todos os nossos cones de excluso 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 referncia ao elemento que acionou o evento.
Nesse caso, far referncia ao boto de delete.

Muita ateno agora no HTML, o parent do boto delete o span com a classe opes.

Ento, vamos escrever parentElement duas vezes para pularmos do cone com a funo delete at a div onde aparece a tarefa para remove-l por completo.

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

E agora voc tambm pode deletar os posts que adicionou:

Como editar os posts

Para editar um post, primeiro precisamos criar a respectiva funo dentro do nosso arquivo JavaScript.

let editarPost = (event) => {};

Em seguida, adicionar essa funo editarPost() dentro de todos os nossos cones de edio 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 referncia ao elemento que acionou o evento.
Nesse caso, far referncia ao boto de edio.

Muita ateno agora no HTML, o parent do boto delete o span com a classe opes.

Ento, vamos escrever parentElement duas vezes para pularmos do cone com a funo editar at a div onde aparece a tarefa.

Ento, qualquer que seja os dados inseridos no post, ns traremos isso de volta ao input para editar.

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

E agora tambm podemos editar os posts j adicionados:

Em uma entrevista geralmente essa task serviria para avaliar sua capacidade lgica, 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 criao, melhorar o layout e at mesmo adicionar novas features ao seu aplicativo CRUD.

Espero que tenham gostado e evoludo seus conhecimentos com esse artigo!