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 and deploying your app via PhoneGap Build which easily builds your application for all platforms.

1. Phonegap
Martin de Keijzer
Code Motion Berlin - May 11, 2013 - Germany
Native Javascript apps with
Saturday, 11 May 13

2. Introduction
2
Saturday, 11 May 13

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

4. What is PhoneGap?
4
Saturday, 11 May 13

5. What is PhoneGap
5
A way to wrap you HTML
app as a native application.
Saturday, 11 May 13

6. What is PhoneGap
6
A way to bridge ‘Native’ functionality to a Javascript API
Saturday, 11 May 13

7. Mission
7
PhoneGap’s mission is for
PhoneGap to cease to exist!
Saturday, 11 May 13

8. WTF?!?!?
Cordova, PhoneGap
8
Saturday, 11 May 13

9. PhoneGap Pre-Adobe
9
by
Saturday, 11 May 13

10. PhoneGap acquisistion by Adobe
10
Acquired by
Donated to
Saturday, 11 May 13

11. Acquisition by Adobe
11
“PhoneGap” “Callback”
“Cordova”
Saturday, 11 May 13

12. PhoneGap now
12
Where changes get committed
Saturday, 11 May 13

13. PhoneGap now
13
PhoneGap releases, still identical to
Apache Cordova
Saturday, 11 May 13

14. In conclusion
14
You’ll use PhoneGap!
Saturday, 11 May 13

15. Getting ready for lift-off
Installing PhoneGap
15
Saturday, 11 May 13

16. Getting PhoneGap
16
http://phonegap.com/download/
Saturday, 11 May 13

17. Lib is where the magic lives
17
“lib” contains all supported
platforms.... and a
♥ ♥ ♥ ♥ CLI tool ♥ ♥ ♥ ♥
Saturday, 11 May 13

18. XCode Command Line Tools
18
Saturday, 11 May 13

19. Creating your first project
19
$ ./path/to/cordova-ios/bin/create
/path/to/my_new_cordova_project
com.example.cordova_project_name
CordovaProjectName
Saturday, 11 May 13

20. Creating your first project
20
XCode Project
Saturday, 11 May 13

21. The app
21
Saturday, 11 May 13

22. First Run
22
Saturday, 11 May 13

23. Ready for action
23
Always use the “www” folder & always assume your
app is running from a filesystem instead of a web server!
Saturday, 11 May 13

24. Let’s take it easy
PhoneGap build
24
Saturday, 11 May 13

25. Creating builds using XCode
25
The pain:
Running updates and checking requirements over
and over again!
Saturday, 11 May 13

26. Creating builds using XCode
26
Saturday, 11 May 13

27. PhoneGap build to the rescue!
27
http://build.phonegap.com
Saturday, 11 May 13

28. PhoneGap build in a nutshell
28
Saturday, 11 May 13

29. Getting started
29
OR
Saturday, 11 May 13

30. Getting started
30
Saturday, 11 May 13

31. Getting started
31
OR
Repository that represents
“www”
Zip-file that represents
“www”
Saturday, 11 May 13

32. Getting started
32
Saturday, 11 May 13

33. The power of PhoneGap Build
33
Title
Code
Metadata Test
Saturday, 11 May 13

34. Build statusses
34
Grey: Still building, be patient
Blue-ish: Build succeeded, click to download
Red: Build error, action required
Saturday, 11 May 13

35. Build errors
35
Saturday, 11 May 13

36. Working in teams
36
Saturday, 11 May 13

37. Building like a pro
37
config.xml
W3C Widget Specification
https://gist.github.com/Martin1982/5063962
Saturday, 11 May 13

38. When the web just doesn’t suffice
Plug-ins
38
Saturday, 11 May 13

39. Accelerometer
39
Get device movement
in an X,Y, Z space.
Saturday, 11 May 13

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:
Saturday, 11 May 13

41. Compass
41
API to detect which way a
device user is pointing
Saturday, 11 May 13

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
Saturday, 11 May 13

43. Contacts
43
Access the user’s contact list
Saturday, 11 May 13

44. Device
44
•Name
•Cordova version
•Platform
•UUID
•Version
•Model
Saturday, 11 May 13

45. Events
45
Handles application state
(deviceready, paused etc)
Saturday, 11 May 13

46. File
46
Filesystem bridging, based
on the W3C File API
Saturday, 11 May 13

47. Geolocation
47
Caution: Already supported by browsers!
API to get the latitudes and
longitudes of the device.
Saturday, 11 May 13

48. Globalization
48
Currency, language, date time
Saturday, 11 May 13

49. InAppBrowser
49
The browser opened by
window.open()
Saturday, 11 May 13

50. Notification
50
•Alert
•Confirmation
•Beep
•Vibrate
Saturday, 11 May 13

51. Splashscreen
51
No matter how beautiful your splash screen is,
eventually you’ll need to show and hide it
Saturday, 11 May 13

52. Storage
52
SQL storage based on the W3C
WebSQL specification.
Caution; WebSQL is no longer maintained
IndexedDB is the new superhero!
Saturday, 11 May 13

53. Why reinvent the wheel
User plugins
53
Saturday, 11 May 13

54. Pick what you want
54
https://github.com/phonegap/phonegap-plugins
Saturday, 11 May 13

55. QUESTIONS
55
Saturday, 11 May 13

56. mdkeijzer@ibuildings.nl
@Martin1982
Thank you for listening
Saturday, 11 May 13