Download
going native how to build mobile apps n.
Skip this Video
Loading SlideShow in 5 Seconds..
Going Native: How to build mobile apps PowerPoint Presentation
Download Presentation
Going Native: How to build mobile apps

Going Native: How to build mobile apps

179 Vues Download Presentation
Télécharger la présentation

Going Native: How to build mobile apps

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Going Native: How to build mobile apps Stefan Wittmann Zen Product Specialist

  2. ‘Killer app‘? * www.dilbert.com

  3. I have to build a mobile app Buthow?

  4. The native approach • iOS Objective-C • Android  Java • Windows  .NET

  5. The native approach * This listing is neither complete nor prioritized

  6. The web approach • Leverages HTML 5 + CSS3

  7. The web approach * This listing is neither complete nor prioritized

  8. So many roads… • Native Development • Longer release cycles • Rewrite code for device types • Web base Development • Not a native app • Browser Feeling • Limited access to device features

  9. What about a hybrid? Native App Native App Browser Native Code HTML Code HTML Code Device API Device API Device API Native Hybrid Web

  10. What does PhoneGap offer? • Native Stub  Native App • Runs web pages in a container • Provides access to device features • Supports and more!

  11. Four steps to your mobile app • Setup PhoneGap • Develop mobile app with ZEN • Point the stub to your start URL • Test mobile app and deploy stub

  12. Setup • iOS • Install Xcode(part of the iOS SDK) • iOS Developer License • Android • Install Java SDK + Eclipse • Install Android SDK Tools • Etc.

  13. Step 1: How do I setup PhoneGap? • http://phonegap.com • Mac: • Install Node.js • $ sudo npm install -g phonegap • $ phonegap create my-app • $ cd my-app • $ phonegap run ios

  14. Step 2: How do I setup the stub? • Point it to your start URL • Choose an app name • Configure permissions and device support • Add icons • Configure whitelist URL’s!

  15. Step 3+4: Getting access to the device • Include cordova.js in your page • Gives access to multiple API’s • Wraps plugin API • Communication based on request/response to native stub

  16. Using the camera is easy! navigator.camera.getPicture(onSuccess, onFail, { quality: 50,     destinationType: Camera.DestinationType.FILE_URI }); function onSuccess(imageURI) {     var image = document.getElementById('myImage');     image.src = imageURI; } function onFail(message) {     alert('Failed because: ' + message); }

  17. What about the content? • Zen Mobile • Zen Desktop

  18. Start Writingyourmobile appTODAY