Você está na página 1de 7

--layout: post

title: "Guia: Sistema completo para gerenciamento de fornecedores/servios de eventos - Parte #03 de ?"
date: 2014-09-04 12:29:25
categories: guia scg-fornecedores-eventos
author: Leonardo Lima Ribeiro
meta: cvs versionamento team flow
tags: arquitetura hexagonal apis workflow fluxo backend frontend testes node angular sails hapi sgbd html5 bootstrap ui ux javascript mysql postgres
excerpt: >
Na segunda parte iremos abordar na parte terica a arquitetura hexagonal e APIs e tambm a organizao do workflow de desenvolvimento. Na parte prtica iremos definir qual o
stack adotado ao desenvolvimento do sistema. Vamos l?!
---

Estive muito enrolado nos ltimos meses e no conseguia dar prosseguimento nenhum Juro que pensava no blog todas
as noites antes de dormir! Se tornou um pesadelo! Ainda estou enrolado, mas consegui arrumar um tempinho para
escrever aqui!
Antes de falar sobre GIT e versionamento, na ltima parte falei que estava optando entre utilizar o Sailsjs e o Hapi. Optei
na utilizao do Sailsjs por j ter alguns recursos prontos onde eu precisaria implementar no Hapi como loggers,
autenticao JWT, conexo ao BD, entre outros.
O HAPI timo, no o descartem por isso, mas voc precisar implementar alguns recursos adicionais (ou instalar
plugins/pacotes) que um bom framework j tem embutido. Ento dependendo do objetivo da sua aplicao voc pode
optar pela utilizao de um framework ou no.
Enfim, vamos ver logo o que esse tal de GIT!
Git um sistema de controle de verso, CVS, do Wikipedia:
O CVS, ou Concurrent Version System (Sistema de Verses Concorrentes) um sistema de controle de verso que
permite que se trabalhe com diversas verses de arquivos organizados em um diretrio e localizados local ou
remotamente, mantendo-se suas verses antigas e os logs de quem e quando manipulou os arquivos.
Ento seria uma ferramenta que nos permite modificar o cdigo repentinamente e termos como verificar o que foi
alterado ao longo do tempo, com facilidades no prprio software. Caso contrrio, precisaramos ficar salvando cada
verso do cdigo, abrir os cdigos fontes e comparar linha a linha para verificar a diferena. uma facilidade e tanto,
ainda mais para quem desenvolve em equipe, um vez que tambm sabemos quem o autor de cada modificao, certo?
[IMAGEM]
O exemplo anterior mostra que o bloco em verde foi acrescentado na nova verso de cdigo. Repare que antes o cdigo
acabava na linha 53 e agora na linha 50 foi inserido o atributo vendor. A screen acima foi tirada no WebStorm (IDE de
desenvolvimento), utilizando o GIT como CVS.
Vamos prtica! (Para isso voc s precisar instalar o git, siga as instrues no site oficial: http://git-scm.com)
Criemos um repositrio chamado FestasJaApp:
$ git init FestasJaApp
Repositrio nada mais do que uma pasta que ir servir de armazenamento de todo seu projeto. Os sistemas CVS
chamam de repositrios, inclusive o GIT.
Com o comando acima ser criada uma pasta vazia dentro do local que voc digitou esse comando.
Certo agora vamos a pratica, criemos uma pgina inicial de teste, chamada index.html e inserimos o seguinte contedo
dentro:
<!DOCTYPE html>
<html>

<head lang="en">
<meta charset="UTF-8">
<title>Ttulo da pgina</title>
</head>
<body>
<p>Contedo inicial</p>
</body>
</html>
Agora salve o arquivo.
Dentro da mesma pasta do projeto insira o seguinte comando:
$ git status
Com o comando acima conseguimos verificar como est o status atual do nosso repositrio. E no status atual temos um
repositrio vazio (que iniciamos atravs do comando git init) e um arquivo que ainda no est no repositrio chamado
index.html.
Como index.html um arquivo do nosso projeto, queremos que ele seja adicionado no nosso repositrio, para isso basta
adicionar atravs do comando abaixo:
$ git add index.html
Se verificarmos o status mais uma vez, veremos que agora nosso arquivo est adicionado ao repositrio, indicado pela
cor verde:
[IMAGEM]
Bom ento agora que nosso repositrio j est pronto, com a primeira pgina, vamos commitar nossa verso zero.
Commitar um termo dado para versionar todo o cdigo que se tem no momento atual. Ento como ns criamos nossa
pgina esqueleto, vamos fazer um commit inicial para registrar nosso esqueleto na linha do tempo (no futuro permite
voltarmos para verso esqueleto ou comear novos projetos baseados na verso zero, em cima desse esqueleto). Para
isso digite o comando abaixo:
$ git commit -am initial commit, skeleton
Repare que o que est entre aspas o comentrio das alteraes feitas, voc pode colocar o que quiser (por boas prticas
colocar o comentrio no verbo presente). Aps esse comando ao verificarmos o status mais uma vez recebemos a
seguinte mensagem:
$ git status
On branch master
nothing to commit, working directory clean
Essa mensagem identifica que tudo que est no repositrio est fiel ltima verso commitada. Se alterarmos o
pargrafo <p>Contedo inicial</p> para <p>Contedo inicial 2</p> e salvarmos o arquivo, ao verificar o status mais
uma vez receberemos a seguinte mensagem:
$ git status
On branch master
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: index.html
no changes added to commit (use "git add" and/or "git commit -a")

Ento commitando mais uma vez para versionamos essa pequena alterao:
$ git commit -am "alterar texto de contedo"
[master e9f7b0e] alterar texto de contedo
1 file changed, 1 insertion(+), 1 deletion(-)
Verificando o status novamente:
$ git status
On branch master
nothing to commit, working directory clean
Ou seja, analisando todo fluxo at agora, ao criarmos um arquivo e adicionarmos ao repositrio, ou alterarmos um
arquivo j adicionado, o git identifica que o arquivo novo/modificado no repositrio e as alteraes ainda no foram
commitadas. Ento aps terminarmos todas as alteraes, realizamos o commit da verso atual atravs do comando git
commit.
Portanto um fluxo bastante comum commitar as alteraes feitas para cada funcionalidade/etapa do desenvolvimento
do projeto. Se uma etapa levar mais de um dia de codificao comum commitarmos o que foi feito no final do dia de
trabalho. E para os mais precavidos, realizar o commit de todo trabalho feito at os momentos de pausa (almoo, cafs
etc.).
Vamos mudar o titulo e inserir uma imagem no repositrio, segue nosso novo arquivo:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Festas J - Faa agora a sua festa!</title>
</head>
<body>
<p><img src="logo.png" alt="Festas Ja"/></p>
<p>Faa j sua festa!</p>
</body>
</html>
Certo, agora imagine que temos um arquivo pessoal chamado anotacoes-gerais.txt que queremos inserir nessa pasta, mas
que no precise ser adicionado ao repositorio, pois ele tem tarefas pertinentes a voc que no concerne ao projeto,
algumas senhas suas etc. Se colocar esse arquivo na pasta do repositorio e no fizermos nada, OK. O arquivo no ser
adicionado ao repositrio, mas raramente adicionamos arquivos um a um no repositorio como fizemos no incio
adicionando o arquivo index.html. Geralmente utilizamos o comando git add . e o ponto representa adicionar todos os
arquivos dentro do local que voc est. Mas se fizermos isso agora o arquivo anotacoes-gerais.txt tambm ser inserido e
ns no queremos isso.
Bem, vamos verificar como est o repositrio at agora:
$ git status
On branch master
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: index.html
Untracked files:
(use "git add <file>..." to include in what will be committed)

anotacoes-gerais.txt
logo.png
no changes added to commit (use "git add" and/or "git commit -a")
Para evitar que o git adicione o arquivo vamos criar um arquivo chamado .gitignore com o seguinte contedo:
anotacoes-gerais.txt
Salve o arquivo e verifique o status mais uma vez:
$ git status
On branch master
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: index.html
Untracked files:
(use "git add <file>..." to include in what will be committed)
.gitignore
logo.png
no changes added to commit (use "git add" and/or "git commit -a")
Repare que o arquivo .gitignore reconhecido pelo repositrio mas o arquivo anotacoes-gerais.txt no nem mais
verificado pelo git. E era isso que ns queriamos, no tem problema de ter o arquivo .gitignore adicionado ao projeto, ele
muito til e veremos isso posteriormente.
Bem, vamos adicionar os arquivos e commitar para j termos nossa primeira verso apresentvel:
$ git add .
$ git commit -am "pgina inicial pronta"
[master 3b2bf07] pgina inicial pronta
3 files changed, 4 insertions(+), 2 deletions(-)
create mode 100644 .gitignore
create mode 100644 logo.png
$ git status
On branch master
nothing to commit, working directory clean
Eu utilizo o IntellijIDEA WebStorm como minha IDE de desenvolvimento, gosto muito dos produtos do JetBrains,
substitui o Eclipse por ele e estou muito feliz! Quando eu mando abrir meus projetos ele j cria uns arquivos ocultos de
sistemas dentro da pasta .idea, ento como no quero isso no meu repositrio j vou adicionar mais uma linha no meu
arquivo .gitignore:
anotacoes-gerais.txt
.idea
Agora vou brincar um pouco com o WebStorm para mostrar pra vocs o poder do versionamento. (Tudo isso pode ser
feito pela linha de comando do git, Eclipse, ou plugins para sublime text, e at mesmo para o editor que voc j est
acostumado).
Adicione mais duas linhas no arquivo index.html antes da tag <body>:

<p>Segue mais um novo pargrafo adicionado no webstorm</p>


<p><a href=new.html>Nova pgina</a></p>
Crie um arquivo Teste.html vazio que no irei adicionar ao repositrio.
Crie um arquivo new.html com o seguinte contedo:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Nova pgina</title>
</head>
<body>
<p>New!</p>
<p><a href="index.html">Incio</a></p>
</body>
</html>
Adicione esse arquivo com o comando:
$ git add new.html
Repare que no sidebar do WebStorm, j me mostra em azul os arquivos modificados, em verde os arquivos novos, cinza
os arquivos ignorados pelo .gitignore e vermelho os arquivos que ainda no foram adicionados ao repositrio:
Adicione todos os arquivos com git add . e depois git commit -am novas paginas
Com isso temos todas as novas alteraes versionadas no repositrio. Lembra que falamos da comparao de cdigo
inicialmente? Vamos analisar o arquivo index.html:
Conseguimos fazer isso facilmente atravs do boto direito no webstorm:
[IMAGEM]
[IMAGEM]
Clicando com o boto direito mais uma vez no webstorm na primeira verso do arquivo e comparando com a verso
atual:
[IMAGEM]
[IMAGEM]
Particularmente eu prefiro trabalhar com um IDE justamente por essas facilidades. Se voc preferir visualizar essas
diferenas por terminal tambm possvel atravs dos comandos git log e git diff!
Perfeito, j montamos nosso repositrio inicial e j tivemos 4 versionamentos:
$ git log
commit f0706d9f08ff16a42eb90751a136b21a0ae9d364
Author: Leonardo Ribeiro <leonardolr@globo.com>
Date: Sun Nov 9 15:03:08 2014 -0200
novas paginas
commit 3b2bf077f45e7c8a3688afc5713590d083091071

Author: Leonardo Ribeiro <leonardolr@globo.com>


Date: Sun Nov 9 13:41:51 2014 -0200
pgina inicial pronta
commit e9f7b0e4a1d9af437aac7dc2f44c60cde6641412
Author: Leonardo Ribeiro <leonardolr@globo.com>
Date: Sun Nov 9 13:24:04 2014 -0200
alterar texto de contedo
commit e6c0ffe54017554b8fdfcea59e2b5832d6acdde0
Author: Leonardo Ribeiro <leonardolr@globo.com>
Date: Sun Nov 9 13:14:25 2014 -0200
initial commit, skeleton
Agora que tal enviarmos isso para um servidore ter a possibilidade de outros companheiros de projeto atuarem nesse
trabalho? Essa uma das principais vantagens do Git. O Git trata cada repositorio como um servidor! Isso te permite ter
diversos backups do seu projetos em diversos locais.
[IMAGEM DE SERVIDOR GIT]
Bom, a maneira mais fcil de fazer isso utilizar servios prontos que tem essa serventia como o GitHub ou o
BitBucket. Neste exemplo vamos usar o GitHub e para isso voc vai precisar de uma conta l, seno tiver, crie.
Aps criar a conta j tem os passos iniciais para criar um novo repositorio, como j temos o repositorio criado, vamos
apenas enviar para o GitHub, ento:
[pegar instrucoes de envio do repositorio ja pronto para o github]
Com isso seu repositrio j est publicado no GitHub, voc pode divulgar para seus companheiros de projeto para que
eles possam clonar o repositrio. Clonar nada mais que fazer o download do repositrio atravs do comando git
clone:
[instrucoes de clonagem]
Repare que o GitHub um servio aberto para o pblico, qualquer um pode clonar seus cdigos, abrir Issues (problemas
a serem corrigidos), comentar, favoritar (starring) etc.! Isso o melhor dos mundos para o desenvolvedores de projetos
opensources! Se isso no o que voc deseja voc pode pagar na sua conta do GitHub para ter seu repositrio privado
ou ento recorrer ao BitBucket que te d a opo de ter o repositrio privado sem custo algum!
Certo, ento se voc quer compartilhar seu projeto para seu time basta disponibilizar o repositrio, dar acesso para os
usurios do seu time fazerem commit e solicitar que eles clonem o repositrio para iniciar o trabalho.
[instrucoes de adicao de equipe]
Se seu projeto aberto ao publico em geral, voc tambm pode receber contribuies de pessoas desconhecidas que
gostaram do seu projeto, eles vo lhe enviar pull requests e voc decide se aceita as contribuies ou no! Fantstico
no?
E se voc gostou muito de um projeto e quer comear um trabalho em cima dele? isso que vamos fazer aqui, atravs
do conceito de fork.
O Fork nada mais que um clone de um projeto mas que ser iniciado um novo desenvolvimento em cima desse projeto.
Vamos pratica deste conceito!

Lembra do artigo anterior onde dizemos de arquitetura de sistemas hexagonal? Temos um Boilerplate perfeito para isso!
Boilerplate um repositrio com os esqueletos necessrios, prontos para que possamos iniciar nosso projeto. E no github
temos diversos boilerplates para que possamos praticar o fork e iniciar um novo projeto!
Iremos forkar o projeto angular-sailsjs-boilerplate que constitudo de duas partes: Frontend e Backend. No Backend
temos o framework sailsjs em cima do Node.Js, ele ser responsvel pela nossa camada de business logic. Lembra? E no
frontend temos um boilerplate baseado em AngularJs. Com esse setup podemos adicionar diversos novos frontend, seja
app nativo para android, app nativo para iOS etc. Basta criarmos novos projetos de frontend que se conectem com nosso
backend atravs de suas APIs.
[instrucoes para fork do angular-sailsjs-boilerplate]
Pronto, agora j temos nosso boilerplate inicial para comearmos a desenvolver o FestasJa (nome improvisado e bem
feio por sinal, mas o melhor que tive at agora)!
O artigo ficou bem extenso mas tentei cobrir o mximo que pude para que vocs possam comear a caminhar com o Git,
pois o que foi apresentado no nem 1% da capacidade da ferramenta! Lembre-se que ainda podemos navegar em
verses antigas, mudar de branch, execuo de tarefas de deploy aps um push no servidor (com isso podemos definir
servidores de desenvolvimento, testes e produo) etc.
Estudem esse boilerplate para que possamos caminhar juntos no prximo artigo! Estudem SailsJs e Angular!
Segue o resumo dos comandos utilizados no Git hoje:
Quando estivermos fazendo deploy provavel que vejamos recursos mais avanados no Git!
Espero que tenham gostado e at a prxima!

Você também pode gostar