Getting started with PhoneGap
-
Upload
mihai-corlan -
Category
Technology
-
view
3.687 -
download
0
Transcript of Getting started with PhoneGap
![Page 1: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/1.jpg)
Mihai Corlan Developer Evangelist / Adobe / @mcorlan
Ge!ing Started with PhoneGap
![Page 2: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/2.jpg)
Mobile Development
2
![Page 3: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/3.jpg)
3
![Page 4: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/4.jpg)
Bridging the Gap … PhoneGap
4
![Page 5: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/5.jpg)
PhoneGap
5
Cordova ?
![Page 6: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/6.jpg)
Why would you use PhoneGap?
§ Write once, run everywhere
§ Native Installers -> Application Stores
§ Use standard web technologies
![Page 7: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/7.jpg)
PhoneGap could be your best friend if
§ You want to target multiple mobile platforms
§ You know HTML/JavaScript/CSS
§ You already have a web site/web application. !us you can reuse parts of this (see Wikipedia)
![Page 8: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/8.jpg)
PhoneGap supports 7 platforms
![Page 9: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/9.jpg)
PhoneGap Device APIs
![Page 10: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/10.jpg)
Demo
![Page 11: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/11.jpg)
How does PhoneGap work?
PhoneGap App Mobile Device
PhoneGap Native Engine
PhoneGap JavaScript Engine
Web View Renders the app UI
Access to native mobile features Your Code
HTML/JavaScript/CSS/Images/ Frameworks/Libraries
![Page 12: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/12.jpg)
PhoneGap Plug-ins
§ h"p://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins
§ Examples of plugins: h"ps://github.com/phonegap/phonegap-plugins
§ Extend the built-in functionality with custom plug-ins
§ Delegate heavyweight data processing to native code
§ Create background services
![Page 13: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/13.jpg)
Building PhoneGap Apps
![Page 14: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/14.jpg)
Build your PhoneGap app as you’d build a regular web app
§ 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
![Page 15: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/15.jpg)
What can you use to build your app?
§ Remember your application will run on the device’s browser
§ You can use whatever JavaScript frameworks or libraries you like. Eg. jQuery, jQuery Mobile, Sencha, Backbone, Liquid, Mustache, Bootrstrap, and so on
§ Pay a"ention to performance (mobile vs. desktop)
§ Pay a"ention to mobile browser features or lack of them (SVG for example)
![Page 16: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/16.jpg)
Creating the native installers
!ere are 2 different methods:
§ Using the target platform tool chain
§ Using PhoneGap Build – a cloud service
![Page 17: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/17.jpg)
Using the platform native tool chain
§ Use the OS and tools each platform recommends:
§ iOS - h"p://phonegap.com/start#ios-x4
§ Android - h"p://phonegap.com/start#android
§ BlackBerry - h"p://phonegap.com/start#blackberry
§ Windows Phone - h"p://phonegap.com/start#wp
§ WebOS: h"p://phonegap.com/start#webos
§ Symbian: h"p://phonegap.com/start#symbian
![Page 18: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/18.jpg)
Using the PhoneGap Build – a Cloud Service
§ h"p://build.phonegap.com - a cloud service
§ Supports: iOS, Android, BlackBerry, WebOS, Windows Phone 7, and Symbian
§ Supports one plugin (ChildBrowser); but you can hack in support for other plugins
§ It is in beta and it is free; it will always be free for Open Source projects
§ You upload your $les (index.html, CSS, JS, images)
§ Or you provide a Git / SVN link
§ Support for debugging
![Page 19: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/19.jpg)
Resources
§ Source: github.com/callback
§ Docs: docs.phonegap.com
§ Wiki: wiki.phonegap.com
§ PhoneGap Build: build.phonegap.com
§ Plugins: github.com/phonegap/phonegap-plugins
§ Support: groups.google.com/group/phonegap
§ IRC: irc.freenode.net #phonegap
§ Apps: phonegap.com/apps
§ Bugs: issues.apache.org/jira/browse/CB
![Page 20: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/20.jpg)
PhoneGap Day Europe – Amsterdam September 14th
h"p://pgday.phonegap.com/eu2012/ 100 Euro early bird
![Page 21: Getting started with PhoneGap](https://reader033.fdocuments.net/reader033/viewer/2022052822/554d2a52b4c905ab268b4ee7/html5/thumbnails/21.jpg)
Questions & Answers!
!ank you! Mihai Corlan @mcorlan h"p://corlan.org h"p://github.com/mcorlan