Top Banner

of 82

Curso: Desenvolvimento de aplicativos h­bridos (dia 2)

Feb 07, 2017

ReportDownload

Software

Apresentao do PowerPoint

Desenvolvimento de aplicativos hbridos

1

Wennder dos SantosSoftware developerMicrosoft MVPEscreve no blog http://wenndersantos.netPublica vdeos em https://youtube.com/wenndersantosSlides em http://slideshare.net/wenndersantosGithub https://github.com/wenndersantos@wenndersantos

2

Agenda dia 21. Automatize tudoGulpEscrevendo as primeiras tasks2. Testes automatizados (Testes de unidade)Por qu voc no escreve testes?JasmineEscrevendo um testeKarmaPor qu importante escrever testes?https://github.com/WennderSantos/curso-apps-hibridos

3

Agenda dia 23. Testes de unidade no so os nicosTestes de UIXamarin UI TestEscrevendo testes de UI4. Xamarin test cloud O problema da quantidade de devices Teste seu app em 2000 dispositivos reais

https://github.com/WennderSantos/curso-apps-hibridos

4

Agenda dia 25. Continous integration Git Visual Studio Team Services (VSTS) Criando um build automatizado6. Continous distributionHockeyAppVSTS, HockeyApp e o release contnuoConfigurando um release contnuo

https://github.com/WennderSantos/curso-apps-hibridos

5

Agenda dia 27. Do desenvolvimento store Assinando o app Publicando na play storehttps://github.com/WennderSantos/curso-apps-hibridos

6

1 Automatize tudo

7

http://gulpjs.com/

Comearemos pelo gulp, que conhecido como um build system.Usamos o gulp atravs de tasks que automatizam tarefas repetitivas que precisamos fazer no dia-a-dia do desenvolvimento.

Com o gulp, conseguimos codar a configurao do projeto.

O gulp oferece tudo atravs de plugin. Quer fazer algo? Com certeza existe um plugin para isso8

Gulpnpm i -g gulp

9

Gulp Dentro da pasta do projetonpm i --save-dev gulp

Agora que o bsico para se mexer com Gulp est preparado, hora dogulpfile.js10

Gulp GulpfileCrie um arquivo com nome gulpfile.js na raiz do projeto

Neste arquivo, que as tasks ficam.11

Gulp Primeira task: Compilar sassnpm i --save-dev gulp-sass

12

Gulp Primeira task: Compilar sassvar gulp = require('gulp');var sass = require('gulp-sass');

13

Gulp Primeira task: Compilar sassgulp.task('sass', function () { gulp.src('./scss/ionic.app.scss') .pipe(sass()) .pipe(gulp.dest('./www/css/'))});

14

Gulp Executando a taskDigite o seguinte comando em seu terminal:gulp sass

15

Gulp Task defaultgulp.task('default', ['sass']);

16

Gulp Executando a task defaultDigite o seguinte comando em seu terminal:gulp

17

2 Testes automatizados(Testes de unidade)

Cdigo que testa cdigo! Isso sensacional, afinal nosso trabalho automatizar tudo o que for possvel.18

Por qu voc no escreve testes?No d tempoNo vejo vantagemNo sei como fazer

Robert Martin (Clean code)19

Testes de unidadeFeedback rpidoGarantem que uma regra de negcio funciona como esperadoSegurana para evoluir o cdigoPor qu importante escrever testes?

20

Fazer isso fcildescribe('Service: calculadoraService', function () { var calculadoraService;

beforeEach(module(app'));

beforeEach(inject(function (_calculadoraService_) { calculadoraService = _calculadoraService_; }));

it('deve retornar 2 quando calcular 2 + 2', function () { expect(calculadoraService.soma(2,2)).toBe(2); });});

Escrever testes no duplicar o trabalho? No!Sem testes, o trabalho de testar manualmente e tomar muuito mais tempo.Sem contar que estaremos garantindo que algo que j funciona no vai parar de funcionar sem antes sabermos.21

Vamos escrever um teste para voc ver que fcil mesmo.

Robert Martin (Clean code)22

ionic create teste-unidade blank

cd ionic teste-unidadeCrie um projeto

Robert Martin (Clean code)23

Configure o ambiente para rodar os testes

Robert Martin (Clean code)24

http://jasmine.github.io/

25

Jasminenpm i --save-dev jasmine

26

Servio que ser testado www/js/services/calculadoraService.js(function () { angular .module('starter') .factory('calculadoraService', calculadoraService);

function calculadoraService() {

return { soma: soma };

function soma(numero1, numero2) { return numero1 + numero2; } }})();

27

O Teste www/js/services/calculadoraService.spec.js(function () { describe('Service: calculadoraService', function () {

var calculadoraService;

beforeEach(module('starter'));

beforeEach(inject(function (_calculadoraService_) { calculadoraService = _calculadoraService_; }));

it('soma deve retorna 2 quando somar 1 + 1', function () { expect(calculadoraService.soma(1, 1)).toBe(2); });

});})();

J escremos nosso teste, agora vamos execute-lo. Opa, mas como executamos um teste?Antes de mais nada, precisamos de runner.28

https://karma-runner.github.io/1.0/index.html

29

Karmanpm -g karma-cli

npm i --save-dev karma

30

Karma Criar o arquivo de configurao (karma.conf.js)karma init

31

Karma Arquivos necessrios para executar os testes Ionic e suas denpednciasAngular mocksArquivos que sero testadosArquivos de testes

Com exceo do angular mocks, todos os outros j esto no projeto.Para que serve e como conseguir o angular mocks?32

Angular mocksnpm i --save-dev angular-mockshttps://docs.angularjs.org/api/ngMock

33

Karma Arquivos necessrios para executar os testes files: [ 'www/lib/ionic/js/ionic.bundle.min.js', 'node_modules/angular-mocks/angular-mocks.js', 'www/js/**/*.js' ]Dentro do arquivo karma.conf.js, adicione:

34

Karma Executar os testeskarma start

35

Rodar os testes atravs do Gulp Instalando o modulo gulp-karmanpm i --save-dev gulp-karma

36

Rodar os testes atravs do Gulp Criando a taskvar gulp = require('gulp');var Server = require('karma').Server;

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

37

Rodar os testes atravs do Gulpgulp run-test

38

GitHub com o exemplohttps://github.com/WennderSantos/demo-teste-unidade-app-hibrido

39

Por qu importante escrever testes?

Escrevemos nosso primeiro teste. Legal!Mas por qu eu deveria escrever testes?Na aula 1 ns vimos bastante sobre a existncia de ferramentas especificas para resolver problemas especificos.40

Todo cdigo escrito sem teste um possvel bug.Por qu importante escrever testes?

Robert Martin (Clean code)41

Por qu importante escrever testes?Multiplataforma

42

Maiores frustraes de usurioshttp://apigee.com/about/press-release/apigee-survey-users-reveal-top-frustrations-lead-bad-mobile-app-reviews

43

O que os usurios fazemhttp://apigee.com/about/press-release/apigee-survey-users-reveal-top-frustrations-lead-bad-mobile-app-reviews

44

Desafios de apps multiplataforma com qualidade75% dos usurios no utilizam o app depois do primeiro dia

https://www.appboy.com/blog/app-customer-retention-spring-2016-report/

Para garantir que os usurios tenham uma boa impresso do seu app, primeiramente ele tem que s funcionar.Para garantir isso, indispensavel que seu cdigo tenha testes.

45

Testes de unidade no so os nicosTestes de unidade no garantem a cobertura de todas as partes do seu sistema

Quantidade de testes por tipo

46

TESTES DE UI

47

Como escrever os testes de UI de maneira automatizada?

Xamarin UITestFramework para escrita de testes de UI em C#Acesso a recursos do dispositivoGestos e aesManipula elementos na tela

49

Como escrever testes de UI com o Xamarin UI Test?Abra o Visual StudioFile >> New project >> Blank solution Add project >> Javascript >> Apache Cordova Apps >> Ionic Tabs TemplateAdd project >> Visual C# >> Test >> UI Test APP (Xamarin.UITest | Android)

No projeto de testesInstale o pacote FluentAssertionsAbra o arquivo Tests.cs

Informe aonde est o apk do app[SetUp] public void BeforeEachTest() { app = ConfigureApp .Android .ApkFile("../../../DemoUiTest.Aplicativo/platforms/android/build/outputs/apk/android-debug.apk") .StartApp(); }

Escreveremos testes para os seguintes cenriosUsurio deve conseguir navegar para tela ChatsUsurio deve conseguir navegar para tela AccountsUsurio deve conseguir desativar amigosUsurio deve conseguir clicar no primeiro elemento da lista

Usurio deve conseguir navegar para tela Chats[Test] public void DeveNavegarParaTelaChats() { NavegarParaTelaChats(); var title = app.WaitForElement(x => x.WebView().Css("ion-header-bar .title")); title.FirstOrDefault().TextContent.Should().Be("Chats"); }

private void NavegarParaTelaChats() { app.Tap(x => x.WebView().Css(".tab-item").Index(1)); }

Usurio deve conseguir navegar para tela Accounts [Test] public void DeveNavegarParaTelaAccounts() { NavegarParaTelaAccounts(); var title = app.WaitForElement(x => x.WebView().Css("ion-header-bar .title"));

title.FirstOrDefault().TextContent.Should().Be("Account"); }

private void NavegarParaTelaAccounts() { app.Tap(x => x.WebView().Css(".tab-item").Index(2)); }

Usurio