1 / 44

jQuery Mobile and HTML5 in PhoneGap for Mobile Apps

jQuery Mobile and HTML5 in PhoneGap for Mobile Apps. var subTitle = { PhoneGap is an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores } ;. Agenda. Why PhoneGap ? Who is PhoneGap ...really?

kaethe
Download Presentation

jQuery Mobile and HTML5 in PhoneGap for Mobile Apps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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/

  41. 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

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

  43. Q & A

More Related