O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

228 visualizações

Publicada em

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

Publicada em: Software
  • Seja o primeiro a comentar

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

  1. 1. Desenvolvimento de aplicativos híbridos
  2. 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. 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. 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. 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. 6. Agenda dia 2 7. Do desenvolvimento à store • Assinando o app • Publicando na play store https://github.com/WennderSantos/curso-apps-hibridos
  7. 7. 1 – Automatize tudo
  8. 8. http://gulpjs.com/
  9. 9. Gulp npm i -g gulp
  10. 10. Gulp – Dentro da pasta do projeto npm i --save-dev gulp
  11. 11. Gulp – Gulpfile Crie um arquivo com nome gulpfile.js na raiz do projeto
  12. 12. Gulp – Primeira task: Compilar sass npm i --save-dev gulp-sass
  13. 13. Gulp – Primeira task: Compilar sass var gulp = require('gulp'); var sass = require('gulp-sass');
  14. 14. Gulp – Primeira task: Compilar sass gulp.task('sass', function () { gulp.src('./scss/ionic.app.scss') .pipe(sass()) .pipe(gulp.dest('./www/css/')) });
  15. 15. Gulp – Executando a task Digite o seguinte comando em seu terminal: gulp sass
  16. 16. Gulp – Task default gulp.task('default', ['sass']);
  17. 17. Gulp – Executando a task default Digite o seguinte comando em seu terminal: gulp
  18. 18. 2 – Testes automatizados (Testes de unidade)
  19. 19. Por quê você não escreve testes? • Não dá tempo • Não vejo vantagem • Não sei como fazer
  20. 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. 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. 22. Vamos escrever um teste para você ver que é fácil mesmo.
  23. 23. ionic create teste-unidade blank cd ionic teste-unidade Crie um projeto
  24. 24. Configure o ambiente para rodar os testes
  25. 25. http://jasmine.github.io/
  26. 26. Jasmine npm i --save-dev jasmine
  27. 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. 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. 29. https://karma-runner.github.io/1.0/index.html
  30. 30. Karma npm -g karma-cli npm i --save-dev karma
  31. 31. Karma – Criar o arquivo de configuração (karma.conf.js) karma init
  32. 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. 33. Angular mocks npm i --save-dev angular-mocks https://docs.angularjs.org/api/ngMock
  34. 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. 35. Karma – Executar os testes karma start
  36. 36. Rodar os testes através do Gulp – Instalando o modulo gulp-karma npm i --save-dev gulp-karma
  37. 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. 38. Rodar os testes através do Gulp gulp run-test
  39. 39. GitHub com o exemplo https://github.com/WennderSantos/demo-teste-unidade-app-hibrido
  40. 40. Por quê é importante escrever testes?
  41. 41. “Todo código escrito sem teste é um possível bug.” Por quê é importante escrever testes?
  42. 42. Por quê é importante escrever testes? Multiplataforma
  43. 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. 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. 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. 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. 47. TESTES DE UI
  48. 48. Como escrever os testes de UI de maneira automatizada?
  49. 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. 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. 51. No projeto de testes • Instale o pacote FluentAssertions • Abra o arquivo Tests.cs
  52. 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. 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. 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. 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. 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. 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. 58. GitHub com o exemplo https://github.com/WennderSantos/demo-teste-ui-app-hibrido
  59. 59. UI Tests em todos dispositivos?
  60. 60. UI Tests em todos dispositivos? http://www.idownloadblog.com/2013/07/30/the-terrible-state-of-android-fragmentation/
  61. 61. Xamarin Test Cloud https://www.xamarin.com/test-cloud
  62. 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. 63. 2000+ dispositivos reais
  64. 64. CONTINUOUS INTEGRATION http://martinfowler.com/articles/continuousIntegration.html
  65. 65. https://git-scm.com/
  66. 66. https://www.visualstudio.com/pt-br/products/visual-studio-team-services-vs.aspx
  67. 67. Criando uma build de Continuous Integration
  68. 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. 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. 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. 71. CONTINUOUS DISTRIBUTION
  72. 72. https://hockeyapp.net/
  73. 73. VSTS + HockeyApp https://marketplace.visualstudio.com/items?itemName=ms.hockeyapp
  74. 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. 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. 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. 77. DO DESENVOLVIMENTO À STORE
  78. 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. 79. ASSINANDO UM APP https://github.com/WennderSantos/sign-android-windows Faça o download dos arquivos desse repositório
  80. 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. 81. COMO SUBMETER O APP PARA A PLAY STORE?
  82. 82. Wennder dos Santos wennder.santos@outlook.com @wenndersantos

×