/ Mobile

Criando um projeto Ionic utilizando Karma, Jasmine, SnapCI e Ionic View

Introdução

A cada dia mais empresas estão adotando estratégias mobile para conseguir alcançar uma maior fatia de seus consumidores, e novos aplicativos para as diversas plataformas existentes (Android, iOS, Windows) são criados. Porém o custo de se desenvolver para essas diversas plataformas acaba se tornando inviável, devido ao alto custo de se manter várias equipes, vários códigos e a manutenção dos mesmos. Pensando nisso, foram surgindo tecnologias de desenvolvimento de aplicativos híbridos, que com alguns conhecimentos em CSS, HTML e Javascript é possível desenvolver apenas uma vez e portar esse código para as diversas plataformas existentes. Como alguns exemplos dessas tecnologias podemos citar o PhoneGap e Titanium.

O que é o Ionic ?

O Ionic é uma SDK para o desenvolvimento de aplicações híbridas utilizando tecnologias como HTML, CSS, Javascript, AngularJS e Apache Cordova.

Instalando dependências

Antes de tudo você precisará instalar Node.JS e depois o Git, pois o Ionic o utiliza para gerenciar plugins e outros recursos que estão armazenados como projetos no Github.

Após ter instalado o NodeJS e Git, você deverá instalar o Cordova e o Ionic, para isso abra o terminal e digite o seguinte comando:

$ npm install -g cordova ionic

O NPM é o gerenciador de pacotes do NodeJS e o argumento -g que passamos junto ao comando fará com que ele instale o Ionic e o Cordova globalmente.

Criação do projeto Ionic

Com o terminal aberto, iremos rodar o comando do Ionic para criar a estrutura básica do projeto, existem diversos templates que você pode usar para criar seu primeiro projeto, no nosso caso iremos utilizar o blank que cria nada mais que uma estrutura vazia para nosso projeto. Rode o seguinte comando:

$ ionic start ionic-basic-project blank

Após a execução do comando, uma mensagem parecida com a seguinte deverá ser exibida:

Mensagem do Ionic

Para rodar seu projeto entre no diretório que foi criado, execute o comando:

$ ionic serve

Uma nova página do navegador foi aberta com a nossa aplicação.

Configurando o ambiente de testes com Karma e Jasmine

Karma ?

O Karma é um test runner para JavaScript que roda no Node.js, você pode usar o Karma para rodar testes usando algumas das suites de testes populares como o Jasmine , QUnit, Mocha entre outras.

Jasmine

Jasmine é um framework de BDD para testar código JavaScript, tem uma sintaxe bem limpa que facilita a criação de testes.

Configurando ambiente de testes

Vamos instalar o Karma, Jasmine, PhantomJS (navegador que o Karma vai utilizar) e o Karma-Coverage (para a cobertura dos testes), para isso acesse o diretório da sua aplicação e rode o seguinte comando:

$ npm install karma karma-jasmine karma-phantomjs-launcher karma-coverage --save-dev

Após a conclusão da instalação abra o arquivo package.json e verifique se as novas dependências foram instaladas:

Para manter nosso projeto organizado iremos criar uma pasta chamada tests e nela adicionar o arquivo de configuração do Karma:

$ mkdir tests

$ cd tests

$ karma init karma.conf.js

Após rodar o comando karma init você verá um terminal iterativo onde terá que responder algumas questões, por enquanto apenas responda de acordo com a imagem abaixo:

Karma init

Agora precisamos criar uma gulp task que ao ser executada irá solicitar ao karma que execute os testes, para isso abra o arquivo gulpfile.js e importe o karma adicionando a seguinte linha em seu inicio:

var Server = require('karma').Server;

Agora no final do arquivo adicione a task que ao ser acionada rodará os testes:

gulp.task('test', function(done) {
  new Server({
    configFile: __dirname + '/tests/karma.conf.js',
    singleRun: true
  }, done).start();
});

Vamos criar outra task que ao ser executada rodará os testes e compilará o sass:

gulp.task('build', ['test', 'sass']);

Agora precisamos definir os arquivos que precisam ser carregados no navegador de testes, abra o arquivo karma.config.js e modifique a linha onde contenha o atributo files substituindo para:

files: [
  '../www/lib/ionic/js/ionic.bundle.js',
  '../www/js/**/*.js',
  '../www/lib/angular-mocks/angular-mocks.js',
  '**/*.test.js'
],

Vamos agora configurar a verificação de cobertura dos testes, com o arquivo karma.conf.js ainda aberto modifique as seguintes linhas:

    preprocessors: {
      '../www/js/*/**/*.js': 'coverage',
      '**/*.test.js': 'coverage'
    },
    reporters: ['progress', 'coverage’],

E adicione uma nova linha contendo o local e o tipo de arquivo que será gerado após a verificação de cobertura:

    coverageReporter: {
      type: 'html',
      dir: '../coverage/'
    },

Agora procure pela linha browsers e verifique seu conteúdo, caso esteja algo diferente de PhantomJS modifique para ficar da seguinte maneira:

browsers: ['PhantomJS’],

Para deixar o arquivo de configuração mais limpo agora que já conhecemos a sua estrutura, uma dica é remover todos os comentários.

Você pode verificar como o arquivo final ficou aqui.

Uma boa pratica para deixar o código organizado é separar os controllers, services e directives (e seus testes) em arquivos diferentes e em pastas separadas. Dessa forma dentro da pasta tests teríamos a seguinte estrutura:

Estrutura do Projeto

Testando 1, 2, 3 …

Na pasta tests/controllers vamos criar nosso primeiro teste de controller, crie um arquivo com o seguinte nome main.ctrl.test.js e estrutura:

describe('MainCtrl', function() {
    var ctrl;

    beforeEach(function() {
        module('starter');

        inject(function($controller) {
            ctrl = $controller('MainCtrl');
        });
    });

    it('should create controller', function() {
        expect(ctrl).not.toBeUndefined();
    });
});

Se você rodar o comando gulp test no terminal vai notar que o teste irá falhar, isso acontece pois ainda o controller que estamos testando ainda não existe. Para o teste funcionar precisamos cria-lo, crie um arquivo chamado main.ctrl.js dentro da pasta www/js/controllers com a seguinte estrutura:

(function() {
    angular
        .module('starter')
        .controller('MainCtrl', MainCtrl);

        function MainCtrl() {
            var ctrl = this;

            return ctrl;
        }
})();

Os testes de service possuem uma estrutura bem parecida com a dos controllers, por isso não irei aborda-los neste tutorial.

Integração continua com SnapCI e Ionic View

Agora vamos criar uma pipeline de deploy continuo com o SnapCI e Ionic View.

O que é o SnapCI ?

Segundo a definição do Danilo Sato (2014), o SnapCI é um serviço desenvolvido e oferecido pela ThoughtWorks Studios, a divisão de produtos da ThoughtWorks. Ele te ajuda a evoluir um processo de integração contínua para entrega contínua, com suporte nativo à criação de pipelines de entrega.

O que é o Ionic View ?

O Ionic View funciona como o seu portifólio de aplicativos. Ele permite que você compartilhe e teste aplicativos criados com o Ionic Framework de maneira fácil nas plataformas Android e iOS.

Pipeline com deploy no Ionic View

Antes de tudo você precisa criar uma conta no Ionic View para começar a distribuir a sua aplicação recentemente criada. Vamos criar uma task no gulp que será responsável por fazer o upload do seu aplicativo, você precisará de definir duas variáveis de ambiente uma com o e-mail da conta que você acabou de criar a sua conta no Ionic View e outra com a senha. Agora abra o arquivo gulpfile.js e adicione a seguinte task:

gulp.task('upload', function() {
  var ionicEmail = process.env.IONIC_EMAIL;
  var ionicPassword = process.env.IONIC_PASSWORD;

  var ionicCommand = 'ionic upload -e ' + ionicEmail + ' -p ' + ionicPassword;
  return gulp.src('')
    .pipe(exec(ionicCommand))
    .pipe(exec.reporter(reportOptions))
});

Adicione também no inicio do arquivo logo após a definição das variáveis a configuração de report:

var reportOptions = {
  err: true,
  stderr: true,
  stdout: true
};

No começo do arquivo adicione a seguinte linha:

var exec = require('gulp-exec’);

E no arquivo package.json em devDependencies adicione a dependência para o gulp exec:

"gulp-exec": "^2.1.1”

Depois precisamos criar uma pipeline no SnapCI, para entender seus conceitos básicos e como criar uma pipeline de entrega, recomendo um excelente artigo postado pelo Danilo Sato no Insights.

Após a leitura do arquivo crie uma pipeline parecida com a minha, ela vai baixar as dependências, rodar os testes e fazer upload dos arquivos para o Ionic View:

SnapCI pipeline

Você pode baixar o projeto completo na minha página no Github.

Conclusão

Agora que você já tem sua estrutura básica de um projeto Ionic criada, com testes funcionando e pipeline de integração contínua, sugiro leia a documentação oficial do Ionic. Ela te ajudará nos próximos passos da criação do seu aplicativo.

Um agradecimento especial ao Marcio Viegas e a Francieli Viane por terem feito a revisão do tutorial.

Criando um projeto Ionic utilizando Karma, Jasmine, SnapCI e Ionic View
Share this