Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap

1.228 visualizações

Publicada em

Visão geral sobre HTML5, AngularJS e PhoneGap. E como combinar essas e outras ferramentas para criar aplicativos híbridos e multiplataformas. Aplicativos móveis híbridos são aplicativos nativos que empacotam aplicações web e oferecem a elas APIs dos dispositivos. Palestra apresentada no I WSORT, workshop do GSORT, no IFBA (Instituto Federal da Bahia).

0 comentários
7 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.228
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
67
Comentários
0
Gostaram
7
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap

  1. 1. Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap. Thiago Colares Chaves @thicolares www.agilize.com.br Creative Commons License Biolab by Adobe / Yohei Shimomae is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License. 03/12/2014
  2. 2. Agenda ● Motivação ● O que é AngularJS? ● O que é PhoneGap? ● Criando um app com PhoneGap: visão geral ● Considerações
  3. 3. Motivação
  4. 4. “Desenvolver aplicativo móvel: nativo ou não?“ Quem nunca?
  5. 5. Depende, óbvio.
  6. 6. Aplicação Nativa Prós ● Acesso completo às funcionalidades do dispositivo; ● Ótima Performance; ● Elementos de interface; ● Pacote pra Loja de apps. Contras ● Desenvolvimento caro; ● Não é multi-plataforma.
  7. 7. Aplicação Web Prós ● Desenvolvimento barato; ● Multi-plataforma; ● Peformance mediana. Contras ● Acesso reduzido à funcionalidades do dispositivo; ● Não empacota pra loja.
  8. 8. Aplicação Híbrida Prós ● Bom acesso às funcionalidades do dispositivo ● Boa performance; ● Desenvolvimento barato; ● Multi-plataforma; ● Empacota pra loja. Contras ● Sem UI nativa http://martinfowler.com/articles/multiMobile/#web-platform
  9. 9. Facebook versus Sencha http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
  10. 10. O que é AngularJS?
  11. 11. AngularJS é um HTML aprimorado para aplicativos web!
  12. 12. Framework JavaScript client-side que extende o HTML. <ul class="messages"> <li ng­repeat=" entry in log">{{ entry.msg }}</li> </ul>
  13. 13. Criado em 2009 por Miško Hevery e Adam Abrons (funcionários do Google)
  14. 14. Código livre, mantido pelo Google e por uma comunidade vibrante.
  15. 15. AngularJS no Open HUB (antigo Ohloh): https://www.openhub.net/p/angularjs. Acessado em 29/11/2014
  16. 16. AngularJS no Open HUB (antigo Ohloh): https://www.openhub.net/p/angularjs. Acessado em 29/11/2014
  17. 17. Facilita a criação de Single Page Applications
  18. 18. Programação Declarativa ● Imperativa nas regras de negócio $http( '/myEndpoint.json' ).then( function (response) { $scope.log.push( { msg: 'Data Received!' } ); }); ● Declarativa e muito expressiva na view <ul class="messages"> <li ng­repeat=" entry in log">{{ entry.msg }}</li> </ul>
  19. 19. Flexibiliza e separa bem Apresentação (view e controller) do Domínio (model)
  20. 20. Principais recursos:
  21. 21. Routes
  22. 22. Data binding
  23. 23. Data binding <div> <label>Name:</label> <input type="text" ng­model=" yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div>
  24. 24. Data binding <div> <label>Name:</label> <input type="text" ng­model=" yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div>
  25. 25. Models
  26. 26. Templates / Views <div> <label>Name:</label> <input type="text" ng­model=" yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div>
  27. 27. Data access
  28. 28. O que é PhoneGap?
  29. 29. PhoneGap é um framework que lhe permite criar mobile apps usando HTML, CSS e JS.
  30. 30. Contextualizando ● 2008: PhoneGap nasceu na Niboti Software ● 2011: Niboti já colaborava com a ASF (Apache) ● 2011: Adobe adquire a Niboti ● Adobe / Niboti doam o código do PhoneGap para a ASF ● Lá vira Apache Callback, então Apache Cordova
  31. 31. PhoneGap x Apache Cordova ● PhoneGap é uma distribuição do Apache Cordova ● Ou: Apache Cordova é a engine do PhoneGap ● Apache Cordova e PhoneGap são FLOSS ● PhoneGap incorpora funcionalidades da Adobe ● Ex.: PhoneGap Build, Adobe Shadow FLOSS: Free/Libre and Open Source Software
  32. 32. O que o PhoneGap oferece ● Empacota seu HTML, CSS e JS em uma app nativa ● Cria uma ponte pra seu JS acessar funções nativas ● Alguns plugins: acelerômetro, câmera, contatos, sistema de arquivos, tocador de mídia e gravação, rede, geolocalização, notificação e outros*. ● Você pode criar ou instalar novos plugins. *http://phonegap.com/about/feature/
  33. 33. PhoneGap não provê assistência para criar a interface com o usuário propriamente dita.
  34. 34. Auxílio na criação da interface com usuário ● jQuery Mobile ● Ionic ● Mobile AngularJS UI ● Sencha Touch ● Kendo UI Complete ● AppGyver’s Steroids ● Enyo ● TopCoat *http://phonegap.com/about/feature/
  35. 35. Criando uma app com PhoneGap: uma visão geral. D.I.Y.: http://mobileangularui.com/blog/your-first-phonegap-app-with-mobile-angular-ui/
  36. 36. Dependências (e alguns auxílios)
  37. 37. Passos para o “Hello World” $ phonegap create meuAplicativo $ cd meuAplicativo $ yo mobileangularui $ gulp build # você terá que instalar a Android SDK $ cordova platform add android $ phonegap run android # ou ios, blackberry etc.
  38. 38. Considerações finais
  39. 39. PhoneGap Build Creative Commons License Biolab by Adobe / Yohei Shimomae is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
  40. 40. Cuidados com a experiência do usuário ● Imitar look-n-feel nativo pode ser uma cilada, Bino! – O look é mais fácil, já o feel... ● Se seu aplicativo depende de uma UI baseada em elementos nativos, PhoneGap pode não ser a sua;
  41. 41. Finalmente ● As capacidades do HTML5 ainda podem diferenciar entre uma SDK e outra. – Alguns frameworks levam isto em consideração (e.g.: Sencha). – Na dúvida: http://mobilehtml5.org/ ou http://caniuse.com/ ● HTML5 recebeu o rótulo de “Recomendação” da W3C em Outubro de 2014. Experimente! W3C: http://www.w3.org/blog/news/archives/4167 WhatWG: https://html.spec.whatwg.org/multipage/
  42. 42. Obrigado! Thiago Colares Chaves @thicolares www.agilize.com.br

×