Slides usados no segundo dia do curso: Desenvolvimento de aplicativos híbridos.

1. Desenvolvimento de
aplicativos híbridos

2. Wennder dos Santos
• Software developer
• Microsoft MVP
• Escreve no blog http://wenndersantos.net
• Publica vídeos em https://youtube.com/wenndersantos
• Slides em http://slideshare.net/wenndersantos
• Github https://github.com/wenndersantos
• @wenndersantos

3. Agenda dia 2
1. Automatize tudo
• Gulp
• Escrevendo as primeiras tasks
2. Testes automatizados (Testes de unidade)
• Por quê você não escreve testes?
• Jasmine
• Escrevendo um teste
• Karma
• Por quê é importante escrever testes?
https://github.com/WennderSantos/curso-apps-hibridos

4. Agenda dia 2
3. Testes de unidade não são os únicos
• Testes de UI
• Xamarin UI Test
• Escrevendo testes de UI
4. Xamarin test cloud
• O problema da quantidade de devices
• Teste seu app em 2000 dispositivos reais
https://github.com/WennderSantos/curso-apps-hibridos

5. Agenda dia 2
5. Continous integration
• Git
• Visual Studio Team Services (VSTS)
• Criando um build automatizado
6. Continous distribution
• HockeyApp
• VSTS, HockeyApp e o release contínuo
• Configurando um release contínuo
https://github.com/WennderSantos/curso-apps-hibridos

6. Agenda dia 2
7. Do desenvolvimento à store
• Assinando o app
• Publicando na play store
https://github.com/WennderSantos/curso-apps-hibridos

7. 1 – Automatize tudo

8. http://gulpjs.com/

9. Gulp
npm i -g gulp

10. Gulp – Dentro da pasta do projeto
npm i --save-dev gulp

11. Gulp – Gulpfile
Crie um arquivo
com nome gulpfile.js
na raiz do projeto

12. Gulp – Primeira task: Compilar sass
npm i --save-dev gulp-sass

13. Gulp – Primeira task: Compilar sass
var gulp = require('gulp');
var sass = require('gulp-sass');

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

15. Gulp – Executando a task
Digite o seguinte comando
em seu terminal:
gulp sass

16. Gulp – Task default
gulp.task('default', ['sass']);

17. Gulp – Executando a task default
Digite o seguinte comando
em seu terminal:
gulp

18. 2 – Testes automatizados
(Testes de unidade)

19. Por quê você não escreve testes?
• Não dá tempo
• Não vejo vantagem
• Não sei como fazer

20. • Testes de unidade
• Feedback rápido
• Garantem que uma regra de negócio funciona como
esperado
• Segurança para evoluir o código
Por quê é importante escrever testes?

21. Fazer isso é fácil
describe('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);
});
});

22. Vamos escrever um teste
para você ver que é fácil
mesmo.

23. ionic create teste-unidade blank
cd ionic teste-unidade
Crie um projeto

24. Configure o ambiente
para rodar os testes

25. http://jasmine.github.io/

26. Jasmine
npm i --save-dev jasmine

27. Serviço 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;
}
}
})();

28. 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);
});
});
})();

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

30. Karma
npm -g karma-cli
npm i --save-dev karma

31. Karma – Criar o arquivo de
configuração (karma.conf.js)
karma init

32. Karma – Arquivos necessários para
executar os testes
• Ionic e suas denpedências
• Angular mocks
• Arquivos que serão testados
• Arquivos de testes

33. Angular mocks
npm i --save-dev angular-mocks
https://docs.angularjs.org/api/ngMock

34. Karma – Arquivos necessários 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:

35. Karma – Executar os testes
karma start

36. Rodar os testes através do Gulp –
Instalando o modulo gulp-karma
npm i --save-dev gulp-karma

37. Rodar os testes através do Gulp –
Criando a task
var gulp = require('gulp');
var Server = require('karma').Server;
gulp.task('run-test', function () {
new Server({
configFile: __dirname + '/karma.conf.js',
singleRun: true
}).start();
});

38. Rodar os testes através do Gulp
gulp run-test

39. GitHub com o exemplo
https://github.com/WennderSantos/demo-teste-unidade-app-hibrido

40. Por quê é importante
escrever testes?

41. “Todo código escrito sem teste é um possível bug.”
Por quê é importante escrever testes?

42. Por quê é importante escrever testes?
Multiplataforma

43. Maiores frustrações de usuários
76%
71%
59%
0%
10%
20%
30%
40%
50%
60%
70%
80%
Maiores frustrações
MAIORES FRUSTRAÇÕES DE USUÁRIOS COM APLICATIVOS
MOBILE
Travamentos Crashes Lento/não-responsivo
http://apigee.com/about/press-release/apigee-survey-users-reveal-top-frustrations-lead-bad-mobile-app-reviews

44. O que os usuários fazem
44%
38%
32%
21%
0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
50%
Ações tomadas
AÇÃO TOMADA A RESPEITO DE UM APLICATIVO RUIM
Deletam o app imediatamente Deletam o app se ele trava por mais de 30 seg.
Conta para amigos o quão ruim o app é Compartilha em redes sociais o quão ruim o app é
http://apigee.com/about/press-release/apigee-survey-users-reveal-top-frustrations-lead-bad-mobile-app-reviews

45. Desafios de apps multiplataforma com
qualidade
• 75% dos usuários não utilizam o app depois do primeiro dia
https://www.appboy.com/blog/app-customer-retention-spring-2016-report/

46. Testes de unidade não são os únicos
• Testes de unidade não garantem a cobertura de todas as
partes do seu sistema
Quantidade de testes por tipo

47. TESTES DE UI

48. Como escrever os testes de
UI de maneira automatizada?

49. Xamarin UITest
• Framework para escrita de testes de UI em C#
• Acesso a recursos do dispositivo
• Gestos e ações
• Manipula elementos na tela

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

51. No projeto de testes
• Instale o pacote FluentAssertions
• Abra o arquivo Tests.cs

52. 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();
}

53. Escreveremos testes para os
seguintes cenários
• Usuário deve conseguir navegar para tela Chats
• Usuário deve conseguir navegar para tela Accounts
• Usuário deve conseguir desativar amigos
• Usuário deve conseguir clicar no primeiro elemento da
lista

54. Usuário 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));
}

55. Usuário 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));
}

56. Usuário deve desativar amigos
[Test]
public void DeveDesativarAmigos()
{
NavegarParaTelaAccounts();
app.Tap(x => x.WebView().Css(".toggle"));
var labelFriends = app.WaitForElement(x => x.WebView()
.Css(".enableFriends span.ng-binding")).FirstOrDefault().TextContent;
labelFriends.Should().Contain("Enable Friends");
}

57. Usuário deve conseguir clicar no
primeiro elemento da lista
[Test]
public void DeveClicarNoPrimeiroElementoDaLista()
{
NavegarParaTelaChats();
app.Tap(x => x.WebView().Css(".item:first-of-type"));
var title = app.WaitForElement(x => x.WebView().Css(".title.title-left.header-item")).FirstOrDefault().TextContent;
title.Should().Be("Ben Sparrow");
}

58. GitHub com o exemplo
https://github.com/WennderSantos/demo-teste-ui-app-hibrido

59. UI Tests em todos dispositivos?

60. UI Tests em todos dispositivos?
http://www.idownloadblog.com/2013/07/30/the-terrible-state-of-android-fragmentation/

61. Xamarin Test Cloud
https://www.xamarin.com/test-cloud

62. Xamarin Test Cloud
• Dispositivos reais
• Testes automatizados em quantos dispositivos
precisar
• Dispositivos de várias marcas e modelos
• Resultado com logs e fotos

63. 2000+ dispositivos reais

64. CONTINUOUS
INTEGRATION
http://martinfowler.com/articles/continuousIntegration.html

65. https://git-scm.com/

66. https://www.visualstudio.com/pt-br/products/visual-studio-team-services-vs.aspx

67. Criando uma build de
Continuous Integration

68. Criando uma build de Continuous
Integration
• Abra seu Visual Studio Team Services (VSTS)
• Crie um novo projeto com o templa Agile usando o
Git com controle de versão
• Envie seu repositório local para o VSTS
• Entre na Build e vamos começar uma nova definição
de build

69. Criando uma build de Continuous
Integration
• Clique no botão “New definition” e escolha o
template “Empty”
• Check o flag de “Contiuous integration”

70. Adicionando os steps que serão
executados na build
• Npm (install)
• Gulp (task bower)
• Gulp (task run-test)
• Cordova build (https://marketplace.visualstudio.com/items?itemName=ms-vsclient.cordova-extension)

71. CONTINUOUS
DISTRIBUTION

72. https://hockeyapp.net/

73. VSTS + HockeyApp
https://marketplace.visualstudio.com/items?itemName=ms.hockeyapp

74. HockeyApp – Integrando com VSTS
• Acesse sua conta no HockeyApp
• Account Settings e crie uma API Token com Full Access
• Entre no VSTS >> Team Settings e Adicione um Service
Endpoint do HockeyApp
• Informe um nome e Api token que foi criada.

75. Continuous distribution
• Na build de CI que criamos, adicione o step Copy Publish
Artifact
• No parâmetro “Content” use o minimach **apkandroid-
debug.apk

76. Criando o release automático
• Ainda no VSTS, entre na aba release
• Crie uma nova empty definition
• Selecione o nome da build que criamos há pouco e check o
flag de continuous deployment
• Adicione uma task do HockeyApp

77. DO DESENVOLVIMENTO
À STORE

78. ASSINANDO UM APP
• Gerar uma keystore (%JAVA_HOME%keytool -genkey -v -
keystore my-release-key.keystore -alias alias_name -keyalg
RSA -keysize 2048 -validity 10000)

79. ASSINANDO UM APP
https://github.com/WennderSantos/sign-android-windows
Faça o download dos arquivos desse repositório

80. ASSINANDO UM APP
• Coloque a Keystore e os aquivos .cmd em uma pasta dentro
da raiz do projeto.
• Execute o arquivo droi-release.cmd
• Informe a senha que foi colocada na criação do Keystore

81. COMO SUBMETER O APP
PARA A PLAY STORE?

82. Wennder dos Santos
wennder.santos@outlook.com
@wenndersantos