1.
PhonegapMartin de KeijzerDutch Mobile Conference - June 7, 2013 - The NetherlandsNative Javascript apps withFriday, 7 June 13

2.
Introduction2Friday, 7 June 13

3.
About meMartin de KeijzerDutch web developer3@Martin1982PHPBenelux Board MemberWorking for Ibuildingshttp://www.martindekeijzer.nlFriday, 7 June 13

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

5.
What is PhoneGap5A way to wrap you HTMLapp as a native application.Friday, 7 June 13

6.
What is PhoneGap6A way to bridge ‘Native’ functionality to a Javascript APIFriday, 7 June 13

7.
Mission7PhoneGap’s mission is forPhoneGap to cease to exist!Friday, 7 June 13

8.
WTF?!?!?Cordova, PhoneGap8Friday, 7 June 13

9.
History class9Friday, 7 June 13

10.
PhoneGap Pre-Adobe10byFriday, 7 June 13

11.
PhoneGap acquisistion by Adobe11Acquired byDonated toFriday, 7 June 13

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

13.
PhoneGap now13Where changes get committedFriday, 7 June 13

14.
PhoneGap now14PhoneGap releases, still identical toApache CordovaFriday, 7 June 13

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

16.
Getting ready for lift-offInstalling PhoneGap16Friday, 7 June 13

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

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

19.
XCode Command Line Tools19Friday, 7 June 13

20.
Creating your first project20$ ./path/to/cordova-ios/bin/create/path/to/my_new_cordova_projectcom.example.cordova_project_nameCordovaProjectNameFriday, 7 June 13

21.
Creating your first project21XCode ProjectFriday, 7 June 13

22.
The app22Friday, 7 June 13

23.
First Run23Friday, 7 June 13

24.
Android24Friday, 7 June 13

25.
BlackBerry WebWorks25Friday, 7 June 13

26.
BlackBerry WebWorks26Set the project.propertiesand run:ant qnx load-simulatorFriday, 7 June 13

27.
Ready for action27Always use the “www” folder & always assume yourapp 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 easyPhoneGap build28Friday, 7 June 13

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

30.
Creating builds using platform specific tools30Friday, 7 June 13

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

32.
PhoneGap build in a nutshell32Friday, 7 June 13

33.
Getting started33ORFriday, 7 June 13

34.
Getting started34Friday, 7 June 13

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

36.
Getting started36Friday, 7 June 13

37.
The power of PhoneGap Build37TitleCodeMetadata TestFriday, 7 June 13

38.
Build statusses38Grey: Still building, be patientBlue-ish: Build succeeded, click to downloadRed: Build error, action requiredFriday, 7 June 13

39.
Build errors39Friday, 7 June 13

40.
Working in teams40Friday, 7 June 13

41.
Building like a pro41config.xmlW3C Widget Specificationhttps://gist.github.com/Martin1982/5063962Friday, 7 June 13

42.
When the web just doesn’t sufficePlug-ins42Friday, 7 June 13

43.
Accelerometer43Get device movementin an X,Y, Z space.Friday, 7 June 13

44.
Camera & Capture & Media44Use the device’s library,camera and microphone towork with local audio, videoand images.<input type="file" accept="image/*" capture="camera">Don’t forget iOS 6 supports:Friday, 7 June 13

45.
Compass45API to detect which way adevice user is pointingFriday, 7 June 13

46.
Connection46See if a user is connected andinspect the type of connection:Wifi, xG, EthernetCaution navigator.isOnline is your close friendFriday, 7 June 13

47.
Contacts47Access the user’s contact listFriday, 7 June 13

48.
Device48•Name•Cordova version•Platform•UUID•Version•ModelFriday, 7 June 13

49.
Events49Handles application stateFriday, 7 June 13

50.
File50Filesystem bridging, basedon the W3C File APIFriday, 7 June 13

51.
Geolocation51Caution: Already supported by browsers!API to get the latitudes andlongitudes of the device.Friday, 7 June 13

52.
Globalization52Currency, language, date & timeFriday, 7 June 13

53.
InAppBrowser53The browser opened bywindow.open()Extremely useful to openexternal links!Friday, 7 June 13

54.
Notification54•Alert•Confirmation•Beep•VibrateFriday, 7 June 13

55.
Splashscreen55No matter how beautiful your splash screen is,eventually you’ll need to show and hide itFriday, 7 June 13

56.
Storage56SQL storage based on the W3CWebSQL specification.Caution; WebSQL is no longer maintainedIndexedDB is the new superhero!Friday, 7 June 13

57.
Why reinvent the wheelUser plugins57Friday, 7 June 13

58.
Pick what you want58https://github.com/phonegap/phonegap-pluginsFriday, 7 June 13

59.
Creating your own plugin59window.echo = function(str, callback) { cordova.exec(callback, function(err) { callback(Nothing to echo.); }, "Echo", "echo", [str]);};Define the Javascript MethodUse Cordova.exec and give the followingarguments:JavaScript Success callback functionJavaScript Error handling callback functionNative class to map toNative method to map toNative method argumentsFriday, 7 June 13

60.
Now it’s your turnConclusion60Friday, 7 June 13

61.
Conclusion61Package web applications as native appsEnrich applications with native pluginsQuick deployment with PhoneGap Build VS. fine-tuned deployment with PhoneGap CLI tools / IDEIf it doesn’t fit the bill? Download or write your ownplugin!Always remember; your app runs as a localapplication straight from the filesystem as in file://Friday, 7 June 13

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

63.
QUESTIONS63Friday, 7 June 13

64.
mdkeijzer@ibuildings.nl@Martin1982Thank you for listeningFriday, 7 June 13