PhoneGap: Building Mobile Applications with HTML/JS

transcript

Developing with Phonegap

Building mobile applications with HTML/JS

Monday, January 23, 2012

Ryan StewartWeb Developer Evangelist, Adobe

@ryanstewart

blog.digitalbackcountry.com

ryan@adobe.com

github.com/ryanstewart

Based in SeattleThings I Like:

BeerMountaineering/Hiking/BackpackingGeolocation/Mapping stuff

Agenda

• Why PhoneGap?

• Who is PhoneGap...really?

• Getting Started with PhoneGap

• PhoneGap APIs

• Extending PhoneGap

• Final Considerations

Why PhoneGap?

The moral reason:The web is awesome

The realistic reasonCross platform applications with HTML/JS will be faster

and easier

What is PhoneGap?

Your Code

Native Web View

Your Code

Native APIs

Native Web View

Your Code

Native App - .apk, .ipa, etc

Native APIs

Native Web View

Your Code

PhoneGap uses the native browser on the device to render the HTML/CSS/JS

Keep in mind that can affect the experienceIt also keeps apps nice and small

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

Because it’s using the native projects it’s fully extendable.

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

PhoneGap is completely open source and has been submitted to the Apache Foundation.

It will be known as Cordova when it gets approved

http://incubator.apache.org/callback/

The entire project is available on Githubhttps://github.com/cordova

Getting Started

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

bin/create ~/Sites/phonegap_preso/demo Demo

Quick tour through the project structure

Demo:Hello World

Quick segue: mobile web apps versus mobile

applications

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

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

Diving into the PhoneGap APIs

Out of the box, PhoneGap provides support for a number of basic device APIs

- Accelerometer- Camera- Capture- Compass- Connection- Contacts- Device- Events- File- Geolocation- Media- Network- Notification- Storage

Camera API example

Demo:Using the device APIs

Debugging

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.

But what about Device APIs?Because we’re in the web view, there is no

way to do line-by-line debugging.

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

Weinre can be configured as a server (there is a Mac application) and uses the developer tools from Chrome to provide hooks into the mobile app.

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.

Demo:Debugging with Weinre

But, a much easier way:http://debug.phonegap.com/

Demo:debug.phonegap

Extending Phonegap

For added functionality PhoneGap provides a plug-in mechanism.Includes OS-specific code/libraries and the JS to use it in PhoneGapSome of the helpful ones: PayPal, Facebook, Push Notification

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!

Available at https://github.com/phonegap/phonegap-plugins

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

Demo:PhoneGap Plugins

Final Considerations

Remember that we’re on different platforms

http://developer.apple.com/library/IOs/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/

UIElementGuidelines.htmlhttp://developer.android.com/design/index.html

Versus

Some important performance implications:Currently only iOS hardware accelerates CSS3 transitions.

Couple of tips:Always test features first (if !supported)For UI-specifics, you can use the device

class to get device info

Demo:PhoneGap in Action

One more thing.build.phonegap.com

The Problem:

You’re building a cross-platform app, but dealing with a lot of native projects

The Solution:

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

Build lets you define individuals as tester/developer which changes permissions on the project accordingly.

You can use Build as your testing distribution as well by making the

download pages public.

Will (soon) support popular plugins so that you can build plugins right into the build process.

Supports multiple PhoneGap versions so you can target a wide range of devices.

Demo:PhoneGap Build

• Why is PhoneGap?

• Who is PhoneGap...really?

• Getting Started with PhoneGap

• PhoneGap APIs

• Extending PhoneGap

• Final Considerations

Ryan StewartWeb Developer Evangelist, Adobe

@ryanstewart

blog.digitalbackcountry.com

ryan@adobe.com

github.com/ryanstewart

also, Beer:

PhoneGap: Building Mobile Applications with HTML/JS

Technology