Martin de Keijzer gave a presentation on using Phonegap to create native mobile apps with JavaScript. Phonegap allows wrapping HTML apps as native apps by bridging native functionality to a JavaScript API. It was originally created by Nitobi and later acquired by Adobe, and is now maintained by the Apache Software Foundation as Cordova. The presentation covered installing Phonegap, creating a first project, using Phonegap Build for easier builds, working with plugins, and choosing from available open source plugins.

1. Native Javascript apps with
Phonegap
Martin de Keijzer
iOSOnRailsConf2013 13-14 April, Alushta Ukraine
Sunday, 14 April 13

2. Introduction
2
Sunday, 14 April 13

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

4. What is PhoneGap?
Subtitel
4
Sunday, 14 April 13

5. What is PhoneGap
A way to wrap you HTML
app as a native application.
5
Sunday, 14 April 13

6. What is PhoneGap
A way to bridge ‘Native’ functionality to a Javascript API
6
Sunday, 14 April 13

7. Mission
PhoneGap’s mission is for
PhoneGap to cease to exist!
7
Sunday, 14 April 13

8. Cordova, PhoneGap
WTF?!?!?
8
Sunday, 14 April 13

9. PhoneGap Pre-Adobe
by
9
Sunday, 14 April 13

10. PhoneGap acquisistion by Adobe
Donated to
Acquired by
10
Sunday, 14 April 13

11. Acquisition by Adobe
“PhoneGap” “Callback”
“Cordova”
11
Sunday, 14 April 13

12. PhoneGap now
Where changes get committed
12
Sunday, 14 April 13

13. PhoneGap now
PhoneGap releases, still identical to
Apache Cordova
13
Sunday, 14 April 13

14. In conclusion
You’ll use PhoneGap!
14
Sunday, 14 April 13

15. Installing PhoneGap
Getting ready for lift-off
15
Sunday, 14 April 13

16. Getting PhoneGap
http://phonegap.com/download/
16
Sunday, 14 April 13

17. Lib is where the magic lives
“lib” contains all supported
platforms.... and a
♥♥♥♥ CLI tool ♥ ♥ ♥ ♥
17
Sunday, 14 April 13

18. XCode Command Line Tools
18
Sunday, 14 April 13

19. Creating your first project
$ ./path/to/cordova-ios/bin/create
/path/to/my_new_cordova_project
com.example.cordova_project_name
CordovaProjectName
19
Sunday, 14 April 13

20. Creating your first project
XCode Project
20
Sunday, 14 April 13

21. The app
21
Sunday, 14 April 13

22. First Run
22
Sunday, 14 April 13

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

24. PhoneGap build
Let’s take it easy
24
Sunday, 14 April 13

25. Creating builds using XCode
The pain:
Running updates and checking requirements over
and over again!
25
Sunday, 14 April 13

26. Creating builds using XCode
26
Sunday, 14 April 13

27. PhoneGap build to the rescue!
http://build.phonegap.com
27
Sunday, 14 April 13

28. PhoneGap build in a nutshell
28
Sunday, 14 April 13

29. Getting started
OR
29
Sunday, 14 April 13

30. Getting started
30
Sunday, 14 April 13

31. Getting started
OR
Repository that represents Zip-file that represents
“www” “www” 31
Sunday, 14 April 13

32. Getting started
32
Sunday, 14 April 13

33. The power of PhoneGap Build
Title Metadata Test
Code
33
Sunday, 14 April 13

34. Build statusses
Grey: Still building, be patient
Blue-ish: Build succeeded, click to download
Red: Build error, action required
34
Sunday, 14 April 13

35. Build errors
35
Sunday, 14 April 13

36. Working in teams
36
Sunday, 14 April 13

37. Building like a pro
config.xml
W3C Widget Specification
https://gist.github.com/Martin1982/5063962
37
Sunday, 14 April 13

38. Plug-ins
When the web just doesn’t suffice
38
Sunday, 14 April 13

39. Accelerometer
Get device movement
in an X,Y, Z space.
39
Sunday, 14 April 13

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">
40
Sunday, 14 April 13

41. Compass
API to detect which way a
device user is pointing
41
Sunday, 14 April 13

42. Connection
See if a user is connected and
inspect the type of connection:
Wifi, xG, Ethernet
Caution navigator.isOnline is your close friend
42
Sunday, 14 April 13

43. Contacts
Access the user’s contact list
43
Sunday, 14 April 13

44. Device
•Name
•Cordova version
•Platform
•UUID
•Version
•Model
44
Sunday, 14 April 13

45. Events
Handles application state
(deviceready, paused etc)
45
Sunday, 14 April 13

46. File
Filesystem bridging, based
on the W3C File API
46
Sunday, 14 April 13

47. Geolocation
API to get the latitudes and
longitudes of the device.
Caution: Already supported by browsers!
47
Sunday, 14 April 13

48. Globalization
Currency, language, date time
48
Sunday, 14 April 13

49. InAppBrowser
The browser opened by
window.open()
49
Sunday, 14 April 13

50. Notification
•Alert
•Confirmation
•Beep
•Vibrate
50
Sunday, 14 April 13

51. Splashscreen
No matter how beautiful your splash screen is,
eventually you’ll need to show and hide it
51
Sunday, 14 April 13

52. Storage
SQL storage based on the W3C
WebSQL specification.
Caution; WebSQL is no longer maintained
IndexedDB is the new superhero!
52
Sunday, 14 April 13

53. User plugins
Why reinvent the wheel
53
Sunday, 14 April 13

54. Pick what you want
https://github.com/phonegap/phonegap-plugins 54
Sunday, 14 April 13

55. QUESTIONS
55
Sunday, 14 April 13

56. Thank you for listening
mdkeijzer@ibuildings.nl
@Martin1982
Sunday, 14 April 13