Upload
mihai-corlan
View
3.202
Download
0
Embed Size (px)
DESCRIPTION
The presentation I did at MMT30 Cologne/Germany
Citation preview
PhoneGap / Cordova HTML5 Apps on all Major Platforms
Felix Rieseberg Developer Evangelist, Microso! Mihai Corlan Developer Evangelist, Adobe
About Us
Felix Rieseberg
§ Microso! Developer Evangelist
§ h"p://felixrieseberg.com
§ h"p://twi"er.com/felixrieseberg
§ felix.rieseberg@microso!.com
Mihai Corlan
§ Adobe Web Developer Evangelist
§ Blog: h"p://corlan.org
§ Twi"er: mcorlan
§ Email: [email protected]
2
Let’s talk Mobile Development
3
4
Let’s talk HTML5
Bridging the Gap
5
§ 6
Cordova summarized so far
7
Develop once, deploy everywhere.
Chromeless browser WebApp & API Bridge Native Package
Cordova supports 7 platforms
Cordova Compatibility
Demo
How does Cordova work?
Cordova App Mobile Device
Cordova Native Engine
Cordova JavaScript Engine
Web View Renders the app UI
Access to native mobile features Your Code
HTML/JavaScript/CSS/Images/ Frameworks/Libraries
Cordova Plug-ins
§ h"p://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins
§ Examples of plugins: h"ps://github.com/purplecabbage/phonegap-plugins
§ Extend the built-in functionality with custom plug-ins
§ Delegate heavyweight data processing to native code
§ Create background services
Building Cordova Apps
Build your Cordova 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
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 (I am talking about SVG)
Creating the native installers
#ere are 2 different methods to build the native installers for your PhoneGap app:
§ Using the target platform tool chain
§ Using PhoneGap Build – a cloud service
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
Using PhoneGap Build
§ 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
Resources
§ Source: github.com/callback
§ Docs: docs.phonegap.com
§ Wiki: wiki.phonegap.com
§ PhoneGap Build: build.phonegap.com
§ Plugins: github.com/purplecabbage/phonegap-plugins
§ Support: groups.google.com/group/phonegap
§ IRC: irc.freenode.net #phonegap
§ Apps: phonegap.com/apps
§ Bugs: issues.apache.org/jira/browse/CB
#ank You!
Question & Answers Time!
Mihai Corlan
http://corlan.org
h"p://twi"er.com/mcorlan
h"p://github.com/mcorlan
Felix Rieseberg
http://felixrieseberg.com
h"p://twi"er.com/felixrieseberg
felix.rieseberg@microso!.com