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.

1. Phonegap
Martin de Keijzer
Dutch Mobile Conference - June 7, 2013 - The Netherlands
Native Javascript apps with
Friday, 7 June 13

2. Introduction
2
Friday, 7 June 13

3. About me
Martin de Keijzer
Dutch web developer
3
@Martin1982
PHPBenelux Board Member
Working for Ibuildings
http://www.martindekeijzer.nl
Friday, 7 June 13

4. What is PhoneGap?
4
Friday, 7 June 13

5. What is PhoneGap
5
A way to wrap you HTML
app as a native application.
Friday, 7 June 13

6. What is PhoneGap
6
A way to bridge ‘Native’ functionality to a Javascript API
Friday, 7 June 13

7. Mission
7
PhoneGap’s mission is for
PhoneGap to cease to exist!
Friday, 7 June 13

8. WTF?!?!?
Cordova, PhoneGap
8
Friday, 7 June 13

9. History class
9
Friday, 7 June 13

10. PhoneGap Pre-Adobe
10
by
Friday, 7 June 13

11. PhoneGap acquisistion by Adobe
11
Acquired by
Donated to
Friday, 7 June 13

12. Acquisition by Adobe
12
“PhoneGap” “Callback”
“Cordova”
Friday, 7 June 13

13. PhoneGap now
13
Where changes get committed
Friday, 7 June 13

14. PhoneGap now
14
PhoneGap releases, still identical to
Apache Cordova
Friday, 7 June 13

15. In conclusion
15
You’ll use PhoneGap!
Friday, 7 June 13

16. Getting ready for lift-off
Installing PhoneGap
16
Friday, 7 June 13

17. Getting PhoneGap
17
http://phonegap.com/download/
Friday, 7 June 13

18. Lib is where the magic lives
18
“lib” contains all supported
platforms.... and
♥ ♥ ♥ ♥ CLI tools ♥ ♥ ♥ ♥
Friday, 7 June 13

19. XCode Command Line Tools
19
Friday, 7 June 13

20. Creating your first project
20
$ ./path/to/cordova-ios/bin/create
/path/to/my_new_cordova_project
com.example.cordova_project_name
CordovaProjectName
Friday, 7 June 13

21. Creating your first project
21
XCode Project
Friday, 7 June 13

22. The app
22
Friday, 7 June 13

23. First Run
23
Friday, 7 June 13

24. Android
24
Friday, 7 June 13

25. BlackBerry WebWorks
25
Friday, 7 June 13

26. BlackBerry WebWorks
26
Set the project.properties
and run:
ant qnx load-
simulator
Friday, 7 June 13

27. Ready for action
27
Always use the “www” folder & always assume your
app is running from a filesystem instead of a web server!
On Android it’s “assets/www”
Friday, 7 June 13

28. Let’s take it easy
PhoneGap build
28
Friday, 7 June 13

29. Creating builds using platform specific tools
29
The pain:
Running updates and checking requirements over
and over again!
Friday, 7 June 13

30. Creating builds using platform specific tools
30
Friday, 7 June 13

31. PhoneGap build to the rescue!
31
http://build.phonegap.com
Friday, 7 June 13

32. PhoneGap build in a nutshell
32
Friday, 7 June 13

33. Getting started
33
OR
Friday, 7 June 13

34. Getting started
34
Friday, 7 June 13

35. Getting started
35
OR
Repository that represents
“www”
Zip-file that represents
“www”
Friday, 7 June 13

36. Getting started
36
Friday, 7 June 13

37. The power of PhoneGap Build
37
Title
Code
Metadata Test
Friday, 7 June 13

38. Build statusses
38
Grey: Still building, be patient
Blue-ish: Build succeeded, click to download
Red: Build error, action required
Friday, 7 June 13

39. Build errors
39
Friday, 7 June 13

40. Working in teams
40
Friday, 7 June 13

41. Building like a pro
41
config.xml
W3C Widget Specification
https://gist.github.com/Martin1982/5063962
Friday, 7 June 13

42. When the web just doesn’t suffice
Plug-ins
42
Friday, 7 June 13

43. Accelerometer
43
Get device movement
in an X,Y, Z space.
Friday, 7 June 13

44. Camera & Capture & Media
44
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:
Friday, 7 June 13

45. Compass
45
API to detect which way a
device user is pointing
Friday, 7 June 13

46. Connection
46
See if a user is connected and
inspect the type of connection:
Wifi, xG, Ethernet
Caution navigator.isOnline is your close friend
Friday, 7 June 13

47. Contacts
47
Access the user’s contact list
Friday, 7 June 13

48. Device
48
•Name
•Cordova version
•Platform
•UUID
•Version
•Model
Friday, 7 June 13

49. Events
49
Handles application state
Friday, 7 June 13

50. File
50
Filesystem bridging, based
on the W3C File API
Friday, 7 June 13

51. Geolocation
51
Caution: Already supported by browsers!
API to get the latitudes and
longitudes of the device.
Friday, 7 June 13

52. Globalization
52
Currency, language, date & time
Friday, 7 June 13

53. InAppBrowser
53
The browser opened by
window.open()
Extremely useful to open
external links!
Friday, 7 June 13

54. Notification
54
•Alert
•Confirmation
•Beep
•Vibrate
Friday, 7 June 13

55. Splashscreen
55
No matter how beautiful your splash screen is,
eventually you’ll need to show and hide it
Friday, 7 June 13

56. Storage
56
SQL storage based on the W3C
WebSQL specification.
Caution; WebSQL is no longer maintained
IndexedDB is the new superhero!
Friday, 7 June 13

57. Why reinvent the wheel
User plugins
57
Friday, 7 June 13

58. Pick what you want
58
https://github.com/phonegap/phonegap-plugins
Friday, 7 June 13

59. Creating your own plugin
59
window.echo = function(str, callback) {
cordova.exec(callback, function(err) {
callback('Nothing to echo.');
}, "Echo", "echo", [str]);
};
Define the Javascript Method
Use Cordova.exec and give the following
arguments:
JavaScript Success callback function
JavaScript Error handling callback function
Native class to map to
Native method to map to
Native method arguments
Friday, 7 June 13

60. Now it’s your turn
Conclusion
60
Friday, 7 June 13

61. Conclusion
61
Package web applications as native apps
Enrich applications with native plugins
Quick deployment with PhoneGap Build VS. fine-
tuned deployment with PhoneGap CLI tools / IDE
If it doesn’t fit the bill? Download or write your own
plugin!
Always remember; your app runs as a local
application straight from the filesystem as in file://
Friday, 7 June 13

62. Start playing
Small demo app available from:
http://martin1982.github.io/dmc2013demo/
62
Friday, 7 June 13

63. QUESTIONS
63
Friday, 7 June 13

64. mdkeijzer@ibuildings.nl
@Martin1982
Thank you for listening
Friday, 7 June 13