Introdução ao Git e GitHub para Web Designers

Cansado de ficar procurando aonde foi aquela alteração que eu fiz semana passada? Então está na hora de conhecer um sistema de gerenciamento de versão! Confira neste tutorial como fazer esse controle.

Olá Meninos e Meninas, hoje irei falar sobre versionamento de arquivos, mais especificamente de uma ferramenta (git/github) muito interessante, espero que vocês também possam achar.

Curiosidade dos controladores de versão

Quando começamos a desenvolver uma página web, blog ou um sistema independente da linguagem é importante pensar como gerenciar a evolução do desenvolvimento, armazenar os dados, identificar a modificação e quem as fez e integrar a equipe no projeto, ou seja, fazer com que todos trabalhem unidos e que ninguém perda informação um dos outros, eis que surge os sistemas de controle de versão.

Um sistema de controle de versão tem como finalidade gerenciar as diferentes versões de um documento, seja ele um arquivo .html ou um .txt. É bastante utilizado por empresas de desenvolvimento de software, pois elas possuem equipes grandes e precisam integra-las e manter organizado e arquivado tudo o que foi gerado e modificado.

Existem hoje algumas ferramentas no mercado que faz o controle das versões de documentos, uma que está bastante em evidência e ascensão é o Git, um gerenciador de mudanças muito eficiente e uma das grandes vantagens que pode ser utilizado na nuvem, diferentemente dos demais. Ahh um bônus é gratuito para os projetos públicos. Existe bastante projetos lá no GitHub (servidor git na nuvem, logo mais será detalhado), tais como: jQuery, Ruby On Rails, FacebookSDK entre outros grandes.

Quais benefícios de utilizar?

  1. Há um repositório comum no projeto que contém todos os arquivos mais recentes, seja ele na nuvem (Internet) ou em um servidor local, mas o fato que somente daquele lugar sairá o produto final para ser distribuído;
  2. As pessoas podem trabalhar nos mesmos arquivos simultaneamente e dos mais variados locais sem conflitos de alterações;
  3. Permite voltar  a uma ou mais versões antiga do arquivo do projeto, se necessário;

Mesmo que não trabalhe em equipe, o controle de versão pode ser um canivete suiço para você,  fazendo backup de arquivos é uma das coisas mais fáceis que você pode fazer para salvar-se da perda de trabalho ou ter que começar de novo.

Pode parecer difícil no começo, mas depois de se acostumar com a ferramenta torna-se parte das suas tarefas diárias realizar o “commit” (envio dos arquivos alterados para o servidor).

Um pouco mais sobre Git?

Como havia falado o Git é um sistema de controle de versão ou mudança, ele é uma das opções de software dentre: SVN, CVS, Mercurial, Bitkeeper e outros pagos ou open source. O Git tem se destacado e bastante utilizado por conta dos fã de Linux e principalmente depois do repositório (local onde são armazenados os documentos) on-line GitHub.

Originalmente o Git foi projetado e desenvolvido por Linus Torvalds para o desenvolvimento do kernel do Linux (módulo do núcleo do Linux).  Ele se propôs a resolver um problema de gerenciamento de mudança de arquivos, dai surgiu o Git, que tem seu diferencial, já comentado antes, ser distribuído. Isto significa que cada usuário tem uma cópia completa dos dados do repositório armazenados localmente em sua máquina. Mas o que deixa ele bom?

  1. Tudo é local, com isso pode trabalhar sem precisar de se conectar constantemente a Internet;
  2. Permite revisar se realmente aquelas mudanças são importantes para a agregação de valor ao seu projeto;
  3. Possibilita o desenvolvimento de várias equipes geograficamente distribuida sem a perda de informações e consequentemente várias cópias do seu projetos, fazendo assim uma infinidade de backups.

Bom podemos ficar aqui por horas falando sobre os beneficios e recursos que o Git proporciona, mas enfim o foco deste artigo é dar mostrar que existe uma forma simples de organizar os projetos, por isso que não vou me extender tanto nas definições. Caso queira se aprofundar mais sobre isso irei deixar no final do artigo algumas referências.

O que é GitHub?

GitHub é um serviço de hospedagem distribuído, desenvolvido em Ruby On Rails para projetos que faz uso do controle de versão Git. Assim, é utilizando como repositório na nuvem de códigos fontes para projetos open source, como aqueles que citei anteriormente, jQuery… Para utilizar esse serviço basta se registrar, como será mostrado a seguir.

Observação: Não é preciso usar o Github para fazer o controle, pode utilizar o servidor Git puro sem interface nenhum, mas sugiro para quem está iniciando utilize as interfaces, antes de mergulhar em linha de comandos.

Então vamos instalar GitHub?

Acesse o site http://www.github.com, abrirá uma tela igual a Figura 1. Digite um nome de usuário (pick a username), seu e-mail (your e-mail) para envio da confirmação do cadastro e uma senha (create a password). Preenchido clique em registre de graça (sign up for free).

Tela de registro do GitHub

Figura 1 – Tela de registro do GitHub

Observação: Caso queria fazer projetos privados, sem visualização pública é preciso assinar um plano, vai deste $ 7,00 até $ 200 doláres/mês. Mas isso para projetos internos da organização, aqui irei demonstrar o gratuito.

Confirme seu dados, logo em seguida clique em criar conta (create a account), como demostrado na Figura 2 e depois verifique seu e-mail para validar o registro.

Tela de confirmação dos dados o registro

Figura 2 – Tela de confirmação dos dados o registro

Depois de confirmado o registro, vamos retornar ao site principal: http://www.github.com, como demostrado na Figura 3 , e baixar o aplicativo, no site tem para o windows e mac. Se você é usuário Linux user o terminal ou até o gerenciador de pacotes.

Tela de download do aplicativo GitHub

Figura 3 – Tela de download do aplicativo GitHub

Instale através do arquivo executável baixado, eu vou dar baixar o aplicativo do Mac, pois sou usuário mac. Para os usuários windows a interface tem uma leve mudança, mas é possível aplicar tudo o que irei comentar daqui para frente. Como o aplicativo instalado e aberto, vamos criar nosso primeiro repositório de projeto.

Antes de criar o repositório é preciso inserir suas informações, clique na guia GitHub e selecione a opção preferences, para os que gostam de tecla de atalho, command + , irá abrir uma tela igual a Figura 4. Preencha os dados inserido no cadastro e pressione login, ele irá apresentar sua foto se foi logando com sucesso.

Tela de Login do aplicativo GitHub

Figura 4 – Tela de Login do aplicativo GitHub

Bom feito a autenticação iremos agora criar nosso repositório, basta clicar no menubar em File, selecione a opção Create a new repository, como a Figura 5 mostra, irá ser apresentado uma popup para o preenchimento dos dados.

Aplicativo GitHub - Criação do repositório

Figura 5 – Criando repositório

Observe que destaquei um checkbox, (Push to GitHub.com?), se você deixar marcado, na hora que clicar em Create Repository, ele irá criar também no site github.com, para verificar acesse: http://www.github.com/login (execute o login), logo após logar veja no seu dashboard, o repositório, por exemplo: Tutorial. A Figura 6 ilustrar o resultado das ações.

Site GitHub - Listagem dos repositórios cadastrados

Figura 6 – Listagem online dos repositórios cadastrados

Caso deseje trabalho sem enviar para o site, desmarque a opção (Push to GitHub.com?), dai ele não vai submeter as configurações do projeto.

Bom criado o repositório, está pronto para iniciar o desenvolvimento do seu projeto, aqui vou ilustrar criando um arquivo index.html, com um texto bem simples Hello World.

<html>
<head>
       <title> Tutorial GitHub para o Mochileiro Digital </title>
</head>
<body>
         <h1> Hello World </h1>
</body>
</html> 
 

Salve o arquivo e volte ao aplicativo do GitHub, click na guia Changes (Mudanças) perceba que ele irá identificar que houve uma mudança no seu workspace, como a Figura 7 representa.

Aplicativo GitHub - Tela de commit dos arquivos

Figura 7 – Tela de submissão e de versionamento dos arquivos

Perceba que está selecionado o arquivo, você pode escolhe quais arquivos contemplam a alteração que você fez, no nosso caso temos somente um e ele está sendo inserido.

Observe também tem dois botões um verde (+) e um outro (commit & sync), se você desmarcar o botão verde, não enviará para o site a modificação, eu vou deixar marcado. Para ser commitado o arquivo é preciso inserir uma descrição.

Irei colocar como commit initial, e submeter para o site também, observe qual foi o resultado das ações na Figura 8.

Site GitHub - Repositório criado

Figura 8 – Submissão do repositório na nuvem

Caso você não tenha optado por enviar para o site é possível visualizar no aplicativo também, fica igual ao site, basta clicar no History (Histórico) no aplicativo. Se você fizer alguma modificação o processo será o mesmo do anterior, somente o aplicativo irá apresentar uma pré- visualização do que foi adicionado. Observe a Figura 9.

Tela de commit e verificação das alterações dos arquivos
Figura 9 – Tela de commit e verificação das alterações dos arquivos

Bom clicando em Commit & Sync, será enviado o texto adicional que inserimos, mas vamos supôr que haviamos mudado de ideia e não queremos mais esse texto adicional somente o Hello World já basta, o que queremos fazer é reverter para o commit anterior. Basta realizar as seguintes operações, como são demostrado nas Figura 10 e 11. Clique na guia History, será apresentado uma lista selecione o commit de nome (Adicionando mais texto), cuja a alteração que não queremos mais.

Aplicativo GitHub - Listagem dos commits realizados

Figura 10 – Lista dos commits efetuados

Irá abrir um outra janela, Figura 11, onde serão listados as alterações contempladas neste commite, caso for essa mesmo confirme a reversão no botão reverte commit (Revert Commit).

Aplicativo GitHub - Detalhes do commit

Figura 11 – Detalhes do commit

Depois de clicado em revert será alterado o arquivo para o estado sem os textos com o mais (+). O resultado disto é localmente, não irá ser commitado para o site caso tenha aquela opção marcada, pode ser observado também no histórico que você fez a reversão (Revert “Adicionado mais texto”) e também a guia Changes irá estar acender para submeter para commitar e/ou submeter para o site.

Esses passos que fiz foi um pouquinho do recurso do Git, dai temos alguns outros recursos tais como branches e tags. Eu não vou me aprofundar muito neles mostrarei um pouco do branch e para qual finalidade utilizamos e em um outro artigo ou até um Hangout, ou videocast demonstro todas as funcionalidades.

Bônus: Trabalhando com branches

Se você observou no canto direito na tela existe um botão de nome master, pois bem esse é o branch (marcação) principal, nele ficam todas as alterações válidas para o seu projeto. Esse master tem o projeto executável, sem erro algum, ou se for a página de website tem com a versão atual rodando.

Vamos criar um branch, ou seja uma funcionalidade, de nome applycss. Siga o que é realizado na Figura 12. Basta clicar na guia Branches, logo em seguinda na lista (master) clique no botão mais (+), será apresentado um campo para inserir um nome digite applycss, depois clique em branch.

Aplicativo GitHub - Criando um branch

Figura 12 – Criação de um branch

Com o branch feito, será possível implementar o css sem estragar ou alterar o projeto no branch master. Verifique se você selecionou o branch applycss, igual a da Figura 13.

Aplicativo GitHub - Branch criado

Figura 13 – Branch criado

Observe que no canto inferior direito da tela, o master não aparece mais, ele agora esta como applycss, dai para realizar as alterações basta proceder da mesma forma que haviamos feito anteriormente, a cereja do bola é o merge.

Quando terminamos de realizar as alterações e estamos plenamente satisfeito com o resultado, precisamos passar para o master o que mudamos, lembrando que o master é o nosso projeto atual estável, para mesclar os dois branches iremos usar a função Merge. Para isso iremos proceder da seguinte forma.

Clique na guia branches, logo após no botão de Merge. Será requisitado para inserir os branches a serem mesclado, observe que o branch que desejamos mesclar aparece primeiro, e depois o branch que será aplicado. Exemplo: applycss -> master.

Aplicativo GitHub - Mesclado branch

Figura 14 – Mesclando branch

Selecionado os branches para confirmar clique em Merge Branches, o resultado da ação é percebida na Figura 15.

Aplicativo GitHub - Resultado da mesclagem

Figura 15 – Branch mesclado

Pronto, está mesclado os branches no seu master, se quiser ir na pasta estará lá a junção. Caso queria poderá enviar para o site, através da guia Commit.

Você está deve estar achando legal esse recurso, mas para que eu vou aplicar ? Vou dar alguns exemplos práticos:

  1. Divisão das implementações de funcionalidades. Você quebra seu projeto em principal (master) e os adicionais por exemplo aplicação do css ou inserção das imagens em um branch diferente.
  2. Esse é um pouco feio de fazer mas é possível, cria um projeto master, com todas as funcionalidade do website, dai quebra em branches os clientes. Mas para isso tem uma função chamada tag que é bem mais elegante. Mas nada impede de usar os branches.
  3. Cria um branch para realizar teste de implementação, caso der certo, faz um merge, caso der errado deleta e segue a vida na implementação.

Espero que tenham gostado deste artigo, tentei resumir bastante e deixar de forma bem sussinta a utilização do GitHub, sem precisar de aprofundar nos conceitos. Bom como havia comentado estou deixar algumas referências para mais informações:

Ah, para aquelas pessoas que gostam de command line, como eu, o git tem essa opção, vou deixar o cheat sheet dos comandos. Ele tem os mesmos recursos da interface visual do github.

Qualquer dúvida poste nos cometários e se tiver alguma sugestão ou critica fique a vontade para entrar em contato conosco.

Abraços e até a próxima!

Um Comentário

Deixe uma Resposta

  • (não será publicado)

XHTML: Você pode usar estas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

© 2017 Mochileiro Digital.

Compartilhe: