Phonegap/Cordova allows developers to write mobile apps using web technologies like HTML, CSS, and JavaScript. It allows an app to be written once and deployed across multiple platforms by wrapping the code in a native container. Supported platforms include iOS, Android, Blackberry, Symbian and others. Phonegap uses a plugin architecture to enable access to native device functionality like the camera from JavaScript. Setting it up requires installing SDKs for target platforms and configuring a config.xml file. While it enables cross-platform development, the user experience may differ from true native apps and some consider alternative technologies.

1. Phonegap/Cordova
@kgutteridge

2. Why?
 Write once run anywhere
 HTML5
 Javascript
 One code base
@kgutteridge

3. Supported Platforms
 iOS >=3.2
 Android >=1.5
 Blackberry >=4.6 but really >=5
 Symbian >=1
 webOS > 1.4.5
 Samsung Bada
 Qt
 WP7
@kgutteridge

4. Background
 People at Nitobi originally "we don’t want this project
to exist its to plug gaps"
 IBM + RIM + Microsoft + Symbian + Palm
 Now adopted into the Apache Software Foundation
@kgutteridge

5. Languages
 HTML
 CSS 3
 Javascript
@kgutteridge

6. Javascript
 http://wtfjs.com/
 https://www.destroyallsoftware.com/talks/wat
@kgutteridge

7. Why?
 JIL
 Bondi
 WAC
 W3C
@kgutteridge

8. Its a hack
 Webview
 Call js from native code
 Call native code from js
@kgutteridge

9. Why?
 Accelerometer
 Camera
 Capture
 Compass
 Connection
 Contacts
 Device
 Events
 File
 Geolocation
 Media
 Notification
 Storage
@kgutteridge

10. Write once debug everywhere
 Weinre
 debug.phonegap.com
 Blackberry playbook
 Opera dragonfly
@kgutteridge

11. Why?
 Is this still the right way to build your app?
@kgutteridge

12. Installation of SDKs (iOS)
 http://phonegap.com/download
 Install xCode http://developer.apple.com
 Select new Cordova project
 Run once, will get error
 Add ‘www’ file to project
 create folder references
@kgutteridge

13. Installation of SDKs (Android)
 http://www.eclipse.org/downloads/
 http://developer.android.com/sdk/installing.html
 Start a 2.2 Android project
@kgutteridge

14. Installation of SDKs (Android)
 Create www folder in assets
@kgutteridge

15. Installation of SDKs (Android)
 Copy cordova-1.50.jar to libs
 Copy xml directory into the res directory
 Add cordova lib to build path
 Link “phonegap iOS app” into www
 Add Cordova import to main activity
 Extend DroidGap rather than Activity
 Add in onCreate
 super.loadUrl(“file://android_asset/www/
index.html”);
@kgutteridge

16. Installation of SDKs (Android)
@kgutteridge

17. Installation of SDKs (Android)
 Edit AndroidManifest.xml
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
@kgutteridge

18. Installation of SDKs (Android)
 Add permissions
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
@kgutteridge

19. Installation of SDKs (Android)
@kgutteridge

20. Installation of SDKs
 Add attribute
 configChanges="orientation|keyboardHidden"
 Add second activity
 <activity
android:name="com.phonegap.DroidGap"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter></intent-filter>
</activity>
@kgutteridge

21. SDKs are a pain
 build.phonegap.com
@kgutteridge

22. Config.xml
 Based of W3C widget spec
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "uk.co.kgutteridge.bigm"
versionCode="10" <!-- optional: Android only -->
version = "1.0.0">
<name>Bigm</name>
<description>
An example app for phonegap build.
</description>
<author href="http://kgutteridge.co.uk"
email="kgutteridge@gmail.com">
Kieran Gutteridge
</author>
</widget>
@kgutteridge

23. Plugins
 All phonegap apis are plugins
 https://github.com/phonegap/phonegap-plugins
@kgutteridge

24. Uh Oh?
 Add in app purchase
@kgutteridge

25. Native vs Web
 Native is native
 Platform metaphors do matter
 Password input boxes
 Clients love to pay for web technologies
 Devs love searching for the unicorn of write once run
anywhere
 Maybe other options take a look at kirinJS
@kgutteridge

26. Q+A
kieran.gutteridge@intohand.com
@kgutteridge
@kgutteridge