Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência

8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência

http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 1/81

Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit desobrevivncia

Se alguma coisa puder dar errado, dará! Então, para solucionar possíveis problemas, temos esse

"Kit de sobrevivência", com algumas dicas para os problemas mais comuns com a plataforma

Phoneap ordova#

Kit de primeiros socorros da plataforma Android

Cleuton Sampaio

$ comunica%ão do $ndroid S&K com o dispositivo $ndroid 'ou o emulador(, ) comple*a e depende

de vários componentes para poder funcionar corretamente#

+uita coisa pode acontecer, e vou tentar mostrar a vocês como se safar de alguns desses sufocos-#

Android !"K Mana#er. programa $ndroid S&K +anager gerencia as plataformas e ferramentas $ndroid instaladas em

seu perfil de conta, na sua esta%ão de trabalho#

$ instala%ão das plataformas e ferramentas do $ndroid S&K ) feita por PE/012! Então, casa

usuário 3ue se loga na esta%ão de trabalho, deve reali4ar o procedimento de instala%ão#

Procure colocar no 5P$67 'ou 8P$678( a locali4a%ão das pastas9 :android;sd<=sd<tools 'ou

:android;sd<=tools, para linu*( e :android;sd<=sd<platform;tools 'ou :android;sd<platform;

tools, para linu*(!

Para e*ecutar o $ndroid S&K +anager, você tem duas op%>es9 via Eclipse '?indo?-( ou

chamando diretamente9

• @indo?s9 &uplo;cli3ue no ar3uivo S&K +anager#e*e-, na pasta rai4 do $ndroid S&KA

• +ac2inu*9 $bra um terminal, navegue para a pasta tools-, dentro da pasta do $ndroid

http://1.bp.blogspot.com/-1LLaH1Hy-UM/VEUo99bswMI/AAAAAAAAD0k/nbv1zlb_y8g/s1600/logo_phonegap_jquery.jpg



(mulatorGocê pode subir uma instFncia do Emulador $ndroid usando o programa emulator- 'dentro de

tools-, na pasta do Android !"K(#

2an%ar o emulador atrav)s da linha de comando, nos permite controlar melhor suas op%>es, e podeser a Hnica maneira, caso você venha enfrentando problemas para iniciá;lo do Eclipse ou do S&K

+anager#

Eis as op%>es da linha de comando9

emulator -avd <avd_name> [-<option> [<value>]] ... [-<qemu args>]

• ;avd :avdIname=-9 . nome do emulador 3ue você criouA

• $lgumas op%>es especiais ';:option=(9

• ;shell-9 $bre o emulador e cria uma console 'shell( com root no mesmo terminalA

• ;scale :fator=-9 Permite escalar a Janela do emulador 'valor de a L(A

• ;force;LMbit-9 1nicia o emulador na versão de LM bits#

(rro )(**+*, .-bit /inu0 Android emulator binaries are "(P*(CA1("2,

Se você estiver rodando o $ndroid S&K em um sistema operacional de LM Cits, provavelmente

receberá essa mensagem# 1sso 3uer di4er 3ue o emulador roda melhor em ambiente de NO Cits# Gocê

pode for%ar o emulador a rodar em LM Cits usando a op%ão -3orce-.bit- ao iniciar o emuladorcom o programa emulator-#

http://3.bp.blogspot.com/-V8_0mDFVUco/VEUsDjZO_pI/AAAAAAAAD1A/vYImOukfrRo/s1600/f03-avd.png



Verificando os dispositivos AndroidPodemos verificar 3uais dispositivos $ndroid estão conectados com o comando9 adb devices-# Por

e*emplo, vamos supor 3ue eu tenha um emulador rodando e um dispositivo $ndroid conectado via

QSC, logo, o comando adb devices- deve mostrar algo assim9

$ adb devices

List of devices attached

4dfd!"c#d4cf device

emulator-"""4 device

Eu tenho um dispositivo $ndroid, cuJo id- )9 OdfUdLTcVdOUcfNU, e um emulador, rodando na porta

TTTO 'cada instFncia de emulador usa uma porta diferente, come%ando de TTTO(#

Problemas,1) Tenho um emulador rodando, mas ele não aparece no Eclipse e nem no ADB Devices!

. problema a3ui pode ser com o Servidor $&C# este caso, abra um 6erminal, pare e reinicie o

Servidor $&C# 1sso resolve em W8 dos casos9

• adb <ill;server

• adb start;server

Gai dar erro no eclipse 3uando você parar o Servidor $&C, mas ele some assim 3ue você o reiniciar#

2) Tenho um dispositivo rodando, mas não aparece no Eclipse e nem no ADB Devices!

Gocê Já conseguiu ligar seu dispositivo no seu PB Então, tente parar e reiniciar o Servidor $&C#

Se não funcionou, pode ser um problema de &river QSC# o caso de +á3uinas @indo?s, )

recomendável 3ue você instale o oogle QSC &river-, no S&K +anager, pois ele funciona com

3uase todos os dispositivos $ndroid#

Se o seu dispositivo for Samsung, então ) necessário instalar o K1ES'http9???#samsung#combrsupportusefulsoft?areK1ES(, 3ue Já tem o driver QSC para o seu

dispositivo $ndroid#

$gora, se você está rodando no Qbuntu###

• Gerifi3ue se você tem o pacote mtpfs instalado, caso contrário, instale;o9 sudo apt;get

install mtpfs-A

• Se não funcionou, você pode tentar atuali4ar o pacote9

•

sudo add;apt;repositorD ppa9langdaleplgvfs;mtp• sudo apt;get update

http://www.samsung.com/br/support/usefulsoftware/KIES/

http://www.samsung.com/br/support/usefulsoftware/KIES/



$o conectar o dispositivo, abra as op%>es de desenvolvedor dele 'no menu de configura%>es do seu

$ndroid(, e permita &epura%ão QSC-#

3) Tenho um dispositivo rodando, mas ele aparece como unauthoried"!

Em certos casos, você poderá ter essa resposta do adb devices-9List of devices attached

4dfd!"c#d4cf unauthorized

emulator-"""4 offline

1sso significa 3ue o dispositivo não está permitindo a depura%ão QSC, necessária para e*ecutar

programas do Eclipse nele# este caso, tente9V# o dispositivo, abra o menu configura%>es- e procure &esenvolvedor-# +ar3ue a op%ão

&epura%ão de QSC-, e dê permissão 'devem abrir duas Janelas perguntando isso(A

M# Se a op%ão Já estava marcada, tente desmarcá;la e marcá;la novamenteA

L# Pare e inicie o Servidor $&C#

Se nada disso funcionar, tente usar o protocolo +6P9 +edia 6ransfer Protocol em seu tablet

smartphone9

Para isto, ) necessário 3ue o seu P esteJa configurado para trabalhar com dispositivos +6P# o

caso do Qbuntu, ) necessário 3ue o pacote mtpfs- esteJa instalado#

(clipseo eclipse, alguns problemas podem acontecer9

http://4.bp.blogspot.com/--Cm5xCi8kKc/VEUxhaXx6TI/AAAAAAAAD1Q/qVvgcyggn_w/s1600/f05-mtp-control.png



1) A#ri a $or%space e travou tudo&&& 'ica em Android content loader", com (&&&

X normal### $bra a sua pasta home, procure a pasta oculta #android- e9

• &elete a subpasta cache-A

• &elete o ar3uivo ddms#cfg-A

2) *mportei o pro+eto Android e ele não eecuta no Emulador& D- Class.ot'oundEception"&&&

. ordova 'e o Phoneap( geram dois proJetos sempre9 **** e ****;ordova2ib# . segundo ) um

2ibrarD ProJect-, e não deve ser colocado no Cuild Path-, dentro do Eclipse, como proJect-# Se

você fi4er isso, vai ocasionar esse erro#

Se você acabou de criar os proJetos com o ordova e o Phoneap, então deve fa4er o seguinte9

V# 0ile 1mport $ndroid E*isting $ndroid ode###

M# Selecione a pasta android-, 3ue fica dentro de platforms-A

L# ertifi3ue;se 3ue os dois proJetos esteJam marcados 'YYYY e YYYY;ordova2ib(A

O# 1mporte os doisA

T# Se der erro no proJeto principal, geralmente, basta dar um ProJect lean-# Se não resolver,

então selecione o proJeto principal, e, com o botão direito, abra properties-# Selecione

android- e verifi3ue se o proJeto secundário 'ordova2ib( está marcado# Se estiver, remova

e adicione novamente# Então, feche tudo, e fa%a outro ProJect lean-#

ota9 Se você e*portou o proJeto a partir do Eclipse '0ile E*port eneral $rchive file(, então

não deve importar como E*isting $ndroid ode###-, fa%a como 0ile 1mport eneral E*isting

proJects into ?or<space-#

Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - !etup

.<, você vai aprender a criar apps mveis multiplataforma, usando o Phoneap ordova e o

JuerD +obile# Por)m, antes de mais nada, precisa preparar a plataforma para acompanhar o curso#

GeJa agora como fa4er isso###

http://1.bp.blogspot.com/-1LLaH1Hy-UM/VEUo99bswMI/AAAAAAAAD0g/QsbK9LFKpS8/s1600/logo_phonegap_jquery.jpg



O trabalho "Criação de aplicações Móveis com PhoneGap e jQuery Mobile" de Cleuton Sampaiode /elo 0r est licenciado com uma icena Creative Commons Atri#uiãoCompartilha*4ual

5&( *nternacional! sso inclui# $e%tos& p'inas& 'r(icos e códi'o)(onte!

https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR


http://3.bp.blogspot.com/-Z3T9ciQpZkM/U9KG8EUfi4I/AAAAAAAADLA/yI08xgdggAM/s1600/cc.png





Material e e0emplos$pesar do curso ser multiplataforma, daremos maior ênfase Z e*ecu%ão em plataforma $ndroid#

6odos os e*emplos funcionam em i.S tamb)m#

6odo o material do curso está publicado no Com Programador# .s ar3uivos de e*emplo e os

e*ercícios podem ser acessados no 2in<9

https,<<===>dropbo0>com<sh<ur?ed.cs?@o=iy0<AA%jh:nys$i7mv74C!n6s1madl8B

Para cada li%ão, há alguns ar3uivos de e*emplos e e*ercícios# Casta bai*ar e descompactar o

ar3uivo relativo Z li%ão#

https://www.dropbox.com/sh/urqed2csq7owiyx/AABjhknysUiFmvFNCSn_s3Tma?dl=0




*e?uisitos de hard=are e so3t=areQsando o Phoneap ordova, você pode criar apps mveis para várias plataformas, entre elas9

$ndroid, i.S e @indo?s Phone# este curso, focaremos basicamente nas aplica%>es $ndroid,

dando uma "pincelada" rápida no i.S#

Aplicaçes Android• PQ compatível com 1ntel iT, com O nHcleosA

• Pelo menos M#O 74A

• +emria /$+ de O CA

• Espa%o em &isco 2ivre9 T CA

• Sistema .peracional9

•

@indo?s YP 'LM;bit(, Gista 'LM; or NO;bit(, or @indo?s U 'LM; or NO;bit(• 2inu*9 'Qbuntu(9 Q 2ibrarD 'glibc( M#U ou superiorA Qbuntu V#O ou superiorA

• +ac .SY9 V#T#[ ou mais recenteA

• Qsuário tem 3ue ser administrador local da má3uina 'sudoer-, no caso de 2inu*(A

• $ndroid S&K9

• Phoneap, JuerD, JuerD +obileA

• Eclipse \ $&6 plugin \ $pp2aud pluginA

• $ndroid S&K 6oolsA

• $ndroid Platform;toolsA

• Pelo menos uma versão da $ndroid platformA

• Pelo menos uma versão da $ndroid SDstem 1mageA

• Soft?are para criar servidores de notifica%ão9 ]ava N ]&K \ $pache &erbD \ +aven LA

• &ispositivos $ndroid, com cabos QSC, no mínimo $ndroid O#*A

Aplicaçes Apple i+!• i+ac, +ac+ini ou +acCoo< Pro, no mínimo iT com O C /$+A

• onta no i.S &eveloper Program, com certificado em dia 'pelo menos uma(A

• Ycode T#V#V \ i.S S&K U 'talve4 o [(A

• Soft?are para criar servidores de notifica%ão9 ]ava U ]&K \ $pache &erbD \ +aven LA

• &ispositivos i.S 'iPhone, iPad( com cabosA

5nstalação Android

(clipse• 1nstale a Hltima versão do eclipse '2una, no momento da prepara%ão deste guia(#



• X possível usar uma versão mais antigaB Sim, mas no má*imo a antepenHltima versão#

• ão instale eclipse com outros frame?or<s, incluindo &emoiselle#

Dava

1nstale o Dava D"K E da +racle e o Apache A41# $bra um terminal e veJa se o comando Javac ^ version- está apontando para a versão correta#

o $buntu9 certifi3ue;se 3ue o pacote openjd:-E-jd: esteJa instalado!

Android !"KCai*e a Hltima versão do Android !"K e instale, de acordo com as instruçes# Se usar Qbuntu,

leia essas instruçes e não se es?ueça de colocar no PA1F as pastas android-adt<sd:<tools

e android-adt<sd:<plat3orm-toolsH

$ps a instala%ão, ) necessário instalar a plataforma $ndroid e as SDstem 1mages# Gocê precisará no

mínimo de9

V# $ndroid S&K 6ools

M# $ndroid S&K Platform;tools

L# $ndroid S&K Cuild;tools 'highest version(

O# Pelo menos uma S&K PlatformAT# Pelo menos uma sDstem image para o emulator, por e*emplo9 $/+ E$C1 vUa SDstem

1mageA

$bra o aplicativo !"K Mana#er-9

• Iindo=s9 &uplo;cli3ue no ar3uivo S&K +anager#e*e-, na pasta rai4 do $ndroid S&KA

• Mac</inu09 $bra um terminal, navegue para a pasta tools-, dentro da pasta do $ndroid

S&K, e e*ecute9 #android sd<-A

http://www.oracle.com/technetwork/java/javase/downloads/index.html

http://ant.apache.org/

http://developer.android.com/sdk/index.html#download

http://developer.android.com/sdk/installing/index.html?pkg=tools

https://help.ubuntu.com/community/AndroidSDK


http://4.bp.blogspot.com/-jDPDAY044CU/VEUql2NDNzI/AAAAAAAAD0s/Y9lKw9CG5nI/s1600/f01-sdk-manager.png

http://www.oracle.com/technetwork/java/javase/downloads/index.html

http://ant.apache.org/

http://developer.android.com/sdk/index.html#download

http://developer.android.com/sdk/installing/index.html?pkg=tools




+ar3ue9

• $ndroid !"K 1ools 'Se não estiver instalado(A

• $ndroid %uild 1ools 'Se não estiver instalado(A

• $ndroid Plat3orm-tools 'Se não estiver instalado(A

Escolha uma plataforma $ndroid 'O#O#M( e instale9

• !"K Plat3ormJ

• A*M (A%5 !ystem 5ma#eJ

• Goo#le AP5 A*MLJ

Atenção, Para o PhoneGap 3uncionar& a AP5 N Android O>O>.L 1(M Q$( (!1A*

54!1A/A"AH

!ó para Iindo=s, +ar3ue tamb)m o oogle QSC &river-, no final de tudo 'dentro de E*tras-(!



(clipse A"1 plu#inSe você pretende utili4ar a 1&E Eclipse, então tem 3ue instalar o plugin para controle do $ndroid,

3ue ) o A"1 '$ndroid &eveloper 6ools(#

$gora, ) o momento de configurar o ambiente Eclipse bai*ando o plu#in A"1# $bra a Janela

help install ne? soft?are- e adicione o repositrio9

• https,<<dl-ssl>#oo#le>com<android<eclipse<2

+ar3ue tudo e instale9

&epois, configure o $ndroid S&K dentro do eclipse9

• $bra o menu9 @indo? Preferences $ndroid - e configure o path do $ndroid S&KA

•

Crie um A'" e rode o emulador AndroidPodemos desenvolver e testar apps $ndroid rodando em um Emulador, tamb)m chamado de9

$ndroid Girtual &evice ; $G&# Gamos criar uma configura%ão de $G& para podermos rodar#

/ode o S&K +anager- e crie um $G&9

• Selecione o menu tools- e +anage $G&s-# li3ue no botão "reate" e configure seu

$G&, como esse e*emplo9

http://developer.android.com/sdk/installing/installing-adt.html


http://2.bp.blogspot.com/-_hhaha7rG6w/VEUrRtHNwxI/AAAAAAAAD00/jdW3mwWZ5a0/s1600/f02-adt-plugin.png




• $G& name9 muito importante# Escolha um nome significativo, sem espa%os, nem caracteres

especiaisA

• &evice9 escolha 3ual3uer uma# Eu uso o e*us O por3ue a tela não ) muito grandeA

• 6arget9 escolha $ndroid VW 'O#O#M(A

. resto, fa%a igual Z imagem#

/ode o emulador! a tela do S&K +anager, selecione "tools" e "+anage $G&s"# . Seu $G&

rec)m criado deve aparecer lá# Selecione;o e cli3ue no botão "Start"# Gai demorar um pouco, mas o

emulador vai abrir e carregar o $ndroid# 1sso demora bastante### eralmente, entre L e T minutos,

dependendo da 3uantidade de /$+ disponível#

http://2.bp.blogspot.com/-nLaGD23Vjmg/VEUs-q7GKBI/AAAAAAAAD1E/WFU5RB_cSwo/s1600/f04-emulador.png

http://4.bp.blogspot.com/-V8_0mDFVUco/VEUsDjZO_pI/AAAAAAAAD08/hhFb-ovcMgI/s1600/f03-avd.png



5nstalação do PhoneGap e do Apache Cordova. Phoneap usa o $pache ordova# Precisamos instalar ambos# $ntes de instalar o Phoneap, )

necessário instalar o ode#Js 'e o P+(9

node>js e npm 4o /inu0 $buntu,4ão instale o nodejs do pacote do $buntuHHHH

• sudo apt;get install ;;Des ant build;essential curl git

• sudo apt;get install ;;Des pDthon;soft?are;properties pDthon g\\ ma<e

• sudo add;apt;repositorD ;;Des ppa9chris;leanode#Js

• sudo apt;get update

• sudo apt;get install ;;Des nodeJs

6este com os comandos9

• node ;;version 'tem 3ue ser pelo menos #V#*(

• npm ;;version 'tem 3ue ser pelo menos V#O#*(

node>js e npm 4o Mac +!,

7á um instalador '_#p<g( do +ac no lin<9 http,<<nodejs>or#<dist<vB>B><node-vB>B>>p:#

X s bai*ar e instalar#

node>js e npm 4o Microso3t Iindo=s,

1nstale o ode#Js a partir do site 'bai*e o msi(9

• http9nodeJs#orgdistv#V#LVnode;v#V#LV;*[N#msi 'LM bits(A

• http9nodeJs#orgdistv#V#LV*NOnode;v#V#LV;*NO#msi 'NO bits(A

X s bai*ar e instalar, e ele Já inclui o "npm"#

PhoneGap e Cordova& nas trs plata3ormas,

$bra um 6erminal ou Prompt de omandos e digite9

• npm install ;g phonegap

• npm install ;g cordova

Crie duas vari-veis de am#iente, para inu6

rie as variáveis $&/.1&I7.+E- e ]$G$I7.+E-, de preferência dentro do ar3uivoetcbash#bashrc- 'Hltimas duas linhas(9

http://nodejs.org/dist/v0.10.31/node-v0.10.31.pkg

http://nodejs.org/dist/v0.10.31/node-v0.10.31-x86.msi

http://nodejs.org/dist/v0.10.31/x64/node-v0.10.31-x64.msi


http://nodejs.org/dist/v0.10.31/node-v0.10.31.pkg

http://nodejs.org/dist/v0.10.31/node-v0.10.31-x86.msi




• e*port $&/.1&I7.+ERoptandroid;sd<;linu*

• e*port ]$G$I7.+ERusrlibJvmJava;V#N#;openJd<;iL[N

Como testar se tudo 3uncionou

. Emulador $ndroid funciona melhor em má3uinas com S. de NO bits# Ele pode dar problema commensagem de erro se sua má3uina for LM bits#

Gocê deve ter pelo menos V emulador criado '$G&(!

V# $bra um 6erminal e vá para sua pasta home9 cd `-, o +S @indo?s, basta abrir um

prompt de comando 3ue você Já estará em sua pasta "home"A

M# rie um proJeto9 cordova create teste com#e*emplo#teste teste-A

L# $dicione a plataforma $ndroid9 cd teste- e cordova platform add android-A

O# /ode o aplicativo9 cordova android run-A

&epois de algum tempo, você deverá ver o emulador com uma tela branca com o símbolo do

Phoneap no meio, escrito9 "&evice /eadD"#

g( Está 3uase terminando### a Pallete-, abra novamente a pasta 0orm ?idgets- e arraste umCutton- para a tela, posicionando;o abai*o do campo num)rico9

f( Salve o ar3uivo#

3) Criar o event handler" do cli7ue do #otãoinho

a( Gamos associar o evento .nlic<- do botão a um nome de m)todo ]ava# Selecione o botão, como botão direito do mouse, e escolha .ther properties- e depois $ll bD name-# /ole para bai*o at)achar .nlic<- 'tem uma pe3uena seta para bai*o, no canto inferior es3uerdo do menu(Ab( a Janela 3ue abriu, digite calcular- e tecle .K-Ac( $gora, precisamos criar o m)todo calcular'(- na classe ]ava da $ctivitD# $bra o ar3uivosrcorg#thecodeba<ers#fatoracao+ain$ctivitD#Java- e crie o seguinte m)todo9

public void calcular%&ie' vie'( )*

d( Gai dar erro no tipo Gie?-, resolva com uic< fi*-, importanto a classe android#vie?#Gie?-Ae( $gora, precisamos referenciar o campo num)rico no laDout, de modo a pegar seu conteHdo9

http://2.bp.blogspot.com/-gMEq2f2uqts/VEVAKbFGlyI/AAAAAAAAD4I/s7R4bVvf1lI/s1600/f24-button.png



+dit,et ttumero / %+dit,et( this.find&ie'012d%3.id.edit,et#(

• omo foi 3ue eu descobri o nome do campo no laDoutB $bra o laDout, mude para

activitDImain#*ml-, na aba inferior da Janela, e procure o tag :Edit6e*t=, pegando a

propriedade id-A

f( ]á temos uma referência para a Edit6e*t, ou seJa, o campo num)rico, agora, precisamos pegar seu

conteHdo9

long numero / Long.value5f%ttumero.get,et%(.to6tring%((

g( $rraste o ar3uivo 0atoracaoC.#Java- para dentro do pacote onde está o ar3uivo

+ain$ctivitD#Java-# .u então, selecione import file sDstem- e selecione o ar3uivo

0atoracaoC.#Java-A

h( E podemos invocar o m)todo fatorar'(- da nossa classe 0atoracaoC.-96tring resultado / 7atoracao05.fatorar%numero(

i( $gora, precisamos mostrar um alerta com esse String 3ue recebemos9

ne' 8lert9ialog.0uilder%this(.set:essage%;3esultado ; = resultado(

.seteutral0utton%;5;? ne' 9ialog2nterface.5n@licAListener%( )

public void on@licA%9ialog2nterface dialog? int 'hich( )

* *(.sho'%(

Gerifi3ue se o seu m)todo está assim9

public void calcular%&ie' vie'( )

+dit,et ttumero / %+dit,et( this.find&ie'012d%3.id.edit,et#(

long numero / Long.value5f%ttumero.get,et%(.to6tring%((

6tring resultado / 7atoracao05.fatorar%numero(

ne' 8lert9ialog.0uilder%this(.set:essage%;3esultado ; = resultado(

.seteutral0utton%;5;? ne' 9ialog2nterface.5n@licAListener%( ) public void on@licA%9ialog2nterface dialog? int 'hich( )

**(.sho'%(

*

5) Eecute o pro+eto

Gocê Já deve ter um Emulador criado# $bra o e*ecutável $ndroid S&K +anager- 'veJa no guia de

instala%ão do curso( e certifi3ue;se 3ue e*ista pelo menos um Emulador criado#

Selecione o proJeto e, com o botão direito, selecione9 /un as $ndroid $pplication-# Ele poderá

perguntar se deseJa iniciar um Emulador, diga 3ue sim#



P*+41+H&oeuB ãoB Pode parecer 3ue você não entendeu nada, mas isso não ) verdade! Gocê aprendeu

rapidamente tudo o 3ue precisa saber sobre plataformas mveis e, ainda por cima, criou uma

aplica%ão do 4ero#

Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - /ição

Cem vindo ao curso de ria%ão de apps mveis com Phoneap e JuerD +obile# Se ainda não o

fe4, leia atentamente o !(1$P do curso#

Cai*e os ar3uivos correspondentes a esta aula# $ pasta completa está em9


O trabalho "Criação de aplicações Móveis com PhoneGap e jQuery Mobile" de Cleuton Sampaio

de /elo 0r est licenciado com uma icena Creative Commons Atri#uiãoCompartilha*4ual


http://www.obomprogramador.com/2013/10/curso-de-criacao-de-apps-moveis-com.html






http://www.obomprogramador.com/2013/10/curso-de-criacao-de-apps-moveis-com.html






*onte# +et Mar,et -hare . http#//000!netmar,etshare!com/ 1

o mundo inteiro, temos i.S e $ndroid dividindo 3uase meio a meio os usuários de dispositivos

mveis# +as, e no CrasilB X a mesma coisaB

*onte# -tatista!com

otamos 3ue, no Crasil, a 3uantidade de dispositivos $ndroid ) muito maior 3ue os outros,

incluindo o i.S# Qma das ra4>es ) o pre%o, pois os dispositivos i.S são mais caros 3ue os

dispositivos $ndroid#

2ogo, vamos concentrar nossos estudos nessa plataforma, apesar de falarmos tamb)m um pouco

sobre i.S#

http://www.netmarketshare.com/

http://statista.com/

http://3.bp.blogspot.com/-M9_f4J8o78M/VEUz45S_lkI/AAAAAAAAD1k/CJ6kMglL7DI/s1600/f07-statista-brazil.png

http://3.bp.blogspot.com/-O06OWvTqFVY/VEUzf6WDVqI/AAAAAAAAD1c/iZddb9PcyYQ/s1600/f06-market-share.png

http://www.netmarketshare.com/

http://statista.com/



'erses do Android. $ndroid possui várias vers>es, sendo 3ue algumas são concorrentes9

*onte# 2ndroid!com

o Crasil, acredita;se 3ue a maioria dos dispositivos rodem $ndroid ]ellD Cean 'O#V#* a O#L(,seguido pelo ingerCread 'M#L#*(#

http://android.com/

http://3.bp.blogspot.com/-qfHfk9tMb24/VEU0T9R6ozI/AAAAAAAAD1s/c1jnSmEUsCg/s1600/f08-versoes-android.png

http://android.com/



CaracterSsticas de dispositivos móveisSelecionamos alguns dispositivos mveis mais populares no +ercado, para lhe mostrar suas

principais características9

• 6ablet iPad Air9 Processador dual;core '$U(, com V#L h4A /esolu%ão9 VTLN * MO[ pi*els,com MNO pi*els por polegadaA +emria9 V C /$+ &&/L e VN, LM ou NO C flashA M

Fmeras 'uma de T +ega pi*els(A i.S U#*A

• 6ablet Samsung Gala0y 4ote B> 'MVO Edition(9 Processador 3uad;core Krait O 'M#L

h4(A /esolu%ão9 MTN * VN pi*els com MWW pi*els por polegadaA M Fmeras9 frontal com

[ +egapi*els e tra4eira com M +egapi*elsA +emria9 L C /$+A $ndroid O#LA

• Smartphone iPhone T!9 Processador9 dual;core $[ com V#L h4A +emria9 V C /$+A

/esolu%ão9 NO * VVLN pi*els com LMN pi*els por polegadaA i.S U#*A

• Smartphone iPhone E9 Processador9 dual;core $[ com V#O 74A +emria9 V C /$+A

/esolu%ão9 UT * VLLO pi*els com LMN pi*els por polegadaA i.S [A

• Smartphone 2 4e0us T9 Processador uad;core M#L 74 Krait OA +emria9 M C

/$+A /esolu%ão9 V[ * VWM pi*els com OOT pi*els por polegadaA $ndroid O#O 'Kit Kat(A

• Smartphone Samsung Gala0y !T9 Processador9 uad;core M#T 74 Krait OA +emria9 M

C /$+A /esolu%ão9 V[ * VWM pi*els com OOT pi*els por polegadaA $ndroid O#O#M 'Kit

Kat(A

• Smartphone o<ia /umia @B &ual S1+9 Processador9 uad;core V#M 74 orte*;$UA

+emria9 V C /$+A /esolu%ão9 UM * VM[ pi*els com LVN pi*els por polegadaA

+icrosoft @indo?s Phone [#VA

Ar?uitetura moderna de aplicaçes móveis&urante muito tempo, pensou;se em criar aplica%>es mveis da mesma maneira 3ue as aplica%>es

&es<top-, com as mesmas linguagens ']ava- para $ndroid e .bJective - para i.S(# Por)m, o

mercado de aplica%>es mveis ) muito volátil, com um ciclo curtíssimo de vida# Por e*emplo, )

comum vermos atuali4a%>es de apps mveis a cada semana#

E como manter mHltiplas vers>es de uma aplica%ão '$ndroid, i.S, @indo?s Phone(, com esseciclo de vida ultra rápidoB . desenvolvimento em plataforma nativa se torna impraticável

']ava&alvi<$/6- ; para $ndroid, .bJective ^ ocoa 6ouch- ; para i.S, e #E6- ; para

@indo?s Phone(#

$ tendência moderna ) utili4ar aplica%>es @ebvie?-, 3ue e*ibem páginas 76+2 T ]avascript, e

consomem informa%>es a partir de $P1s /ES6 ou S.$P# . arma4enamento interno de Canco de

&ados ) minimi4ado, servindo apenas para cache temporário e preferências# X aí 3ue entram

frame?or<s como o Phoneap ordova9



• 76+2 T e ]avascript9 Plataforma de desenvolvimento de camada de $presenta%ão e de

lgica de negciosA• JuerD, JuerD +obile e $ngular#Js9 $u*iliares para lidar com páginas dinFmicasA

• Phoneap9 E*ecuta a aplica%ão 76+2 T em uma @ebvie? e se comunica com os recursos

do aparelho e com plugins, feitos na plataforma nativa#

Gamos ver um pouco da ar3uitetura das principais plataformas mveis do +ercado#

http://1.bp.blogspot.com/-lY1A-NojxBs/VEU1a0XwoSI/AAAAAAAAD14/cRyOqdPTvWQ/s1600/f09-arquitetura.png



Android. $ndroid utili4a dois tipos de má3uinas virtuais para e*ecutar suas aplica%>es9 &alvi< e, mais

recentemente, $/6 ̂ $ndroid /un6ime#

Gamos ver a ar3uitetura do $ndroid9

*onte# http#//commons!0i,imedia!or'/0i,i/*ile#2ndroid)-ystem)2rchitecture!sv'

. $ndroid ) divido em T camadas, conforme e*plica%ão a seguir9

• $pplications9 +nde sua aplicação rodaA

• $pplication 0rame?or<A

• 2ibrariesA

• $ndroid /untimeA

• 2inu* Kernel#

Gocê desenvolve sua aplica%ão em ]ava, utili4ando um conJunto de ferramentas para transformar

seu CDtecode em formato &alvi< $ndroid /untime, e empacotar em um ar3uivo "ap<"#

eralmente, usamos o Eclipse para desenvolver aplica%>es $ndroid, embora várias outras 1&Espossam ser utili4adas#

http://commons.wikimedia.org/wiki/File:Android-System-Architecture.svg

http://2.bp.blogspot.com/-LEn_GzdsH2E/VEU22EWqPNI/AAAAAAAAD2M/bkl9D1DV3Vo/s1600/f11-eclipe-emulator.png

http://3.bp.blogspot.com/-d8BB7f3XRi8/VEU14A5Q4RI/AAAAAAAAD2E/QHRPYk8XqwI/s1600/f10-android-arch.png

http://commons.wikimedia.org/wiki/File:Android-System-Architecture.svg



"istribuição da aplicação Android

Qma aplica%ão $ndroid 'ap<( pode ser distribuída das seguintes formas9

V# $trav)s do utilitário adb-, plugando;se o dispositivo em um computador com o $ndroid

S&K instaladoA

M# Cai*ando o ar3uivo ap<- e instalando em um dispositivoA

L# Cai*ando a partir de um repositrio privado 'Por e*emplo9 $ptoide(A

O# Cai*ando a partir da oogle PlaD StoreA

T# Cai*ando a partir da $ma4on $ppStoreA

$ vantagem de usar um repositrio como o $ptoide ou uma Store 'oogle PlaD ou $ma4on( ) a

atuali4a%ão automática das aplica%>es no dispositivo#

Para colocar uma aplica%ão na oogle PlaD Store ) necessário criar uma conta e pagar QS5 MT,

para se registrar como desenvolvedor $ndroid

'http9developer#android#comdistributegoogleplaDstart#html(

i+!i.S ) derivado do +ac .S Y, 3ue ) um sistema operacional proprietário baseado no <ernel do Qni*

'&ar?in ; http9en#?i<ipedia#org?i<i&ar?inI'operatingIsDstem((#

*onte# https#//developer!apple!com/library/Os/re(erencelibrary/Gettin'-tarted/G-3-ecurity3iPhon

e/2rt/security)layers!jp'

o i.S, E*istem 3uatro camadas de abstra%ão9

• ore .SA

• ore ServicesA

• +edia ServicesA• ocoa 6ouch#

http://developer.android.com/distribute/googleplay/start.html

http://en.wikipedia.org/wiki/Darwin_(operating_system)

https://developer.apple.com/library/IOs/referencelibrary/GettingStarted/GS_Security_iPhone/Art/security-layers.jpg


http://3.bp.blogspot.com/-9a15liNP4kw/VEU3sUPCBpI/AAAAAAAAD2U/oyflDOsOITc/s1600/f12-ios-arch.jpg

http://developer.android.com/distribute/googleplay/start.html

http://en.wikipedia.org/wiki/Darwin_(operating_system)





Gocê desenvolve sua aplica%ão utili4ando uma linguagem 3ue compila em cdigo nativo $/+,

atrav)s de um processo de ross;ompile# $tualmente, você pode criar aplica%>es usando9

+bjective C ou !=i3t#

Gocê s pode criar aplica%>es i+! utili4ando o code, em um computador $pple, rodando o Mac

+!# ão e*iste outro meio 2E$2 de fa4er isso#

Qma alternativa ) usar um servi%o como o +ac1nloud, 3ue aluga computadores +ac para uso via

rede9 http9???#macincloud#com

$ principal diferen%a para as aplica%>es $ndroid ) 3ue não e0iste uma 'M& ou seJa, sua aplicação

U compilada em códi#o nativo do dispositivo e e0ecutada como ?ual?uer outro pro#rama>

Qma aplica%ão i.S ) um ar3uivo ipa- 3ue cont)m a aplica%ão e todos os seus recursos necessários#

$ 1&E Ycode inclui um Simulador i.S, 3ue permite testar a aplica%ão#

https://developer.apple.com/library/mac/documentation/cocoa/conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html

https://developer.apple.com/swift/

http://www.macincloud.com/

http://2.bp.blogspot.com/-sGhUxjD208c/VEU5ir0hoFI/AAAAAAAAD2o/DKdi1DmtTh8/s1600/f13-mac-in-cloud.png

http://1.bp.blogspot.com/-ZByprzpHhkc/VEU5PYk6miI/AAAAAAAAD2g/kr2ifJWIz60/s1600/f12-xcode-simulador.png

https://developer.apple.com/library/mac/documentation/cocoa/conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html

https://developer.apple.com/swift/

http://www.macincloud.com/



"istribuição da aplicação

$o contrário do $ndroid, não ) possível e*ecutar uma aplica%ão i.S em um dispositivo mvel real,

sem ter um ertificado e um Provisionin# Pro3ile- emitido pela $pple#

+esmo 3ue o aparelho seJa de sua propriedade, você não conseguirá e*ecutar sua aplica%ão nele#

ão adianta plugá;lo no seu +ac#

Gocê tem as seguintes op%>es para distribuir aplica%>es i.S9

• AdFoc ; 1nstalando manualmente em at) V dispositivos ^ i.S &eveloper Program 'QS5

WW, por ano(A

• $trav)s da App!tore ^ i.S &eveloper Program 'QS5 WW, por ano(A

• Corporativamente ^ 1nstalando a partir de uma rede interna, em dispositivos da suaEmpresa ^ i.S &eveloper Enterprise Program 'QS5 MWW, por ano(A

Se você 3uiser distribuir suas aplica%>es para o pHblico em geral, deve optar pelo i.S &eveloper

Program 'QS5 WW, por ano( e submeter suas apps para publica%ão na $ppStore#



Aplicaçes AndroidQma aplica%ão $ndroid ) um conJunto de componentes, 3ue podem ser9

• $ctivities

• Services• ontent Providers

• Croadcast /eceivers

eralmente, uma aplica%ão $ndroid possui uma ou mais "telas", 3ue são chamadas de "$ctivities"9

Qma $ctivitD ) composta por elementos gráficos, como9 ai*as de 6e*to e bot>es, por e*emplo#

Esses elementos gráficos são conhecidos como "Gie?s", e o seu arranJo visual na $ctivitD )

comandado por um ar3uivo Y+2# Então, uma $ctivitD ) composta por9

• Qma classe ]ava, 3ue cont)m o tratamento de todos os eventos 3ue podem acontecer 'carga,

cli3ue de botão etc(A

• Qm ar3uivo de laDout Y+2, 3ue determina 3uais Gie?s estão disponíveis e como estãoarrumadas#

6oda $ctivitD tem um iclo de Gida, cuJos Eventos podemos interceptar9

http://3.bp.blogspot.com/-5Mxm9LlLnvQ/VEU6iFR2T2I/AAAAAAAAD2w/y84y-bMFkbQ/s1600/f14-activity.png



*onte# http#//developer!android!com/re(erence/android/app/2ctivity!html42ctivity5i(ecycle

uando ocorre uma transi%ão de estado na $ctivitD, um m)todo "allbac<" ) invocado na classe

]ava# Se você 3uiser, poderá sobrescrever o m)todo, respondendo, desta forma, ao Evento# Eis os

principais m)todos de "allbac<" de eventos do ciclo de vida9

• onreate ; 3uando a actitivD está para se tornar "/unning"A

• onStart ; a activitD está para se tornar visívelA

• on/estart ; a activitD estava "Stopped" e foi ativada novamenteA• on/esume ; a activitD vai come%ar a interagir com o usuário, recebendo input e eventosA

• onPause ; a activitD está parcialmente oculta# este m)todo, você pode fa4er "commit" de

altera%>es ou parar anima%>es, de modo a poupar recursos do sistemaA

• onStop ; a activitD está totalmente oculta por outra activitD e esta fun%ão ) chamadaA

• on&estroD ; a activitD está para ser eliminada da memria#

Analisando uma aplicação real

Gamos carregar uma aplica%ão $ndroid, o Cio+ago- e analisar como foi construída# Para isto,abra a Gie? SG ; /epositories '"@indo? Sho? Gie? SG /epositores"( e adicione a Q/29

"http9biomago#googlecode#comsvn", conforme a figura9

0a%a "chec<out" do proJeto "Cio+ago"# &eve dar erro no ProJeto, devido Z versão antiga da

http://developer.android.com/reference/android/app/Activity.html#ActivityLifecycle


http://1.bp.blogspot.com/-F4Gvpw-OZSM/VEU84AQEQxI/AAAAAAAAD3E/on4zK0UWSpY/s1600/f16-svn-biomago.png

http://1.bp.blogspot.com/-xqaqCj-YmeU/VEU7eICy3fI/AAAAAAAAD24/qnL1U95lfBE/s1600/f15-activity-lifecycle.png




plataforma $ndroid# Para corrigir, abra o ar3uivo "proJect#properties", mudando a plataforma para

"android;VW" 'ou então 3ual3uer uma 3ue você tenha instalada#

Para e*ecutar a aplica%ão, selecione o proJeto e, no menu de conte*to, selecione9 "/un $s $ndroid

$pplication"# Qma instFncia de Emulador será iniciada para você#

Se tudo der certo, você verá o emulador# adastre um novo nome e data de nascimento e comande a

gera%ão do gráfico de biorritmo#

$nalise a aplica%ão com calma#

http://3.bp.blogspot.com/-s5t60USN7CY/VEU-Lmov8tI/AAAAAAAAD3U/Wp6nsz9poh0/s1600/f18-biomago-executando.png



Mão na massaGamos criar uma aplica%ão mvel $ndroid#

Gocê criará uma aplica%ão simples, 3ue calcula o fatorial de um nHmero informado e e*ibe oresultado como um alerta# Eis a imagem da aplica%ão9

Gocê vai digitar um nHmero inteiro, clicar no botão e o resultado da sua fatora%ão aparecerá como

um alerta#

4os ar?uivos do curso& dentro da sessão , tem uma classe ]ava9 0atoracaoC.#Java-, 3ue possui

o m)todo9 fatorar-# Este m)todo recebe um nHmero inteiro longo e retorna um String, com a

multiplica%ão dos fatores primos#

Gocês usarão essa classe para criar a aplica%ão#

1) Crie um pro+eto de aplicaão Android no Eclipse6

a# +enu 0ile ne? ProJect- e depois9 $ndroid $ndroid $pplication proJect-A

b# Preencha os campos9

• $pplication name9 0atorar-A

• ProJect name9 0atorarProJ-A

•

Pac<age name9 org#thecodeba<ers#fatoracao-A• +inimum re3uired S&K9 Selecione $P1 V ^ $ndroid M#L#L ^ ingerbreadA

• 6arget S&K9 Selecione $P1 VU ^ $ndroid O#M ^ ]ellD beanA

• ompile ?ith9 &ei*e como estáA

• 6heme9 Selecione none-A

• li3ue em ne*t-, depois ne*t-, depois ne*t- e por Hltimo9 finish-A

http://2.bp.blogspot.com/-cdmquX_PWbI/VEU-rTqrDgI/AAAAAAAAD3g/owxgTUjfItM/s1600/f19-app-fatoracao.png



. proJeto appcompatIvU- foi criado pelo $&6 e deve ser mantido aberto na @or<space!

2) /odi8i7ue o la9out da Activit9

$umente o 4oom da Janela 'botão lupa \-, na barra da Janela gráfica da activitDA

a( eritifi3ue;se de usar a $P1 correta para renderi4ar o laDout 'N no seu caso(9

b( &elete a 6e*tGie?- 3ue está com o te*to 7ello ?orld-#

c( $rraste uma nova 6e*tGie?, da Pallete- '0orm ?idgets( para a tela e posicione9

d( li3ue com o botão direito sobre a nova 6e*tGie?- e selecione Edit te*t-A

e( +odifi3ue o te*to para &igite o nHmero9-A

f( a Pallete-, selecione a pasta 0orm fields-# $rraste um campo num)rico para debai*o da

legenda# X o campo com um nHmero 'OM( nele9

http://1.bp.blogspot.com/--MfLkDeYtW8/VEU_on_7QMI/AAAAAAAAD34/ot6bx37FFc8/s1600/f22-arraste-textview.png

http://4.bp.blogspot.com/-L9R9pfq5J9I/VEU_XjFCaoI/AAAAAAAAD3w/ZVSUufLefdc/s1600/f21-layout.png

http://1.bp.blogspot.com/-S3wl7ZwPt5E/VEU_HEQ6b5I/AAAAAAAAD3o/Re44uCbCaxg/s1600/f20-projeto-criado.png



Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - /icão

Gocê Já viu o Phoneap ordova e o 3ue ele pode fa4er por você# $gora, ) hora de dar uma

"melhorada" na cara dessas páginas com o jQuery Mobile!






http://jquerymobile.com/






http://4.bp.blogspot.com/-Kb_HSSyzqnI/VEU_-SlaZpI/AAAAAAAAD4A/hRoZ7mBc0fk/s1600/f23-number.png

http://jquerymobile.com/






jQuery Mobile

. JuerD Já ) conhecido da maioria dos desenvolvedores, sendo um frame?or< para lidar com o

&.+ da página e para fa4er re3uests assíncronos#

. JuerD +obile ) um frame?or< de Q1 76+2 T, otimi4ado para dispositivos de to3ue na tela, e

criado para desenvolver ?eb sites e aplica%>es mveis responsivas, 3ue são acessadas por 3ual3uer

smartphone, tablet ou mesmo des<top#

E por 7ue eu o utiliaria:

Cem, vamos dei*ar as evidências falarem por si s# Gamos pegar o Hltimo e*ercício 3ue fi4emos#Eis a tela do emulador9

$gora, vamos ver a tela do emulador do mesmo e*ercício, feito com o au*ílio do JuerD +obile9

$gora, vamos ver a tela do emulador do mesmo e*ercício, feito com o au*ílio do JuerD +obile9



6em uma grande diferen%a, nãoB GeJa como o laDout se adaptou bem ao tamanho da tela do

dispositivo### 1sso ) responsividade, e sem o menor esfor%o meu#

Para rodar esse e*ercício, substitua a página inde*#html-, 3ue está dentro de assets???- no

proJeto e*ercício-, pelo ar3uivo inde*#html- 3ue está na pasta sessaoL-#

Eis o cdigo da página inde*#html- nova9

<B95@,CD+ html>

<html>

<head>

<meta charset/;utf-E; F>

<meta name/;format-detection; content/;telephone/no; F>

<meta name/;vie'port; content/;'idth/device-'idth? initial-scale/#;>

<meta name/;msapplication-tap-highlight; content/;no; F>

<linA rel/;st1lesheet;

href/;httpFFcode.Gquer1.comFmobileF#.4.4FGquer1.mobile-#.4.4.min.css; F>

<script src/;httpFFcode.Gquer1.comFGquer1-H.#.#.min.Gs;><Fscript>

<script

src/;httpFFcode.Gquer1.comFmobileF#.4.4FGquer1.mobile-#.4.4.min.Gs;><Fscript>

<script t1pe/;tetFGavascript; src/;cordova.Gs;><Fscript>

<script t1pe/;tetFGavascript; src/;GsFinde.Gs;><Fscript>

<script t1pe/;tetFGavascript;>

app.initialiIe%(

<Fscript>

<title>Jello Korld<Ftitle>

<Fhead>

<bod1>

<div data-role/;page;>

<div data-role/;header;>...<Fdiv><div role/;main; class/;ui-content;>

<h#>2nsira registros<Fh#>

<brF>29 <input t1pe/;number; id/;id; min/;#; F>

http://3.bp.blogspot.com/-h4fwVIvkZRg/VEYpONlUHQI/AAAAAAAAD8A/hNc9aR0PKzY/s1600/f25-emulador-jquerymobile.png



<brF>,eto <input t1pe/;tet; id/;data; F>

<brF><input t1pe/;button; id/;btnincluir; value/;2ncluir;

onclicA/;inserir%(; F>

<div id/;saida;>

<Fdiv>

<Fdiv>

<div data-role/;footer;>...<Fdiv>

<Fdiv>

<Fbod1>

<Fhtml>

$3ui, s arranhamos- a superfície do JuerD +obile###

Para usar o JuerD mobile, temos 3ue incluir L elementos em nosso 76+29

V# Qm SS compatível com o JuerD mobile, 3ue pode ser o distribuído via &9<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.4/jquery.mobile1.4.4.min.css" /!

M# . Script do JuerD, 3ue pode ser tamb)m o distribuído via &9<script src="http://code.jquery.com/jquery.1.1.min.js"!</script!

L# . Script do JuerD +obile, idem9<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile1.4.4.min.js "!

</script!

Gocê tamb)m pode bai*ar os ar3uivos e instalar em sua aplica%ão# opie os ar3uivos 3ue estão

dentro de J3uerD;mobile- para dentro de9 assets???Js-, e altere os lin<s na página inde*#html-

para o caminho relativo9 Js###-#

$ma pV#ina jQuery MobileQma página no JuerD +obile consiste de um elemento com o atributo9 data;roleR"page"# &entrode um container page-, 3ual3uer cdigo 76+2 válido pode ser utili4ado# Por e*emplo9

<body!

<di# datarole="pa$e"!

<h%!&om dia</h%!

</di#!

</body!

. JuerD +obile inclui um sistema de navega%ão, 3ue se3uestra- os cli3ues em lin<s e submissão

de formulários, transformando;os em re3uests $Ja*#

Sempre 3ue o usuário clica em um lin< ou submete um formulário, isso ) imediatamente

interceptado pelo sistema de navega%ão $Ja*, e ) usado para criar um re3uest assíncrono, baseado

na Q/2 do formulário ou do lin<, ao inv)s de carregar a página toda, como seria o comportamento

normal#

uando o re3uest termina e a resposta ) recebida, o JuerD +obile busca no documento um

elemento com o atributo9 data;roleR"page", inserido o cdigo da resposta no &.+ da páginaoriginal# Em seguida, 3uais3uer ?idgets- contidos na resposta recebem o comportamento e os

http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js

http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js



estilos da página# . resto da resposta ) descartado, incluindo9 Scripts e estilos# X uma maneira

simples e elegante de implementar a ar3uitetura SP$ ^ Single Page $pplication#

&epois 3ue a resposta foi incorporada no &.+ da página original, ) apresentada atrav)s de uma

anima%ão, controlada por uma transi%ão-# Por default, ) aplicada a fade transition-, na 3ual a

página esvanece e a outra aparece#

Gamos ver um e*emplo no proJeto J3V-, dentro da sessão L#

E*aminando o cdigo fonte da página inde*#html-, temos o seguinte trecho9

:!&.6PE html=

:html=

:head=

:meta charsetR"utf;[" = :meta nameR"format;detection" contentR"telephoneRno" =

:meta nameR"vie?port" contentR"?idthRdevice;?idth, initial;scaleRV"=

:meta nameR"msapplication;tap;highlight" contentR"no" =

:lin< relR"stDlesheet" hrefR"JsJ3uerD#mobile;V#O#O#min#css" =

:script srcR"JsJ3uerD;M#V#V#min#Js"=:script=

:script srcR"JsJ3uerD#mobile;V#O#O#min#Js"=:script=

:script tDpeR"te*tJavascript" srcR"cordova#Js"=:script=

:script tDpeR"te*tJavascript" srcR"Jsinde*#Js"=:script=

:script tDpeR"te*tJavascript"= app#initiali4e'(A

:script=

http://4.bp.blogspot.com/-F8gf8oO0TfM/VEYp9YaYitI/AAAAAAAAD8I/GGQTC2qpKUE/s1600/f26-pagina-jquery-mobile.png



:title=Pg V:title=

:head=

:bodD=

:div data;roleR"page" idR"inicial"=

:div data;roleR"header"=###:div=

:div roleR"main" classR"ui;content"= :hV=Página original:hV=

:ul=

:li=:a hrefR"paginaM#html" data;transitionR"flip"=

Página M ; outro ar3uivo:a=:li=

:li=:a hrefR"pgMsegunda" data;transitionR"pop"=

segunda página interna:a=:li=

:li=:a hrefR"pgMpopup" data;transitionR"pop"

data;relR"dialog"=Popup interno:a=:li=

:ul=:div=

:div data;roleR"footer"=###:div=

:div=

6emos uma página, com idR-incial-, e nela, temos um lin< para outro ar3uivo 'paginaM#html-(# $o

navegar, o 3ue aconteceB

• X feito um re3uest $Ja* para a páginaM#htmlA

• uando a resposta chegar, o JuerD +obile analisará o conteHdo, buscando por uma page-#

$o encontrar, ele sobreporá o seu conteHdo dentro do conteHdo da page- com id inicial-A• Qma transi%ão será iniciada 'anima%ão(, neste caso ) um flip- 'data;transitionR"flip"(A

GeJa mais sobre transi%>es em9 http9demos#J3uerDmobile#comV#O#OtransitionsA

PV#inas internasSe você não 3uiser criar páginas separadas, pode colocar tudo dentro de inde*#html-, separando as

várias pages-# GeJa a continua%ão do ar3uivo inde*#html-9

<div data-role/;page; id/;inicial;>

<div data-role/;header;>...<Fdiv>

<div role/;main; class/;ui-content;>

<h#>Dgina original<Fh#> <ul>

<li><a href/;paginaH.html; data-transition/;flip;>

Dgina H - outro arquivo<Fa><Fli>

<li><a href/;MpgHsegunda; data-transition/;pop;>

segunda pgina interna<Fa><Fli>

<li><a href/;MpgHpopup; data-transition/;pop;

data-rel/;dialog;>Dopup interno<Fa><Fli>

<Ful>

<Fdiv>

<div data-role/;footer;>...<Fdiv>

<Fdiv>

<div data-role/;page; id/;pgHsegunda;>

http://demos.jquerymobile.com/1.4.4/transitions/

http://demos.jquerymobile.com/1.4.4/transitions/



<div data-role/;header;>...<Fdiv>


<h#>6egunda pgina interna<Fh#>

<a href/;Minicial; data-transition/;slidefade;>

voltar a primeira<Fa>

<Fdiv>

<div data-role/;footer;>...<Fdiv><Fdiv>

<div data-role/;page; id/;pgHpopup;>

<div data-role/;header;><h#>9ialog<Fh#><Fdiv>


<h#>Dopup interno<Fh#>

<a href/;Minicial; data-transition/;slidefade;>7echar<Fa>

<Fdiv>

<div data-role/;footer;><hrF><Fdiv>

<Fdiv>

ote 3ue temos várias pages- dentro de inde*#html-# $o clicarmos em um lin< com href

iniciando por -, o JuerD +obile vai procurar a page- dentro do mesmo ar3uivo#

ote 3ue temos uma page- 3ue funciona como um popup- 'data;relR"dialog"(#

E*perimente com os lin<s#

+ ?ue temos dentro de uma )pa#e26emos L elementos9

• Qm cabe%alho9 div com data;roleRheader-A

• Qm miolo de conteHdo9 div com roleR"main" e classR"ui;content"A

• Qm rodap)9 div com data;roleRfooter-A

Iid#ets Atenão9 Os 0id'ets nem sempre (uncionam da mesma (orma no nave'ador do des,top e no do

6mulador7 $este sempre no 6mulador do 2ndroid& no -imulador do iO- e nos dispositivos móveis7

. JuerD +obile inclui uma s)rie de plugins 3ue melhoram os elementos normais do 76+2 T# Eles

tentam dar uma cara de mobile- para uma aplica%ão @eb, imitando os @idgets presentes nas

plataformas nativas '$ndroid, i.S etc(#



Para usar um @idget, geralmente basta acrescentar um atributo data;role-# Para ver um e*emplo,

substitua os ar3uivos inde*#html- e paginaM#html-, pelos 3ue estão dentro da sessão L, na pasta

?idgets-9

6emos alguns @idgets sendo utili4ados nos dois ar3uivos# Gamos come%ar pela página

inde*#html-9

:ul data;roleR"listvie?"=

:li=:a hrefR"paginaM#html" data;transitionR"flip"=

Página M ; outro ar3uivo:a=:li=:li=:a hrefR"pgMsegunda" data;transitionR"pop"=

segunda página interna:a=:li=

:li=:a hrefR"pgMpopup" data;transitionR"pop" data;relR"dialog"=

Popup interno:a=:li=

:ul=

$o acrescentarmos o atributo data;roleRlistvie?- , transformamos a renderi4a%ão do tag :ul= em

um @idget# E, como ele tem lin<s internos, serão e*ibidos ícones com setas no canto direito, para

indicar ao usuário 3ue a3uela op%ão ) clicável e representa um lin<#

o ar3uivo paginaM#html-, temos um botão com o te*to Goltar inde*#html-# ote como ele foi

renderi4ado9 um retFngulo, 3uase da largura da tela, com cantos arredondados# 1sso ) o @idget

button-# . JuerD +obile transforma automaticamente os tags input-, com tDpe button-,

submit- e reset- em ?idgets do tipo button, sem necessidade de colocar o atribito data;

roleRbutton-#

Por)m, ) possível alterar os tags :a= e :button= em ?idgets do tipo button, mudando sua classe#

Por e*emplo, dentro do ar3uivo inde*#html-, se invocarmos o lin< para a segunda página

http://3.bp.blogspot.com/-hCWD_df87hg/VEYqzaDATJI/AAAAAAAAD8U/_h-eTU_p874/s1600/f27-widgets.png



Eis o cdigo9

:div data;roleR"collapsible"

data;iconposR"right"

data;insetR"false"

data;content;themeR"b"=

:hM=.p%>es:hM=

:ul data;roleR"listvie?"=

:li=:a hrefR""=$vião:a=:li=

:li=:a hrefR""=6rem:a=:li=

:li=:a hrefR""=arro:a=:li=

:ul=

:div=

Gamos e*plicar as mudan%as### Para come%ar, estamos usando o ?idget collapsible-, 3ue oculta

tudo o 3ue estiver dentro do container 'neste caso, uma :div=(# Para 3ue possa ser e*pandido

novamente, ) necessário 3ue o primeiro elemento do container seJa um header ':hV= at) :hN=(,

pois esse será o elemento no 3ual o usuário terá 3ue clicar para e*pandir o container#

ote 3ue temos outro item dentro do container colapsível9 .utros-# $o e*pandi;lo, você verá 3ue

e*iste um formulário inteiro dentro dele9

http://2.bp.blogspot.com/--u_flP1Rru4/VEYrVKJnlDI/AAAAAAAAD8k/XUmY8BzNmyk/s1600/f29-container-colapsivel.png



.u seJa, 3ual3uer conteHdo 3ue estiver dentro do container será oculto#

7orms Acrescente o ar7uivo +7uer9&validate&min&+s", 7ue est- dentro da sessão 3, pasta +7uer9mo#ile"

; pasta +s" dentro de assets<$$$"& em#rese de su#stituir os ar7uivos inde&html" e

pa4ina2&html", pelos 7ue estão dentro da sessão 3, na pasta $id4ets"!

Qm elemento importante de intera%ão com o usuário são os forms-# Em aplica%>es mveis, nsnão temos esse conceito# Simplesmente, posicionamos vie?s- no laDout de nossa activitD- e

pronto! Em 76+2, ) melhor utili4ar forms para isto#

&entro do ar3uivo inde*#html- novo, do proJeto J3V 'a3uele 3ue você substituiu no tpico

anterior(, tem uma page- popup# Ela cont)m uma :div= colapsível, cuJo segundo item ) um form#

http://1.bp.blogspot.com/-_ob2_lxCZ00/VEYrmBhwfhI/AAAAAAAAD8s/EO2W3PS1gRc/s1600/f30-popup-interno.png



. form ) maior 3ue a tela, logo, para ver a parte inferior, você tem 3ue arrastar para cima 'cli3ue

com o mouse sobre a área livre do popup e arraste para cima(#

6emos vários elementos nesse form# Gamos ver como os configuramos#

Cai0a de te0to

o 76+2 T, as cai*as de te*to podem ter tipos de acordo com seu conteHdo# Para ver todos esses

tipos, eu recomendo o tutorial de 76+2 T do @LSchools9

• http9???#?Lschools#comhtmlhtmlTIformIinputItDpes#asp

o form, ns criamos duas cai*as de te*to9

:label forR"nome"=ome9:label=

:input tDpeR"te*t" nameR"nome" idR"nome" valueR"" re3uired titleR"1nforme seu nome!" =

:label forR"email"=Email9:label=

:input tDpeR"email" nameR"email" idR"email" valueR"" re3uired

titleR"1nforme um email válido!" =

$ntes de mais nada, estamos utili4ando vários recursos do 76+2 T# Se você não está familiari4ado

com esta versão, sugiro consultar o tutorial do @LSchools9

•

http9???#?Lschools#comhtmlhtmlTIintro#asp

http://www.w3schools.com/html/html5_form_input_types.asp

http://www.w3schools.com/html/html5_intro.asp

http://3.bp.blogspot.com/-CKNaWfBabpo/VEYrzD7Kq0I/AAAAAAAAD80/XUCUrvRkDHo/s1600/f31-form.png

http://www.w3schools.com/html/html5_form_input_types.asp

http://www.w3schools.com/html/html5_intro.asp



Estamos usando o tag :label= para acrescentar um rtulo para os campos# Ele e*iste desde o 76+2

O#V# Seu atributo for- tem o id- do elemento ao 3ual se refere# 6amb)m estamos usando algumas

coisinhas para poder validar os campos9

• re?uired9 1ndica 3ue o campo ) obrigatrio e deve ser preenchido pelo usuárioA

• title9 1ndica a mensagem de erro 3ue deve ser e*ibida, caso o campo seJa reJeitado navalida%ãoA

Em um navegador compatível com 76+2 T, a valida%ão ) feita 3uando o formulário ) submetido#

Para 3ue isto aconte%a na @ebvie?, temos 3ue carregar um plugin de valida%ão, 3ue pode ser o

J3uerD;validate#Js# Por isto, a página inde*#html- nova fa4 referência a esse plugin9

:script srcR"JsJ3uerD;M#V#V#min#Js"=:script=

:script srcR"JsJ3uerD#mobile;V#O#O#min#Js"=:script=

:script srcR"JsJ3uerD#validate#min#Js"=:script=

$ novidade a3ui ) o tDpeRemail-, 3ue no 76+2 T significa validar o conteHdo de um campo de

acordo com as regras de um e;mail#

. atributo title- indica a mensagem de erro 3ue deve ser mostrada, caso o campo não passe na

valida%ão#

'alidação

X possível validar os campos do form sem escrever cdigo ]avascript para isto# om alguns

atributos 76+2 T e um plugin de valida%ão, podemos validar 3uase tudo, de forma simples e

prática#

Para ativar a valida%ão do form, temos 3ue e*ecutar um script logo aps o formulário ter sido

carregado9

###

:input tDpeR"submit" valueR"Enviar" =:form=

:script=

5'"meuform"(#validate'(A

:script=

!elect

Qma :select= ) uma lista de escolha, cuJo padrão ) permitir escolher apenas um elemento# Ela )

implementada desta forma9

:label forR"cidade" classR"select"=idade9:label=



:select nameR"cidade" idR"cidade" re3uired

titleR"Selecione uma cidade!"=

:option valueR"" selected=selecione:option=

:option valueR"rio" =/io de ]aneiro:option=

:option valueR"sp"=São Paulo:option=

:option valueR"bh"=Celo 7ori4onte:option=:select=

0i4emos um pe3ueno tru3ue- para for%ar o usuário a selecionar uma cidade# Poderíamos ter

simplesmente escolhido uma das cidades e colocado o atributo selected- dentro do seu tag

:option=, mas isto poderia gerar erros, pois o usuário não seria obrigado a escolher 3ual a cidade

deseJada# Então, criamos uma op%ão com valor va4io 'valueR-( e, se ele não escolher uma cidade,

a valida%ão vai pegar 'temos o atributo re3uired- no :select=(#

Chec:bo0

em dá para reconhecer como uma hec<bo*, nãoB +as )# Gocê pode selecionar os dois turnos

'3ue ficarão com fundo a4ul(# 1sto ) devido Z formata%ão do @idget hec<bo*, do JuerD +obile#

Eis o 76+29

:fieldset data;roleR"controlgroup"data;tDpeR"hori4ontal"=

:legend=6urnos9:legend=

:input tDpeR"chec<bo*" nameR"turnos" idR"turno;manha" chec<ed=

:label forR"turno;manha"=+anhã:label=

:input tDpeR"chec<bo*" nameR"turnos" idR"turno;tarde" =

:label forR"turno;tarde"=6arde:label=

:fieldset=

$ op%ão data;tDpeR-hori4ontal- fa4 com 3ue as várias hec<bo*es apare%am em uma mesmalinha na tela# Se mudarmos para vertical-, será uma coluna, com os rtulos Z es3uerda#

Pergunta9 E se eu 3uiser for%ar o usuário a selecionar pelo menos uma cai*aB este caso, vamos ter

3ue criar uma regra de valida%ão9

:form=

:script=

5'"meuform"(#validate'

rules9

turnos9

http://1.bp.blogspot.com/-d7EQSs2DhCE/VEYsfILPk8I/AAAAAAAAD9A/j_YnibCSn-I/s1600/f32-checkbox.png



re3uired9 true,

messages9

turnos9

re3uired9 "Selecione pelo menos V turno"

(A

:script=

riamos uma regra para validar o vetor turnos-# . usuário terá 3ue selecionar pelo menos V turno#

*adio

riamos um radio group-, com bot>es 3ue se e*cluem mutuamente9

Eis o cdigo 76+29

:fieldset data;roleR"controlgroup"=

:legend=Escolaridade:legend=

:input tDpeR"radio" nameR"escolaridade" idR"escolaridadeV" valueR"em" =

:label forR"escolaridadeV"=Ensino m)dio:label= :input tDpeR"radio" nameR"escolaridade" idR"escolaridadeM" valueR"sp"=

:label forR"escolaridadeM"=Superior completo:label=

:input tDpeR"radio" nameR"escolaridade" idR"escolaridadeL" valueR"m"=

:label forR"escolaridadeL"=+estrado:label=

:input tDpeR"radio" nameR"escolaridade" idR"escolaridadeO" valueR"d"=

:label forR"escolaridadeO"=&outorado:label=

:fieldset=

omo não informamos o atributo data;tDpe , o comportamento default ) mostrar como vertical, emuma coluna#

http://3.bp.blogspot.com/-aqjl8Q9lXeQ/VEYs4TW8L4I/AAAAAAAAD9I/u7KKh4mr26A/s1600/f33-radio.png



Para validar elementos repetitivos, como hec<bo*es e radio buttons, geralmente usamos regras de

valida%ão, criadas e passadas para o validador dentro do script9

:form=

:script=5'"meuform"(#validate'

rules9

turnos9

re3uired9 true

,

escolaridade9

re3uired9 true

,

messages9

turnos9

re3uired9 "Selecione pelo menos V turno"

,

escolaridade9

re3uired9 "Selecione uma escolaridade"

(A

riamos duas regras de valida%ão para os campos turnos- e escolaridade-, obrigando 3ue o

usuário selecione pelo menos uma op%ão de cada um deles#

!lider

Slider ) uma novidade do 76+2 T e permite selecionar um valor deslocando um botão#

Eis o 76+29

:label forR"slider"=/enda:label=:input tDpeR"range" nameR"renda" idR"renda" valueR"V" minR"V" ma*R"M"=

http://4.bp.blogspot.com/-fTnAu0Byy5s/VEYtNndCi-I/AAAAAAAAD9Q/LdWA_z1slbw/s1600/f34-slider.png



Como pe#ar os campos de um 7ormSe você estiver submetendo o formulário para fora da aplica%ão, por e*emplo, para um servidor

e*terno, então ) tudo resolvido por 766P /e3uest#

Por)m, se está usando o form como uma activitD-, ) possível interceptar o evento submit- e pegar

os dados 3ue o usuário digitou# Para isso, usamos o JuerD9

5' "meuform" (#submit'function' event (

if'5'meuform-(#valid'((

var campos R "ome9 "

\ 5'"nome"(#val'(

\ "jrjnEmail9 "

\ 5'"email"(#val'(

\ "jrjnidade9 "

\ 5'"cidade"(#val'( \ "jrjn6urnos9 "A

5'inputnameR"turnos"9chec<ed(#each'function'(

campos \R " " \ 5'this(#val'(A

(A

campos \R "jrjnEscolaridade9 "A

campos \R 5'inputnameR"escolaridade"(#val'(A

campos \R "jrjn/enda9 "A

campos \R 5'"renda"(#val'(A

alert'campos(A event#prevent&efault'(A

5'"meuform"(#get'(#reset'(A

5#mobile#navigate' "inicial" (A

(A

:script=

Estamos pendurando- um callbac<- no evento submit- do form# uando o usuário clicar no

botão Enviar- 'input tDpeR-submit-(, este callbac<- será invocado# ote 3ue estamos verificando

se o form ) válido! .s campos Simples, como cai*as de te*to, select e slider, podemos pegar apenas

usando o seletor de id- do JuerD, e o m)todo val'(-9

$%;Mnome;(.val%(

.s campos de sele%ão mHltipla, podemos pegar atrav)s do atributo name-, de seus tags9

$%Ninput[name/;escolaridade;]N(.val%(



Ela conterá um botão para adicionar novos registros e apresentará uma :ul= listvie?, com os

registros 3ue Já estão no banco de dados#

$o clicar no botão adicionar-, deverá navegar para a página popup, 3ue mostrará o form de

inclusão de registros# .s campos deverão ser9

• id- 9 num)rico e obrigatrio, com mensagem de valida%ãoA

• data- 9 te*to e obrigatrio, com mensagem de valida%ãoA

"icasV( +ova os scripts de valida%ão do form e do evento submit, para o ar3uivo inde*#Js-, dei*ando a

página html mais limpa#

M( 6ente usar um ?idget listvie? ':ul=( como o local onde serão acrescentados os registros pr);

e*istentes9

var registro R ""A

for 'var iRA i:lenA i\\(

registro \R ":li="\ results#ro?s#item'i(#id

\ " "

\ results#ro?s#item'i(#data

\ ":li="A

5'"saida"(#html'registro(A

5'"saida"(#listvie?'"refresh"(A

ão entre em pFnico! Procure no 4ip desta aula, dentro da Pasta do Curso# $ resposta Já está lá###


http://3.bp.blogspot.com/-gRkHIJt6odw/VEYuGkIzixI/AAAAAAAAD9g/J15imiqOvB4/s1600/f36-exercicio-sessao3.png




6oda aplica%ão 3ue usa notifica%>es de push- deve ter pelo menos O partes9

• $plica%ão mvelA

• $plica%ão servidora 'Servidor de $plica%ão(A

• Canco de dados com o registro dos usuáriosA

•

Servidor de otifica%ão '0eito pela oogle, $pple ou +icrosoft(#$ se3uência seria mais ou menos esta9

V# Qsuário instala a aplica%ãoA

M# $plica%ão se registra com o Servidor de otifica%>es 'do provedor escolhido9 +, $Ps

ou @PPS(A

L# $plica%ão envia ao Servidor de $plica%ão a sua identifica%ão, 3ue ) arma4enada no banco

de dadosA

O# Em um dado momento, o Servidor de $plica%ão decide enviar notifica%ão para um dos

lientes# Ele obt)m a identifica%ão do Canco de dados de registroAT# . Servidor de $plica%ão contacta o Servidor de otifica%>es e solicita o envio de

notifica%ão para um ou mais registros de usuárioA

N# . Servidor de otifica%ão contata o dispositivo do usuário e envia a notifica%ãoA

U# Qm callbac<- no dispositivo mvel registra a notifica%ão e e*ibe na lista de notifica%>esA

[# uando o usuário toca em uma notifica%ão, a aplica%ão apropriada ) acionada, e um

callbac<- ) e*ecutado#

&ependendo do re3uisito, a aplica%ão pode fa4er diversas coisas ao receber uma notifica%ão9

•

$pagar o Cadge number-, se for o casoA• Enviar uma confirma%ão ao Servidor de $plica%ão, para 3ue este evite notificá;la

novamenteA

4oti3icaçes para aparelhos Android

Para enviar notifica%>es para aparelhos $ndroid, ) necessário criar um proJeto e se registrar no

servi%o oogle loud +essaging#

Primeiro passo, Criar um projeto de uso de AP5 Goo#le

$cesse a oogle &evelopers onsole e crie um novo proJeto9

http://2.bp.blogspot.com/-xcv8MX1vUEU/VEa0CXubb4I/AAAAAAAAD_Y/uePqTDlhYPg/s1600/s4-gcm-console.png



$note os campos proJect 1&- e proJect umber-#

a barra Z es3uerda, selecione $P1s k auth-#

a lista de $P1s, ligue a op%ão correspondente a oogle loud +essaging for $ndroid-9

!e#undo passo, Criar uma chave de AP5 AP5 KeyL

V# o painel es3uerdo, selecione9 $P1s k auth- e redentials-A

M# &entro de Public $P1 access-, selecione reate ne? <eD-A

L# o diálogo reate a ne? <eD-, selecione9 Server <eD-A

O# o diálogo seguinte, informe o Endere%o 1P onde seu Servidor de $plica%ão vai rodar# Para

testar, dei*e como9 #### ATE.=>?6 [email protected] C??@E E/ ?D@=>? ASS*/!

T# Selecione9 reate-A

N# a página a seguir, copie a $P1 <eD-# Gocê necessitará dela para autenticar seu Servidor de$plica%ão com o oogle loud +essaging#

1erceiro passo, Criar uma aplicação preparada para GCM

Este e*emplo ) baseado neste 1$1+*5A/#

V# rie uma aplica%ão Phoneap 'pode ser com os utilitários do ordova(A

M# $dicione o PushPlugin-9

a# phonegap local plugin add https9github#comphonegap;buildPushPluginA

b# opie o ar3uivo Pushotification#Js-, 3ue fica na pasta do proJeto, dentro deplugins-, para a pasta rai4 do proJeto '3ue vai virar assets???-(A

c# 1nsira uma referência para o Pushotification#Js- dentro da sua página inde*#html-9

• :script tDpeR"te*tJavascript" srcR"Pushotification#Js"=:script=

L# /egistre a aplica%ão com o oogle loud +essagingA

O# odifi3ue o callbac<- de sucesso no regisro da appA

T# odifi3ue o callbac<- de erro no registro da appA

N# odifi3ue o callbac<- a ser invocado 3uando chegarem mensagens para a appA

1mporte o proJeto Pushotification$pp- para o eclipse#

http://devgirl.org/2013/07/17/tutorial-implement-push-notifications-in-your-phonegap-application/

https://github.com/phonegap-build/PushPlugin

http://3.bp.blogspot.com/-6omjIbD-46w/VEa0SzMrqhI/AAAAAAAAD_g/cTuZksXqyVA/s1600/s4-gcm-console-2.png

http://devgirl.org/2013/07/17/tutorial-implement-push-notifications-in-your-phonegap-application/

https://github.com/phonegap-build/PushPlugin



*e3erncia para o plu#in ar?uivo )inde0>html2L,

<script t1pe/;tetFGavascript; src/;cordova.Gs;><Fscript>

<script t1pe/;tetFGavascript; src/;GsFinde.Gs;><Fscript>

<script type="te't/ja#ascript" src="(ush)otification.js"!</script!

<script t1pe/;tetFGavascript;>

app.initialiIe%(

<Fscript>

Códi#o ?ue re#istra a app no GCM ar?uivo )inde0>js2L,

receivedEvent9 function'id(

var pushotification R ?indo?#plugins#pushotificationA

pushotification#register'

app#success7andler,app#error7andler,

"sender1&"9"WTOV[MOMLNMW",

"ecb"9"app#onotification+"(A

Gocê não precisa registrar sua app a todo momento no +# Pode fa4er isso e arma4enar em um

Canco local, testando sempre se a tabela está va4ia#

.s argumentos são9• app#success7andler 9 callbac<- de sucesso no registro com o +A

• app#error7andler 9 callbac<- de erro no registro com o +A

• "sender1&"9"WTOV[MOMLNMW","ecb"9"app#onotification+"9 . Sender1&- ) o seu

ProJect1&-, recebido 3uando você criou o proJeto na oogle &evelopers onsole, e o ecb-

) o callbac<- 3ue será invocado 3uando chegar uma mensagemA

Processamento de mensa#ens

. cdigo 3ue processa mensagens ) bem simples9

onotification+9 function'e(

s?itch' e#event (

case registered9

if ' e#regid#length = (

console#log'"/egid " \ e#regid(A alert'registration id R \e#regid(A



brea<A

case message9

this is the actual push notification# its format depends on the

data model from the push server

alert'message R \e#message\ msgcnt R \e#msgcnt(A brea<A

case error9

alert'+ error R \e#msg(A

brea<A

default9

alert'$n un<no?n + event has occurred(A

brea<A

Gários eventos podem ocorrer 3uando chega uma mensagem9

• registered-9 uando a aplica%ão se registrou com o +A

• message-9 uando uma mensagem foi recebidaA

• error-9 uando ocorreu um erro#

. 3ue vem dentro da mensagem e o 3ue a sua aplica%ão vai fa4er com ela, depende muito da suafuncionalidade# . normal ) abrir uma tela com os dados da mensagem nova#

+ !ervidor de Aplicação

Para este tutorial, usamos um servidor ode#Js 'ar3uivo notifD#Js-(9

notifD#Js

var gcm R re3uire'node;gcm(Avar message R ne? gcm#+essage'(A

$P1 Server KeD

var sender R ne? gcm#Sender'____ $P1 KE + ____(A

var registration1ds R A

Galue the paDload data to send###

message#add&ata'message,"juMU Peace, 2ove juMUNO and Phoneap juMUN!"(A

message#add&ata'title,Push otification Sample (Amessage#add&ata'msgcnt,L(A Sho?s up in the notification in the status bar

message#add&ata'soundname,beep#?av(A Sound to plaD upon notification receipt ; put in the



??? folder in app

message#collapseKeD R demoA

message#delaD@hile1dle R trueA &efault is false

message#time6o2ive R LA &uration in seconds to hold in + and retrD before timing out#

&efault O ?ee<s 'M,OVW,M seconds( if not specified#

$t least one reg id re3uired

registration1ds#push'"$P$WVbI@2gQm[UMe4Ot.&LCcUt1i1]rN&o7h6M2K.1g&*3.$

Lhnr&rCOm1TLP@fuu@fol$vM$fPTh6Cb/1TYNd&WY[mGatP[dO2I@n@ID;

I@MsorfUYlG$Gn;$.coO@O&4toGplbu1UvJT4N&KG*urtnOWGEc"(A

__

_ Parameters9 message;literal, registration1ds;arraD, o# of retries, callbac<;function

_

sender#send'message, registration1ds, O, function 'err, result( if'err(

console#log'Erro9 \ err(A

if 'result(

console#log'/esult9 \ ]S.#stringifD'result((A

else

console#log'/esult nulo(A

(A

. ideal ) termos um @ebservice 3ue a aplica%ão invo3ue para informar seu /egistration 1d-

'obtido 3uando ela se registra no +(# Então, arma4enamos esse /egistration 1d em um banco de

dados#



'amos criar outra appGamos criar uma app 3ue permita ao usuário selecionar uma cidade e mostre o clima atual# Para

isto, vamos usar o @ebservice S.$PY+2 lobal @eather-, para listar o clima da cidade

deseJada# 'resposta em e*ercicioM#4ip-(#

X importante 3ue você tente seguir e*atamente todos os passos e teste a aplica%ão!

Eis as duas telas da aplica%ão9

$bra o site do @ebservice e veJa como ele funciona#

@S&29 http9???#?ebservice*#netstoc<3uote#asm*B@S&2

Site9 http9???#?ebservice*#com?s@S&etails#asp*B$61&RVMk@S1&RTN

Qsando o soapui-, fi4 um re3uest para a opera%ão et@eather-# Eis o re3uest e o response9

*e?uest,

D56, httpFF'''.'ebservice.comFglobal'eather.asm J,,DF#.#

8ccept-+ncoding gIip?deflate

@ontent-,1pe tetFmlcharset/P,7-E

*+,(,ction: "http://---.-ebser#ice.)0/et2eather"

@ontent-Length 4O

http://www.webservicex.net/stockquote.asmx?WSDL

http://www.webservicex.com/ws/WSDetails.aspx?CATID=12&WSID=56

http://1.bp.blogspot.com/-m_0_rVxSMHg/VEa1ibOlWLI/AAAAAAAAD_o/l5CRQeazXxQ/s1600/s4-exerc2.png





Jost '''.'ebservice.com

@onnection eep-8live

Pser-8gent 8pache-Jttp@lientF4.#.# %Gava #."(

!+AP (nvelope,

:soapenv9Envelope *mlns9soapenvR"http9schemas#*mlsoap#orgsoapenvelope"

*mlns9?ebR"http9???#?ebserviceY#E6"=

:soapenv97eader=

:soapenv9CodD=

:?eb9et@eather=

:!;;.ptional9;;=

:?eb9itDame=/io de ]aneiro:?eb9itDame=

:!;;.ptional9;;= :?eb9ountrDame=Cra4il:?eb9ountrDame=

:?eb9et@eather=

:soapenv9CodD=

:soapenv9Envelope=

*esponse !+AP (nvelopeL,

:soap9Envelope *mlns9soapR"http9schemas#*mlsoap#orgsoapenvelope"

*mlns9*siR"http9???#?L#orgMVY+2Schema;instance"*mlns9*sdR"http9???#?L#orgMVY+2Schema"=

:soap9CodD=

:et@eather/esponse *mlnsR"http9???#?ebserviceY#E6"=

:et@eather/esult=:!&$6$:B*ml versionR"V#" encodingR"utf;VN"B=

:urrent@eather=

:2ocation=/io &e ]aneiro $eroporto , Cra4il 'SC/]( MM;TOS OL;V@:2ocation=

:6ime=Sep ML, MVO ; N9 $+ E&6 MVO#W#ML V Q6:6ime=

:@ind= from the 'LT degrees( at T +P7 'O K6(9:@ind=

:GisibilitD= greater than U mile's(9:GisibilitD= :6emperature= NN 0 'VW (:6emperature=

:&e?Point= NM 0 'VU (:&e?Point=

:/elative7umiditD= [[8:/elative7umiditD=

:Pressure= L#VT in# 7g 'VMV hPa(:Pressure=

:Status=Success:Status=

:urrent@eather==:et@eather/esult=

:et@eather/esponse=

:soap9CodD=

:soap9Envelope=

. elemento :et@eather/esult= ) um &$6$, logo, ) apenas um string- e não um documento



Y+2, apesar de estar formatado como tal# Ele será recebido com kltA- e kgtA- ao inv)s dos

caracteres9 :- e =-# GeJa o e*emplo ra?-9

J,,DF#.# HOO 5

@ache-@ontrol private? ma-age/O

@ontent-,1pe tetFml charset/utf-E6erver :icrosoft-226F.O

Q-8spet-&ersion 4.O.!O!#R

Q-Do'ered-01 86D.+,

9ate ,ue? H! 6ep HO#4 #O"H#" S:,

@ontent-Length #OH!

@onnection Aeep-alive

<Tml version/;#.O; encoding/;utf-E;T><soap+nvelope

mlnssoap/;httpFFschemas.mlsoap.orgFsoapFenvelopeF;

mlnssi/;httpFF'''.'!.orgFHOO#FQ:L6chema-instance;

mlnssd/;httpFF'''.'!.orgFHOO#FQ:L6chema;><soap0od1><SetKeather3esponse

mlns/;httpFF'''.'ebserviceQ.+,;> <et2eather3esult!lt56'ml #ersion="1.7"

encodin$="utf18"6$t5

lt59urrent2eather$t5

lt5ocation$t53io ;e aneiro ,eroporto &razil >*&3? @4* 74%

172lt5/ocation$t5

lt50ime$t5*ep % 714 78:77 ,A ;0 / 714.7B.% 1777

C09lt5/0ime$t5

lt52ind$t5 from the ) >%@7 de$rees? at @ A(D >4 E0?:7lt5/2ind$t5

lt5Fisibility$t5 $reater than G mile>s?:7lt5/Fisibility$t5

lt50emperature$t5 88 H >1B 9?lt5/0emperature$t5lt5;e-(oint$t5 8 H >1G 9?lt5/;e-(oint$t5

lt53elati#eDumidity$t5 IIJlt5/3elati#eDumidity$t5

lt5(ressure$t5 %7.1@ in. D$ >171 h(a?lt5/(ressure$t5

lt5*tatus$t5*uccesslt5/*tatus$t5

lt5/9urrent2eather$t5</et2eather3esult!<FSetKeather3esponse><Fsoap0od1><

Fsoap+nvelope>

J,,DF#.# HOO 5@ache-@ontrol private? ma-age/O

@ontent-,1pe tetFml charset/utf-E

6erver :icrosoft-226F.O

Q-8spet-&ersion 4.O.!O!#R

Q-Do'ered-01 86D.+,

9ate ,ue? H! 6ep HO#4 #O"H#" S:,

@ontent-Length #OH!

@onnection Aeep-alive

<Tml version/;#.O; encoding/;utf-E;T><soap+nvelope

mlnssoap/;httpFFschemas.mlsoap.orgFsoapFenvelopeF;mlnssi/;httpFF'''.'!.orgFHOO#FQ:L6chema-instance;

mlnssd/;httpFF'''.'!.orgFHOO#FQ:L6chema;><soap0od1><SetKeather3esponse



mlns/;httpFF'''.'ebserviceQ.+,;> <et2eather3esult!lt56'ml #ersion="1.7"

encodin$="utf18"6$t5

lt59urrent2eather$t5

lt5ocation$t53io ;e aneiro ,eroporto &razil >*&3? @4* 74%

172lt5/ocation$t5

lt50ime$t5*ep % 714 78:77 ,A ;0 / 714.7B.% 1777

C09lt5/0ime$t5

lt52ind$t5 from the ) >%@7 de$rees? at @ A(D >4 E0?:7lt5/2ind$t5

lt5Fisibility$t5 $reater than G mile>s?:7lt5/Fisibility$t5

lt50emperature$t5 88 H >1B 9?lt5/0emperature$t5

lt5;e-(oint$t5 8 H >1G 9?lt5/;e-(oint$t5

lt53elati#eDumidity$t5 IIJlt5/3elati#eDumidity$t5

lt5(ressure$t5 %7.1@ in. D$ >171 h(a?lt5/(ressure$t5

lt5*tatus$t5*uccesslt5/*tatus$t5

lt5/9urrent2eather$t5</et2eather3esult!<FSetKeather3esponse><Fsoap0od1><

Fsoap+nvelope>

Então, podemos pegar o conteHdo te*tual do tag et@eather/esult- e transformar em Y+29

• Substituímos os kltA- e kgtA- por :- e =-, respectivamenteA

• onvertemos o string resultante em Y+2A

• Pegamos os elementos dentro de :2ocation=-#

Passo , Crie uma aplicação e importe para o eclipseJ

Passo ., Adapte o )inde0>js2 e o )inde0>html2,

&evem ficar como o e*emplo da página T da sessão L# S 3ue copie os scripts de J3uerD;

mobile- para dentro de assets???Js- e modifi3ue a referência dentro de inde*#html- para

usar as cpias locais#

Passo , Crie as )pa#es2 do e0ercScio,

Página inicial-, com um form9

:div data;roleR"page" idR"inicial"=

:div data;roleR"header"=lima global:div=

:div roleR"main" classR"ui;content"=

:hV=Selecione a cidade:hV=

:form idR"formcidade" actionR""=

:label forR"cidade" classR"select"=idade9:label=:select nameR"cidade" idR"cidade" re3uired

titleR"Selecione uma cidade!"=



:option valueR"" selected=selecione:option=

:option valueR"/io de ]aneiro" =/io de

]aneiro:option=

:option valueR"Sao Paulo"=São Paulo:option=

:option valueR"Celo 7ori4onte"=Celo

7ori4onte:option= :option valueR"Crasilia"=Crasília:option=

:option valueR"Porto $legre"=Porto $legre:option=

:option valueR"0ortale4a"=0ortale4a:option=

:select=

:input tDpeR"submit" valueR".bter" =

:form=

:div=

:div data;roleR"footer"=:div=

:div=

6eremos valida%ão nesse form, logo, o script J3uerD#validate#min#Js- deve ser incluído no

ar3uivo inde*#html-#

$gora, uma página resultado- para e*ibir uma listvie?9

:div data;roleR"page" idR"resultado"=

:div data;roleR"header"=:hV=/esultado:hV=:div=

:div roleR"main" classR"ui;content"=

:div=

:ul idR"saida" data;roleR"listvie?"=

:ul=

:div=

:div=

:div data;roleR"footer"=:hr=:div=:a hrefR"inicial" data;transitionR"slidefade"

classR"ui;btn"=0echar:a=

:div=

Passo O, Crie& no ar?uivo )inde0>js2& os códi#os de validação e submit,

1ntercepte o evento readD- do documento9

• $%document(.read1%function%( )U*(

$ primeira coisa a fa4er no callbac<- ) validar o form9• $%;Mformcidade;(.validate%(



$gora, temos 3ue interceptar o evento submit- do form9

• $% ;Mformcidade; (.submit%function% event ( )

$ primeira coisa 3ue faremos dentro do submit- ) verificar se o form está válido9

• event.prevent9efault%(

• if%$%;Mformcidade;(.valid%(( )

. prevent&evault'(- ) para impedir o comportamento normal de subissão do formulário, Já

3ue vamos tratar tudo ns mesmos#

$t) agora, temos isso9

5'document(#readD'function'(

5'"formcidade"(#validate'(A

5' "formcidade" (#submit'function' event ( event#prevent&efault'(A

if'5'"formcidade"(#valid'((

(A

(A

Passo T, Monte o )!+AP(nvelope2 para invocar o serviço,

var soap+nv /

;<soap+nvelope mlnssi/NhttpFF'''.'!.orgFHOO#FQ:L6chema-instanceN ;

= ; mlnssd/NhttpFF'''.'!.orgFHOO#FQ:L6chemaN ;

= ; mlnssoap/NhttpFFschemas.mlsoap.orgFsoapFenvelopeFN>;

= ;<soap0od1>;

= ;<SetKeather mlns/NhttpFF'''.'ebserviceQ.+,N>;

= ;<@it1ame>;

= $%;Mcidade;(.val%(

= ;<F@it1ame>;

= ;<@ountr1ame>0raIil<F@ountr1ame>;

= ;<FSetKeather>;

= ;<Fsoap0od1>;

= ;<Fsoap+nvelope>;

Passso E, Monte a estrutura do comando W>aja0& para poder obter os dados do clima,

$.aGa%)

t1pe ;D56,;?

url "http://---.-ebser#ice'.net/$lobal-eather.asm'"?

headers ) N658D8ctionN

NhttpFF'''.'ebserviceQ.+,FSetKeatherN *?content,1pe ;tetFmlcharset/P,7-E;?

data,1pe ;ml;?



data: soapn#?

before*end function%( )

*?

complete function%( )V

*?

success function%data? status? req( )

*?

error function%request? status? error( )

*(

• $ Q/2 do @ebservice ) obtida do soapui-# 6emos 3ue acrescentar o 7E$&E/ 766P9

S.$P$ction-, conforme indicado no soapui-A

• &epois, temos 3ue enviar o soapEnv- 3ue formatamos, dentro da propriedade data-A

• $ propriedade beforeSend- ) um callbac<- 3ue será invocado imediatamente $6ES do

re3uest ser enviado# Podemos usar para e*ibir uma mensagem do tipo9 aguarde###-A• $ propriedade complete- ) um callbac<- 3ue será invocado 3uando o re3uest terminar#

Podemos usá;la para fechar a mensagem aguarde##-A

• $ propriedade success- ) um callbac<- 3ue será invocado 3uando o re3uest terminar e os

dados chegarem# $3ui, temos 3ue trabalhar o Y+2 e inserí;lo na :Q2= da página

resultado-A

• $ propriedade error- ) um callbac<- 3ue será invocado em caso de erroA

Passo @, Mensa#em de )a#uarde>>>2

Podemos usar o @idget loading-, do JuerD +obile, para e*ibir uma mensagem9

before*end function%( )

K.mobile.loadin$% Nsho-N? )

tet Ncarregando...N?

tet&isible true?

tetonl1 true?theme NbN?

html ;;

*(

* ?

complete function%( )

$.mobile.loading%NhideN(

*?

Passo X, Callbac: de sucesso,

$3ui temos 3ue fa4er o seguinte9



V# .bter o tag :et@eather/esponse=-A

M# avegar nos seus tags internos 's tem um(A

L# Pegar o conteHdo te*tualA

O# 6ransformar o string em Y+2A

T# avegar no resultado e montar a listvie?A

.bter o tag :et@eather/esponse=-var response / $%data(.find%;SetKeather3esponse;(

avegar nos seus tags internos$%response(.each%function%( )

*(

Pegar o conteHdo te*tual9var resposta*trin$ / WX

$%response(.each%function%( )

resposta*trin$ L= K>this?.te't>?5

*(

6ransformar o String em Y+29resposta6tring / resposta6tring.replace%;Ylt;? ;<;(

resposta6tring / resposta6tring.replace%;Ygt;? ;>;(

var respostaQml / $.parseQ:L%resposta6tring(

avegar no resultado e montar a listvie?9

var result7tml R -A

5'urrent@eather, respostaYml(#each'function'(

result7tml \R ":li=2ocali4a%ão9 "

\ 5'this(#find'"2ocation"(#te*t'( \ ":li="A

'outros campos(

(A 5'"saida"(#html'result7tml(A

5'"saida"(#listvie?'(#listvie?'"refresh"(A

5'"formcidade"(#get'(#reset'(A

5#mobile#navigate' "resultado", transition9 pop, role9 "dialog" (A

$lgumas notas### Para come%ar, eu não colo3uei todos os campos, logo, você terá 3ue

fa4er isso# Em segundo lugar, estamos Jogando o resultado 'um conJunto de tags :li=-(

dentro de uma :ul= listvie?-# . comando de refresh- ) estranho, mas ) assim

mesmo9$%;Msaida;(.list#ie->?.listvie'%;refresh;(



omo a página onde está esta :ul= não está carregada, temos 3ue iniciali4ar a

listvie?-# &aí a primeira referência ao m)todo listvie?'(-# Então, temos 3ue invocar o

m)todo refresh- da listvie?, pois acabamos de inserir novos dados, daí a segunda

chamada do m)todo listvie?'(-#

2impamos o form com o comando9$%;Mformcidade;(.get%O(.reset%(

E navegamos 'por ]avascript( para o diálogo resultado-, cuJa listvie?- ns

preenchemos#

ão se es3ue%a de criar o callbac<- de erro!

Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - /icão O

esta li%ão, estudaremos a onectividade#
















Conectividade. grande lance das aplica%>es mveis ) a conectividade# $plica%>es standalone-, 3ue não se

comunicam com nenhum Servi%o, são raras e, geralmente, de pouca utilidade em plataforma mvel#

6emos 3ue lembrar 3ue o usuário ) movel e está com uma plataforma computacional de grandepoder em seu bolso#

o início da 1nternet mvel '@$P(, a grande novidade era acessar seu e;mail ou então navegar em

?ebsites @$P# 7oJe em dia, podemos fa4er muito mais do 3ue isso#

Ar?uitetura tSpica de conectividade

Casicamente, temos dois tipos de comunica%ão9 onsumo de Servi%os e Push-# . onsumo de

servi%os ) 3uando o dispositivo envia um /e3uest a um Servidor na @eb, o 3ue, geralmente, ) feito

utili4ando;se 766P, e recebe uma resposta# . @eb Service pode ser S.$P ou 766P puro, e o

formato de dados pode ser ]S. ou Y+2#

Consumo usando F11P

Podemos consumir servi%os utili4ando 766P puro, e o JuerD nos fornece vários m)todos para isto9

Get de dados a partir de um servidor,

5#get':url=-, :callbac<=(

http://3.bp.blogspot.com/-fnLc9GwaECY/VEatNODdXlI/AAAAAAAAD9w/ycbsuxJQRD8/s1600/conectividade.png



5'"button"(#clic<'function'(

5#get'"demoItest#asp",3unctiondata&statusL

alert'"&ata9 " \ data \ "jnStatus9 " \ status(A

(A

(A

Post de dados para um servidor,

5#post'Q/2,data,callbac<(A

5'"button"(#clic<'function'(

5#post'"demoItestIpost#asp",

name9"&onald &uc<",citD9"&uc<burg"

,

function'data,status(

alert'"&ata9 " \ data \ "jnStatus9 " \ status(A

(A

(A

Get de um objeto D!+4 a partir de um servidor,

5#get]S.' url , data , success (

5#get]S.' "aJa*test#Json", function' data (

var items R A

5#each' data, function' <eD, val (

items#push' ":li idR" \ <eD \ "=" \ val \ ":li=" (A

(A

5' ":ul=",

"class"9 "mD;ne?;list",html9 items#Join' "" (

(#append6o' "bodD" (A

(A

E temos tamb)m o m)todo $Ja*-, 3ue ) mais completo9

$.aGa%)

t1pe ;D56,;?

url 'sPrl?content,1pe ;tetFml;?

data,1pe ;ml;?



data soap3equest?

success process6uccess?

error process+rror

*(

Sempre temos 3ue passar callbac<s- para os eventos, al)m de testarmos o status da resposta9

http9???#?L#orgProtocolsrfcMNVNrfcMNVN;secV#html

.BB +K

. /e3uest foi bem sucedido# . conteHdo da resposta estará de acordo com o campo ontent;

tDpe-#

B Moved PermanentlyB. 7ound

B !ee +ther

X necessário fa4er um redirect- para outra Q/2, informada no 7E$&E/ da resposta#

BO 4ot Modi3ied

. /ecurso 3ue você está tentando obter não sofreu modifica%>es, logo, o 3ue está em seu cache- )

válido# 1sso depende do conteHdo do E6ag e da data de modifica%ão, e você pode controlar isso comos tags no /e3uest9 if;none;match- e if;modified;since-#

OBB %ad *e?uest

Seu re3uest não foi entendido pelo Servidor# Gerifi3ue o formato e os 7E$&E/S#

OB $nauthoriRed

. acesso ao /ecurso e*ige autentica%ão# $ resposta deve incluir um 7E$&E/ @@@;$uthenticate- 3ue cont)m um challenge- a ser devolvido no pr*imo re3uest# . liente pode

repetir o re3uest incluindo o 7E$&E/9 $uthori4ation-# Se o /e3uest original Já incluiu o

7E$&E/ $uthori4ation-, então ) uma indica%ão 3ue o usuário não tem direito de acesso ao

/ecurso#

OB 7orbidden

. Servidor entendeu o re3uest, por)m não vai enviar o recurso# este caso, não adianta incluir o

7E$&E/ $uthori4ation- e o /e3uest não deve ser repetido#

OBO 4ot 7ound

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html



. /ecurso não foi encontrado# Pode ser um problema de Q/1, indicando 3ue o nome ou a

identifica%ão do /ecurso esteJam inválidos#

OBT Method 4ot Allo=ed

. +)todo 766P 3ue você está enviando em seu /e3uest não ) aceito pelo Servidor para este

/ecurso# Por e*emplo, você pode estar tentando obter um recurso com E6, mas ele s está

disponível via P.S6#

OBE 4ot Acceptable

uando criamos um /e3uest, podemos especificar 3uais tipos de resposta aceitaremos, por

e*emplo9 Y+2, ]S., 76+2 ou 6EY6# Se o Servidor concluir 3ue não pode enviar o /ecurso

na3uele formato, ele retorna um erro ON#

T (rro de servidor

Este tipo de erro ) retornado devido a um problema no Servidor# Pode ser 3ue tenha dado uma

e*ception, ou mesmo 3ue o Servi%o esteJa fora do ar#

(0ercScio

Gamos fa4er um e*ercício breve 'guiado( para consumir um servi%o via 766P# Gamos verificar deonde ) nosso Endere%o 1P#

Para come%ar9

• cordova create geoip com#e*emplo#geoip geoip

• cordova platform add android

&epois, crie uma página 76+2 inde*#html- de acordo com as orienta%>es da Sessão L, página T#

2embre;se de copiar os ar3uivos do JuerD- e do JuerD +obile- para dentro da pasta Js- 'estão

dentro da sessão L em J3uerD;mobile-(# E a SS do JuerD +obile para a pasta css-#

1mporte os proJetos geoip- e geoip;ordova2ib- para sua @or<space# '1nport $ndroid

E*isting $ndroid ode###-(# Se der erro no proJeto geoip-, abra o Cuild Path- e adicione o proJeto

geoip;ordova2ib-#

2embre;se de e*cluir os /esource filters- para 3ue os ar3uivos ??? apare%am#

. 3ue você vai fa4erB Gai acessar uma $P1 /ES6 3ue retorna um ]S.# Pode usar o m)todo

5#get]S., do JuerD9

console.log%;ZZZZZZZZZZZZ 7aIendo o request;(

$.get65% ;httpFFfreegeoip.netFGson;? function% data ( )



console.log%;ZZZZZZZZZZZZ 9ados recebidos ; ]

= 65.stringif1%data((

$%;Msaida;(.tet%65.stringif1%data((

*(

Eis o resultado esperado9

. servi%o freegeoip#net- retorna as informa%>es geográficas de um endere%o 1P, e pode fa4ê;lo emformato ]S. ou Y+2# Eis a url9

http9freegeoip:formato=:endere%o ip=

. cdigo de acesso ao @ebservice deve ser incluído no evento ondevicereadD-, do ordova#

http://freegeoip/

http://4.bp.blogspot.com/-yk2-Vmmdtg8/VEat82nsPWI/AAAAAAAAD94/ZeWyZ8GaW1E/s1600/s4-exerc1.png

http://freegeoip/



1rabalhando o D!+4

$s respostas ]S. são fáceis de trabalhar em ]avascript# Elas Já são .bJetos e podemos usar suas

propriedades e m)todos# . obJeto recebido foi mais ou menos esse9

)

;ip;;#ER.R.#!.";?

;countr1_code;;03;?

;countryMname;;0raIil;?

;region_code;;;?

;region_name;;;?

;cit1;;;?

;Iipcode;;;?

;latitude;-#O?

;longitude;-""?

;metro_code;;;?

;area_code;;;

*

2ogo, poderíamos ter trabalhado os valores individualmente9

console#log'" País9 " \ data>country6name(A

E podemos usar o m)todo ]S.#stringifD'( para transformar um .bJeto em String#

1rabalhando com M/

6rabalhar com Y+2 em plataforma mvel não ) fácil# em todos os recursos estão disponíveis# Se

você tiver oportunidade, evite trabalhar com Y+2 a 3ual3uer custo!

1sto posto, vamos ver com trabalhar com Y+2 no ambiente mvel com JuerD# . servi%o

freegeoip- tamb)m permite obter os dados em Y+2# Por e*emplo9

Podemos trabalhar isso de maneira simples9

http://4.bp.blogspot.com/-rkEuh-zY7Oo/VEavHqbhthI/AAAAAAAAD-E/slQTar7sNRY/s1600/s4-xml1.png



$.get%;httpFFfreegeoip.netFml;? function% data ( )

console.log%;$$$$ ; = $%N@ountr1ameN?data(.tet%((

*

(

Qsamos o prprio seletor do JuerD para pegar o elemento ountrDame- de dentro da respostaY+2, 3ue estava na variável data-# Qsamos o m)todo te*t'(- para obter o conteHdo do 6ag#

Poderíamos ter navegado em todos os tags 3ue estão dentro do tag inicial ':/esponse=( dessa

forma9

$.get%;httpFFfreegeoip.netFml;? function% data ( )

$%;3esponse;? data(.each%function%( )

console.log%;\\\\\\\\\\\\\\\\\\;(

console.log%;2p ; = $%this(.find%;2p;(.tet%((

console.log%;@ountr1@ode ; = $%this(.find%;@ountr1@ode;(.tet%((

console.log%;@ountr1ame ; = $%this(.find%;@ountr1ame;(.tet%((

*(

Qsamos o m)todo each'(- dentro do tag /esponse-, para navegar em todos os tags encontrados#

&epois, para cada tag encontrado, mostramos o seu conteHdo te*tual#

. find'(- tem 3ue ser e*ecutado no tag superior#

!+AP

S.$P ) um protocolo de troca de informa%>es, baseado na invoca%ão remota de opera%>es

'm)todos(# Ele necessita de um formato específico de mensagem, descrito em um ar3uivo @S&2#

$ntes de mais nada, instale o programa soapui-9

http9???#soapui#orgetting;Startedinstalling;on;linu*uni*#html

Por 3ue você vai precisar do S.$PQ1B Por3ue você terá 3ue montar o S.$P Envelope na mão!

Gamos criar um ProJeto S.$P no S.$P Q1 e usar o servi%o alculator-# Eis o endere%o do

@S&29

http9soaptest#parasoft#comcalculator#?sdl

Gamos invocar a soma 'add(9

http://www.soapui.org/Getting-Started/installing-on-linuxunix.html

http://soaptest.parasoft.com/calculator.wsdl

http://www.soapui.org/Getting-Started/installing-on-linuxunix.html

http://soaptest.parasoft.com/calculator.wsdl



Eis a /esposta9

:soap9Envelope *mlns9*siR"http9???#?L#orgMVY+2Schema;instance"

*mlns9*sdR"http9???#?L#orgMVY+2Schema"

*mlns9soapR"http9schemas#*mlsoap#orgsoapenvelope"=

:soap9CodD= :n9add/esponse *mlns9nR"http9???#parasoft#com?sdlcalculator"=

:n9/esult *si9tDpeR"*sd9float"=U#:n9/esult=

:n9add/esponse=

:soap9CodD=

:soap9Envelope=

Como 3aRer isso em uma app

6emos 3ue montar o S.$P Envelope, enviar usando P.S6 e depois analisar a resposta#

Montando o !+AP (nvelope

:soapenv9Envelope *mlns9soapenvR"http9schemas#*mlsoap#orgsoapenvelope"

*mlns9calR"http9???#parasoft#com?sdlcalculator"=

:soapenv97eader=

:soapenv9CodD=

:cal9add=

:cal9*=T:cal9*=

:cal9D=M:cal9D=

:cal9add=

:soapenv9CodD=

:soapenv9Envelope=

6emos 3ue colocar isso dentro de um String9

var soapEnv R ":soapenv9Envelope *mlns9soapenvRhttp9schemas#*mlsoap#orgsoapenvelope"

\ " *mlns9calRhttp9???#parasoft#com?sdlcalculator="

http://2.bp.blogspot.com/-WUjDsEQSgnc/VEavpsdqFII/AAAAAAAAD-M/igSb4MeSEzE/s1600/s4-soapui.png



\ ":cal9D="

\ M

\ ":cal9D="

\ ":cal9add="

\ ":soapenv9CodD="

\ ":soapenv9Envelope="A

5#aJa*'

tDpe9 "P.S6",

url9 "http9?sV#parasoft#comgluecalculator",

headers9 S.$P$ction9 add ,

content6Dpe9 "te*t*mlAcharsetRQ60;[",

data6Dpe9 "*ml",

data9 soapEnv,

success9 function'data, status, re3( console#log'"______ .K9 " \ status(A

5'"saida"(#te*t'5'"/esult",data(#te*t'((A

,

error9 function're3uest, status, error(

console#log'"_____ E//.9 " \ status \ " 9 " \ error(A

(A

E o resultado9

http://1.bp.blogspot.com/-VgswbJ5vfDc/VEaxWfaSUuI/AAAAAAAAD-g/Sa3cndWUYw8/s1600/s4-res-soap.png



4oti3icaçesotifica%>es Push-, para $ndroid e i.S, são providas por seus respectivos servi%os de

notifica%>es9

oogle loud +essaging

$pple Push otification Service

@indo?s Phone Push otification Service

$ conectividade Push- funciona sem necessidade do usuário acionar uma aplica%ão# Em seu

dispositivo, um Servi%o abre uma cone*ão com o Servi%o de otifica%>es na uvem, e fica

aguardando# uando chega uma notifica%ão, ela vem com o id- da aplica%ão, logo, o Servi%o de

bac<ground consegue enviar a mensagem para a aplica%ão, mesmo 3ue ela não esteJa sendo

e*ecutada#

$o receber notifica%>es, o dispositivo e*ibe uma lista9

http://3.bp.blogspot.com/-ZLxZcT5kX_g/VEayQDNd2SI/AAAAAAAAD-4/Y3hM-L0oU2w/s1600/s4-wppns.png

http://3.bp.blogspot.com/-0roOnyhXdtY/VEax8-8xQvI/AAAAAAAAD-w/eX9M1zx0Q28/s1600/s4-apns.jpg

http://1.bp.blogspot.com/-aQjvwap2JSg/VEaxwpcA7CI/AAAAAAAAD-o/GM5sHUnsPRI/s1600/s4-gcm.png



$o clicar em uma notifica%ão, a aplica%ão correspondente será aberta, no callbac<- de tratamentode notifica%>es# Ela poderá fa4er várias coisas, por e*emplo abrir uma Janela com a mensagem

nova#

%ad#e number

o i.S ) possível adicionar um Cadge number- ao ícone da aplica%ão, geralmente mostrando

3uantos novos itens estão disponíveis9

os dispositivos $ndroid isso não ) possível, pois a $P1 não permite alterar o ícone de um

aplicativo#

Por)m, se for absolutamente necessário e*ibir esse tipo de informa%ão, você pode criar um @idget

para o usuário $ndroid#

Em aparelhos Samsung, a interface 6ouch@i4 permite criar Cadge umbers# $ desvantagem ) 3ue

s funciona com aparelhos Samsung#

http://2.bp.blogspot.com/-GObhjTY86As/VEazZA3TOkI/AAAAAAAAD_Q/cENcrw-FOKA/s1600/s4-widget.png

http://2.bp.blogspot.com/-pEX-fUOEob4/VEazEvxPPkI/AAAAAAAAD_I/p9-ghxABN5E/s1600/s4-badge-number.jpg

http://3.bp.blogspot.com/-PSL5FQ0mG5U/VEayrlcskVI/AAAAAAAAD_A/V9yOnRXuPzc/s1600/s4-notification-samples.png



+ processo de noti3icação

E*iste todo um processo para poder enviar notifica%>es de push- para os aparelhos# Para come%ar,

) de bom tom perguntar ao usuário se o aplicativo pode lhe enviar notifica%>es de push-# &epois, )

necessário registrar seu aplicativo nos servi%os de push- 3ue deseJa utili4ar9 +, $Ps ou

@PPS #

Em segundo lugar, você terá 3ue criar uma aplica%ão 3ue enviará as mensagens ao Servidor de

otifica%>es deseJado# Essa aplica%ão se registrará no Servidor de otifica%ão 'usando as

credenciais 3ue você registrou(, e enviará as mensagens para os usuários 3ue se registraram com a

aplica%ão# ote 3ue ele não enviará as mensagens diretamente aos aparelhos, mas para o Servidor

do servi%o de notifica%>es apropriado#

0inalmente, sua aplica%ão deverá estar preparada para receber notifica%>es de push-, fornecendo

um callbac<- a ser e*ecutado 3uando as mesmas chegarem#

$s mensagens de notifica%>es não possuem garantia de entrega#

!e?uncia de passos para noti3icaçes

Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - /icão T

Cem, chegou a hora do nosso e*ercício final!
















PrVtica 3inal

Gocê vai criar uma aplica%ão Phoneap 'ordova( com JuerD +obile para obter os dados das

a%>es da oogle, utili4ando o @ebservice S.$PY+29 Stoc< uote-9

• @S&29 http9???#?ebservice*#netstoc<3uote#asm*B@S&2A

• Site9 http9???#?ebservice*#com?s@S&etails#asp*B$61&RMk@S1&RWA

$ app s terá uma Hnica page-, com duas situa%>es possíveis9

$o clicar no botão $tuali4ar-, deverá ser feito um re3uest $Ja* para o @ebservice, 3ue preencherá

a :ul= listvie?- 3ue está colapsada, com todos os dados da a%ão#

+ Iebservice&epois de acessar com o soapui-, consegui obter o re3uest e o response9

*e?uest,

P.S6 http9???#?ebservice*#netstoc<3uote#asm* 766PV#V

$ccept;Encoding9 g4ip,deflate

ontent;6Dpe9 applicationsoap\*mlAcharsetRQ60;

[AactionR"http9???#?ebserviceY#E6etuote"

ontent;2ength9 MWV

7ost9 ???#?ebservice*#net

onnection9 Keep;$live

Qser;$gent9 $pache;7ttplientO#V#V 'Java V#T(

:soap9Envelope *mlns9soapR"http9???#?L#orgMLTsoap;envelope"



http://1.bp.blogspot.com/-IwandCkZrEQ/VEa5tfADaVI/AAAAAAAAD_0/_u7w6BqQoHk/s1600/s5-exerc.png





*mlns9?ebR"http9???#?ebserviceY#E6"=

:soap97eader=

:soap9CodD=

:?eb9etuote=

:!;;.ptional9;;=

:?eb9sDmbol=..2:?eb9sDmbol= :?eb9etuote=

:soap9CodD=

:soap9Envelope=

*esponse,

:soap9Envelope *mlns9soapR"http9???#?L#orgMLTsoap;envelope"

*mlns9*siR"http9???#?L#orgMVY+2Schema;instance"

*mlns9*sdR"http9???#?L#orgMVY+2Schema"= :soap9CodD=

:etuote/esponse *mlnsR"http9???#?ebserviceY#E6"=

:etuote/esult=:!

&$6$:Stoc<uotes=:Stoc<=:SDmbol=..2:SDmbol=:2ast=TWM#TT:2ast=:&ate=WMLM

VO:&ate=:6ime=VM9MOpm:6ime=:hange=;

O#UM:hange=:.pen=TWT#:.pen=:7igh=TWN#NT:7igh=:2o?=TW#[N:2o?=:Golume=[V

WVU:Golume=:+<tap=O#[C:+<tap=:Previouslose=TWU#MU:Previouslose=:Percentage

hange=;#UW8:Percentagehange=:$nn/ange=OMV#WVM ;

NVT#TT:$nn/ange=:Earns=VW#L:Earns=:P;E=L#WT:P;E=:ame=oogle1nc#:ame=:Stoc<=:Stoc<uotes==:etuote/esult=

:etuote/esponse=

:soap9CodD=

:soap9Envelope=

omo no e*ercício da sessão anterior, o miolo- da resposta vem dentro de um &$6$, logo, ) um

te*to# Gocê precisa transformá;lo em Y+2 para poder obter todas as propriedades#

Achou moleRaEntão fa%a para O a%>es9

• +S069 +icrosoftA

Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência

Documents

Transcript of Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência