Upload
thiago-colares
View
479
Download
4
Embed Size (px)
DESCRIPTION
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).
Citation preview
Creative Commons LicenseBiolab by Adobe / Yohei Shimomae is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap.
Thiago Colares Chaves @thicolareswww.agilize.com.br
03/12/2014
Agenda
● Motivação● O que é AngularJS?● O que é PhoneGap?● Criando um app com PhoneGap: visão geral● Considerações
Motivação
“Desenvolver aplicativomóvel: nativo ou não?“
Quem nunca?
Depende, óbvio.
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.
Aplicação Web
Prós● Desenvolvimento barato;● Multi-plataforma;● Peformance mediana.
Contras● Acesso reduzido à
funcionalidades do dispositivo;
● Não empacota pra loja.
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
Facebook versus Sencha
http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
O que é AngularJS?
AngularJS é umHTML aprimorado para
aplicativos web!
Framework JavaScript client-side que extende o HTML.
<ul class="messages"> <li ngrepeat="entry in log">{{ entry.msg }}</li></ul>
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
$http( '/myEndpoint.json' ).then( function (response) { $scope.log.push( { msg: 'Data Received!' } );});
<ul class="messages"> <li ngrepeat="entry in log">{{ entry.msg }}</li></ul>
● Imperativa nas regras de negócio
● Declarativa e muito expressiva na view
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" ngmodel="yourName"
placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1></div>
Data binding<div> <label>Name:</label> <input type="text" ngmodel="yourName"
placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1></div>
Models
Templates / Views<div> <label>Name:</label> <input type="text" ngmodel="yourName"
placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1></div>
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: Adobe adquire a Niboti● Adobe / Niboti doam o código do PhoneGap para a ASF● Lá vira Apache Callback, então Apache Cordova
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
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/
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 Complete● AppGyver’s Steroids● Enyo● TopCoat
*http://phonegap.com/about/feature/
Criando uma app com PhoneGap: uma visão geral.
D.I.Y.: http://mobileangularui.com/blog/your-first-phonegap-app-with-mobile-angular-ui/
Dependências (e alguns auxílios)
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.
Considerações finais
Creative Commons LicenseBiolab by Adobe / Yohei Shimomae is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
PhoneGap Build
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;
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/4167WhatWG: https://html.spec.whatwg.org/multipage/
Obrigado!Thiago Colares Chaves @thicolareswww.agilize.com.br