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 ng­repeat="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 ng­repeat="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" ng­model="yourName" 

placeholder="Enter a name here">  <hr>  <h1>Hello {{yourName}}!</h1></div>

Data binding<div>  <label>Name:</label>  <input type="text" ng­model="yourName" 

placeholder="Enter a name here">  <hr>  <h1>Hello {{yourName}}!</h1></div>

Models

Templates / Views<div>  <label>Name:</label>  <input type="text" ng­model="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