Como construir uma aplicação CRUD: o mais simples possível
Tags: javascript, webdev, programming, beginners
Published: 2022-04-18 19:58:30

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á! 👨🏻‍💻
<br/>

## 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

![Features de Crud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3md2xtw76u0y1fr8polm.png)
<br/>

## 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 👇

![fluxograma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlsw0253j7st1ictip03.png)

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á...
<br/>

## 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: 👇

```JavaScript
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.

```Javascript
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.

```JavaScript
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.

```Javascript
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.
<br/>

## 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()`.

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

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

```Javascript
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()`. 👇

```JAVASCRIPT
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: 👇

<img src="https://images2.imgbox.com/88/a9/YKHoc6lx_o.png">
<br/>

## 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: 👇

```Javascript
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!

```JavaScript
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: 👇

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

  criarPost();
};
```

O resultado até aqui deve estar parecido com isso:
![](https://images2.imgbox.com/b7/98/3uQDlaCo_o.gif)
<br/>

## Como deletar posts

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

```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. 👇

```Javascript
<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.

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

E agora você também pode deletar os posts que adicionou: 👇
![](https://images2.imgbox.com/64/2c/YrmDasQz_o.gif)
<br/>

## Como editar os posts

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

```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:

```Javascript
<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.

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

E agora também podemos editar os posts já adicionados: 👇
![](https://images2.imgbox.com/7d/68/d3DPhlY7_o.gif)

---

Em uma entrevista geralmente essa task serviria para avaliar sua <b>capacidade lógica</b>, 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! ✨

![](https://c.tenor.com/QQ7nj2VFyMgAAAAM/good-job-thumbs-up.gif)