phonegap: building mobile applications with html/js

Developing with Phonegap

Building mobile applications with HTML/JS

Monday, January 23, 2012

Ryan StewartWeb Developer Evangelist, Adobe

@ryanstewart

blog.digitalbackcountry.com

[email protected]

github.com/ryanstewart

Based in SeattleThings I Like:

BeerMountaineering/Hiking/BackpackingGeolocation/Mapping stuff


mailto:[email protected]


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


https://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/


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


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

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


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






http://developer.android.com/design/index.html

http://developer.android.com/design/index.html

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


Recap

• Why is PhoneGap?

• Who is PhoneGap...really?

• Getting Started with PhoneGap

• PhoneGap APIs

• Extending PhoneGap

• Final Considerations


Q&A

Ryan StewartWeb Developer Evangelist, Adobe

@ryanstewart

blog.digitalbackcountry.com

[email protected]

github.com/ryanstewart

also, Beer:




phonegap: building mobile applications with html/js

Technology

phonegap phonegap apis

phonegap support

mobile web apps

native browser

code native web viewmonday

native projects

native project format

native development environment