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 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 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 **[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 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 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 ]4 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
{<br />
"directory" : "client/vendor"<br />
}
código do arquivo .gitignore
node_modules/
código do arquivo .travis.yml
language: node_js<br />
node_js:<br />
- "6.1"<br />
- "5.12.0"<br />
- "5.11.1"
código do arquivo server.js
var express = require('express');<br />
var serveStatic = require('serve-static');<br />
var app = express();<br />
var client = process.env.NODE_APP_DIRECTORY === 'production'<br />
? '/client/dist' : '/client';<br />
var port = process.env.PORT || 8081;<br />
app.use(serveStatic(__dirname + client));<br />
app.listen(port,function(){<br />
console.log('localhost:'+port);<br />
});
Link para o código do arquivo server.js no GitHub.
código do arquivo Gruntfile.js. O código e toda sua configuração, será explicado na segunda parte do post.
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<br />
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<br />
$ git add .<br />
$ git commit -m "primeiro commit"
Executando a aplicação
node server.js
o seu sistema terá que exibir a seguinte mensagem
client: /client<br />
environment: undefined<br />
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º bloco na raiz do seu projeto
$ git remote add origin https://github.com/dejaneves/ci-agile-th.git<br />
$ git push -u origin master
te espero no próximo post.
Links Úteis
Instalação do NodeJS
Instalação do Bower
