PhoneGap

for Makers

Maker Faire NY - September21, 2013

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, FirefoxOS

Windows 8, OS X, Chrome

Image from Michael Brooks "Building Mobile Apps with Web Standards"

JavaScript API

Accelerometer
Camera
Capture
Compass
Connection
Contacts
Device

Events
File
Geolocation
Globalization
Media
Notification
Storage

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

Your app is a native app

PhoneGap does not provide a UI

Use any frameworks you want

Usually write as a Single Page App

Getting Started

Platform Tools

Xcode

Android SDK

Visual Studio

BlackBerry Webworks SDK

An alternative is to try PhoneGap Build.

$ npm install cordova -g

Demo

Generate a project


$ cordova create foo com.example.foo Foo
$ cd foo
$ cordova platform add android
$ cordova run

PhoneGap Getting Started Guides

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

So we created a project, now what?

The www directory is just a web project

index.html


    <!DOCTYPE html>
    <html>
        ...
            <script src="cordova.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
        }
    };

API Example - Camera


navigator.camera.getPicture(cameraSuccess, cameraError, options);

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

Callbacks


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

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

API Call - Asynchronous


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

Lots of other APIs

http://docs.phonegap.com/en/3.0.0

But PhoneGap doesn't do
[insert your feature here]

Plugins

Extend PhoneGap

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

Plugin Development Guide

Bluetooth Serial

PhoneGap Plugin

https://github.com/don/BluetoothSerial

Installing


$ cordova plugin install https://github.com/don/BluetoothSerial

Connecting


    var macAddress = "00:00:AA:BB:CC:DD";
    
    var connected = function() {
      // connected, do something
    };
    
    var disconnected = funtion(error) { 
      // disconnected
    };

    bluetoothSerial.connect(macAddress, connected, disconnected);

Receiving Data


  var onMessage = function(data) {
    console.log(data);
  };

  bluetoothSerial.subscribe("\n", onMessage, onFailure);

Demo

Phone receives data from Arduino

Sending Data


  bluetoothSerial.write("Hello Arduino");

Control NeoPixel LED on Arduino from Android

c red, green, blue

c0,0,255\n

Demo

Phone controls LED strip on Arduino

Thank You

Don Coleman

@doncoleman

don@chariotsolutions.com

http://don.github.io/slides/

PhoneGap for Makers by Don Coleman is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Based on a work at https://github.com/don/slides/tree/gh-pages/2013-09-21-phonegap-for-makers.