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).

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. Agenda
● Motivação
● O que é AngularJS?
● O que é PhoneGap?
● Criando um app com PhoneGap: visão geral
● Considerações

3. Motivação

4. “Desenvolver aplicativo
móvel: nativo ou não?“
Quem nunca?

5. Depende, óbvio.

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. Aplicação Web
Prós
● Desenvolvimento barato;
● Multi-plataforma;
● Peformance mediana.
Contras
● Acesso reduzido à
funcionalidades do
dispositivo;
● Não empacota pra loja.

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. Facebook versus Sencha
http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story

10. O que é AngularJS?

11. AngularJS é um
HTML aprimorado para
aplicativos web!

12. Framework JavaScript client-side
que extende o HTML.
<ul class="messages">
<li ng­repeat="
entry in log">{{ entry.msg }}</li>
</ul>

13. Criado em 2009 por
Miško Hevery e Adam Abrons
(funcionários do Google)

14. Código livre, mantido pelo
Google e por uma comunidade
vibrante.

15. AngularJS no Open HUB (antigo Ohloh): https://www.openhub.net/p/angularjs. Acessado em 29/11/2014

16. AngularJS no Open HUB (antigo Ohloh): https://www.openhub.net/p/angularjs. Acessado em 29/11/2014

17. Facilita a criação de
Single Page Applications

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. Flexibiliza e separa bem
Apresentação (view e controller)
do Domínio (model)

20. Principais recursos:

21. Routes

22. Data binding

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. Data binding
<div>
<label>Name:</label>
<input type="text" ng­model="
yourName"
placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>

25. Models

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. Data access

28. O que é PhoneGap?

29. PhoneGap é um framework que
lhe permite criar mobile apps
usando HTML, CSS e JS.

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. 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. 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. PhoneGap não provê
assistência para criar a
interface com o usuário
propriamente dita.

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. 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. Dependências (e alguns auxílios)

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. Considerações finais

39. PhoneGap Build
Creative Commons License
Biolab by Adobe / Yohei Shimomae is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.

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. 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. Obrigado!
Thiago Colares Chaves
@thicolares
www.agilize.com.br