This document discusses hybrid mobile app development using HTML5 and PhoneGap/Cordova. It provides an overview of the capabilities and limitations of HTML5 web apps, and how hybrid apps address this by allowing developers to create apps using web technologies that have access to device hardware and features. It also outlines the PhoneGap/Cordova framework and tools, and provides code examples for using the accelerometer and local storage in hybrid apps.

1. DESENVOLVIMENTO APPSHÍBRIDOSPARA
DISPOSITIVOSMÓVEISCOM
Jomar Silva - Community Manager

2. AGENDA
Alguns números sobre o HTML5
Limitações de aplicativos Web HTML5
O que é PhoneGapCordova ?
API e Build Service do PhoneGap
Contribuições da Intel ao Cordova
O que é o Intel
®
HTML5 Development Environment
Dicas importantes
Ferramentas adicionais
Demos de Apps híbridos em HTML5
A Intel e o HTML5

3. NAVEGADORESCOMPATÍVEISCOM HTML5EM
HANDSETS
ESPERA-SE QUE HANDSETS COM NAVEGADORES COMPATÍVEIS COM
HTML5 ALCANCEM 85% EM 2016

4. INTERESSESDOSDESENVOLVEDORESEM HTML5
UMA PESQUISA JUNTO A DESENVOLVEDORES MOSTRA QUE 2/3
ESTÃO INTERESSADOS EM CRIAR WEB APPS EM HTML5

5. EQUIPAMENTOSCOM ACESSO ÀINTERNETVS.
PCS
EQUIPAMENTOS COM ACESSO À INTERNET IRÃO ULTRAPASSAR OS
PCS EM 2013

6. LIMITAÇÕESDE APLICAÇÕESWEBEM HTML5
Aplicações Web em HTML5 possuem algumas limitações:
Não tem acesso completo ao hardware via API HTML5
Não podem acessar diretamente o SO
Problemas na implementação entre os navegadores
APLICAÇÕES WEB EM HTML5 POSSUEM LACUNAS

7. HTML5WEB+NATIVE =HYBRID
Apps Web permitem ao
desenvolvedor escrever
uma vez e implantar em
todos os lugares, mas não
têm acesso a recursos
nativos dos dispositivos
Apps nativos têm acesso aos
recursos nativos do
dispositivo, mas exigem que os
desenvolvedores mantenham
bases de código distintas para
diferentes plataformas
APPS HÍBRIDOS PREENCHEM A LACUNA DAS APLICAÇÕES HTML5

8. O QUE É PHONEGAP(CORDOVA)
Framework para desenvolvimento móvel open-source,
multiplataforma de apps híbridos.
UI com HTML5 & CSS3
Lógica com JavasScript
PhoneGap para interagir com recursos do dispositivo
Distribua para múltiplas plataformas
PHONEGAP É UMA PONTE ENTRE APLICAÇÕES WEB E DISPOSITIVOS
MÓVEIS.

9. O QUE É PHONEGAP(CORDOVA)
UMA ÚNICA BASE DE CÓDIGO SUPORTA MÚLTIPLAS PLATAFORMAS
E DISPOSITIVOS.

10. HISTÓRIADO PHONEGAP
PhoneGap é um projeto 100% open source.
Foi desenvolvido pela Nitobi.
Nitobi foi comprada pela Adobe.
PhoneGap foi doado para a Apache Software Foundation
pela Adobe e foi chamado de Apache Callback.
Apache Callback era muito genérico, por isso foi renomeado
para Cordova.
A marca PhoneGap continua propriedade da Adobe.
PhoneGap é uma distribuição do Cordova.
PHONEGAP É AGORA CHAMADO APACHE CORDOVA

11. PHONEGAP(CORDOVA)API
ATUALMENTE, PHONEGAP SUPORTA 7 SOS E PROVÊ ACESSO A 10
RECURSOS NATIVOS DE DISPOSITIVOS MÓVEIS.

12. PHONEGAPBUILDSERVICE
O Phone Gap Build service é um serviço pago da Adobe.
Cria o app uma única vez usando HTML, CSS or JavaScript*
Compile remotamente usando o PhoneGap Build service
Obtenha Apps prontos para as App-stores para Apple* iOS,
Google Android*, Palm*, Symbian, BlackBerry* e mais

13. CONTRIBUIÇÕESDAINTELAO CORDOVA
A Intel está contribuindo para suporte ao Tizen* pela
PhoneGap API
A Intel está trabalhando com a Adobe para prover suporte
ao Tizen* no PhoneGap Build

14. INTEL
®
HTML5DEVELOPMENTENVIRONMENT
Framework para desenvolvimento móvel open-source,
multiplataforma de apps híbridos.
App Dev Center - Comece a criar seus aplicativos html &
PhoneGap na nuvem
Intel
®
XDK - Kit de desenvolvimento em plataforma cruzada

15. INTEL
®
XDK-KITDE DESENVOLVIMENTO EM
PLATAFORMACRUZADA
iOS, Android, Windows 8, Google Play Store, Amazon App
Store, Mozilla App Store, Facebook App Center e para a loja
do Google Chrome.
App Framework (anteriormente conhecido como jqMobi)
- A biblioteca JS definitiva para o desenvolvimento de
aplicativos em HTML5
App Game Interfaces - Física e Canvas acelerados e som
multi-canais.
App Starter - Um assistente para início rápido do
trabalho.

16. HTTP://SOFTWARE.INTEL.COM/PT-BR/HTML5

17. APPDEVCENTER

18. INTEL
®
XDK

19. DICASSOBRE O PHONEGAPE APPMOBI
Função de inicialização "padrão":
appMobi:
PhoneGap:
onDeviceReady
document.addEventListener("appMobi.device.ready",onDeviceReady,false)
document.addEventListener("deviceready", onDeviceReady, false)

20. DICASOBRE O INTELXDK
Acesso ao XDK:
http://localhost:58888/_emulator/_ide/index.html

21. O CAMINHO DASPEDRAS
Can I use - http://caniuse.com/

22. O CAMINHO DASPEDRAS
Mobile HTML5 - http://mobilehtml5.org/

23. O CAMINHO DASPEDRAS
HTML5 & CSS3 READINESS - http://html5readiness.com/

24. HTML5PLAYGROUND
http://toolbox-software.intel.com/

25. APPPORTER TOOLBETA(WINDOWS8*)
http://software.intel.com/pt-br/html5/

26. ANDROIDHAXM
Hardware Accelerated eXecution Manager

27. BEACONMOUNTAIN
Intel Tools: Third-Party Tools:
Intel
®
Hardware Accelerated
Execution Manager
Intel
®
Graphics Performance
Analyzers System Analyzer
Intel
®
Integrated
Performance Primitives
Preview
Intel
®
Threaded Building
Blocks
Intel
®
Software Manager
Google Android SDK
(ADT Bundle)
Android NDK
Eclipse Integrated
Development
Environment
Android Design
Cygwin* (for Windows
operating systems)
Beacon Mountain

28. TALKISCHEAP,SHOW ME THE CODE !

29. EXEMPLO:HTML5WEBSTORAGE
O HTML5 possui dois novos objetos para o armazenamento de
dados no lado do cliente:
localStorage – conteúdo persistente
sessionStorage – conteúdo temporário
A estrutura básica é um par de chave/valor (strings)
Mais fácil de usar do que cookies
Cookies são ótimos com café, mas terríveis de se gerenciar
em uma aplicação web !

30. EXEMPLO:HTML5WEBSTORAGE
Pergunta comum que milhares de brasileiros se fazem cada vez
que entram em um posto de gasolina:
“Completo com Gasolina ou Etanol?”
A resposta depende do:
Consumo do seu carro com gasolina e etanol
O preço “do dia” da gasolina e do etanol
MAS O HTML5 PODE ME AJUDAR COM ISSO ???

31. EXEMPLO:HTML5WEBSTORAGE
MENOS DE 50 LINHAS DE CÓDIGO PARA IMPLEMENTAR !

32. EXEMPLO:HTML5WEBSTORAGE

33. EXEMPLO:HTML5WEBSTORAGE

34. EXEMPLO:HTML5WEBSTORAGE

35. EXEMPLO:HTML5WEBSTORAGE

36. O ACELERÔMETRO NO PHONEGAP
Captura a movimentação do dispositivo nos eixos x, y, e z.
É um sensor de movimento que detecta a alteração (o delta)
de movimento relativo a orientação atual do dispositivo.
Nos fornece quatro informações:
x: Aceleração no eixo X (m/s2) (Número)
y: Aceleração no eixo Y (m/s2) (Número)
z: Aceleração no eixo Z (m/s2) (Número)
timestamp: timestamp de criação (ms) (DOMTimeStamp)
COM O DISPOSITIVO EM UMA MESA, COM A TELA PARA CIMA, A
LEITURA DEVE SER PRÓXIMA A X=0, Y=0, Z=9.8

37. ACELERÔMETRO NO PHONEGAP:O BÁSICO

38. ACELERÔMETRO NO PHONEGAP:O BÁSICO

39. ACELERÔMETRO NO PHONEGAP:O BÁSICO

40. ACELERÔMETRO NO PHONEGAP:O PSICODÉLICO

41. ACELERÔMETRO NO PHONEGAP:O PSICODÉLICO

42. ACELERÔMETRO NO PHONEGAP:O SENSACIONAL!

43. AINTEL
®
E O HTML5
AJUDANDOOS DESENVOLVEDORES DESOFTWAREACRIAREDISTRIBUIREXPERIÊNCIAS INCRÍVEIS
CROSS-PLATFORM,AALCANÇARMAIS CONSUMIDORES EAOTIMIZARCUSTOS ETIME-TO-MARKET

44. AINTEL
®
E O HTML5

45. AINTEL
®
E O HTML5

46. ESPAÇO DO DESENVOLVEDOR INTEL
®
Um programa global que conecta os desenvolvedores com a
Intel em tudo que se relaciona com a área de software - do
desenvolvimento à distribuição:
Recursos para o desenvolvedor
Recursos para a empresa
Comunidade envolvida
HTTP://SOFTWARE.INTEL.COM/PT-BR

47. OBRIGADO !
TWITTER/FACEBOOK -HOMEMBIT
FACEBOOK -INTELSWBRASIL
SOFTWARE.INTEL.COM/PT-BR/HTML5

48. LEGAL DISCLAIMER 1/2
INFORMATION IN THISDOCUMENT ISPROVIDED IN CONNECTION WITH INTEL PRODUCTS. NO
LICENSE, EXPRESSOR IMPLIED, BY ESTOPPEL OR OTHERWISE, TO ANY INTELLECTUAL
PROPERTY RIGHTSISGRANTED BY THISDOCUMENT. EXCEPT ASPROVIDED IN INTEL'STERMS
AND CONDITIONSOF SALE FOR SUCH PRODUCTS, INTEL ASSUMESNO LIABILITY WHATSOEVER
AND INTEL DISCLAIMSANY EXPRESSOR IMPLIED WARRANTY, RELATING TO SALE AND/OR USE
OF INTEL PRODUCTSINCLUDING LIABILITY OR WARRANTIESRELATING TO FITNESSFOR A
PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT
OR OTHER INTELLECTUAL PROPERTY RIGHT.
A "Mission Critical Application" isany application in which failureof theIntel Productcould result,
directly or indirectly, in personal injury or death. SHOULD YOU PURCHASE OR USE INTEL'S
PRODUCTSFOR ANY SUCH MISSION CRITICAL APPLICATION, YOU SHALL INDEMNIFY AND
HOLD INTEL AND ITSSUBSIDIARIES, SUBCONTRACTORSAND AFFILIATES, AND THE
DIRECTORS, OFFICERS, AND EMPLOYEESOF EACH, HARMLESSAGAINST ALL CLAIMSCOSTS,
AMAGES, AND EXPENSESAND REASONABLE ATTORNEYS' FEESARISING OUT OF, DIRECTLY
OR INDIRECTLY, ANY CLAIM OF PRODUCT LIABILITY, PERSONAL INJURY, OR DEATH
ARISING IN ANY WAY OUT OF SUCH MISSION CRITICAL APPLICATION, WHETHER OR NOT
INTEL OR ITSSUBCONTRACTOR WASNEGLIGENT IN THE DESIGN, MANUFACTURE, OR
WARNING OF THE INTEL PRODUCT OR ANY OF ITSPARTS.
Intel may makechangesto specificationsand productdescriptionsatany time, withoutnotice.
Designersmustnotrely on theabsenceor characteristicsof any featuresor instructionsmarked
"reserved" or "undefined". Intel reservesthesefor futuredefinition and shall haveno responsibility
whatsoever for conflictsor incompatibilitiesarising from futurechangesto them. Theinformation
hereissubjectto changewithoutnotice. Do notfinalizea design with thisinformation.
Theproductsdescribed in thisdocumentmay contain design defectsor errorsknown aserrata
which may causetheproductto deviatefrom published specifications. Currentcharacterized
errata areavailableon request.

49. LEGAL DISCLAIMER 2/2
Intel processor numbersarenota measureof performance. Processor numbersdifferentiatefeatures
within each processor family, notacrossdifferentprocessor families. Go to:
http://www.intel.com/products/processor_number.
Contactyour local Intel salesofficeor your distributor to obtain thelatestspecificationsand before
placing your productorder.
Copiesof documentswhich havean order number and arereferenced in thisdocument, or other Intel
literature, may beobtained by calling 1-800-548-4725, or go to:
http://www.intel.com/design/literature.htm
Intel, Sponsorsof Tomorrow and theIntel logo aretrademarksof Intel Corporation in theUnited
Statesand other countries.
*Other namesand brandsmay beclaimed astheproperty of others.
Copyright©2012 Intel Corporation.

50. RISK FACTORS 1/2
Theabovestatementsand any othersin thisdocumentthatrefer to plansand expectationsfor the
second quarter, theyear and thefutureareforward-looking statementsthatinvolvea number of risks
and uncertainties. Wordssuch as“anticipates,”“expects,”“intends,”“plans,”“believes,”“seeks,”
“estimates,”“may,”“will,”“should”and their variationsidentify forward-looking statements. Statements
thatrefer to or arebased on projections, uncertain eventsor assumptionsalso identify forward-looking
statements. Many factorscould affectIntel’sactual results, and variancesfrom Intel’scurrent
expectationsregarding such factorscould causeactual resultsto differ materially from thoseexpressed
in theseforward-looking statements. Intel presently considersthefollowing to betheimportantfactors
thatcould causeactual resultsto differ materially from thecompany’sexpectations. Demand could be
differentfrom Intel'sexpectationsdueto factorsincluding changesin businessand economic
conditions, including supply constraintsand other disruptionsaffecting customers; customer
acceptanceof Intel’sand competitors’ products; changesin customer order patternsincluding order
cancellations; and changesin thelevel of inventory atcustomers. Uncertainty in global economic and
financial conditionsposesa riskthatconsumersand businessesmay defer purchasesin responseto
negativefinancial events, which could negatively affectproductdemand and other related matters. Intel
operatesin intensely competitiveindustriesthatarecharacterized by a high percentageof coststhatare
fixed or difficultto reducein theshortterm and productdemand thatishighly variableand difficultto
forecast. Revenueand thegrossmargin percentageareaffected by thetiming of Intel product
introductionsand thedemand for and marketacceptanceof Intel'sproducts; actionstaken by Intel's
competitors, including productofferingsand introductions, marketing programsand pricing pressures
and Intel’sresponseto such actions; and Intel’sability to respond quickly to technological developments
and to incorporatenew featuresinto itsproducts. Intel isin theprocessof transitioning to itsnext
generation of productson 22nm processtechnology, and therecould beexecution and timing issues
associated with thesechanges, including productsdefectsand errata and lower than anticipated
manufacturing yields.

51. RISK FACTORS 2/2
Thegrossmargin percentagecould vary significantly from expectationsbased on capacity utilization;
variationsin inventory valuation, including variationsrelated to thetiming of qualifying productsfor
sale; changesin revenuelevels; segmentproductmix; thetiming and execution of themanufacturing
ramp and associated costs; start-up costs; excessor obsoleteinventory; changesin unitcosts; defectsor
disruptionsin thesupply of materialsor resources; productmanufacturing quality/yields; and
impairmentsof long-lived assets, including manufacturing, assembly/testand intangibleassets. The
majority of Intel’snon-marketableequity investmentportfolio balanceisconcentrated in companiesin
theflash memory marketsegment, and declinesin thismarketsegmentor changesin management’s
planswith respectto Intel’sinvestmentsin thismarketsegmentcould resultin significantimpairment
charges, impacting restructuring chargesaswell asgains/losseson equity investmentsand interestand
other. Intel'sresultscould beaffected by adverseeconomic, social, political and physical/infrastructure
conditionsin countrieswhereIntel, itscustomersor itssuppliersoperate, including military conflictand
other security risks, natural disasters, infrastructuredisruptions, health concernsand fluctuationsin
currency exchangerates. Expenses, particularly certain marketing and compensation expenses, aswell
asrestructuring and assetimpairmentcharges, vary depending on thelevel of demand for Intel's
productsand thelevel of revenueand profits. Intel’sresultscould beaffected by thetiming of closing of
acquisitionsand divestitures. Intel'sresultscould beaffected by adverseeffectsassociated with product
defectsand errata (deviationsfrom published specifications), and by litigation or regulatory matters
involving intellectual property, stockholder, consumer, antitrust, disclosureand other issues, such as
thelitigation and regulatory mattersdescribed in Intel'sSECreports. An unfavorableruling could
includemonetary damagesor an injunction prohibiting Intel from manufacturing or selling oneor more
products, precluding particular businesspractices, impacting Intel’sability to design itsproducts, or
requiring other remediessuch ascompulsory licensing of intellectual property. A detailed discussion of
theseand other factorsthatcould affectIntel’sresultsisincluded in Intel’sSECfilings, including the
reporton Form 10-K for theyear ended Dec. 31, 2011.