Native Javascript apps with                                                      Phonegap                                 ...
Introduction                                     2Sunday, 14 April 13
About me             Martin de Keijzer             Dutch web developer                      Working for Ibuildings        ...
What is PhoneGap?                      Subtitel                                          4Sunday, 14 April 13
What is PhoneGap                      A way to wrap you HTML                      app as a native application.            ...
What is PhoneGap   A way to bridge ‘Native’ functionality to a Javascript API                                             ...
Mission                         PhoneGap’s mission is for                      PhoneGap to cease to exist!                ...
Cordova, PhoneGap                      WTF?!?!?                                          8Sunday, 14 April 13
PhoneGap Pre-Adobe                                by                                     9Sunday, 14 April 13
PhoneGap acquisistion by Adobe                                       Donated to Acquired by                               ...
Acquisition by Adobe                 “PhoneGap”       “Callback”                                  “Cordova”               ...
PhoneGap now                      Where changes get committed                                                    12Sunday,...
PhoneGap now                          PhoneGap releases, still identical to                                 Apache Cordova...
In conclusion                           You’ll use PhoneGap!                                                  14Sunday, 14...
Installing PhoneGap                      Getting ready for lift-off                                                   15Su...
Getting PhoneGap                      http://phonegap.com/download/                                                      1...
Lib is where the magic lives                                     “lib” contains all supported                             ...
XCode Command Line Tools                                      18Sunday, 14 April 13
Creating your first project              $ ./path/to/cordova-ios/bin/create              /path/to/my_new_cordova_project  ...
Creating your first project                               XCode Project                                               20Su...
The app                      21Sunday, 14 April 13
First Run                       22Sunday, 14 April 13
Ready for action     Always use the “www” folder & always assume your    app is running from a filesystem instead of a web ...
PhoneGap build                      Let’s take it easy                                           24Sunday, 14 April 13
Creating builds using XCode                                 The pain:              Running updates and checking requiremen...
Creating builds using XCode                                         26Sunday, 14 April 13
PhoneGap build to the rescue!                       http://build.phonegap.com                                             ...
PhoneGap build in a nutshell                                          28Sunday, 14 April 13
Getting started                             OR                                  29Sunday, 14 April 13
Getting started                             30Sunday, 14 April 13
Getting started                              OR     Repository that represents    Zip-file that represents              “ww...
Getting started                             32Sunday, 14 April 13
The power of PhoneGap Build          Title                          Metadata   Test           Code                        ...
Build statusses                      Grey: Still building, be patient                      Blue-ish: Build succeeded, clic...
Build errors                          35Sunday, 14 April 13
Working in teams                              36Sunday, 14 April 13
Building like a pro                                   config.xml                              W3C Widget Specification      ...
Plug-ins                      When the web just doesn’t suffice                                                          3...
Accelerometer                           Get device movement                            in an X,Y, Z space.                ...
Camera & Capture & Media                                                   Use the device’s library,                      ...
Compass                      API to detect which way a                       device user is pointing                      ...
Connection                         See if a user is connected and                        inspect the type of connection:  ...
Contacts                      Access the user’s contact list                                                       43Sunda...
Device                      •Name                      •Cordova version                      •Platform                    ...
Events                      Handles application state                      (deviceready, paused etc)                      ...
File                      Filesystem bridging, based                         on the W3C File API                          ...
Geolocation                                      API to get the latitudes and                                       longit...
Globalization                           Currency, language, date time                                                     ...
InAppBrowser                          The browser opened by                            window.open()                      ...
Notification                          •Alert                          •Confirmation                          •Beep         ...
Splashscreen                      No matter how beautiful your splash screen is,                       eventually you’ll n...
Storage                            SQL storage based on the W3C                               WebSQL specification.        ...
User plugins                      Why reinvent the wheel                                               53Sunday, 14 April 13
Pick what you want                      https://github.com/phonegap/phonegap-plugins   54Sunday, 14 April 13
QUESTIONS                                  55Sunday, 14 April 13
Thank you for listening                                  mdkeijzer@ibuildings.nl                                          ...
Upcoming SlideShare
Loading in …5
×

Native Javascript apps with PhoneGap

1,440 views

Published on

Writing applications for phones has been a daunting task since every platform uses it's own language and API's. PhoneGap will solve this problem for you by utilizing the browser capabilities. In this session we will see how we can turn a web based application into a native app. We will also look at posibilites to integrate native functionality, like the camera or accelerometer, in our application. The final part of the presentation is about deployment of these applications. Adobe offers a cloud based service called PhoneGap Build which easily builds your application for all platforms.

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

No Downloads
Views
Total views
1,440
On SlideShare
0
From Embeds
0
Number of Embeds
143
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Native Javascript apps with PhoneGap

  1. 1. Native Javascript apps with Phonegap Martin de Keijzer iOSOnRailsConf2013 13-14 April, Alushta UkraineSunday, 14 April 13
  2. 2. Introduction 2Sunday, 14 April 13
  3. 3. About me Martin de Keijzer Dutch web developer Working for Ibuildings PHPBenelux Board Member @Martin1982 http://www.martindekeijzer.nl 3Sunday, 14 April 13
  4. 4. What is PhoneGap? Subtitel 4Sunday, 14 April 13
  5. 5. What is PhoneGap A way to wrap you HTML app as a native application. 5Sunday, 14 April 13
  6. 6. What is PhoneGap A way to bridge ‘Native’ functionality to a Javascript API 6Sunday, 14 April 13
  7. 7. Mission PhoneGap’s mission is for PhoneGap to cease to exist! 7Sunday, 14 April 13
  8. 8. Cordova, PhoneGap WTF?!?!? 8Sunday, 14 April 13
  9. 9. PhoneGap Pre-Adobe by 9Sunday, 14 April 13
  10. 10. PhoneGap acquisistion by Adobe Donated to Acquired by 10Sunday, 14 April 13
  11. 11. Acquisition by Adobe “PhoneGap” “Callback” “Cordova” 11Sunday, 14 April 13
  12. 12. PhoneGap now Where changes get committed 12Sunday, 14 April 13
  13. 13. PhoneGap now PhoneGap releases, still identical to Apache Cordova 13Sunday, 14 April 13
  14. 14. In conclusion You’ll use PhoneGap! 14Sunday, 14 April 13
  15. 15. Installing PhoneGap Getting ready for lift-off 15Sunday, 14 April 13
  16. 16. Getting PhoneGap http://phonegap.com/download/ 16Sunday, 14 April 13
  17. 17. Lib is where the magic lives “lib” contains all supported platforms.... and a ♥♥♥♥ CLI tool ♥ ♥ ♥ ♥ 17Sunday, 14 April 13
  18. 18. XCode Command Line Tools 18Sunday, 14 April 13
  19. 19. Creating your first project $ ./path/to/cordova-ios/bin/create /path/to/my_new_cordova_project com.example.cordova_project_name CordovaProjectName 19Sunday, 14 April 13
  20. 20. Creating your first project XCode Project 20Sunday, 14 April 13
  21. 21. The app 21Sunday, 14 April 13
  22. 22. First Run 22Sunday, 14 April 13
  23. 23. Ready for action Always use the “www” folder & always assume your app is running from a filesystem instead of a web server! 23Sunday, 14 April 13
  24. 24. PhoneGap build Let’s take it easy 24Sunday, 14 April 13
  25. 25. Creating builds using XCode The pain: Running updates and checking requirements over and over again! 25Sunday, 14 April 13
  26. 26. Creating builds using XCode 26Sunday, 14 April 13
  27. 27. PhoneGap build to the rescue! http://build.phonegap.com 27Sunday, 14 April 13
  28. 28. PhoneGap build in a nutshell 28Sunday, 14 April 13
  29. 29. Getting started OR 29Sunday, 14 April 13
  30. 30. Getting started 30Sunday, 14 April 13
  31. 31. Getting started OR Repository that represents Zip-file that represents “www” “www” 31Sunday, 14 April 13
  32. 32. Getting started 32Sunday, 14 April 13
  33. 33. The power of PhoneGap Build Title Metadata Test Code 33Sunday, 14 April 13
  34. 34. Build statusses Grey: Still building, be patient Blue-ish: Build succeeded, click to download Red: Build error, action required 34Sunday, 14 April 13
  35. 35. Build errors 35Sunday, 14 April 13
  36. 36. Working in teams 36Sunday, 14 April 13
  37. 37. Building like a pro config.xml W3C Widget Specification https://gist.github.com/Martin1982/5063962 37Sunday, 14 April 13
  38. 38. Plug-ins When the web just doesn’t suffice 38Sunday, 14 April 13
  39. 39. Accelerometer Get device movement in an X,Y, Z space. 39Sunday, 14 April 13
  40. 40. Camera & Capture & Media Use the device’s library, camera and microphone to work with local audio, video and images. Don’t forget iOS 6 supports: <input type="file" accept="image/*" capture="camera"> 40Sunday, 14 April 13
  41. 41. Compass API to detect which way a device user is pointing 41Sunday, 14 April 13
  42. 42. Connection See if a user is connected and inspect the type of connection: Wifi, xG, Ethernet Caution navigator.isOnline is your close friend 42Sunday, 14 April 13
  43. 43. Contacts Access the user’s contact list 43Sunday, 14 April 13
  44. 44. Device •Name •Cordova version •Platform •UUID •Version •Model 44Sunday, 14 April 13
  45. 45. Events Handles application state (deviceready, paused etc) 45Sunday, 14 April 13
  46. 46. File Filesystem bridging, based on the W3C File API 46Sunday, 14 April 13
  47. 47. Geolocation API to get the latitudes and longitudes of the device. Caution: Already supported by browsers! 47Sunday, 14 April 13
  48. 48. Globalization Currency, language, date time 48Sunday, 14 April 13
  49. 49. InAppBrowser The browser opened by window.open() 49Sunday, 14 April 13
  50. 50. Notification •Alert •Confirmation •Beep •Vibrate 50Sunday, 14 April 13
  51. 51. Splashscreen No matter how beautiful your splash screen is, eventually you’ll need to show and hide it 51Sunday, 14 April 13
  52. 52. Storage SQL storage based on the W3C WebSQL specification. Caution; WebSQL is no longer maintained IndexedDB is the new superhero! 52Sunday, 14 April 13
  53. 53. User plugins Why reinvent the wheel 53Sunday, 14 April 13
  54. 54. Pick what you want https://github.com/phonegap/phonegap-plugins 54Sunday, 14 April 13
  55. 55. QUESTIONS 55Sunday, 14 April 13
  56. 56. Thank you for listening mdkeijzer@ibuildings.nl @Martin1982Sunday, 14 April 13

×