Git para Desenvolvimento Web: Conheça o Fluxo de Trabalho Típico de um Projeto

O desenvolvimento web está intrinsecamente relacionado à colaboração. Na maioria das vezes você estará trabalhando com outros desenvolvedores, e mesmo se você não o fizer, Git pode ajudá-lo de muitas outras maneiras.

Git é o software que controla a versão dos aplicativos que nós fazemos. É usado por desenvolvedores autônomas, grandes empresas e até mesmo pelo Linux, o maior projeto de código aberto do mundo.

Como um desenvolvedor web, é extremamente importante saber como usar Git para o desenvolvimento web corretamente. Não estamos falando apenas de “git add”, “git commit”, e “git push”. Você deve conhecer todo o fluxo de trabalho da criação de um projeto web com Git.

Ainda não está convencido? Vamos começar!

Por que usar Git?

Estas são apenas algumas das razões para começar usar Git:

• Organização: Ao invés de gerenciar seu projeto em pastas como v1, v2, v3, etc, você tem um projeto com um banco de dados especial que armazena todas as versões dos arquivos
• Colaboração: Git permite que você e outras pessoas trabalhem no mesmo projeto ao mesmo tempo, sem criar conflitos.
• Código aberto: Git é open-source, mas é também a ferramenta que usamos para colaborar e criar grandes softwares open-source. Qualquer pessoa pode fazer pedidos para projetos open-source em plataformas como GitHub ou Bitbucket.
• Flexibilidade de plataforma: Atualmente, você tem muitos serviços diferentes de hospedagem Git para escolher, tais como Gitlab, GitHub, Bitbucket, e SourceForge. Você pode até mesmo usar uma solução auto-hospedada para todos os seus projetos.
• Backups fáceis: Desfaça os erros com facilidade, e nunca perca sua base de código do projeto.

Mencionamos o termo GitHub uma ou duas vezes agora, então qual é a diferença entre Git e GitHub?

Isto pode confundir você se você é totalmente novo em Git. Para colocar isso em palavras simples, Git e GitHub são ferramentas relacionadas, porém diferentes.

Git é o sistema de controle de versão (VCS) que usamos para manter o controle das mudanças de nossos arquivos, enquanto GitHub é um serviço que usamos para armazenar nossos arquivos de projeto e seu histórico de Git online (localizado na pasta .git/ do seu projeto).

Git é instalado localmente, em sua máquina, e sem serviços de hospedagem como GitHub ou GitLab, seria muito difícil colaborar com outros desenvolvedores.

GitHub supercarrega Git adicionando outras características que melhoram a colaboração, como clonagem, bifurcação e fusão. Juntas, estas duas ferramentas combinam para trazer a você um ecossistema relativamente amigável para desenvolver, gerenciar e mostrar o seu projeto para outras pessoas.

Git básico para o fluxo de trabalho de desenvolvimento web

Nas próximas seções, você aprenderá mais sobre o fluxo de trabalho de Git para desenvolvimento web através da prática prática prática.

Requisitos de instalação

Se você ainda não instalou o Git, este é um momento perfeito. É fácil de instalar e está disponível na maioria dos sistemas operacionais.

Faça o download da página oficial de downloads, ou instale-o com um gerenciador de pacotes se você estiver usando Linux ou macOS:

Para testar se tudo correu bem com a instalação, acione um terminal no Linux ou macOS procurando por “Terminal” no menu de seus aplicativos, ou abrindo o Git bash no Windows (que vem instalado com Git por padrão).

Em seguida, digite:

git --version

Se você receber uma versão Git como resposta, você está pronto para ir.

Também precisaremos de uma conta GitHub, então certifique-se de se inscrever ou fazer o login no GitHub:

Uma vez que você tenha Git instalado e tenha feito login em sua conta GitHub, você pode passar para a próxima seção.

Fluxo de trabalho básico do Git para projetos colaborativos

Como mencionado anteriormente, a maior parte do tempo você não estará desenvolvendo projetos solo. Colaborar é uma habilidade chave, e Git e GitHub nos ajudam a fazer disso um processo simples e eficaz.

O fluxo de trabalho típico de um projeto Git se parece com isto:

1. Obtenha uma cópia local do projeto clonando um repositório, ou repo. Se você estiver colaborando, você deve bifurcar o repo primeiro.
2. Crie uma filial com um nome representativo do recurso em que você estará trabalhando.
3. Edite o projeto.
4. Comprometa as mudanças em sua máquina local.
5. Mova as mudanças para o reporte remoto.
6. Crie um pull request para o reporte original.
7. Unifique e resolva conflitos na ramificação principal do repo original.

Tutorial

Agora é hora de sujar nossas mãos!

Neste guia, você vai criar um site HTML simples. Para fins práticos, você vai forkar o projeto base do repositório do site HTML para sua conta no GitHub. Isto pode ser feito para todos os repositórios públicos disponíveis.

Para bifurcar o site HTML, vá até este repositório GitHub e clique no botão Fork localizado no canto superior direito da página:

Agora você tem um fork do repo original que só está disponível na sua conta GitHub. É exatamente o mesmo repo – até que você comece a cometer mudanças.

Como você pode ver, a procura de um reporte público leva apenas alguns segundos. Isto é ótimo para projetos open-source, mas tenha em mente que se sua organização tem um repo privado, você precisará ser incluído como um contribuinte antes de tentar bifurcá-lo.

É hora de trazer seu fork para sua máquina local. Para fazer isso, você precisa cloná-lo com o comando git clone, que recupera o repositório Git do servidor remoto:

git clone remote_url

Você precisa substituir remote_url pela URL do seu fork. Para obter a URL exata de um repo GitHub, vá para sua página e clique em Code. Então escolha SSH, e copie o link que ele lhe dá:

O comando que você executaria para clonar o repo bifurcado é:

git clone [email protected]:yourusername/HTML-site.git

Quando você clona um repo, você recebe uma pasta com seu nome. Dentro dessa pasta está o código fonte do projeto (neste caso, o site HTML) e o Git repo, que está localizado dentro de uma pasta chamada .git.

Você pode ver a lista de arquivos dentro do novo diretório abrindo a nova pasta em um gerenciador de arquivos gráfico, ou listando-os diretamente do terminal com os comandos ls ou dir:

# Linux/macOS
ls HTML-site/
# Windows
dir HTML-site\
.git images .gitignore index.html LICENSE README.md styles.css

Este site HTML é muito simples. Ele usa Bootstrap para fins práticos e algumas fotos de Unsplash, onde você pode baixar imagens grátis para o seu site.

Se você abrir o arquivo index.html em seu navegador, você verá uma página simples com algumas imagens:

É hora de brincar com este projeto. Parece muito vazio, e talvez um cabeçalho com o nome do site possa melhorar a experiência do usuário.

Para fazer isso, entre no diretório HTML-site e crie uma filial chamada header. Nesta nova filial, nós podemos editar todos os arquivos e implementar todo o código que quisermos porque ele não afetará a filial principal (original).

Execute o seguinte comando:

git checkout -b header

Isto criará uma filial chamado “header” e o trocará por ele logo após isto. É equivalente a:

git branch header
git checkout header

Para confirmar que tudo correu bem, execute:

git status
# On branch header
# nothing to commit, working tree clean

Você verá que você foi deslocado da filial “main” para “header”, mas a árvore de trabalho ainda está limpa desde que não editamos nenhum arquivo.

Em seu editor de código favorito, abra o arquivo index.html em seu projeto ramificado. Este arquivo inclui alguns links para o Bootstrap 5, para que possamos tirar proveito dos componentes prontos para uso do framework.

Adicione o seguinte código ao arquivo index.html dentro da tag <body> e acima do recipiente da imagem:

<header>
  <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <span class="navbar-brand mb-0 h1">HTML site</span>
    </div>
  </nav>
</header>

Muito mais bonito! Sinta-se livre para fazer outras filiais e mudanças que você desejar.

Uma vez que você tenha terminado de editar o projeto, é hora de comprometer todas as mudanças no seu repo local. Dentro do diretório do projeto, digite o seguinte em seu terminal:

git add --all
git commit -m "Added simple header in index.html file"

Quando você inicia um projeto pela primeira vez, é comum ter mensagens de compromisso descritivas, mas com o tempo e o foco deslocado, a qualidade das mensagens tende a diminuir. Assegure-se de manter uma boa prática de nomeação.

Agora que você fez um compromisso com seu repositório local (que ainda está disponível apenas no seu computador), é hora de movê-lo para o repositório remoto.

Se você tentar mover o compromisso como normal, isso não vai funcionar porque você está trabalhando atualmente na filial header. Você precisa configurar a ramificação upstream para header:

git push --set-upstream origin header

A partir de 13 de agosto de 2021, o GitHub requer o uso de autenticação SSH, então certifique-se de ter suas chaves corretamente configuradas.

Depois disso, você deve ser capaz de ver uma nova filial chamada header em seu repositóri o bifurcado (por exemplo https://github.com/yourusername/HTML-site/branches):

Para criar um pull request para o reporte original, clique em Compare, na seção Active branches.

Isto irá guiá-lo para um pull request, onde você precisará escolher com que filial (o original ou seu fork) você quer fundir. Por padrão, ele mostra a opção de fundir com o repositório base:

Uma vez que você clique na opção pull request, você precisará escrever uma breve descrição das mudanças feitas, assim como com seus compromissos anteriores. Mais uma vez, tente ser conciso, porém descritivo:

Clique no botão Create pull request e aguarde que o proprietário do repositório base aceite ou lhe dê feedback sobre suas alterações.

Parabéns – você acaba de completar todos os passos de um fluxo de trabalho Git comum para o desenvolvimento web!

Este foi um exemplo realmente básico, mas a lógica se estende por projetos de todos os tamanhos. Certifique-se de implementar este fluxo de trabalho de perto também em projetos colaborativos maiores.

Como usar Git na Kinsta

O Git é um recurso chave na Kinsta, especialmente se você usa nossa plataforma de Hospedagem de Aplicativos. Lá, você pode vincular sua conta ao GitHub, Bitbucket ou GitLab e controlar todas as implantações direto do painel MyKinsta:

Se você é um cliente da hospedagem gerenciada de WordPress da Kinsta, pode incorporar o Git em um fluxo de trabalho de implantação fazendo login em seu servidor usando SSH a partir de um terminal e clonar de um repositório em qualquer provedor de hospedagem Git.

Documentamos o uso do Git na Kinsta para clientes de WordPress. Após seguir essas instruções para se preparar para uma conexão SSH com um servidor WordPress, você pode baixar um repositório Git com um comando como este:

ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

Usar Git e Kinsta pode ser uma combinação poderosa.

Resumo

Hoje em dia, Git é uma ferramenta indispensável para o desenvolvimento web, já que na maioria das vezes você estará colaborando com outros para criar o melhor projeto possível.

Neste artigo, nós discutimos algumas razões importantes para usar Git em seus projetos, e mostramos a você o fluxo de trabalho básico de colaboração em um repo Git.

E o Git é uma ferramenta poderosa que é essencial para a plataforma de Hospedagem de Aplicativos da Kinsta e frequentemente útil para os clientes do serviço de hospedagem gerenciada de WordPress da Kinsta.

Vale a pena o esforço para aprender Git e implementá-lo como parte do seu arsenal de habilidades em desenvolvimento web.

Você tem alguma outra sugestão para melhorar este fluxo de trabalho básico do Git para o desenvolvimento web? Nos informe na seção de comentários!

Daniel Diaz

Daniel is a self-taught Python Developer, Technical Writer, and long-life learner. He enjoys creating software from scratch and explaining this process through stunning articles. Follow him on Twitter: @DaniDiazTech

• Site
• LinkedIn
• Twitter