Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
9 gostaram1,604 visualizações
O documento discute o desenvolvimento de aplicações híbridas para dispositivos móveis utilizando AngularJS e PhoneGap, destacando suas vantagens e desvantagens em comparação com aplicativos nativos e web. AngularJS é apresentado como um framework JavaScript que melhora a criação de aplicações de página única, enquanto o PhoneGap permite empacotar HTML, CSS e JavaScript em aplicativos nativos. O texto também menciona a importância de manter uma boa experiência do usuário ao desenvolver essas aplicações.
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
- 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?
- 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 ngrepeat=" 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 ngrepeat=" entry in log">{{ entry.msg }}</li> </ul>
- 19. Flexibiliza e separa bem Apresentação (view e controller) do Domínio (model)
- 21. Routes
- 22. Data binding
- 23. Data binding <div> <label>Name:</label> <input type="text" ngmodel=" yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div>
- 24. Data binding <div> <label>Name:</label> <input type="text" ngmodel=" yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div>
- 25. Models
- 26. Templates / Views <div> <label>Name:</label> <input type="text" ngmodel=" 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.
- 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