Prerequisites

  • PhoneGap via NPM
  • git
  • GitHub account
  • QR reader app
    (recommended)

Wireless

  1. octanner.com / 10.0.0.1
  2. type in your email address
  3. do NOT press enter;
    click the submit button

Install PhoneGap with NPM

$ sudo npm install -g phonegap

Install NPM

http://nodejs.org/download/

SLC JS Learners

  • Sean Duncan
  • O.C. Tanner Labs
  • UtahJS SLC Meetup
  • Other meetups

SLC JS Learners - Principles

An introduction to Adobe's

PhoneGap

By MetaSean

github.com/SLC-JS-Learners
/phonegap-presentation/index.html

History & Names

  • PhoneGap was created around 2009 by Nitobi.
  • In 2011, Adobe bought Nitobi and the PhoneGap brand.
  • PhoneGap's source code was donated to the Apache Software Foundation.
  • Apache's open source code is called Cordova.
  • Adobe's PhoneGap extends Cordova.

Supported Cordova Platforms

  • Amazon Fire OS
  • Android
  • BlackBerry 10
  • Firefox OS
  • iOS
  • Ubuntu
  • Windows Phone 8
  • Windows
  • Tizen

Single Page Application (SPA)

  • AngularJS
  • EmberJS
  • Backbone
  • Kendo UI
  • Monaca
  • ReactJS
  • Sencha Touch
  • jQuery Mobile
  • many, many, more

http://alpha.ideavis.co/529cc5f

App versus Command Line

PhoneGap Developer App
app.phonegap.com/

Let's get codin'

  1. Create and navigate to your project directory.
  2. $ phonegap create app-name
  3. $ cd app-name
  4. $ phonegap run android

Build Error!!!

[phonegap] executing 'cordova run android'...
No platforms added to this project.
Please use `cordova platform add `.

Push to GitHub

  1. Create the new project in your GitHub account
  2. echo "# SLC JS Learner's phonegap-demo" >> README.md
  3. $ git init
  4. $ git add .
  5. $ git commit -m "init commit"
  6. $ git remote add origin git@github.com:SLC-JS-Learners/phonegap-demo.git
  7. $ git push -u origin master

Push to Adobe PhoneGap

  1. Create an Adobe PhoneGap account at: build.phonegap.com/plans
  2. Paste your new GitHub repo into the *open-source* tab on build.phonegap.com/apps

Build, baby, build

Download

Update index.html

  • Delete the following lines: 
    PhoneGap
  • Replace with the following line: 
    PhoneGap Demo
    

    Hello World
  • Delete the following lines:

Test Locally

  • phonegap serve
  • Open the 'listening on' address (e.g. 192.168.8.102:3000)

Push to GitHub

$ git add .
$ git commit -m "init commit"
$ git push -u origin master

Edit config.xml

Review Plug-in API and other resources

Create camera.js

function capturePhoto(){
	navigator.camera.getPicture(photoTaken, error,
		{
			sourceType: 1,
			quality: 60
		});
}

function photoTaken(data) {
	cameraPic.src = data;
	alert('Photo taken: ' + cameraPic.src);
}

function error(msg) {
	alert('Error: ' + msg);
}

Update index.html

  • Delete:
    Hello World
    Replace with:
  • After the line:
    Add:

Push and rebuild

  • $ git add .
	$ git commit -m "init commit"
	$ git push -u origin master

No need to Rebuild

Download and Reinstall

Areas for Improvement & Exploration

  • Make the design responsive (e.g. webkit)
  • Make camera fully independent
    (i.e. no need to route through another app)
  • What benefit does the "Developer App" provide?
  • What is "hydration"?
  • How does it work with Ionic apps?

More Tutorials

THE END