PhoneGap: Building Mobile Applications with HTML/JS

Developing with Phonegap Building mobile applications with HTML/JSMonday, January 23, 2012

Ryan Stewart Web Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart Based in Seattle Things I Like: Beer Mountaineering/Hiking/Backpacking Geolocation/Mapping stuffMonday, January 23, 2012

Agenda • Why PhoneGap? • Who is PhoneGap...really? • Getting Started with PhoneGap • PhoneGap APIs • Extending PhoneGap • Final ConsiderationsMonday, January 23, 2012

Why PhoneGap?Monday, January 23, 2012

The moral reason: The web is awesomeMonday, January 23, 2012

The realistic reason Cross platform applications with HTML/JS will be faster and easierMonday, January 23, 2012

What is PhoneGap?Monday, January 23, 2012

Monday, January 23, 2012

Your CodeMonday, January 23, 2012

Your Code Native Web ViewMonday, January 23, 2012

Your Code Native Web View Native APIsMonday, January 23, 2012

Your Code Native Web View Native APIs Native App - .apk, .ipa, etcMonday, January 23, 2012

PhoneGap uses the native browser on the device to render the HTML/CSS/JS Keep in mind that can affect the experience It also keeps apps nice and smallMonday, January 23, 2012

PhoneGap uses the native project format for each platform. Open, emulate, and test from within the native development environment!Monday, January 23, 2012

Because it’s using the native projects it’s fully extendable.Monday, January 23, 2012

PhoneGap provides a JavaScript Library that reaches out into the native APIs. That means anything the device supports is doable.Monday, January 23, 2012

PhoneGap is completely open source and has been submitted to the Apache Foundation.Monday, January 23, 2012

It will be known as Cordova when it gets approved http:// incubator.apache. org/callback/Monday, January 23, 2012

The entire project is available on Github https:// github.com/ cordovaMonday, January 23, 2012

Getting StartedMonday, January 23, 2012

There are multiple ways to “start” with PhoneGap. The project includes command line tools, IDE plugins, and Dreamweaver 5.5 ships with PhoneGap support.Monday, January 23, 2012

bin/create ~/Sites/phonegap_preso/demo DemoMonday, January 23, 2012

Quick tour through the project structureMonday, January 23, 2012

Demo: Hello WorldMonday, January 23, 2012

Quick segue: mobile web apps versus mobile applicationsMonday, January 23, 2012

Very important to keep in mind that we’re building a mobile app, not a mobile web app. Let’s look at jQuery MobileMonday, January 23, 2012

You can use ANY framework you want, but try to design for an app. (I kind of like Bootstrap)Monday, January 23, 2012

Diving into the PhoneGap APIsMonday, January 23, 2012

- Accelerometer - Camera - Capture Out of the box, - Compass - Connection PhoneGap - Contacts provides support for a - - Device Events number of basic device - - File Geolocation APIs - Media - Network - Notification - StorageMonday, January 23, 2012

Camera API exampleMonday, January 23, 2012

Demo: Using the device APIsMonday, January 23, 2012

DebuggingMonday, January 23, 2012

It’s all just HTML/JS, so you can use your browser! Take advantage of Chrome Developer tools/Firebug to test your app’s UI.Monday, January 23, 2012

But what about Device APIs? Because we’re in the web view, there is no way to do line-by-line debugging.Monday, January 23, 2012

Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.Monday, January 23, 2012

Weinre can be conﬁgured as a server (there is a Mac application) and uses the developer tools from Chrome to provide hooks into the mobile app.Monday, January 23, 2012

Drop in a <script> tag on a remote server and Weinre will let you use the Developer Tools on your apps. Requires internet access, so keep that in mind.Monday, January 23, 2012

Demo: Debugging with WeinreMonday, January 23, 2012

But, a much easier way: http:// debug.phonegap.com/Monday, January 23, 2012

Demo: debug.phonegapMonday, January 23, 2012

Extending PhonegapMonday, January 23, 2012

For added functionality PhoneGap provides a plug-in mechanism. Includes OS-speciﬁc code/libraries and the JS to use it in PhoneGap Some of the helpful ones: PayPal, Facebook, Push NotiﬁcationMonday, January 23, 2012

Plug-is are one of the areas that show off the power of a hybrid web/ native approach. There are a ton of native-centric SDKs (like Facebook) that provide a great native experience. We can use those!Monday, January 23, 2012

Available at https://github.com/phonegap/phonegap-pluginsMonday, January 23, 2012

This app can just use the plugins.barcodeScanner.scan method to call out to some native code that reads and parses a barcode.Monday, January 23, 2012

Demo: PhoneGap PluginsMonday, January 23, 2012

Final ConsiderationsMonday, January 23, 2012

Remember that we’re on different platformsMonday, January 23, 2012

Versus http://developer.apple.com/library/IOs/#documentation/ UserExperience/Conceptual/MobileHIG/UIElementGuidelines/ http://developer.android.com/design/index.html UIElementGuidelines.htmlMonday, January 23, 2012

Some important performance implications: Currently only iOS hardware accelerates CSS3 transitions.Monday, January 23, 2012

Couple of tips: Always test features ﬁrst (if !supported) For UI-speciﬁcs, you can use the device class to get device infoMonday, January 23, 2012

Demo: PhoneGap in ActionMonday, January 23, 2012

One more thing. build.phonegap.comMonday, January 23, 2012

The Problem: You’re building a cross-platform app, but dealing with a lot of native projectsMonday, January 23, 2012

The Solution:Monday, January 23, 2012

Monday, January 23, 2012

Build includes git support so you can use git and host projects on PhoneGap or build a project from Github.Monday, January 23, 2012

Build lets you deﬁne individuals as tester/ developer which changes permissions on the project accordingly.Monday, January 23, 2012

You can use Build as your testing distribution as well by making the download pages public.Monday, January 23, 2012

Will (soon) support popular plugins so that you can build plugins right into the build process.Monday, January 23, 2012

Supports multiple PhoneGap versions so you can target a wide range of devices.Monday, January 23, 2012

Demo: PhoneGap BuildMonday, January 23, 2012

Recap • Why is PhoneGap? • Who is PhoneGap...really? • Getting Started with PhoneGap • PhoneGap APIs • Extending PhoneGap • Final ConsiderationsMonday, January 23, 2012

also, Beer: Q&A Ryan Stewart Web Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartMonday, January 23, 2012

http://blog.digitalbackcountry.com	5158
http://a0.twimg.com	20
http://www.newsblur.com	8
http://www.hanrss.com	7
http://www.twylah.com	7
http://us-w1.rockmelt.com	6
http://webcache.googleusercontent.com	3
http://translate.googleusercontent.com	1
http://blog.digitalbackcountry.com&_=1330669933812 HTTP	1
http://wonder-tonic.com	1

PhoneGap: Building Mobile Applications with HTML/JS

by Ryan Stewart on Jan 16, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 5,212

Statistics

PhoneGap: Building Mobile Applications with HTML/JS — Presentation Transcript