SlideShare ist ein Scribd-Unternehmen logo
1 von 19
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 outros

Write once, run everywhere (Java, alguém?)
Tecnologias web padronizadas (W3C approved

#TechDay #PhoneGap #2013

)
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
PhoneGap

?

#TechDay #PhoneGap #2013

Apache
Cordova
Contribuidores





Adobe
Microsoft – Windows Phone (estimula uso do html5)
RIM – BlackBerry (WebWorks) / Ripple Emulator
IBM

#TechDay #PhoneGap #2013
Quem mais usa PhoneGap?






Facebook Mobile SDK
IBM Worklight Platform
Oracle ADF Mobile
SAP
Icenium

Apps?
http://phonegap.com/app/

#TechDay #PhoneGap #2013
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ódigo
HTML/JavaScript/CSS/Images/
Frameworks/Libraries

Web View
Renders the app UI

#TechDay #PhoneGap #2013
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
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 cloud

#TechDay #PhoneGap #2013
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
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.acheibr.apps
https://play.google.com/store/apps/details?id=com.pandoapps.fiia

#TechDay #PhoneGap #2013
Dúvidas e sugestões?

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

#TechDay #PhoneGap #2013

Weitere ähnliche Inhalte

Was ist angesagt?

Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchRafael Neri
 
Phonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emuladorPhonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emuladorAfonso Fernandes
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapThiago Colares
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicFelipe Blini
 
instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1Afonso Fernandes
 
SESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidSESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidRafael Sakurai
 
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao PhonegapLoiane Groner
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Wennder Santos
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Wennder Santos
 
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkMinicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkCristian Dean
 
Desmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoDesmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoWilliam Ribeiro da Silva
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicFelipe Renan Vieira
 
Desmistificando o mobile híbrido com phonegap
Desmistificando o mobile híbrido com phonegapDesmistificando o mobile híbrido com phonegap
Desmistificando o mobile híbrido com phonegapLeonardo Marinho
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + CordovaGustavo Costa
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileWaldyr Felix
 

Was ist angesagt? (20)

Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha Touch
 
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
 
Phonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emuladorPhonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emulador
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
 
instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1
 
SESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidSESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao Android
 
Firefox OS
Firefox OSFirefox OS
Firefox OS
 
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
 
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkMinicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
 
PhoneGap
PhoneGapPhoneGap
PhoneGap
 
Introdução intel XDK
Introdução intel XDKIntrodução intel XDK
Introdução intel XDK
 
Desmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoDesmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbrido
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com Ionic
 
Desmistificando o mobile híbrido com phonegap
Desmistificando o mobile híbrido com phonegapDesmistificando o mobile híbrido com phonegap
Desmistificando o mobile híbrido com phonegap
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
 
React Native
React NativeReact Native
React Native
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento Mobile
 

Ähnlich wie PhoneGap e Apache Cordova para desenvolvimento mobile

Imersão hybrid apps
Imersão   hybrid appsImersão   hybrid apps
Imersão hybrid appsAdalto Junior
 
Apps Híbridos e novas promessas Mobile.
Apps Híbridos e novas promessas Mobile.Apps Híbridos e novas promessas Mobile.
Apps Híbridos e novas promessas Mobile.Tiago Braga
 
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Leonardo Melo Santos
 
Introdução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapIntrodução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapDiogo Souza Machado
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaDiego Cavalca
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionicJoelmir Ribacki
 
Adobe Phonegap
Adobe PhonegapAdobe Phonegap
Adobe Phonegapwlsilva
 
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5Loiane Groner
 
PDC - Engenharia - Phonegap
PDC - Engenharia - PhonegapPDC - Engenharia - Phonegap
PDC - Engenharia - Phonegapslides_teltools
 
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013javamanrj
 
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesConstruindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesWilliam S. Rodriguez
 
Hands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JFHands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JFGiordano Bruno Vieira
 
Mobile Apps Cross-Platform
Mobile Apps Cross-PlatformMobile Apps Cross-Platform
Mobile Apps Cross-PlatformAdriel Café
 
Aplicações Móveis Híbridas
Aplicações Móveis HíbridasAplicações Móveis Híbridas
Aplicações Móveis HíbridasThomas Kanzig
 
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Criciúma Dev
 
Introdução ao desenvolvimento web - 2 - iDez 2010
Introdução ao desenvolvimento web - 2 - iDez 2010Introdução ao desenvolvimento web - 2 - iDez 2010
Introdução ao desenvolvimento web - 2 - iDez 2010Maurício Linhares
 

Ähnlich wie PhoneGap e Apache Cordova para desenvolvimento mobile (20)

Imersão hybrid apps
Imersão   hybrid appsImersão   hybrid apps
Imersão hybrid apps
 
Apps Híbridos e novas promessas Mobile.
Apps Híbridos e novas promessas Mobile.Apps Híbridos e novas promessas Mobile.
Apps Híbridos e novas promessas Mobile.
 
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
 
Introdução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapIntrodução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com Phonegap
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionic
 
Adobe Phonegap
Adobe PhonegapAdobe Phonegap
Adobe Phonegap
 
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
 
Desenvolvimento Mobile Web e o PHP
Desenvolvimento Mobile Web e o PHPDesenvolvimento Mobile Web e o PHP
Desenvolvimento Mobile Web e o PHP
 
PDC - Engenharia - Phonegap
PDC - Engenharia - PhonegapPDC - Engenharia - Phonegap
PDC - Engenharia - Phonegap
 
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
 
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesConstruindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
 
Hands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JFHands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JF
 
Flex Mobile
Flex MobileFlex Mobile
Flex Mobile
 
Workshop - Cordova e Ionic
Workshop - Cordova e IonicWorkshop - Cordova e Ionic
Workshop - Cordova e Ionic
 
Mobile Apps Cross-Platform
Mobile Apps Cross-PlatformMobile Apps Cross-Platform
Mobile Apps Cross-Platform
 
A vez do mobile - Dev in Bahia #3
A vez do mobile - Dev in Bahia #3A vez do mobile - Dev in Bahia #3
A vez do mobile - Dev in Bahia #3
 
Aplicações Móveis Híbridas
Aplicações Móveis HíbridasAplicações Móveis Híbridas
Aplicações Móveis Híbridas
 
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
 
Introdução ao desenvolvimento web - 2 - iDez 2010
Introdução ao desenvolvimento web - 2 - iDez 2010Introdução ao desenvolvimento web - 2 - iDez 2010
Introdução ao desenvolvimento web - 2 - iDez 2010
 

PhoneGap e Apache Cordova para desenvolvimento mobile

Hinweis der Redaktion

  1. Sorry guys. Thereismoreme in themenu :DWhois a mobile developer?Who knowswhatPhoneGapis?Who hascreated a PhoneGapapplication?
  2. PhoneGap answers another issue many companies / customers / developers have: the ability of distributing web apps through application stores.
  3. 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.
  4. 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.
  5. 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.
  6. 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
  7. 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.
  8. Next let me show you some PhoneGap applications to see for yourself what is possible to build using this platform.WikipediaUntappdPhoneGap API2011 Census ?
  9. 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)
  10. 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
  11. PhoneGap Build is
  12. 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.