Introduction To PhoneGap Development

David Aguilar - OC Dev | Feb. 7, 2013

Introduction

  • David Aguilar
  • Application Architect @ The Boeing Company
  • Specialize in Web & Mobile Applications

What is PhoneGap?

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

  • Originally produced by Nitobi Software (2009)
  • Adobe Systems acquired Nitobi Software (2011)
  • Contributed to the Apache Software Foundation as Apache Callback then renamed Apache Cordova

www.phonegap.com | cordova.apache.org

Clear Up The Confusion



  • It's spelled Apache Cordova (source code)
  • It's pronounced PhoneGap (product)

- Simon MacDonald @macdonst

How Much Does PhoneGap Cost?




PhoneGap is FREE!!!


Open Source, Apache License v2.0

Which Platforms Does PhoneGap Support?

  • Android
  • BlackBerry
  • iOS
  • Symbian
  • WebOS
  • Windows Phone 7 & 8
  • Windows 8
  • Bada
  • Tizen

Which APIs Can I Access?


  • Accelerometer
  • Camera
  • Capture
  • Compass
  • Connection
  • Contacts
  • Device
  • Events
  • File
  • Geolocation
  • Globalization
  • InAppBrowser
  • Media
  • Notification
  • Splashscreen
  • Storage

Requirements




Android Requirements



BlackBerry Requirements

  • Download and install Oracle JDK
  • Download and install WebWorks SDK
  • Register for signing keys
  • Download and install Cordova


Also Supports BlackBerry 10 & PlayBook (QNX)

iOS Requirements

  • Intel-based Computer with Mac OS X (10.7.4+)
  • Xcode 4.5+ & iOS 6 SDK
  • Xcode Command Line Tools
  • iOS Device or Emulator
  • Download and install Cordova


Cordova Directory Structure



Once unzipped, you will see a directory for each platform Cordova supports. Within those directories are templates and commands you will run thru Terminal (Mac) or Command Prompt (Windows)

PATH Environment Variables on Mac OS


Open Terminal and run:
touch ~/.bash_profile; open ~/.bash_profile
Add Android SDK Locations to PATH:
export PATH=${PATH}:/Development/android-sdk-macosx/platform-tools:/Development/android-sdk-macosx/tools
Execute to update your Path:
source ~/.bash_profile

PATH Environment Variables on Windows


Add Andorid SDK locations to your PATH System Variable. You will also need to add %JAVA_HOME% and %APACHE_ANT% as System Variables. Also, add %JAVA_HOME%\bin and %APACHE_ANT%\bin to your PATH System Variable.

Apache ANT

Setup New Project - Android

In a Terminal window or Command Prompt, navigate to the bin directory within the android subfolder of the Cordova distribution.
<project_folder_path> 
is the path to your new Cordova Android project
<package_name> 
is the package name, e.g. com.YourCompany.YourAppName
<project_name>
is the project name, e.g. YourApp (Must not contain spaces)
Mac 
./create <project_folder_path> <package_name> <project_name>
Windows 
C:\Users\David\Development\phonegap-2.3.0\lib\android\bin\create <project_folder_path> <package_name> <project_name>

PhoneGap Android Structure



This is the project Cordova auto-generates when running the create command.

Android Project From Existing Code


Open Eclipse and import this new project by selecting Android Project from Existing Code.

Live Demo

Live Demo Result

Tools / Reference

PhoneGap Build


PhoneGap Build is a cloud-based service built on top of the PhoneGap framework. It allows you to easily build and compile multi-platform mobile apps in the cloud.

PhoneGap Plugins


PhoneGap Plugins bridge a bit of functionality between the WebView powering a Cordova app and the native platform the Cordova app is running on.

Ripple


Ripple is a PhoneGap Emulator. It allows you to test your PhoneGap application from your desktop browser. PhoneGap's JavaScript APIs are avaialble using Ripple, so you can subscribe to deviceready and even stub responses for your custom plugins.

ConfiGAP


ConfiGAP is an application designed to help you create the config.xml files used by PhoneGap Build. If you have ever used PhoneGap Build, you know that creating the config.xml file can be a chore. ConfiGAP is built to make it a bit easier.

Who To Follow


PhoneGap Developer Directory


Interested in getting PhoneGap work? Register yourself at the PhoneGap Developer Directory!

people.phonegap.com

Thank You



David Aguilar
david@dcfusion.com
@davidraguilar
Made with Slides.com