Integração Contínua com Travis CI — Parte 02

No primeiro post iniciamos nossa estrutura de diretórios e criamos um repositório no GitHub para a aplicação. Nesse segundo e último post sobre Integração Contínua com Travis CI, iremos registrar nossa aplicação no Dribbble, configurar o Travis e Heroku e por fim criar nossa aplicação client-side.

Registrando Aplicação no Dribbble Developer

Para registrar nossa aplicação no Dribbble acesse o seguinte endereço Dribbble Developer e depois clique no botão Register an application, ele vai pedir para que você faça seu cadastro para registrar a aplicação. Se você tiver uma conta no Twitter pode fazer o login com ela. Após o login aparecerá a seguinte tela:

preencha com as informações colocadas acima.

Name: Test Application

Description: Test Application

Website URL: http://localhost:8081

Callback URL: http://localhost:8081/callback

Após clicar em Register application ele lhe mostrará uma segunda tela com a mensagem de sucesso, role até o final da página e você encontrará as seguintes informações:

Nós usaremos o token (Client Access Token) para fazer nossas requisições para a API do Dribbble.

Para interagir com a API do Dribbble usaremos um serviço do AngularJS chamado $resource onde ele também levará nosso token na requisição. Esse exemplo aqui mostra como usaremos nosso token.

Criando Aplicação no Heroku

Abra o site do Heroku e faça seu registro como já citado anteriormente no post 01. Na tela de dashboard aparecerá todas suas aplicações já criadas, no momento em que esse post está sendo escrito a tela de dashboard é igual a essa.

clique no botão New e depois em Create new app. Aparecerá a seguinte tela:

preencha com o mesmo nome do repositório ou qualquer outro nome de sua preferência desde que esteja disponível e clique em Create App. Após clicar no botão você visualizará esta tela:

clique no item com a logo do GitHub e depois clique no botão Search sem preencher nenhuma informação no campo de busca, assim ele lhe mostrará todos os seus repositórios do GitHub selecione o repositório desejado que no nosso caso é o ci-agile-th e clique em Connect.

selecione o branch master pois usaremos para nossa versão estável, o Heroku analisará cada push feito pra ele. Clique no botão Enable Automatic Deploys para que o deploy aconteça automaticamente. Habilite a opção Wait for CI to pass before deploy, pois temos uma ferramenta de integração contínua configurada, que no nosso caso é o Travis CI.

Após essa configuração a tela ficará parecida com essa abaixo:

Configurando o Travis CI

Abra o site do Travis faça login com sua conta do GitHub. Após o login clique em Accounts que você encontrará passando o mouse em cima do seu nome de usuário que fica localizado no canto superior direito.

A seguinte tela será exibida:

clique no X para ativar o repositório, que no nosso caso será o ci-agile-th.

após isso o Travis já está configurado para o nosso repositório.

Configurando o Arquivo (.travis.yml)

abra o nosso arquivo .travis.yml já criado no post anterior que está com o seguinte conteúdo:

language: node_js
node_js:
- "6.1"
- "5.12.0"
- "5.11.1"

e altere para:

language: node_js
node_js:
- "6.1"
- "5.11.1"
- "5.12.0"
deploy:
provider: heroku
api_key:
secure: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
app: ci-agile-th

a sua apy_key será diferente dessa colocada, para encontrá-la abra o Heroku e clique na sua foto, no canto superior direito e depois clique em Account settings, vá até o final da página e você encontrará uma seção chamada API Key é ela que você usará.

Criando o Client-Side

Para não perdermos muito tempo montando toda estrutura de diretórios e arquivos da aplicação client-side e perder o foco que é nossa integração contínua, criei um repositório com toda estrutura já finalizada. Peço que você monte ou copie o diretório client que está nesse repositório, para o nosso projeto que iniciamos no post parte 01, com todos os seus conteúdos dos arquivos. Não é preciso montar todo o diretório dist, apenas crie a pasta dentro do diretório client. Para o diretório fonts copie o que está dentro de (client/vendor/materialize/fonts) para (client/fonts).

Nós não iremos executar scripts de teste nesse projeto então abra o arquivo package.json e retire a linha “test”.

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
}

ficará da seguinte forma:

"scripts": {
"start": "node server.js"
}

Após ter criado todos os arquivos e conteúdos do repositório passado acima para o nosso projeto, execute:

$ node server.js
client:  /client
environment: undefined
localhost:8081

e ao final abra o seu navegador e digite esse endereço:

http://localhost:8081

  1. Página Home.

2. Página de Detalhes.

para parar o execução do servidor pressione Ctrl + C.

Criando a Versão de Produção

Se você ainda não tem o GruntJS instalado globalmente na sua máquina, será preciso instalá-lo.

instalando através do npm.

$ npm install -g grunt grunt-cli

é preciso instalá-lo como dependência do nosso projeto.

$ npm install --save-dev grunt grunt-cli

é preciso também instalar os seguintes pacotes:

$ npm install --save-dev grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-copy grunt-contrib-uglify grunt-contrib-htmlmin

agora iremos setar o comando para gerar a versão de produção.

$ grunt dist

você verá estas mensagens ao executar o comando.

agora o diretório dist que estava vazio, está com a nossa versão de produção gerada pelo GruntJS.

Testando a Versão de Produção

Para testar a versão de produção é necessário setar a variável de ambiente NODE_APP_DIRECTORY com o valor igual a production. Se você estiver usando o Linux use o seguinte comando:

$ export NODE_APP_DIRECTORY=production

caso esteja usando o Windows

SET NODE_APP_DIRECTORY=production

execute novamente o comando:

$ node server.js
client:  /client/dist
environment: production
localhost:8081

perceba que o valor da variável client mudou, agora está apontando para o diretório /cliente/dist onde está nossa versão de produção, e o valor da variável environment não é mas undefined, agora o valor passou a ser production.

Agora vamos subir nossas alterações para o repositório.

Digite os seguintes comandos

$ git add .
$ git commit -m 'inserindo códigos, referente ao segundo artigo da séria'
$ git push origin master

agora ao realizar o push para o branch master automaticamente será feito o deploy com o Heroku. Na hora que estiver fazendo o commit, deixe o site do Travis aberto para você ver o log da aplicação.

link para aplicação funcionando:

Obrigado até a próxima.