Intro to PhoneGap

and PhoneGap Build


Who Am I?

Tommy-Carlos Williams



http://github.com/devgeeks

* No, I don't work for Adobe. I just love PhoneGap.

What is PhoneGap ?

...when it's at home

 

Summary

PhoneGap is a tool used to create native mobile applications using Web technologies. 

PhoneGap provides a standard set of JavaScript APIs to access device features on all supported platforms.

the web tools you love

Open Source

Extensible

DEPLOY TO MULTIPLE PLATFORMS

Like a chrome-less browser


The UI layer of a PhoneGap application is a browser view that takes up 100% of the device width and height. PhoneGap then provides a " bridge " between native APIs and JavaScript



Cordova  vs 

PhoneGap


Think of PhoneGap as a distribution of Cordova...
PhoneGap is to Cordova as Chrome is to Webkit *




* OK, it's not a perfect analogy... as RedHat is to Linux?

What's wrong with just building web apps , anyway?

Absolutely nothing

Please do.

Did you expect a different answer?

Some reasons why you might want to build a hybrid  "native" App instead

  1. Access to device features
    • the camera
    • geolocation
    • filesystem
    • contacts
    • accelerometer, etc
  2. App store / Google Play ecosystem
  3. App store / Google Play discoverability

What APIs are available?


DO I NEED TO KNOW 

OBJECTIVE-C / JAVA / ETC?


No. That's kinda the point.

Getting started

(finally...)

http://www.phonegap.com

  • Download PhoneGap/Cordova
  • Set up your dev environment
  • ???? *
  • Profit!

* Sadly as with all app development, this step usually involves a lot of 
development, debugging, testing...
and (in most cases) finally dealing with the Apple App Store review process. I am so sorry.

Command line tooling


for creation:
./bin/create

then... for building/running/debugging:
./cordova/debug

./cordova/emulate

./cordova/BOOM *
* Yes that is actually a thing (just for Android though, for some reason).

The www folder


This is where all of your HTML, JavaScript and CSS assets live.


Most PhoneGap apps are of the " single page application " type, meaning there is just an index.html and all the magic happens there.


cordova.js


Platform specific * JavaScript file that provides access to the PhoneGap APIs

Make sure you are using the correct cordova.js for the correct platform.

* Unless you are using PhoneGap Build, we'll get to that...

Device Ready

This event tells you that PhoneGap has finished loading and the APIs (and any plug-ins) are ready to be called.

 
This is NOT the same as the load event or jQuery's $(document).ready()

Demo

DO I NEED TO SET UP A DEV ENVIRONMENT FOR EACH PLATFORM ?


Yes.

Well, unless you use PhoneGap Build.*



* We'll get to that in a minute...

Will my app look like a native app?


That depends...

PhoneGap is UI Agnostic

UI Frameworks


Good
  1. jQTouch - https://github.com/Senchalabs/jQTouch
  2. KendoUI (commercial) - http://www.kendoui.com
  3. App-UI -  http://triceam.github.com/app-UI
  4. Bootstrap -  http://twitter.github.com/bootstrap

Bad
  1. jQuery Mobile -  http://jquerymobile.com  ( please don't   )

Other development tools

Emulate:

http://emulate.phonegap.com
Ripple emulator - Chrome Webstore

Debug:

Weinre - http://debug.phonegap.com

Ripple Emulator


Demo

WEINRE

Hosted webkit remote inspector, kinda...
https://github.com/apache/incubator-cordova-weinre

Demo

PhoneGap Build

http://build.phonegap.com

  • IOS, Android, BlackBerry, WebOS, Windows Phone and Symbian
  • FREE and for one private project
  • Will always be free for Open Source projects
  • Choose to upload your files (zip) or provide a Github repository
  • Supports a few plugins (ChildBrowser, Barcode Scanner, Analytics)

Told you we would get to it...

A cloud build service


Summary

Adobe PhoneGap Build is a service that allows you to create mobile apps using standard web technologies (HTML, CSS, JavaScript), and then easily compile them for multiple platforms in the cloud.


Get app-store ready apps without the headache of maintaining native SDKs


RESTful API framework

Features


Install Apps Directly - via QR code


Collaborate - When your app is ready, just send a link.


Roles - developers and testers


WEINRE integration 

PhoneGap Build & plug-ins

Adobe PhoneGap Build supports a curated selection of PhoneGap Plugins

  • ChildBrowser (in app browser)
  • Barcode Scanner
  • Google Analytics

config.xml


Thanks


Feel free to ask me any PhoneGap questions you may have as long as they have nothing to do with jQuery Mobile.

Just kidding. *


* I'm totally not kidding.