DEV Community: Paulo Victor

Como usar o husky garantir a qualidade do seu código

Paulo Victor — Mon, 28 Apr 2025 17:00:38 +0000

O que é o Husky?

O próprio Husky se denomina como:

Ultra-fast modern native git hooks

Eu particularmente acho que isso é muito abrangente e não explica muita coisa para quem não entende muito de Git. O Husky é basicamente uma ferramenta que te permite rodar scripts automaticamente (scripts npm de teste e lint) em ações específicas do Git (commit, push, etc).

Por que usar o Husky?

Dentro do desenvolvimento de software, é muito importante manter padrões, mesmo que esses padrões sejam somente entre o seu time, garantindo que esse código seja minimamente manutenível ao longo prazo. Como é uma ferramenta de scripts com base em hooks Git, o Husky funciona como um workflow de CI básico que roda na sua máquina. Permitindo que você automatize ações que vão desde lintar seu código antes de commitar o mesmo ou limitar quem pode dar push na master/main de um projeto.

Como funciona a base?

Você precisa adicionar o pacote do Husky ao seu projeto JS.

pnpm add --save-dev husky

Rode o comando Husky init para ele criar uma pasta .husky e adiciona um script prepare no package.json para ele rodar os scripts corretamente em qualquer máquina.

pnpm exec husky init && pnpm prepare

Na pasta .husky é onde você irá colocar os arquivos com os nomes dos hooks que deseja ativar.

touch .husky/pre-commit

Dentro desse arquivo, se você e seu time usarem Linux, podem escrever um shell script padrão para rodar no seu projeto e toda vez que o hook do nome do arquivo for ativado, ele irá ser ativado.

# .husky/pre-commit
echo "Commitando aqui pae"

Caso queira testar um script sem ele acionar a ação do Git hook, é só adicionar exit 1 no final do script.

# .husky/pre-commit
echo "Commitando aqui pae"
exit 1

Quando você escrever git commit, ele executará o comando, mas antes de commitar, ele aborta a execução do comando e só executa o script.

Caso queira parar de executar alguma ação específica do Husky, é só passar a flag -n no comando que tem a mesma. Para ser mais efetivo em comando que não tem essa flag, podemos definir a env HUSKY como 0.

# Caso comando tenha suporte a flag -n
git commit -m "Commit sem triggar husky" -n
# Caso não tenha suporte a flag -n
HUSKY=0 git ...

Essa env pode ser adicionada em imagens Docker ou servidores de CI passando esse valor dentro de Env na imagem. Isso é principalmente útil caso sua imagem Docker faça alguma ação com Git e você queira deixar o comando sem ações que não sejam as que você definiu ou você tenha alguma ação em um GitHub Actions da vida que execute algum commit no seu repo.

# .github/workflows/ci.yml
env:
HUSKY: 0

Casos de uso

Onde podemos usar o Husky para facilitar nossa vida com o Git? Aqui irei abordar 2 cenários: um bem comum e outro que pode servir de ajuda para quem colabora com mais de uma pessoa em um repo privado no GitHub.

1. Rodar Prettier e Linter em arquivos que foram recentemente editados

Rodar Prettier e Linter nos seus arquivos deve ser algo periodicamente feito, a fim de tratar erros que fogem das regras do projeto e que serão barrados em um eventual build. Não queremos descobrir e corrigir erros na hora do deploy.

Instalar o lint-staged
Adicionar a configuração de quais scripts vão rodar no lint-staged no seu package.json
No hook da sua preferência (recomendo o pre-commit), defina o comando para executar o lint-staged

2. Travando commits na main em projetos privados

Sempre que iniciamos um projeto, é importante definirmos regras de proteção para nossa branch master/main. Mas em alguns casos, em repos privados, não conseguimos fazer isso sem um plano pro do GitHub. Nesses casos, uma automação com script vai te ajudar a deixar sua branch segura (na maior parte do tempo).

Crie um arquivo pre-push na pasta .husky e cole o seguinte script, adaptando para seu caso:

# !/bin/sh
. "$(dirname "$0")/_/husky.sh"
BRANCH_NAME=$(git symbolic-ref --short HEAD)
GIT_USER=$(git config user.name)
AUTHORIZED_USER="Pilu Vitu" # Coloque exatamente seu git user.name

# Verifica se está na branch master/main
if [ "$BRANCH_NAME" = "master" ]; then
if [ "$GIT_USER" != "$AUTHORIZED_USER" ]; then
echo "Você não tem permissão para commitar diretamente na branch '$BRANCH_NAME'."
echo "Usuário atual: $GIT_USER | Usuário autorizado: $AUTHORIZED_USER"
exit 1
fi
fi
exit 0

Mude o último exit para 1 e teste. Se tudo tiver dado certo, altere o exit para 0 novamente e commite.

Considerações Finais

Dê preferência a executar comandos rápidos em fluxos de commit e push. É normal as pessoas terem resistência a usar Husky, mas boa parte é por erro na configuração e escolha errada de quais scripts rodar. Comandos que rodam testes são mais efetivos em push do que em commit. Fique atento a isso quando for implementar na sua empresa ou projeto.

O Husky não substitui uma pipeline rodando nativamente no seu provedor Git, mas já ajuda em projetos de escopo menor e como uma alternativa para economizar minutos de run. Analise os prós e contras para cada script que tiver no seu projeto. Às vezes, não compensa integrar em determinados cenários, como testes de integração com TestContainers e testes em front com Playwright.

Dicas e configurações para seu sistema linux

Paulo Victor — Fri, 10 May 2024 13:55:52 +0000

Fala meu consagrado, quando eu comecei a minha jornada no linux não tinha ninguém para me ajudar e dar dicas de ferramentas para usar no meu terminal e melhorar minha usabilidade, por isso esse guia extra existe, ele ainda faz parte da jornada de configuração do linux, mas é algo bem extra espero que essas dicas possam te ajudar

Comandos de Terminal

Se você não tem muita experiencia com terminal ou nunca usou um linux na vida, vale a pena ver esse artigo e dar um confere em alguns dos comandos que vão te acompanhar pelo dia a dia no linux

Terminal mais bonito

Powerlevel10k é um plugin para o shell zsh que te da uma liberdade de personalizar o seu terminal e deixar ele a sua cara

Antes de começar esse processo recomendo fortemente instalar e configurar alguma fonte de sua preferencia do nerdfonts, para suportar os ícones do github

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Substitua o tema que está no .zshrc pelo powerlevel10k/powerlevel10k e deve ficar assim:

Restarte o seu terminal e ele aparecerá assim, conclua os passos de acordo com seu gosto

Caso queira saber mais sobre o powerlevel10k clique aqui

Alias git

Alguns comando do git pode ser repetitivos e "grandes" caso queira "otimizar" seu digitar de comandos existem esses alias a seguir, é importante que você customize eles ao seu gosto e necessidade

alias g=git
alias ga='git add'
alias gb='git branch'
alias gc='git commit --verbose'
alias gd='git diff'
alias gf='git fetch'
alias gg='git gui citool'
alias gl='git pull'
alias gm='git merge'
alias gp='git push'
alias gr='git remote'

Alias parar execução de um contêiner

Esse comando para os contêineres em execução automaticamente sem destruir, a fim de preservar recursos do seu pc, é só adicionar ele no .zshrc e bau bau

alias docker-down='docker stop $(docker ps -a -q)'

Transferir wsl para outro disco

As vezes temos um ambiente de dev todo configurado e queremos transferir ele para outro pc, esse guia abaixo vai te ajudar com isso.

Lazygit

Uma interface gráfica para o git no terminal que pode te ajudar a identificar branchs, fazer cherrypick e até rebase

O passo a passo a seguir será para a instalação no UBUNTU, caso queria instalar de outra forma, ou em outro ambiente linux, clique aqui

Rode o seguinte comando no terminal:

LAZYGIT_VERSION=$(curl -s "https://api.github.com/repos/jesseduffield/lazygit/releases/latest" | grep -Po '"tag_name": "v\K[^"]*')
curl -Lo lazygit.tar.gz "https://github.com/jesseduffield/lazygit/releases/latest/download/lazygit_${LAZYGIT_VERSION}_Linux_x86_64.tar.gz"
tar xf lazygit.tar.gz lazygit
sudo install lazygit /usr/local/bin

Após a instalação resete se terminal e use o comando lazygit no seu terminal quando tiver dentro de um repositório q tem git e ele ficará assim:

Para saber mais sobre os comandos do lazygit, clique aqui

Lazydocker

Dos mesmos criadores de lazygit temos o lazydocker, que tem o intuito de ser uma interface gráfica para o docker no seu terminal, muito útil para ver algum log ou se existe algum container que persistiu, deletar volumes facilmente e outras funcionalidades

Podemos instalar o programa usando o asdf que deixa tudo bem mais fácil, rode os seguintes comandos no terminal caso tenha o asdf instalado:

asdf plugin add lazydocker https://github.com/comdotlinux/asdf-lazydocker.git
asdf list all lazydocker
asdf install lazydocker latest
asdf global lazydocker latest
echo "alias lzd='lazydocker'" >> ~/.zshrc

Após instalar no terminal rode o comando lazydocker e ele ficará assim:

Para saber mais sobre os comandos do lazydocker, clique aqui

Melhor visualização do git log

Esse é um alias de uma visualização de git log, para o git, com ela será possível se orientar de maneira mais fácil, clique aqui, cole o comando da 1 opção no linux e quando você digitar git lg a sua visualização de commits vai ficar mais limpa e direta.

Definição automática de remote push git

O seguinte comando faz uma magica para setar automaticamente o caminho certo do seu push no git, é uma mão na roda, um oferecimento do Andre

git config --global push.default current
git config --global push.autoSetupRemote true

Definição automática da versão pelo nvm

O @alvarofg conseguiu um script que ativa a versão automatica do node a partir de um nvm assim que se entra em um projeto

# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

E essa foram algumas das dicas e configurações para seu sistema linux, espero que tenha sido útil, bom código e não se esqueça de seguir nossas redes sociais.

Instalando de maneira rápida e eficiente suas ferramentas no WSL. Pt-3

Paulo Victor — Wed, 08 May 2024 13:30:00 +0000

Opa meu chegado, pronto para a ultima parte desses serie?
Spawnou do nada aqui e não sabe do que se trata ? Clica aqui e vai para o 1 guia dessa serie incrível

Agora vamos configurar algumas das ferramentas mais utilizadas pela minha pessoa, caso não se interesse por alguma ignore e continue o tutorial

NVM

Node version manager é hoje a melhor e mais rápida opção para se instalar o node na sua maquina

Rode o seguinte comando no seu terminal para

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Após rodar o comando de instalação e a mesma tiver acabado, rode o comando reset para aplicar as novas mudanças no seu terminal e conseguir usar o nvm corretamente

Instale a versão lst mais recente

Vamos rodar um comando no terminal para poder instalar a versão mais recente do node LTS

nvm install --lts

Caso queira saber mais sobre o nvm e seus comando, clique aqui

PNPM

O node por padrão vem com o npm como seu gerenciador de pacotesm, mas o pnpm veio para ser mais rápido e otimizado que o npm.

Instalar mais recente

Rodamos o seguinte comando:

npm i -g pnpm

Instalar uma versão especifica

Informe a versão base especifica:

npm i -g pnpm@8

Alias Pn

Esse é um alias que pode ser inserido no .zshrc para 'facilitar' o seu uso.

alias pn=pnpm

Rode o comando reset e já pode usar o pnpm

Caso queira saber mais clique aqui

CLI GITHUB

Uma grande parte das pessoas usam o github como local para armazenas seus códigos, sejam no trabalho ou estudo, se você é estudante e não coloca seus codigos no github, é interessante que tu bote.
A cli do github foi criada para conseguirmos fazer o que fazemos na web com alguns comando no terminal, como criar um repositório, clonar a branch de um PR e assim por diante

Instalar o CLI

Para instalar rode o seguinte comando no terminal:

(type -p wget >/dev/null || (sudo apt update && sudo apt-get install wget -y)) \
&& sudo mkdir -p -m 755 /etc/apt/keyrings \
&& wget -qO- https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo tee /etc/apt/keyrings/githubcli-archive-keyring.gpg > /dev/null \
&& sudo chmod go+r /etc/apt/keyrings/githubcli-archive-keyring.gpg \
&& echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
&& sudo apt update \
&& sudo apt install gh -y

Logar no GitHub

É necessário logar com usa conta do github, necesse processo de login, o github cli nos ajuda cadastrando uma chave ssh, que ja vai ficar integrada no nosso wsl, para começar o processo rode o comando a seguir no terminal:

gh auth login

Na segunda etapa da configuração é importante que você selecione a opção SSH, pois ela é a responsavel por conseguimos cadastrar uma chave ssh de maneira facilitada

Na quarta etapa de configuração você pode escolher ter uma senha para sua chave SSH ou não, eu particularmente recomendo não ter, pois toda vez que voce realizar um commit ela vai pedir confirmação:

Por fim basta selecionar o tipo de autenticação que deseja usar para validar sua conta:

Caso seu google do linux abra pode se logar por ele e inserir o código que foi exibido no terminal, ao final da autorização feche o navegador e ele validará normalmente

Finalizando essa etapa, recomendo fortemente que defina seu nome e email(de preferencia o mesmo do github) nas configuraçoes do git:

git config --global user.name "Seu Nome"

git config --global user.email "seuemail@exemplo.com"

Caso você use o vscode como seu editor de código principal, recomendo fortemente definir ele como seu editor padrão do git:

git config --global core.editor "code --wait"

Manual | GitHub CLI

Complete command

Se você quiser ter uma lista facilitada dos comandos da github cli, rode o comando sudo su para entrar no super terminal do linux e digite o seguinte comando:

gh completion -s zsh > /usr/local/share/zsh/site-functions/_gh

Rode o comando exit para sair desse terminal, agora vá até o nosso arquivo de configuração do bash(.zshrc) e insira o comando a seguir nele:

autoload -U compinit
compinit -i

No final ele vai ficar assim no .zshrc:

Resete o seu terminal com o comando previamente configurado ou reinicie o terminal e digite gh, ela vai aparecer assim:

Docker

Essa é uma das principais ferramentas para o gerenciamento de container no mercado.

Instalação

Os passos que iremos fazer será para a configuração do docker em um ambiente ubuntu, caso queira fazer em outro SOLinux de sua preferência acesse aqui.

Limpar de package

Esse comando é necessário para remover algum package que vai conflitar com a instalação do seu docker cli

for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done

Definição do repo do docker

Algumas intalações do linux são feitas com base em suas versões encontradas nos repositórios de cada projeto, agora iremos configurar o do docker:

# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

Instalar ultima versão

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

Instalar versão especifica

Aqui você vai precisar listar as versões disponiveis

# List the available versions:
apt-cache madison docker-ce | awk '{ print $3 }'

Depois de escolher uma versão, copie o nome dela e jogue na variavel e rode o comando

# Variavel
VERSION_STRING=5:24.0.0-1~ubuntu.22.04~jammy

# Comando
sudo apt-get install docker-ce=$VERSION_STRING docker-ce-cli=$VERSION_STRING containerd.io docker-buildx-plugin docker-compose-plugin

Verificando

Para verificar se a instalação foi um sucesso rode o comando sudo docker run hello-world, seu terminal vai ficar assim:

Eu recomendo fortemente que você rode o comando docker run -it ubuntu bash, para tentar usar o terminal dentro de uma imagem ubuntu, se surgir algum erro como esse:

Rode sudo usermod -aG docker $USER no terminal linux e reinicie o wsl pelo powershell admin com o comando wsl --shutdown e tente rodar novamente o comando do docker.

Em alguns casos é preciso ficar ativando o docker toda vez que entrar no wsl, não necessito fazer isso, mas caso o seu linux exiba:

Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

Você precisará rodar sudo service docker start toda vez que for usar o mesmo

É MUITO IMPORTANTE TOMAR CUIDADO PARA NÃO DEIXAR MUITOS CONTAINERS ATIVOS NO SEU PC

ASDF

Asdf é um gerenciador de versões de linguagens direto na sua cli, você consegue instalar go, ruby e node com ele.

Instalação

git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.14.0

Após rodar esse comando, adicione a seguinte linha de codigo no .zshrc

. "$HOME/.asdf/asdf.sh"

No deve ficar assim no seu .zshrc:

Caso queira saber mais sobre o asdf clique aqui

Go

Golang, linguagem criada pelo Google em 2009, destaca-se por sua simplicidade, velocidade, confiabilidade e suporte à concorrência. Ideal para diversos tipos de aplicações, desde servidores web até sistemas embarcados. Curva de aprendizado e menor quantidade de bibliotecas são pontos a serem considerados. Comunidade ativa e diversos recursos facilitam o aprendizado.

Instalação

Pra instalar o GO vamos usar o asdf previamente instalado

asdf plugin-add golang
asdf install golang 1.21.5
asdf global golang 1.21.5
asdf shell golang 1.21.5

Pra ver se está tudo ok e rode um go version se o retorno for parecido com o da imagem está tudo ok

Parabêns

Agora você tem um WSL, configurado e pronto para contibuir com a comunidade opensource ou fazer seus projetos pessoais, saiba que a jornada no linux é cheia de altos e baixo, qualquer duvida pergunte para alguem em um forum/comunidade que participa e com certeza alguem vai te ajudar, caso queira adaptar esse guia para seu caso especifico é só clonar ele com o comando `` e ser feliz.

Muito obrigado por ficar até aqui, não deixe de ver a sessão abaixo.

Me siga e siga a devhatt nas redes sociais, fique alerta para mais conteúdos, quem sabe não tem algum extra 🤠

Melhorando e configurando seu novo Shell linux. Pt-2

Paulo Victor — Thu, 02 May 2024 20:30:00 +0000

E ai meu patrão, bom saber que você se interessa em configurar ainda mais o seu ambiente de desenvolvimento, essa é o guia 2 da nossa configuração completa de ambiente de desenvolvimento no WSL, caso vc tenha vindo direto para esse artigo e não sabe o que é WSL ou como configurar o seu, clica aqui e vai ver o 1 artigo.

O que é um Shell?

O Shell é uma camada que faz a intermediação de comandos e/ou serviços entre o sistema operacional e o usuário.

O Ubuntu por padrão vem com o Shell base mais famoso e usado pelas distro linux ao redor do mundo o Bash, mas nesse guia vamos ensinar a você instalar o ZSH.

Caso queira saber mais sobre a escolha do ZSH ao inves do Bash e até aprender mais sobre Shell voce pode conferir os links a baixo:

Zsh X Bash

O que é um Shell?

Vamos instalar o zsh com o seguinte comando:

sudo apt install zsh

Agora vamos fechar o terminal e abrir novamente e provavelmente paraecerá a seguinte tela para você:

Se por algum acaso não aparecer, sem problemas, vamos resolver isso no prox passo

Oh My ZSH

Agora vamos intalar um dos grandes motivos de usar zsh, oh my zsh é plugin que facilita muito a nossa vida com possibilidades de autocomplete, lista de comandos e personalização para deixar o terminal do seu jeito, rode o comando abaixo e ele vai baixar o OhMyZsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Apos inserir o comando vai aparecer a seguinte tela para você:

É só apertar a tecla Y para definir o zsh como shell padrão e seu terminal deverá ficar assim:

Plugins para o Oh My ZSH

Com o shell configurado poderemos adicionar plugins para facilitar e auxiliar no nosso dia a dia de desenvolvimento.

Execute o seguinte comando no terminal para baixar os plugins na sua maquina

Caso queira mais pugins, acesse esse link e instale o de sua preferência

git clone https://github.com/zsh-users/zsh-autosuggestions.git $ZSH_CUSTOM/plugins/zsh-autosuggestions && git clone https://github.com/zsh-users/zsh-syntax-highlighting.git $ZSH_CUSTOM/plugins/zsh-syntax-highlighting && git clone https://github.com/zdharma-continuum/fast-syntax-highlighting.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/plugins/fast-syntax-highlighting && git clone --depth 1 -- https://github.com/marlonrichert/zsh-autocomplete.git $ZSH_CUSTOM/plugins/zsh-autocomplete

Agora precisamos adicionar no seu .zshrc os plugins, no linux podemos abrir qualquer arquivo com editores que temos na nossa maquina, por padrão o Ubuntu vem com o nano, mas podemos usar o VsCode(Se estiver instalado).

Todas as suas configuraçoes de shell vão ficar centralizadas no arquivo .zshrc que fica localizado na raiz do seu linux, por padrão você sempre inicia na raiz do seu linux, mas caso esteja dentro de uma pasta e queira voltar rápidamente ou só garantir que está na raiz do linux insira o comando cd no seu terminal e aperte a tecla Enter, se o seu terminal estiver como a imagem abaixo, vc está na raiz:

A partir dela vamos inserir o seguinte comando:

nano ~/.zshrc

# caso tenha o vsCode instalado no seu windows use: 
code .zshrc

O seu terminal deve ficar assim agora:

Seja bem vindo ao nano um editor de texto padrão do linux, não é segredo como usar ele, apenas olhe para a parte inferior no terminal e verá os comando do nano:

No nano a o caractere ^ representa a tecla Ctrl

Digite Ctrl + W e digite plugin, você deve se atentar a seguinte parte do arquivo:

Subistitua onde tem plugins=(git) pelo código abaixo:

plugins=(git zsh-autosuggestions zsh-syntax-highlighting fast-syntax-highlighting zsh-autocomplete)

Vai ficar da seguinte maneira:

É recomendado reiniciar o terminal toda vez que você altera esse arqivo ou instala alguma coisa importante no seu linux, usando o seguinte comando:

source /home/seuUser/.zshrc

Se você quiser definir um alias com o nome reset é só inserir no arquivo .zshrc o seguinte trecho alias reset="source /home/seuUser/.zshrc", salvar o arquivo e reiniciar o terminal.

E pronto, agora você tem um shell incrível e potente configurado para te auxiliar e dar mais produtividade quando estiver usando o WSL.

Muito obrigado por ler até aqui, na nossa próxima parte iremos configurar as ferramentas de desenvolvimento git, docker, go, node para você conseguir botar a mão na massa e fazer altos projetinhos.

Te aguardo na próxima postagem 🤠

Instalação e configuração inicial do seu WSL. Pt-1

Paulo Victor — Mon, 29 Apr 2024 20:30:00 +0000

Opa meu consagrado, essa é a 1 postagem de 3 onde vamos abordar a configuração completa do seu ambiente de desenvolvimento, esse guia tem o foco em desenvolvedores que utilizam o Windows como sistema de desenvolvimento, vamos iniciar com a instalação do seu WSL:

O que é o WSL ?

De maneira mais genérica e sucinta WSL é um subsistema linux no seu pc windows. Isso significa que vamos instalar um linux que vai rodar em conjunto com o windows, permitindo que você desenvolva sem abrir mão do seu sistema principal.

Preparação

Para começar vamos garantir que você está no ambiente certo para usar todo poder do wsl

Você precisará estar no Windows 10 Build 19044+ ou Windows 11

Para ver qual é sua versão de build do windows, acesse:
Configurações -> Sistema -> Sobre > Especificações do Windows

Driver instalado para vGPU
Ative a virtualização no seu processador na sua bios

Caso queira saber se sua virtualização está ativada sem ir na bios do seu pc:
Aperte as teclas CTRL + ALT + DEL, escolha a opção gerenciador de tarefas, clique na guia Desempenho, clique em CPU e procure na parte inferior o status Virtualização, se ele estiver habilitado avance no guia, se não estiver procure como ativar na sua bios
Pesquise por 'Ativar ou desativar recurso do windows' como mostra a imagem abaixo
PT-BR
EN
Acesse essa opção e ative os seguintes recursos
PT-BR & EN
PT-BR
EN
PT-BR
EN

Instalação

Agora estamos prontos para intalar o wsl, abra o seu powershell em modo ADMIN e digite o seguinte comando:

wsl --install

REINICIE O PC DEPOIS DESSA INSTALAÇÃO

Defina suas credênciais

Inicie o seu Ubuntu:

Ele vai pedir para você definir as suas credenciais:

Insira seu nome de usuario e uma senha simples e rápida, você vai usar ela para executar comandos recorrentes, então não pode ser muito complexa e grande

ATENÇÃOOO: A SENHA NÃO APARECE A MEDIDA QUE VOCÊ DIGITA, essa é uma medida de segurança que o ubuntu tem, fique atento na hora de digitar a sua senha.

Após definir as suas credenciais você vai estar em uma tela parecida com essa:

Atualize suas dependências

A partir de agora você está dentro do seu wsl, a primeira coisa que devemos fazer ao entrar nesse sistema é rodar os seguintes comandos:

sudo apt update && sudo apt upgrade

Esses comandos vão atualizar a sua maquina e deixar ela pronta para uso, se lembra daquela senha que definimos na sessão acima? É ela que vamos usar para confirmar os comandos com o inicio sudo.

Caso queira se aprofundar mais sobre a instalação inicial do linux acesse o link abaixo:

Instalar o WSL | Microsoft Learn

Conferindo tudo

Agora vamos conferir se tudo está certo o WSL 2 permite que os aplicativos de GUI do Linux pareçam nativos e naturais para uso no Windows fazendo com que possamos:

Iniciar aplicativos Linux no menu Iniciar do Windows
Fixar aplicativos Linux na barra de tarefas do Windows
Usar alt-tab para alternar entre aplicativos Linux e Windows
Recortar + Colar entre aplicativos Windows e Linux

Por isso, vamos instalar os aplicativos X11 rodando o seguinte comando no terminal:

sudo apt install x11-apps -y

Após completa a instalação, reinicie o seu terminal e digite xeyes se o resultado for igual ao seguinte:

Parabéns, o seu WSL está devidamente configurado.

Extra

Se você vai usar o Electron pelo WSL é altamente recomendado que você instale alguma versão do Chrome no seu WSL, para fazer isso, você pode usar o seguintes comandos:

# Primeiro vá até a pasta temp do seu linux:
cd /tmp 

# Quando estiver na temp baixe o instalador do chrome:
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb 

# Assim que acabar o passo anterior instale o mesmo:
sudo apt install --fix-missing ./google-chrome-stable_current_amd64.deb

Quando acabar a instalação digite cd para voltar ao seu diretório raiz e por fim tente executar o comando google-chrome, se o resultado for parecido com esse:

Parabéns o seu linux está configurado corretamente 🫡

Essa foi a 1 parte do nosso guia não se esqueça de ver as próximas duas partes.

Muito obrigado por ler até aqui 🤠, não se esqueça de seguir a gente nas redes sociais:

Como foi fazer um decodificador do zero para o projeto final da 1ª parte do OracleONE

Paulo Victor — Sat, 27 Apr 2024 02:03:02 +0000

Introdução

Olá meu nome é Paulo Victor, sou programador front-end , atulamente estou cursando o 3º período de ciência da computação na Faculdade Descomplica, estudo front-end a mais de 1 ano e gostaria de compartilhar como foi a idealiazação do meu codificador como projeto final da 1ª fase do Oracle ONE.

Requisitos do desafio

Deve funcionar apenas com letras minúsculas
Não devem ser utilizados letras com acentos nem caracteres especiais
Deve ser possível converter uma palavra para a versão criptografada e também retornar uma palavra criptografada para a versão original.

Por exemplo:
"gato" => "gaitober"
gaitober" => "gato"

A página deve ter campos para inserção do texto a ser criptografado ou descriptografado, e a pessoa usuária deve poder escolher entre as duas opções
O resultado deve ser exibido na tela.

Extras:

Um botão que copie o texto criptografado/descriptografado para a área de transferência - ou seja, que tenha a mesma funcionalidade do ctrl+C ou da opção "copiar" do menu dos aplicativos.

Modelo de encriptação

Letra	Chave
e	enter
i	imes
a	ai
o	ober
u	ufat

Primeiras impressões

Pqp kjkj o front até vai, mas como krl eu vou fazer esse encriptador ?
Pow, mas eu posso fazer o encriptador pegando a string, transformando em array, filtrando e dps juntando tudo do mesmo jeito, só que encyptado.
Vai dar é certo krl, mas e o descriptador ? Ah fds dps eu penso nisso...

Foi exatamente isso que passou pela minha cabeça, e organizando de maneira mais "bonita" o que eu queria falar era basicamente isso daqui:

Executando o front

Base

Peguei o layout no figma e fui imaginando como poderia fazer aquilo e optei por uma estrutura de:

<div id="app">
    <header></header>
    <main><main>
    <section></section>
</div>

A partir dai fui seguindo botando a logo no header, estruturando o main com o input onde a frase ou palavra seria inserida e os 2 botões, um para descriptogravar e outro para criptografar.

Passando para o css comecei importando um arquivo de reset css que eu uso para não me surpreender com alguma estilização padrão do navegador, já no meu arquivo principal eu curto fazer isso:

:root {
  font-size: 62.5%;
}

* {
  text-decoration: none;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: 1.6rem;
}

Basicamente eu deixo 1rem = 10px para ficar bem mais fácil de trabalhar com rem(aparentemente tem um método melhor, vou testar em algum outro projeto), retiro o text decoration de links, defino o tamanho de tudo para se ajustar a borda a fim de evitar erros no calculo de padding/margin e estou adicionando recentemente o font-smoothing com o text-rendering para deixar as fonts mais suaves.(Esse truque das fonts aprendi com o grande @Mayk Brito)

Conclusão

Nâo senti tanta dificuldade no front pois ele é relativamente "fácil", cores não foram um problema, usei variáveis css a fim de facilitar o meu trabalho.
Segui mobile first para deixar a aplicação o minimo estilizada e assim introduzir as funcionalidades

Obs:

Decidi não fazer alguma layout personalizado pois o projeto tem que ser entregue até prox semana.

Executando as Funcionalidades

Base

Descidi fazer todo o js em um local da aplicação, para depois modulariza-lo.
Comecei declarando todos os elementos do html que poderia usar:

const criptoButton = document.querySelector('.buttons #crypt')
const decryptButton = document.querySelector('.buttons #decrypt')
const copyButton = document.querySelector('.alt #copy')
const result = document.querySelector('#app .alt p')
const input = document.querySelector('#app main textarea')
let output = document.querySelector('section .alt p')
const outputBox = document.querySelector('section .alt')
const labelBox = document.querySelector('section .default')

E fui seguindo fazendo a base:

Base da função de alternar entre section default e section alt

Ao apertar o botão verifica se tem algum valor no input
Se tiver, exibe a section alternativa
Se não, exibe uma mensagem de erro e não muda a section

Base da função Decriptar/Criptar

Pegar o valor do input
Jogar em uma váriavel
Retornar o valor do input na section

Ao fazer um tratamento de erros com a função alert padrão do js, estava achando esteticamnete feio o alert aparecendo e travando a aplição toda vez que dava um erro, descidi perguntar ao @Gabriel Santos qual o nome de uma libzinha top de modal que ele usou, ele me disse e foi ai que todos os erros da minha aplicação ficaram por responsabilidade de uma função alert que criei usando o toastify:

function alert(message) {
  Toastify({
    text: `${message}`,
    duration: 3000,
    close: true,
    gravity: "top", // `top` or `bottom`
    position: "right", // `left`, `center` or `right`
    stopOnFocus: true, // Prevents dismissing of toast on hover
    style: {
      background: "linear-gradient(to right, #0a3871, #aab2d5)",
      borderRadius:"15px",
    },
  }).showToast(); 
}

O tratamento de erros ficou bem mais dinâmico e bonito.

Sei que o texto ficou meio apagado na parte da direita, nâo encontrei uma forma melhor de fazer gradient na lib, vou estudar ela mais a fundo para evitar problemas na prox vez que for usar.

Chave de encriptação

Descidi fazer a referencia da chave de encriptação com object:

const cryptCode = {
  e: ['e','enter'],
  i:['i','imes'], 
  a: ['a','ai'],
  o: ['o','ober'],
  u: ['u','ufat'] 
}

Essa foi a forma que eu encontrei de inserir a chave de encriptação juntamente com a letra correspondente de maneira facilitada.

Encriptando o texto

Foi uma parte bem complicada, mas devido a um monte de desafios no CodeWars, me lembrei do método map e fiz dele meu melhor amigo:

  criptografar() {

    if(!input.value) {
      appHandler.removeDivClass()
      return alert('Insira um texto para criptografar')
    }
    if(!output.innerHTML) {
      appHandler.toggleDivClass()
    }
    const cryptArray = []

    const inputArray = input.value.split('')
    inputArray.map((caractere) => {

      let encryptCaractere

      caractere.includes(crypt.a[0]) ? encryptCaractere = crypt.a[1] : caractere
      caractere.includes(crypt.e[0]) ? encryptCaractere = crypt.e[1] : caractere
      caractere.includes(crypt.i[0]) ? encryptCaractere = crypt.i[1] : caractere
      caractere.includes(crypt.o[0]) ? encryptCaractere = crypt.o[1] : caractere
      caractere.includes(crypt.u[0]) ? encryptCaractere = crypt.u[1] : caractere

      cryptArray.push(!encryptCaractere ? caractere : encryptCaractere)
    })

    const cryptResult = cryptArray.join('')

    return output.innerHTML = cryptResult

Na função eu basicamente separo o que vem no input com o split, pego cada caractere que foi separado e verfico se ele se encaixa em alguma condição de encriptação, depois faço uma verificação para inserir todos os caracteres e outro array e por fim fazer um join para juntar em uma string, retornando ele dentro do section alternativo.

Por incrivel que pareça isso foi bem mais "fácil" na minha cabeça, sei que deve ter outro mêtodo mais simples e fácil, mas me agarrei a esse e segui fazendo.

Decriptando o texto

Sem dúvidas a parte mais complicada da aplicação para mim e isso se deve a pessima decisão de tentar implementar tudo no mesmo dia, logo depois de terminar a encriptação eu estava estusiasmado e com vontade de me provar e conseguir implementar tudo em um dia.Por que diabos eu sou tão afobado ? kkkkj Resultado, rodei e rodei feio, já estava "fadigado" de implementar o front e uma funcionalidade no mesmo dia. Me frustrei e deixei para lá, fui bater uma gameplay de Star Rail e relaxar.
No outro dia as coisas começaram a fluir e finalizei assim:

descriptografar(){
    const arrayEncryptWords = input.value.split(' ')
    const decryptArray = []

    arrayEncryptWords.map( word => {


      let decryptWord = word

      while (decryptWord.includes(crypt.a[1])) {
        decryptWord = decryptWord.replace(crypt.a[1], crypt.a[0])
      }
      while(decryptWord.includes(crypt.e[1])) {
        decryptWord = decryptWord.replace(crypt.e[1], crypt.e[0])
      }
      while(decryptWord.includes(crypt.i[1])){

        decryptWord = decryptWord.replace(crypt.i[1], crypt.i[0])
      }
      while(decryptWord.includes(crypt.o[1])){

        decryptWord = decryptWord.replace(crypt.o[1], crypt.o[0])
      }
      while(decryptWord.includes(crypt.u[1])){

        decryptWord = decryptWord.replace(crypt.u[1], crypt.u[0])
      }

      decryptArray.push(decryptWord)
    })

    const decryptString = decryptArray.join(' ')


    if (input.value === decryptString) {
      appHandler.removeDivClass
      return alert('Nenhuma mensagem criptografada encontrada')
    }
    if(!input.value) {
      appHandler.removeDivClass()
      return alert('Insira um texto para descriptografar')
    }
    if(!output.innerHTML) {
      appHandler.toggleDivClass()
    }


    return output.innerHTML = decryptString
  }
}

Basicamente pego o input e separo por palavas em vez de letras, pois a encriptação se refere a uma letra especifica, rodo nas condições de verificação para saber se ela tem mais alguma encriptação naqeula letra especifica, pois pode ocorrer devido a plavras com letras repetidas. Essa parte final da função eu ainda estou corrigind, mas fica aqui de registro como eu fiz.

Passos Finais

Com a aplicação 100% funcional eu descidi modularizar varias partes da aplicação, finalizando e ficando assim as pastas:

Finalizando

Muito obrigado por ler ate aqui, não é meu objetivo ensinar alguém a fazer um decodificador ou algo do tipo, até porque esse não deve ser o melhor modo, porém se você retirar algo de bom desse "artigo" vai ser ótimo.

Você pode conferir o codigo aqui, qualquer dica ou sugestão construtiva será bem vida, me desculpem pelos erros de português.

Boa semana a todos