Git para Designers
Ou para qualquer um que queira usar, mas não sabe por onde começar
Escrever código é difícil. Em um dia ruim, para cada minuto que você passa vendo seu código funcionar, passa mais 10 tentando descobrir o que tá dando errado.
Escrever código com Git é difícil. Escrever código sem Git é impensável. De desenvolvedores sênior a designers que recém começaram a brincar com front-end, usar Git melhora a forma com que ambos escrevem código e torna colaboração em um mesmo projeto não apenas possível, mas agradável.
Este guia irá introduzir conceitos básicos de Git com um pequeno tutorial prático no final. Ele não fará de você um mestre de Git, mas você saberá usá-lo de maneira independente com o Github e seu app para desktop.
Aviso: Este é um guia para iniciantes… se você já saca de Git, sinta-se livre para pular partes ou ir direto para as referências ao final do artigo.
O que é Git
Git é um sistema de controle de versão distribuído para código.
Descritivo, mas não ajuda muito. Vamos contar uma história real então:
Você está trabalhando em um site simples. Você está tentando deixar o layout do jeito que você quer há uma hora e de alguma forma tudo só piora a cada alteração. São 2:00 da manhã. Você odeia CSS e no presente momento está questionando suas decisões de vida mais recentes. Dane-se, vamos voltar para a versão do site de 3 horas atrás e assistir Netflix antes de dormir.
Opa. Peraí.
A versão anterior. Cadê ela? Em um backup? Em uma pasta alternativa? Existem diversas soluções para esse problema, umas melhores do que outras. E existe Git.
Git permite que cada mudança em seu projeto seja trackeada — cada caractere e cada linha de código que você adiciona ou remove é registrada. Já pensou se você pudesse salvar todo o seu projeto a cada passo do trabalho? Com Git você pode.
Dessa forma, quando você começasse a trabalhar na feature/novo-footer, você teria certeza de que nada seria perdido se você decidisse voltar atrás — e poderia até mesmo voltar a trabalhar nessa feature mais tarde, se quisesse.
Isso é o que o Git faz. Ele salva snapshots de todo o código do seu projeto e permite que você o compartilhe para outros desenvolvedores (de sua equipe ou não). Na prática, o Git vai permitir que você:
- Recupere backups de mudanças no seu código, caso algo dê errado
- Desenvolva novas features sem afetar código que já está no ar
- Colabore com outros desenvolvedores no mesmo código ao mesmo tempo sem querer arrancar todos os seus fios de cabelo
- Tenha bastante dificuldade de fazer merda e perder código já escrito
Mas e o Github?
Isso pode ser um pouco confuso, então vale esclarecer.
Git é um sistema open-source. Você usa ele ao rodar em sua máquina para salvar seu código e então fazer upload para um servidor onde outros colaboradores possam ver e trabalhar em cima do código que você escreveu.
O problema é que para fazer isso sozinho você teria que instalar Git neste servidor (remoto) e gerenciá-lo você mesmo. Como você já pode imaginar, isso é um pé no saco.
O Github foi criado para resolver esse problema pra você, com uma plataforma que hospeda seu código em um servidor Git com zero configuração e ferramentas que facilitam a colaboração com outros membros da sua equipe. Da mesma forma, o app desktop do Github serve para substituir a ferramenta de linha de comando do Git em sua máquina.
Há outras ferramentas similares como Gitlab e Bitbucket, mas o Github se tornou líder de mercado pelo foco em features colaborativas e por ter sido adotado pela comunidade open-source.
Para simplificar as coisas, vamos usar o Github para este guia, mas o mesmo poderia ser alcançado usando outras plataformas.
Como Funciona
Quando você usa Git, seu projeto vive em um repositório. Cada projeto é um repositório e cada repositório tem um histórico — uma timeline com cada mudança salva nele.
O Git não faz todo o trabalho por você, porém. As mudanças em seu código não são salvas automaticamente no histórico: para adicioná-las, você precisa fazer um commit com suas mudanças.
O commit é o conceito mais importante do Git. Comittar é a forma pela qual um arquivo ou suas mudanças são adicionados ao histórico do repositório.
Um commit representa um snapshot de seu repositório no momento em que foi realizado — todo o repositório, com todos os arquivos naquele momento.
Você pode adicionar uma mensagem para cada commit, descrevendo quais mudanças está salvando ao histórico do projeto. É importante manter suas mensagens de commit curtas e descritivas. Nunca faça um commit sem uma mensagem.
O commit é uma ferramenta poderosa. Ele permite que você pense seu código em blocos e organize seu trabalho— cada parte do trabalho é feita e entregue em um commit antes de passar para a próxima.
Há outros conceitos importantes para saber, mas isso já é o suficiente para começarmos a brincar com Git.
Começando do Começo
Vamos criar um repositório e fazer o primeiro commit. Comece criando uma conta no Github caso ainda não tenha uma.
Em seguida, crie um novo repositório. Nomeie como quiser, já que é apenas um repositório de teste. Deixe as outras configurações como estão.
Você provavelmente já viu desenvolvedores usando Git com a linha de comando (terminal). Não é difícil de usar desta forma, mas neste tutorial vamos deixar o terminal de lado e usar o App desktop do Github, que oferece uma interface simples para Windows e Mac.
Quando seu repositório estiver criado e o app desktop instalado e logado com sua conta do Github, você verá seu repositório listado no app. Agora basta copiá-lo para sua máquina.
Ou seja, você precisa clonar seu repositório. O app te dará a opção de escolher uma pasta onde o repositório irá ficar em seu computador: é onde os arquivos do seu projeto devem ser salvos.
Salvando suas Mudanças
Uma vez que seu repo (ou repositório) for clonado, adicione qualquer arquivo na pasta do projeto que você verá as mudanças listadas no app do Github:
Viu a mudança? Agora vamos fazer o commit:
Um “Porém” Importante
É importante notar que as mudanças em seus arquivos só serão rastreadas depois que o arquivo for commitado pela primeira vez. Explicando em imagens:
Esta é apenas uma das razões pelas quais é importante commitar seu trabalho constantemente, em partes pequenas — especialmente quando estiver adicionando um novo arquivo. Essa é a melhor forma de voltar atrás (fazer roll-backs) quando necessário, sem perder nenhum trabalho.
Compartilhando seu Código
Quando você terminar seu dia de trabalho, não se esqueça de dar upload (push) de suas mudanças para o Github usando o botão Publish, para que outros colaboradores possam vê-las (e você tenha um backup caso algo de ruim aconteça com seu computador)!
Se quiser puxar (ou “dar pull”) nas alterações feitas por outros colaboradores que atualizaram no Github, basta apertar Sync.
Quer ver um estado anterior do projeto? Selecione o commit desejado em seu histórico e veja os arquivos como eram naquela versão do projeto.
É bem legal ver o histórico de seu repositório crescendo, sabendo que você pode a qualquer momento fazer roll-back de suas mudanças. Ele pode (e provavelmente vai) ficar uma bagunça eventualmente, mas saber que é bem difícil fazer merda no histórico do seu projeto é uma ótima maneira de se trabalhar.
A Seguir
Você deve ter visto que o app do Github oferece uma opção chamada branches. Branches são uma ótima maneira de modularizar seu projeto e garantir que suas mudanças no código não afetem outros colaboradores — mas vamos deixar isto pra outro dia ✨.
Usar Git em projetos próprios já é uma ótima maneira de organizar sua forma de escrever código e garantir que você possa dar roll-back no seu projeto quando necessário.
Claro que isso é só a ponta do iceberg do Git. Se quiser continuar estudando, esses tutoriais podem ajudar:
A CodeSchool tem um tutorial para começar a usar a linha de comando
Outro guia para iniciantes para usar o Git no terminal
Um cheatsheet de comandos de Git (vale fazer os tutoriais anteriores para esse cheatsheet fazer mais sentido)
Documentação oficial do Git (pra quem tem coragem!)
Se você acha que este artigo foi útil, recomende!💚
Perguntas? Correções? Dicas? Deixe nos comentários ou no twitter em @dfosco.
