Aplicações Híbridas para 
Dispositivos Móveis com 
AngularJS e PhoneGap. 
Thiago Colares Chaves 
@thicolares 
www.agilize....
Agenda 
● Motivação 
● O que é AngularJS? 
● O que é PhoneGap? 
● Criando um app com PhoneGap: visão geral 
● Consideraçõe...
Motivação
“Desenvolver aplicativo 
móvel: nativo ou não?“ 
Quem nunca?
Depende, óbvio.
Aplicação Nativa 
Prós 
● Acesso completo às 
funcionalidades do 
dispositivo; 
● Ótima Performance; 
● Elementos de inter...
Aplicação Web 
Prós 
● Desenvolvimento barato; 
● Multi-plataforma; 
● Peformance mediana. 
Contras 
● Acesso reduzido à 
...
Aplicação Híbrida 
Prós 
● Bom acesso às 
funcionalidades do 
dispositivo 
● Boa performance; 
● Desenvolvimento barato; 
...
Facebook versus Sencha 
http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
O que é AngularJS?
AngularJS é um 
HTML aprimorado para 
aplicativos web!
Framework JavaScript client-side 
que extende o HTML. 
<ul class="messages"> 
<li ng­repeat=" 
entry in log">{{ entry.msg ...
Criado em 2009 por 
Miško Hevery e Adam Abrons 
(funcionários do Google)
Código livre, mantido pelo 
Google e por uma comunidade 
vibrante.
AngularJS no Open HUB (antigo Ohloh): https://www.openhub.net/p/angularjs. Acessado em 29/11/2014
AngularJS no Open HUB (antigo Ohloh): https://www.openhub.net/p/angularjs. Acessado em 29/11/2014
Facilita a criação de 
Single Page Applications
Programação Declarativa 
● Imperativa nas regras de negócio 
$http( '/myEndpoint.json' ).then( function (response) { 
$sco...
Flexibiliza e separa bem 
Apresentação (view e controller) 
do Domínio (model)
Principais recursos:
Routes
Data binding
Data binding 
<div> 
<label>Name:</label> 
<input type="text" ng­model=" 
yourName" 
placeholder="Enter a name here"> 
<hr...
Data binding 
<div> 
<label>Name:</label> 
<input type="text" ng­model=" 
yourName" 
placeholder="Enter a name here"> 
<hr...
Models
Templates / Views 
<div> 
<label>Name:</label> 
<input type="text" ng­model=" 
yourName" 
placeholder="Enter a name here">...
Data access
O que é PhoneGap?
PhoneGap é um framework que 
lhe permite criar mobile apps 
usando HTML, CSS e JS.
Contextualizando 
● 2008: PhoneGap nasceu na Niboti Software 
● 2011: Niboti já colaborava com a ASF (Apache) 
● 2011: Ado...
PhoneGap x Apache Cordova 
● PhoneGap é uma distribuição do Apache Cordova 
● Ou: Apache Cordova é a engine do PhoneGap 
●...
O que o PhoneGap oferece 
● Empacota seu HTML, CSS e JS em uma app nativa 
● Cria uma ponte pra seu JS acessar funções nat...
PhoneGap não provê 
assistência para criar a 
interface com o usuário 
propriamente dita.
Auxílio na criação da interface com usuário 
● jQuery Mobile 
● Ionic 
● Mobile AngularJS UI 
● Sencha Touch 
● Kendo UI C...
Criando uma app com 
PhoneGap: uma visão geral. 
D.I.Y.: http://mobileangularui.com/blog/your-first-phonegap-app-with-mobi...
Dependências (e alguns auxílios)
Passos para o “Hello World” 
$ phonegap create meuAplicativo 
$ cd meuAplicativo 
$ yo mobileangularui 
$ gulp build 
# vo...
Considerações finais
PhoneGap Build 
Creative Commons License 
Biolab by Adobe / Yohei Shimomae is licensed under a Creative Commons Attributio...
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...
Finalmente 
● As capacidades do HTML5 ainda podem diferenciar 
entre uma SDK e outra. 
– Alguns frameworks levam isto em c...
Obrigado! 
Thiago Colares Chaves 
@thicolares 
www.agilize.com.br
Próximos SlideShares
Carregando em…5
×

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

1.166 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.166
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
65
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

×