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

O objetivo geral do artigo é mostrar como fazer uma Integração Contínua (técnica de desenvolvimento agile) com Travi CI, criando um repositório no GitHub e publicando nosso projeto em um Host utilizando o Heroku.

Nesse primeiro post iremos montar toda nossa estrutura de diretórios e configuração de arquivos. Por fim iremos criar nosso repositório no GitHub e enviar o nosso projeto local. No segundo post iremos registrar nossa aplicação no Dribbble, configurar o Travis e Heroku e finalizar nossa aplicação client-side.

Sobre o Travis

Travis CI é uma plataforma/serviço de Integração Contínua, que é free para todos os projetos open source hospedados no GitHub. Com apenas um arquivo chamado .travis.yml contendo algumas informações sobre o projeto, podemos produzir builds automatizados com todas as mudanças, para o branch master ou outro, e até mesmo através de pull request.

Pré Requisitos

  • Conta no GitHub.
  • Conta no Heroku.
  • Para o Travis você poderá usar a mesma conta do GitHub.
  • Git, NodeJS e Bower instalado.
  • Um editor de texto: Sublime Text, Atom ou qualquer outro de sua preferência.

Descrição do Projeto

Iremos implementar uma aplicação client-side que consulta uma API do site Dribbble e mostre os Shots mais populares. Usaremos as seguintes tecnologias no front-end: Angularjs e Materialize.css como framework de componentes. Para gerenciar os pacotes e dependências utilizaremos o Bower. No server-side usaremos a plataforma NodeJS como nosso servidor web, e o Gruntjs para automatizar algumas tarefas. Para o versionamento utilizaremos o Git.

Criando Nossa Estrutura de Diretórios

Os arquivos e diretórios podem ser criados da maneira que você se sentir mas a vontade. OBS.: Não crie o diretório “.git”, pois ele será criado através da nossa linha de comando, o restante pode ser criado manualmente.

Detalhamento da Estrutura

  • client: diretório onde ficará todos os nossos arquivos de front-end.
  • .bowerrc: arquivo de configuração do Bower, é nele que iremos definir onde serão instalados nossos pacotes. Se você não criá-lo as dependências serão instaladas no diretório chamado bower_components padrão do bower.
  • .gitignore: arquivos que podem ser ignorados pelo versionamento do Git.
  • .travis.yml: arquivo de configuração da nossa integração com o Travis.
  • Gruntfile.js: arquivo onde ficará todas as configurações de tarefas automatizadas, como por exemplo: concatenação e minificação dos arquivos.
  • server.js: arquivo onde faremos a configuração de nosso servidor web.

deixe o diretório client com a seguinte estrutura:

código do arquivo .bowerrc

{
"directory" : "client/vendor"
}

código do arquivo .gitignore

node_modules/

código do arquivo .travis.yml

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

código do arquivo server.js

código do arquivo Gruntfile.js, explicarei na segunda parte do post toda sua configuração.

Bower: Instalação dos Pacotes e suas dependências

Vá para raiz do projeto e digite o seguinte comando para instalação das dependências.

$ bower install angular angular-resource angular-ui-router angular-sanitize angular-loading-bar bootstrap materialize

após a execução desse comando o seu diretório client/vendor ficará da seguinte forma:

Nodejs: Instalação e Configuração dos Pacotes

$ npm init -y

após a execução desse comando será criado um arquivo na raiz do seu projeto chamado package.json.

Instalação das Dependências

$ npm install express serve-static --save

Iniciando o Versionamento com o GIT

$ git init
$ git add .
$ git commit -m "primeiro commit"

Executando a aplicação

node server.js

o seu sistema terá que exibir a seguinte mensagem

client:  /client
environment: undefined
localhost:8081

para parar a execução do servidor pressione ctrl + c.

Criando Repositório no GitHub

Abra o site do GitHub, crie um repositório público chamado ci-agile-th.

após a criação aparecerá a seguinte tela

digite os comandos que estão dentro do 2º módulo na raiz do seu projeto

$ git remote add origin https://github.com/dejaneves/ci-agile-th.git
$ git push -u origin master

te espero no próximo post.

Links Úteis

Instalação do NodeJS

Instalação do Bower