Phonegap/Cordova                   @kgutteridge
Why?   Write once run anywhere   HTML5   Javascript   One code base                              @kgutteridge
Supported Platforms   iOS >=3.2   Android >=1.5   Blackberry >=4.6 but really >=5   Symbian >=1   webOS > 1.4.5   Sa...
Background   People at Nitobi originally "we don’t want this project    to exist its to plug gaps"   IBM + RIM + Microso...
Languages   HTML   CSS 3   Javascript                 @kgutteridge
Javascript   http://wtfjs.com/   https://www.destroyallsoftware.com/talks/wat                                           ...
Why?   JIL   Bondi   WAC   W3C            @kgutteridge
Its a hack   Webview   Call js from native code   Call native code from js                               @kgutteridge
Why?   Accelerometer   Camera   Capture   Compass   Connection   Contacts   Device   Events   File   Geolocation...
Write once debug everywhere    Weinre    debug.phonegap.com    Blackberry playbook    Opera dragonfly                 ...
Why?   Is this still the right way to build your app?                                                     @kgutteridge
Installation of SDKs (iOS)     http://phonegap.com/download     Install xCode http://developer.apple.com     Select new...
Installation of SDKs (Android)   http://www.eclipse.org/downloads/   http://developer.android.com/sdk/installing.html  ...
Installation of SDKs (Android)   Create www folder in assets                                  @kgutteridge
Installation of SDKs (Android)     Copy cordova-1.50.jar to libs     Copy xml directory into the res directory     Add ...
Installation of SDKs (Android)                                 @kgutteridge
Installation of SDKs (Android)     Edit AndroidManifest.xml<supports-screens    android:largeScreens="true"    android:no...
Installation of SDKs (Android)          Add permissions        <uses-permission   android:name="android.permission.CAMERA...
Installation of SDKs (Android)                                 @kgutteridge
Installation of SDKs       Add attribute         configChanges="orientation|keyboardHidden"       Add second activity ...
SDKs are a pain   build.phonegap.com                         @kgutteridge
Config.xml   Based of W3C widget spec<?xml version="1.0" encoding="UTF-8" ?>    <widget xmlns = "http://www.w3.org/ns/wid...
Plugins   All phonegap apis are plugins   https://github.com/phonegap/phonegap-plugins                                  ...
Uh Oh?   Add in app purchase                          @kgutteridge
Native vs Web   Native is native   Platform metaphors do matter   Password input boxes   Clients love to pay for web t...
Q+A      kieran.gutteridge@intohand.com      @kgutteridge                                       @kgutteridge
Upcoming SlideShare
Loading in …5
×

OpenMIC March-2012.phonegap

716 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
716
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • OpenMIC March-2012.phonegap

    1. 1. Phonegap/Cordova @kgutteridge
    2. 2. Why? Write once run anywhere HTML5 Javascript One code base @kgutteridge
    3. 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. 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. 5. Languages HTML CSS 3 Javascript @kgutteridge
    6. 6. Javascript http://wtfjs.com/ https://www.destroyallsoftware.com/talks/wat @kgutteridge
    7. 7. Why? JIL Bondi WAC W3C @kgutteridge
    8. 8. Its a hack Webview Call js from native code Call native code from js @kgutteridge
    9. 9. Why? Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Media Notification Storage @kgutteridge
    10. 10. Write once debug everywhere Weinre debug.phonegap.com Blackberry playbook Opera dragonfly @kgutteridge
    11. 11. Why? Is this still the right way to build your app? @kgutteridge
    12. 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. 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. 14. Installation of SDKs (Android) Create www folder in assets @kgutteridge
    15. 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. 16. Installation of SDKs (Android) @kgutteridge
    17. 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. 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. 19. Installation of SDKs (Android) @kgutteridge
    20. 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. 21. SDKs are a pain build.phonegap.com @kgutteridge
    22. 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. 23. Plugins All phonegap apis are plugins https://github.com/phonegap/phonegap-plugins @kgutteridge
    24. 24. Uh Oh? Add in app purchase @kgutteridge
    25. 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. 26. Q+A kieran.gutteridge@intohand.com @kgutteridge @kgutteridge

    ×