DEV Community: Hendrix Garcia

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

Hendrix Garcia — Mon, 18 Apr 2022 19:58:30 +0000

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! ✨

Princípios de Web Design

Hendrix Garcia — Tue, 12 Apr 2022 18:26:10 +0000

Quando as pessoas visitam seu site, a primeira coisa que sentem é o design dele.
Mesmo que a página seja moderna e tenha uma ótima funcionalidade, um design ruim pode tornar todo o resto da página ou aplicação inútil.
Neste post, apresento alguns dos princípios que aprendi em meus estudos de web design e comento um pouco a respeito de cada um dos pontos.
Vamos lá!

Cores

Escolher a cor certa é muito importante e você não pode simplesmente escolher qualquer uma com base na suas favoritas.
Um site colorido não significa exatamente usar todas as cores diferentes, seja sensato e escolha uma única cor como base da paleta, depois de escolher a principal, pense em combinações que harmonizam e sejam agradáveis para utilizar no design do projeto.

Vermelho

Vermelho lembra Amor, Energia e Intensidade.
É o mais poderoso, mais forte e mais brilhante no círculo cromático.
O tema vermelho é usado principalmente em sites de comércio eletrônico, entretenimento e moda. Com grande poderes vem grandes responsabilidades - logo, usar muito vermelho cria uma impressão negativa em seu design.
Importante ressaltar que, o vermelho não é adequado para sites relacionados à natureza...

Amarelo

Amarelo é para Alegria, Intelecto e Atenção.
Você deve ter cuidado com o amarelo porque usar amarelo brilhante como plano de fundo pode prejudicar os olhos do usuário, especialmente quando seu site precisa ser usado por um longo tempo.
Amarelo é ótimo para títulos, logotipos, botões, etc. Então, para resumir, se o seu site ou app é do tipo em que os usuários precisam gastar bastante tempo, o amarelo não é a melhor escolha.

Verde

Verde é sobre Frescura, Segurança e Crescimento.
É por isso que a maioria das empresas de alimentos, nutrição e produtos orgânicos usa uma paleta de cores verde.
É assim que eles transmitem o frescor de seus produtos digitalmente.
Portanto, se o seu site for relacionado à comida ou à natureza, o verde é sua escolha.

Azul

Estabilidade, Confiança e Serenidade.
Agora você sabe por que a maioria das empresas financeiras, sites de empresas de criptomoedas são azuis!
Além disso, alguns dos principais sites de mídia social, como Twitter e LinkedIn, têm o tema azul porque fazem as pessoas se sentirem seguras, confiantes e positivas usando sua plataforma.
Então já sabe, use as redes sociais para espalhar positividade. 😉

Roxo

Finalmente roxo, roxo mostra Realeza, Riqueza e Feminilidade. As palavras dizem tudo...
Portanto, os sites direcionados às mulheres provavelmente usarão roxo.

Tipografia

A tipografia é outra coisa muito importante na criação de um site.
De forma geral, o objetivo principal da tipografia é dar ordem estrutural e forma à comunicação escrita.
Se o seu site tiver mais conteúdo textual, a escolha da fonte se tornará um dos elementos mais importantes na construção.
Vamos ver nesse tópico um pouco mais sobre fontes.
Vamos falar a respeito de duas grandes famílias de fontes muito utilizadas.

Serifa ou Serif

A fonte com serifa é inspirada nas esculturas de mármore dos tempos antigos.

É difícil esculpir ângulos de 90 graus, então é por isso que a fonte serif tem curvatura tipo triângulo.

O tipo de letra com serifa faz você se sentir sério, autoritário e velho.

Serif tem muitos subtipos como estilo antigo, transicional e moderno.
Como as cores, as fontes também têm humores.

Hoje a fonte serif é vista como Tradicional, Estável e Respeitável.

VOGUE é um dos melhores exemplos de uma font com serifa:

Sem serifa ou Sans-Serif

Sans serif é Sensível, Simples e Direto. Sans serif tem ângulos retos perfeitos.
A maioria das startups tende a usar tipo de letra sem serifa.
Você pode usar sem serifa para o corpo do texto porque torna o texto mais legível!

Tip-1 💡

Ao escolher fontes não use mais que duas ou três fontes diferentes no seu projeto.
Tip-2 💡

Evite usar essas fontes: comic sans, kristen, curlz, viner e papyrus.
São difíceis de ler e são apenas para diversão.

Antes de decidir sobre uma família de fontes, passe pelo cssfontstack para saber quais fontes são seguras de usar.

Interface do usuário (UI)

Depois de aprender sobre teoria das cores e tipografia, a próxima coisa que você precisa saber é sobre o design da interface do usuário.
A interface do usuário (UI) é o conjunto dos controles e canais sensoriais mediante as quais um usuário pode comunicar-se com uma máquina.
Uma boa interface do usuário deve ter um alto grau de usabilidade, ser amigável, intuitiva e te ajuda a criar um melhor relacionamento com seus clientes; Inclusive pode representar uma vantagem em termos de posicionamento ou SEO, pois incrementa o tempo de permanência do usuário.

Existem cinco fatores de UI:

Hierarquia
Layout
Alinhamento
Espaços em Branco (Whitespaces)
Público

Vamos entender esses fatores com exemplos:

→ Hierarquia

Um exemplo rápido de hierarquia de texto:

Aqui o principal é de quem é esse certificado e para o que resta é mais apropriado. Os usuários podem não ter tempo de ler todo o texto, para isso destacar as informações mais importantes primeiro hierarquicamente.

Veja os pontos destacados pelas caixas verdes. Essas são as coisas que a maioria das pessoas considera sobre um produto, certo? Então essa é uma hierarquia de cores. Use a cor de forma inteligente para destacar as coisas que precisam atrair os usuários.

Agora veja esta página de inscrição da Netflix. Aqui 1 > 2 > 3 de tamanho.
A primeira coisa que eles querem mostrar aos visitantes é sobre o que é a Netflix.
A segunda coisa preferida é que eles querem seu e-mail.
E a terceira coisa é pequena em comparação com as outras duas porque eles não consideram muito.

→ Layout

O layout é sobre como você organiza os elementos do seu site.
Não seja tão sem graça colocando tudo no mesmo lugar que a Wikipedia; Separe os elementos em partes diferentes.
Se houver muito texto, corte cada linha para 60 caracteres.

→ Alinhamento

Alinhamento é sobre como você posiciona um elemento em relação a outros elementos.
Veja este exemplo:

Tem a diferença? Mesmo que ambos os sites tenham o mesmo conteúdo, apenas o alinhamento de diferentes elementos faz grande diferença.

→ Espaços em branco

Espaços em branco ou whitespaces refere-se ao espaço em torno de elementos.

→ Público

Sim, o público é um fator de interface do usuário. Conheça o seu público-alvo, projete para o seu público.
Por exemplo, o tema para YouTube e YouTube kids é diferente.

Todo o tema dos sites de jogos é completamente diferente de outros sites.

Experiência do usuário (UX)

Vamos para UX. Até agora tentávamos atrair usuários, agora precisamos impressionar o usuário.
Enquanto a interface do usuário atrai o usuário, a UX deixa o usuário confortável usando seu site.

Novamente, há cinco fatores que você precisa considerar em UX:

Simplicidade
Consistência
Padrões de leitura
Todo o design da plataforma
Padrões escuros

→ Simplicidade

Muito conteúdo no mesmo lugar traz dores de cabeça para os usuários, pois eles não conseguem entender onde procurar. Mantenha as coisas simples organizando e reduzindo o conteúdo. Simples é bonito. O site da Amazon tem UI e UX ruins (se você souber o motivo, comente abaixo), mas existem muitos sites de comércio eletrônico com designs simples.

→ Consistência

A consistência torna seu site fácil de entender e navegar, especialmente se seu site for usado por pessoas que não são da área de tecnologia, crianças ou idosos.

→ Padrões de Leitura

Os padrões de leitura referem-se a como um usuário visualiza seu site. Existem alguns layouts chamados Z-layout, F-layout etc., que podem ser usados para projetar o layout de seus elementos.

→ F-Layout

No F-layout o conteúdo importante estará no lado esquerdo.
Veja este exemplo:

→ Z-Layout

Inclui:

Logo
Botão de inscrição ou similar
Algum texto
Botão de chamada para ação

Responsividade em todas as plataformas

No final das contas, você não cria apenas um site apenas para desktops, ele precisa ser responsivo entre diferentes dispositivos.

Evite padrões escuros

Padrões escuros referem-se a ações que enganam o usuário em benefício da empresa. Você pode obter benefícios a curto prazo, mas falhará a longo prazo.

Portanto acredito que, se você seguir esses princípios, poderá criará um ótimo design no seus projetos.

Que outros princípios você considera importante e de extrema atenção na hora de construir um bom design para web?

Comenta aqui abaixo 👇