PhoneGap / Apache Cordova

Cássio Nandi Citadin
#TechDay #PhoneGap #2013
Desenvolvimento Mobile

#TechDay #PhoneGap #2013
Por que usar PhoneGap?


Pacotes nativos -> Distribuível nas lojas/stores





.apk, .ipa, .cod, .ota, .ipk entre outr...
PhoneGap pode ser seu melhor amigo se:


Precisa alcançar várias plataformas (velocidade e economia)



Você sabe HTML/J...
PhoneGap

?

#TechDay #PhoneGap #2013

Apache
Cordova
Contribuidores





Adobe
Microsoft – Windows Phone (estimula uso do html5)
RIM – BlackBerry (WebWorks) / Ripple Emula...
Quem mais usa PhoneGap?






Facebook Mobile SDK
IBM Worklight Platform
Oracle ADF Mobile
SAP
Icenium

Apps?
http://...
Suporte a 7 plataformas (Firefox OS e Ubuntu a caminho)

#TechDay #PhoneGap #2013
How does PhoneGap work?
PhoneGap App

PhoneGap
JavaScript
Engine

Dispositivo

PhoneGap
Native
Engine

Acesso nativo

Códi...
Plug-ins do PhoneGap





Desde a versão 3
Criar seu próprio plugin
Delega processamento pesado para o código nativo
C...
Demo

#TechDay #PhoneGap #2013
O que pode ser usado para construir uma app?

#TechDay #PhoneGap #2013
Construir app como se estivesse trabalhando em projeto Web

#TechDay #PhoneGap #2013
Empacotando uma app
Dois métodos:
 Usando a ferramenta da plataforma em específico


Usando PhoneGap Build – um serviço ...
Usando PhoneGap Build






http://build.phonegap.com
Suporta: iOS, Android, BlackBerry, WebOS, Windows Phone 7 e
Symb...
Using the PhoneGap Build
Sugestão para teste: https://github.com/phonegap/phonegap-start.git

#TechDay #PhoneGap #2013
PhoneGap Emulate


http://emulate.phonegap.com

#TechDay #PhoneGap #2013
Apps novas
https://itunes.apple.com/us/app/acheibr/id721184010?ls=1&mt=8
https://play.google.com/store/apps/details?id=com...
Dúvidas e sugestões?

Contato
Linkedin/cassionandi
cassionandicitadin@gmail.com
FB/cassionandi

#TechDay #PhoneGap #2013
Upcoming SlideShare
Loading in …5
×

Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Techday 2013)

3,164 views

Published on

Apresentação sobre PhoneGap/Apache Cordova realizada no dia 09/11/2013 no Techday 2013, na Unisul em Tubarão.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,164
On SlideShare
0
From Embeds
0
Number of Embeds
311
Actions
Shares
0
Downloads
81
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Sorry guys. Thereismoreme in themenu :DWhois a mobile developer?Who knowswhatPhoneGapis?Who hascreated a PhoneGapapplication?
  • PhoneGap answers another issue many companies / customers / developers have: the ability of distributing web apps through application stores.
  • PhoneGap could be the default option for many application types especially if you want to target multiple platforms, you know web technologies, and you have an existing REST API that you could reuse with your PhoneGap app.
  • Atthispoint I shouldstopandquicklyexplainwhatistherelationbetweenPhoneGapand Apache Cordova.PhoneGap was developedby a smallcompanycalledNitobi. When Adobe boughtthiscompany last year, wereleasedthesourcecodeas an open sourceprojectunder Apache Foundation. Andthenameofthisproject was changedfromPhoneGaptoCordova. Ofcourse Adobe continuestobeoneofthemaincontributorstogetherwithothercompanieslike IBM, RIM, or Microsoft.Today PhoneGapisthenameofAdobe‘sCordovadistribution.
  • What platforms does PhoneGap support?It is the only open source framework that supports 7 platforms AFAIK. From iOS and Android to Windows Phone and BlackBerryHere is a list of built-in out of the box device APIs supported by PhoneGap. It supports accelerometer, all sort of notifications, storage, contacts and file APIs and so forth. Where you see an X the reason is that the device doesn’t have the capability most of times and not a PhoneGap issue. For example there is no accelerometer on on older iPhones.
  • So how does PhoneGap work? Most mobile platforms offer something called WebView – which is a chromless browser. A full screen browser without location bar, history buttons, without any UI.And using native code this WebView can be extended by exposing device APIs or capabilities to the JavaScript code that runs in this WebView.In this diagram you can see that there is the PhoneGap Native Engine that exposes the native capabilities through a PhoneGap JavaScript API to the application JavaScript. And the application UI is created with HTML/JavaScript/CSS and runs inside the WebViewWebView – chromless browser full screenNative Layer– PhoneGap native engine – PhoneGapJavaScrip APIApplication Files – HTML / JavaScript / CSS
  • You can write plugins in order to expose additional native features to JavaScript. A plugin has two parts: a native part that exposes the native feature and JavaScript part that provides the API that will be used by the developers who want to consume your plugin.
  • Next let me show you some PhoneGap applications to see for yourself what is possible to build using this platform.WikipediaUntappdPhoneGap API2011 Census ?
  • PhoneGap doesn’t provide any UI out of the box. This means that you are free to use whatever you want.You can use whatever JavaScript frameworks or libraries you like. Eg. jQuery, jQuery Mobile, Sencha, Backbone, Liquid, Mustache, Bootrstrap, and so onPay attention to performance (mobile vs. desktop)Pay attention to mobile browser features or lack of them (I am talking about SVG)
  • Most of the time you’ll be building your PhoneGap app the same way you build web apps.- Using your favorite editors (Eclipse, vim, Dreamweaver, Visual Studio)- Test and debug the app using your desktop browser- Test and debug the app using mobile simulators/emulators and the physical devices
  • PhoneGap Build is
  • The PhoneGap Emulator allows you to test your PhoneGap application from your desktop browser. PhoneGap's JavaScript APIs are avaialble using Ripple, so you can subscribe to deviceready and even stub responses for your custom plugins.
  • Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Techday 2013)

    1. 1. PhoneGap / Apache Cordova Cássio Nandi Citadin #TechDay #PhoneGap #2013
    2. 2. Desenvolvimento Mobile #TechDay #PhoneGap #2013
    3. 3. Por que usar PhoneGap?  Pacotes nativos -> Distribuível nas lojas/stores    .apk, .ipa, .cod, .ota, .ipk entre outros Write once, run everywhere (Java, alguém?) Tecnologias web padronizadas (W3C approved #TechDay #PhoneGap #2013 )
    4. 4. PhoneGap pode ser seu melhor amigo se:  Precisa alcançar várias plataformas (velocidade e economia)  Você sabe HTML/JavaScript/CSS Já tem uma web app e precisa adicionar funcionalidades nativas   Apps que exibem dados, integração com redes sociais, jogos simples  PhoneGap Legends no GitHub, blog do desenvolvedor ou video #TechDay #PhoneGap #2013
    5. 5. PhoneGap ? #TechDay #PhoneGap #2013 Apache Cordova
    6. 6. Contribuidores     Adobe Microsoft – Windows Phone (estimula uso do html5) RIM – BlackBerry (WebWorks) / Ripple Emulator IBM #TechDay #PhoneGap #2013
    7. 7. Quem mais usa PhoneGap?      Facebook Mobile SDK IBM Worklight Platform Oracle ADF Mobile SAP Icenium Apps? http://phonegap.com/app/ #TechDay #PhoneGap #2013
    8. 8. Suporte a 7 plataformas (Firefox OS e Ubuntu a caminho) #TechDay #PhoneGap #2013
    9. 9. How does PhoneGap work? PhoneGap App PhoneGap JavaScript Engine Dispositivo PhoneGap Native Engine Acesso nativo Código HTML/JavaScript/CSS/Images/ Frameworks/Libraries Web View Renders the app UI #TechDay #PhoneGap #2013
    10. 10. Plug-ins do PhoneGap     Desde a versão 3 Criar seu próprio plugin Delega processamento pesado para o código nativo Criar serviços de background #TechDay #PhoneGap #2013
    11. 11. Demo #TechDay #PhoneGap #2013
    12. 12. O que pode ser usado para construir uma app? #TechDay #PhoneGap #2013
    13. 13. Construir app como se estivesse trabalhando em projeto Web #TechDay #PhoneGap #2013
    14. 14. Empacotando uma app Dois métodos:  Usando a ferramenta da plataforma em específico  Usando PhoneGap Build – um serviço cloud #TechDay #PhoneGap #2013
    15. 15. Usando PhoneGap Build     http://build.phonegap.com Suporta: iOS, Android, BlackBerry, WebOS, Windows Phone 7 e Symbian Gratis para Open Source | Pago para empresas Link GitHub #TechDay #PhoneGap #2013
    16. 16. Using the PhoneGap Build Sugestão para teste: https://github.com/phonegap/phonegap-start.git #TechDay #PhoneGap #2013
    17. 17. PhoneGap Emulate  http://emulate.phonegap.com #TechDay #PhoneGap #2013
    18. 18. Apps novas https://itunes.apple.com/us/app/acheibr/id721184010?ls=1&mt=8 https://play.google.com/store/apps/details?id=com.acheibr.apps https://play.google.com/store/apps/details?id=com.pandoapps.fiia #TechDay #PhoneGap #2013
    19. 19. Dúvidas e sugestões? Contato Linkedin/cassionandi cassionandicitadin@gmail.com FB/cassionandi #TechDay #PhoneGap #2013

    ×