jQuery Mobile and HTML5 in PhoneGap for Mobile Apps

1. jQueryMobile and HTML5 in PhoneGap for Mobile Apps varsubTitle = { PhoneGapis an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores };

2. Agenda • Why PhoneGap? • Who is PhoneGap...really? • Getting Started with PhoneGap • PhoneGap APIs • Extending PhoneGap • Final Considerations

3. Why PhoneGap? • There are more than 100 000 000 WEB developers! • The web is awesome!

4. Why PhoneGap? • The realistic reason: Cross platform applications with HTML/JS will be faster and easier

5. What is PhoneGap ? • PhoneGap is an open-source mobile development framework produced by Nitobi, purchased by Adobe Systems. • The resulting applications are hybrid, meaning that they are neither truly native

6. What is PhoneGap ? Your Code

7. What is PhoneGap ? Your Code Native Web View

8. What is PhoneGap ? Your Code Native Web View Native APIs

9. What is PhoneGap ? Your Code Native Web View Native APIs Native App - .apk, .xap, etc.

10. What is PhoneGap? • PhoneGap uses the native browser on thedevice to render the HTML/CSS/JS • Keep in mind that can affect the experience It also keeps apps nice and small

11. What is PhoneGap ? • PhoneGap uses the native project format for each platform • Open, emulate, and test from within the native development environment!

12. What is PhoneGap ? • Because it’s using the native projects it’s fully extendable.

13. What is PhoneGap? • PhoneGap provides a JavaScript library that reaches out into the native APIs • That means anything the device is doable

14. What is PhoneGap? • PhoneGapis completely open source and has been submitted to the Apache Foundation. http:// incubator.apache.org/callback/

15. What is PhoneGap? • The entire project is available on Github: https://github.com/cordova

16. Getting Started with PhoneGap • There are multiple ways to “start” with PhoneGap. • The project includes command line tools, IDE plugins, and Dreamweaver ships with PhoneGap support.

17. Getting Started with PhoneGap • Demo: Hello World

18. Getting Started with PhoneGap • Very important to keep in mind that we’re building a mobile app, not a mobile web app. • You can use ANY framework you want, but try to design for an app.

19. PhoneGap APIs • Out of the box, PhoneGap provides support for a number of basic device APIs. - Accelerometer - Camera - Capture - Compass - Connection - Contacts - Device - Events - File - Geolocation - Media - Network - Notification - Storage

20. PhoneGapAPIs • Supported Features

21. PhoneGap APIs • Camera API example

22. PhoneGap for Windows Phone 8 • Starting from Apache Cordova 2.3.0, released on 7th of January 2013 has a full support for Windows Phone 8 http://bit.ly/XlbV92

23. PhoneGap in Windows 8 Store Apps • Windows 8 apps can be designed and coded using HTML, CSS and JavaScript just like PhoneGap apps can.http://bit.ly/VIITP3

24. PhoneGap& jQuery for Windows 8 • Because Microsoft has integrated a new security model in Windows 8, jQuery has to be modified slightly in order to be usable for app development.http://bit.ly/PYyvyI

25. Debugging PhoneGap • It’s all just HTML/JS, so you can use your browser! • Take advantage of Chrome Developer tools/Firebug to test your app’s UI.

26. Debugging PhoneGap • But what about Device APIs? • Because we’re in the web view, there is no way to do line-by-line debugging.

27. Debugging PhoneGap • But what about Device APIs? • Because we’re in the web view, there is no way to do line-by-line debugging.

28. Debugging PhoneGap • Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.

29. Debugging PhoneGap • But, a much easier way:http://debug.phonegap.com/

30. Extending PhoneGap • For added functionality PhoneGapprovides a plug-in mechanism. • Includes OS-specific code/libraries and the JS to use it in PhoneGap Some of the helpful ones: PayPal, Facebook, Push Notification

31. Extending PhoneGap • Available at https://github.com/phonegap/phonegap-plugins

32. Considerations Rememberthat we’re on different platforms

33. Considerations Versus

34. Considerations • Couple of tips: • Always test features first (if !supported) • For UI-specifics, you can use the device • class to get device info

35. Considerations • Couple of tips: • Always test features first (if !supported) • For UI-specifics, you can use the device • class to get device info

36. Build PhoneGap Apps in the Cloud • One more thing: • build.phonegap.com

37. Build PhoneGap Apps in the Cloud • The Problem: • You’re building a cross-platform app, but dealing with a lot of native projects

38. Build PhoneGap Apps in the Cloud • The Solution:

39. Build PhoneGap Apps in the Cloud • Build includes git support so you can use gitand host projects on PhoneGap or build a project from Github.

40. Build PhoneGap Apps in the Cloud • Sample project in Github: • https://github.com/mmateev/TwitterCordovaApp/

42. Expect very soon: SharePoint Saturday! • Saturday, June 8, 2013 • Same familiar format – 1 day filled with sessions focused on SharePoint technologies • Best SharePoint professionals in the region • Registrations will be open next week (15th)! • www.SharePointSaturday.eu

43. Thanks to our Sponsors: Diamond Sponsor: Platinum Sponsors: Gold Sponsors: Swag Sponsors: Media Partners:

44. Q & A