Intro to PhoneGap – and PhoneGap Build

View Github Repository Open presentation in a new window

devgeeks

See all presentation from devgeeks

Intro to PhoneGap – and PhoneGap Build

0 0

sensis-hackathon-slides

Sensis API Product Hack Camp slide deck

On Github devgeeks / sensis-hackathon-slides

Intro to PhoneGap

and PhoneGap Build

Who Am I?

* 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

Access to device features
  • the camera
  • geolocation
  • filesystem
  • contacts
  • accelerometer, etc
App store / Google Play ecosystem 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...)
  • 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
Bad
jQuery Mobile -  http://jquerymobile.com  ( please don't   )

Other development tools

Emulate:

Ripple emulator - Chrome Webstore

Debug:

Ripple Emulator

Demo

WEINRE

Hosted webkit remote inspector, kinda...

Demo

PhoneGap Build

  • 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.