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

45 visualizações

Publicada em

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

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
45
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
17
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Começaremos pelo gulp, que é conhecido como um build system.
    Usamos o gulp através de tasks que automatizam tarefas repetitivas que precisamos fazer no dia-a-dia do desenvolvimento.

    Com o gulp, conseguimos codar a configuração do projeto.

    O gulp oferece tudo através de plugin. Quer fazer algo? Com certeza existe um plugin para isso
  • Agora que o básico para se mexer com Gulp está preparado, é hora do gulpfile.js
  • Neste arquivo, é que as tasks ficam.
  • Código que testa código! Isso é sensacional, afinal nosso trabalho é automatizar tudo o que for possível.
  • Robert Martin (Clean code)
  • Escrever testes não é duplicar o trabalho? Não!
    Sem testes, o trabalho de testar é manualmente e tomar muuito mais tempo. Sem contar que estaremos garantindo que algo que já funciona não vai parar de funcionar sem antes sabermos.
  • Robert Martin (Clean code)
  • Robert Martin (Clean code)
  • Robert Martin (Clean code)
  • Já escremos nosso teste, agora vamos execute-lo. Opa, mas como executamos um teste? Antes de mais nada, precisamos de runner.
  • Com exceção do angular mocks, todos os outros já estão no projeto.
    Para que serve e como conseguir o angular mocks?
  • Escrevemos nosso primeiro teste. Legal!
    Mas por quê eu deveria escrever testes? Na aula 1 nós vimos bastante sobre a existência de ferramentas especificas para resolver problemas especificos.
  • Robert Martin (Clean code)
  • Para garantir que os usuários tenham uma boa impressão do seu app, primeiramente ele tem que “só funcionar”. Para garantir isso, é indispensavel que seu código tenha testes.

  • Com um minimo de esforço, rode os testes de seu app em uma infinidade de dispositivos diferentes (s.o, versões, fabricantes, tamanho de telas, etc)
  • “Continuous integration é prática onde os membros de um time integram seu trabalho frequentemente ... Pelo menos uma vez por dia”
    Só que, é necessário que vários processos sejam executados para que seja a garantido que o trabalho que as pessoas estão fazendo separadamente não impacte um ao outro. Ou seja, ninguém pode quebrar o que já está funcionando. Para que isso seja possível, é indispensavel que o time utilize uma build de integração continua (CI). Onde, a cada nova atualização de um membro do time, um processo automatizado irá executar todos os passos e testes necessários e rapidamente dar um retorno para o time dizendo se tudo está ok.
  • O lugar onde o código que todo o time mexe fica guardado é chamado de “repositório de código”
    Existem várias ferramentas que nos ajudam a organizar e trabalhar com esses repositórios. Uma dessas ferramentas é o GIT. Para começar a criar uma build de continuous integration, vamos escolher o git sistema de controle de versão.

    Distribuido
  • Uma ferramenta que builda qlq coisa em qlq plataforma
    Totalmente extensivel através de plugins no marktplace
  • “Continuous integration é prática onde os membros de um time integram seu trabalho frequentemente ... Pelo menos uma vez por dia”
    Só que, é necessário que vários processos sejam executados para que seja a garantido que o trabalho que as pessoas estão fazendo separadamente não impacte um ao outro. Ou seja, ninguém pode quebrar o que já está funcionando. Para que isso seja possível, é indispensavel que o time utilize uma build de integração continua (CI). Onde, a cada nova atualização de um membro do time, um processo automatizado irá executar todos os passos e testes necessários e rapidamente dar um retorno para o time dizendo se tudo está ok.
  • Talvez tenha que liberar o auternate authentication credentials para usar o um git cliente fora do visual studio
  • 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

    ×