Developing PhoneGap Apps

Snow Mobile 2/16/13

Don Coleman
Chariot Solutions
@doncoleman

PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.

Cordova

vs

PhoneGap

PhoneGap Supports Many Platforms

iOS, Android

Windows Phone, Blackberry

Symbian, Bada, WebOS

Tizen, Chrome, Windows 8

PhoneGap embeds a web view in a native app

JavaScript API

Access Device Features

Accelerometer
Camera
Capture
Compass
Connection
Contacts
Device

Events
File
Geolocation
Globalization
Media
Notification
Storage

http://docs.phonegap.com/en/2.4.0/index.html
http://phonegap.com/about/feature

Your app is a native app

PhoneGap does not provide a UI

Can I wrap any website in PhoneGap and magically have a mobile app?

NO!

Single Page App

How do I get started?

Download

http://phonegap.com/download

Unzip archive

move somewhere like /usr/local/phonegap-2.4.0

Do you have platform tools installed?

Xcode

Android SDK

Visual Studio

BlackBerry Webworks SDK

Demo

iOS


$ cd /usr/local/phonegap-2.4.0
$ cd lib/ios/bin
$ ./create ~/foo com.example.foo Foo 
$ cd ~/foo
$ ./cordova/emulate

Android


$ cd /usr/local/phonegap-2.4.0
$ cd lib/android/bin
$ ./create ~/foo com.example.foo Foo 
$ cd ~/foo
$ ./cordova/run

PhoneGap Getting Started Guides

http://docs.phonegap.com/en/2.4.0/guide_getting-started_index.md.html

So we created a project, now what?

The www directory is just a web project

How does it work?

index.html


<!DOCTYPE html>
<html>
    ...
        <script src="cordova-2.4.0.js"></script>
        <script src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

index.js


var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener(
            'deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        // your code here
    }
};

Camera


navigator.camera.getPicture( 
    cameraSuccess, cameraError, [ cameraOptions ] );

http://docs.phonegap.com/en/2.4.0/cordova_camera_camera.md.html

API Call


navigator.camera.getPicture(
    onSuccess, 
    onFailure, 
    { 
        quality: 50, 
        destinationType: Camera.DestinationType.FILE_URI 
    }
);

Callbacks


function onSuccess(imageURI) {
    image.src = imageURI;
}

function onFailure(message) {
    alert('Failed because: ' + message);
}

Permissions


<uses-permission 
    android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

index.html


<div>
    <div>
        <img id="image"></img>
    <div>
    <div>
        <h1 id="cameraLabel">Camera</h1>
    <div>            
</div>

index.js


var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener(
            'deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        cameraLabel.addEventListener(
            'touchstart', app.takePicture, false);
    },
    takePicture: function() {
        // ...
    }
};

index.js


takePicture: function() {
    navigator.camera.getPicture(
        function(imageURI) { // success
            image.src = imageURI;
        }, 
        function(error) { // failure
            console.log("error");
        }, 
        { // options
            quality: 50,
            destinationType: navigator.camera.DestinationType.FILE_URI,
            targetWidth: 320,
            targetHeight: 320,
            allowEdit: true,
            saveToPhotoAlbum: false
        }
    );
}

Lots of other APIs

http://docs.phonegap.com/en/2.4.0/index.html

Troubleshooting

read the log output

ensure code is valid with jshint

Web Inspector

Ripple

http://emulate.phonegap.com

Weinre

http://debug.phonegap.com

Other ways to debug

Plugins

Extend PhoneGap

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

Barcode Scanner

https://github.com/phonegap/phonegap-plugins/tree/master/iOS/BarcodeScanner

Copy barcode.js into www

Copy zxing-all-in-one.cpp, zxing-all-in-one.h to Plugins

Copy CDVBarcodeScanner.mm to Plugins

Copy scannerOverlay.xib to Resources

Add files to the XCode project

add plugin to config.xml

Plugin Specification

https://github.com/alunny/cordova-plugin-spec

plugman

A command line tool to distribute and package plugins for use with Apache Cordova

https://github.com/imhotep/plugman


    $ plugman
    Usage
    ---------
    Add a plugin:
    	plugman --platform  --project  --plugin 

    Remove a plugin:
    	plugman --remove --platform  --project  --plugin 

    List plugins:
    	plugman --list


    $ plugman --list
    BarcodeScanner - Cross-platform BarcodeScanner for Cordova/PhoneGap
    ChildBrowser - ChildBrowser plugin
    Facebook-Connect - Official plugin for Facebook Connect 
    GAPlugin - Google Analytics Plugin
    KeychainPlugin - Keychain Plugin for Apache Cordova
    NFC - Near Field Communication Plugin
    PushPlugin - Push Notification Plugin for iOS and Android
    TestflightPlugin - TestFlight Plugin for Apache Cordova

    
    plugman --platform ios --project platforms/ios --plugin BarcodeScanner

PhoneGap is built out of plugins

Managing code

across multiple platforms

cordova-cli

fruitstrap

Install and debug iPhone apps without using Xcode

https://github.com/filmaj/fruitstrap

medic

Continuous integration setup for Apache Cordova

https://github.com/filmaj/medic

PhoneGap Build

http://build.phonegap.com/

Questions?

Thank You

Don Coleman

don@chariotsolutions.com
@doncoleman
http://don.github.com/slides/2013-02-16-snow-mobile