Native Javascript apps with PhoneGap

  • View
    481

  • Download
    0

Embed Size (px)

DESCRIPTION

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.

Text of Native Javascript apps with PhoneGap

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

2. Introduction 2 Sunday, 14 April 13 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. Subtitel What is PhoneGap? 4 Sunday, 14 April 13 5. What is PhoneGap 5 A way to wrap you HTML app as a native application. Sunday, 14 April 13 6. What is PhoneGap 6 A way to bridge Native functionality to a Javascript API Sunday, 14 April 13 7. Mission 7 PhoneGaps mission is for PhoneGap to cease to exist! Sunday, 14 April 13 8. WTF?!?!? Cordova, PhoneGap 8 Sunday, 14 April 13 9. PhoneGap Pre-Adobe 9 by Sunday, 14 April 13 10. PhoneGap acquisistion by Adobe 10 Acquired by Donated to Sunday, 14 April 13 11. Acquisition by Adobe 11 PhoneGap Callback Cordova Sunday, 14 April 13 12. PhoneGap now 12 Where changes get committed Sunday, 14 April 13 13. PhoneGap now 13 PhoneGap releases, still identical to Apache Cordova Sunday, 14 April 13 14. In conclusion 14 Youll use PhoneGap! Sunday, 14 April 13 15. Getting ready for lift-off Installing PhoneGap 15 Sunday, 14 April 13 16. Getting PhoneGap 16 http://phonegap.com/download/ Sunday, 14 April 13 17. Lib is where the magic lives 17 lib contains all supported platforms.... and a CLI tool Sunday, 14 April 13 18. XCode Command Line Tools 18 Sunday, 14 April 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 Sunday, 14 April 13 20. Creating your first project 20 XCode Project Sunday, 14 April 13 21. The app 21 Sunday, 14 April 13 22. First Run 22 Sunday, 14 April 13 23. Ready for action 23 Always use the www folder & always assume your app is running from a lesystem instead of a web server! Sunday, 14 April 13 24. Lets take it easy PhoneGap build 24 Sunday, 14 April 13 25. Creating builds using XCode 25 The pain: Running updates and checking requirements over and over again! Sunday, 14 April 13 26. Creating builds using XCode 26 Sunday, 14 April 13 27. PhoneGap build to the rescue! 27 http://build.phonegap.com Sunday, 14 April 13 28. PhoneGap build in a nutshell 28 Sunday, 14 April 13 29. Getting started 29 OR Sunday, 14 April 13 30. Getting started 30 Sunday, 14 April 13 31. Getting started 31 OR Repository that represents www Zip-le that represents www Sunday, 14 April 13 32. Getting started 32 Sunday, 14 April 13 33. The power of PhoneGap Build 33 Title Code Metadata Test Sunday, 14 April 13 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. Build errors 35 Sunday, 14 April 13 36. Working in teams 36 Sunday, 14 April 13 37. Building like a pro 37 cong.xml W3C Widget Specication https://gist.github.com/Martin1982/5063962 Sunday, 14 April 13 38. When the web just doesnt suffice Plug-ins 38 Sunday, 14 April 13 39. Accelerometer 39 Get device movement in an X,Y, Z space. Sunday, 14 April 13 40. Camera & Capture & Media 40 Use the devices library, camera and microphone to work with local audio, video and images. Dont forget iOS 6 supports: Sunday, 14 April 13 41. Compass 41 API to detect which way a device user is pointing Sunday, 14 April 13 42. Connection 42 See if a user is connected and inspect the type of connection: Wi, xG, Ethernet Caution navigator.isOnline is your close friend Sunday, 14 April 13 43. Contacts 43 Access the users contact list Sunday, 14 April 13 44. Device 44 Name Cordova version Platform UUID Version Model Sunday, 14 April 13 45. Events 45 Handles application state (deviceready, paused etc) Sunday, 14 April 13 46. File 46 Filesystem bridging, based on the W3C File API Sunday, 14 April 13 47. Geolocation 47 Caution: Already supported by browsers! API to get the latitudes and longitudes of the device. Sunday, 14 April 13 48. Globalization 48 Currency, language, date time Sunday, 14 April 13 49. InAppBrowser 49 The browser opened by window.open() Sunday, 14 April 13 50. Notification 50 Alert Conrmation Beep Vibrate Sunday, 14 April 13 51. Splashscreen 51 No matter how beautiful your splash screen is, eventually youll need to show and hide it Sunday, 14 April 13 52. Storage 52 SQL storage based on the W3C WebSQL specication. Caution; WebSQL is no longer maintained IndexedDB is the new superhero! Sunday, 14 April 13 53. Why reinvent the wheel User plugins 53 Sunday, 14 April 13 54. Pick what you want 54 https://github.com/phonegap/phonegap-plugins Sunday, 14 April 13 55. QUESTIONS 55 Sunday, 14 April 13 56. mdkeijzer@ibuildings.nl @Martin1982 Thank you for listening Sunday, 14 April 13