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

Native Javascript apps with PhoneGap

502

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
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
502
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Native Javascript apps with PhoneGap"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×