Executando verificação de segurança...
24

Boas práticas para criar um PULL REQUEST no repositório do tabnews.com.br

github

01 - Introdução

Esse pequeno artigo tem como objetivo ajudar as pessoas interessadas em sugerir melhorias no repositório do tabnews.

Agora com o projeto publicado no github qualquer pessoa com conhecimento em programação, CSS, HTML ou design poderá abrir um Pull Request (uma forma de propor alguma alteração no código do repositório).

Se você é novo aqui no tabnews sugiro a leitura desse artigo publicado pelo Felipe Deschamps
/tentando-construir-um-pedaco-de-internet-mais-massa

Gostaria de lembrar também que você pode ajudar o projeto com ideias através da aba Issues no github, ambiente reservado para discussões sobre:

  • Bugs
  • Reportar Falha
  • Sugestões / Ideias
  • Design

Nessa área você pode interagir com comentários nas Issues abertas por outros usuários. Inclusive colocando Emoji conforme imagem abaixo.

Emoji

02 - Pré-requisito

Conforme o readme do projeto para rodar o tabnews na sua máquina é necessário ter instalado as duas dependências abaixo:

  • Node.js LTS v16 (ou qualquer versão superior)
  • Docker Engine v17.12.0 com Docker Compose v1.24.1 (ou qualquer versão superior)

03 - Clonando o repositório

Claro que para interagir com o github você precisa ter o git instalado na sua máquina, Você pode confirmar através do seguinte comando:

git --version

Se receber um resultado semelhante ao seguinte, o Git já está instalado.

git version 2.34.1

Agora acesse a página do repositório https://github.com/filipedeschamps/tabnews.com.br
E clique na estrela, afinal você está curtindo esse projeto maravilhoso 🌟️

star

Feito isso você pode fazer um FORK do projeto conforme imagem abaixo:

fork

Agora para baixar o repositório na sua máquina basta dar o comando abaixo (lembre de trocar seu usuário no github pelo seu usuário):

# git clone https://github.com/rodrigoKulb/tabnews.com.br
git clone https://github.com/[seu usuário no github]/tabnews.com.br

Esse comando vai criar uma pasta com o projeto no seu computador, agora basta acessar a pasta com o comando cd

cd tabnews.com.br

Então após baixar o repositório, não se esqueça de instalar as dependências locais do projeto:

npm install

Para rodar o projeto localmente, basta rodar o comando abaixo:

npm run dev

Se tudo estiver instalado corretamente na sua máquina você receberá a mensagem abaixo:
rundev

Agora basta acessar as URL do seu navegador http://localhost:3000/ para ter acesso ao projeto instalado na sua máquina! 🎉️

04 - Antes de enviar uma PR (Pull Request)

Toda Pull Request precisa ser analisada e aprovada pelos moderadores do projeto, demandando um tempo valioso dessa equipe! Então gostaria de levantar alguns pontos importantes:

  • Leia antes todas as PRs (Pull Requests) para confirmar se já não existe essa sugestão.
  • Verifique se já não existe alguma Issues abordando esse tema.
  • Faça todos os testes localmente antes de enviar um Pull Request para aprovação.
  • Se tiver dúvidas sobre essa melhoria abra uma Issue para discutir melhor o tema.
  • Envie uma sugestão por vez criando Pull Requests separadas por assuntos.

05 - Enviando uma PR (Pull Request)

Para organizar melhor as solicitações é necessário criar uma branch uma "cópia" do projeto que vai carregar suas alterações para uma possível aprovação. O projeto tabnews utiliza como padrão o nome da branch em inglês, pense em um nome que seja relacionado a alteração solicitada.

# git checkout -b nome_da_sua_branch 
# EXEMPLO
git checkout -b footerJustifyIcon

Após finalizar sua atualização e testes, vamos conferir quais arquivos foram modificados com o comando:

git status

Conforme imagem abaixo tenho um arquivo modificado que não está preparado para envio:
git

Então vamos adicioná-lo para enivo do commit com o comando:

git add pages/interface/components/Footer/index.js

Se rodar novamente o git status vamos ter o seguinte resultado:

git status

git

O projeto tabnews tem o programa para fazer o commit de forma padronizada, você pode rodá-lo através do comando abaixo:

npm run commit

Essa será a primeira pergunta do programa, onde você precisa selecionar a melhor opção que se encaixe na sua PR, você pode movimentar com as seta do teclado para baixo e para cima.
commit

Logo depois vamos precisar responder às seguintes perguntas:

# Qual é o escopo desta alteração (por exemplo, componente ou nome do arquivo):
What is the scope of this change (e.g. component or file name):

# Escreva uma descrição curta e imperativa da mudança:
Write a short, imperative tense description of the change (max 92 chars):

# Forneça uma descrição mais longa da alteração:
Provide a longer description of the change: (press enter to skip)

# Há alguma mudança significativa?
Are there any breaking changes?

# Essa alteração afeta algum problema em aberto?
Does this change affect any open issues?

Após finalizar o commit, precisamos enviar nossa alteração para o github através do comando abaixo:

# git push -u origin nome_da_sua_branch 
git push -u origin footerJustifyIcon

Agora basta acessar o repositório do tabnews e clicar em Create pull request conforme imagem:
commit

Irá abrir um formulário onde será necessário descrever sua Pull Request seja o mais claro possível.
pr
pr

Uma vez peguei esse exemplo com o @DevSoutinho achei bem legal vou deixar o modelo abaixo:

## 🤔 Por que você está abrindo esse Pull Request?


## 🧐 Descreva sua solução:

06 - Finalização

Fiquem a vontade para fazer novas sugestões nos comentários, todas serão bem vindas, desta forma podemos melhorar o artigo com novas informações / correções.

Abaixo deixo o acesso para o meu instagram e youtube:
https://www.youtube.com/rodrigoKulb
https://www.instagram.com/rodrigo_coding/

Carregando publicação patrocinada...
3

😀 Genial! Gostaria de saber se essa requisição foi aceita ou se recebeu algum retorno. Acredito que há coisas a serem incrementadas para melhor usabilidade, seria interessante saber o nível de granularidade que é considerado. Parabéns pelo conteúdo!

3

Olá @damatomos já foi aprovada por alguns moderadores, mas atualmente o @filipedeschamps precisa aprovar para refletir na Vercel no ambiente de produção. Estamos com uma fila grande no momento de PRs devido ao fluxo gerado pelo último vídeo no canal dele! Mas essa PR é apenas visual também não deve ser prioridade no momento.

Outro ponto que esqueci comentar no artigo é o maior valor de criar uma PR está no aprendizado, mesmo ela não sendo aprovada, todo fluxo já é maravilhoso🤩️, pois é semelhante o que acontece nas grandes empresas!

3

Só gostaria de comentar que gostei da diferenciação que você fez ao citar "programação" separado de CSS e HTML 😂

Mas muito bem explicado! para quem nunca participou de um grande projeto em colaboração mútua (grande maioria, inclusive eu) achei necessário um "tutorial" de como colaborar, pois estamos cheios de ideias e novidades para melhorar a experiência do usuário... Ou nossa experiência, o que seja.

1