Building data driven mobile apps with phone gap and webapi

9,750 views
9,128 views

Published on

Raleigh Code Camp 2013 For a video of this presentation, go to http://www.codeovereasy.com

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,750
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
78
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Building data driven mobile apps with phone gap and webapi

  1. 1. Building Data Driven Mobile Apps with PhoneGap and WebAPI
  2. 2. Derek Smith @smithderekm codeovereasy.com
  3. 3. There are 10 kinds of apps in the world.
  4. 4. APP PhoneGap API Asp.Net WebAPI
  5. 5. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.
  6. 6. Architecture
  7. 7. HTML CSS JSON jQueryMobile WebApi DAL Data Store
  8. 8. HTML CSS JSON jQueryMobile WebApi DAL Data Store
  9. 9. /api/account/ {POST}
  10. 10. /api/outagereports/ {GET}
  11. 11. /api/outagereport {POST} /api/outagereport {GET, PUT}
  12. 12. /api/outagereport {DELETE}
  13. 13. /api/outagereport {POST} Upload Photo & GPS Coordinates
  14. 14. Demo {structure} http://www.flickr.com/photos/steevithak/
  15. 15. Cross-origin resource sharing (CORS) is a mechanism that allows JavaScript on a web page to make XMLHttpRequests to another domain, not the domain the JavaScript originated from. http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
  16. 16. Demo {CORS} http://www.flickr.com/photos/steevithak/
  17. 17. Authentication
  18. 18. Forms •Cookie Based •WebApi has no UI Basic •HTTP header •Plaintext on wire Token •3 step •Token passed on header
  19. 19. GET 401 Unauthorized POST Authorization Basic Client 200 TOKEN Authorization Server /api/account POST Authorization Bearer: TOKEN 200 Resource Server /api/report
  20. 20. Enable Token Support on Web API
  21. 21. Enable Token Support on Web API Add Token Method to Controller
  22. 22. Enable Token Support on Web API Add Token Method to Controller Update client Logon to get Token
  23. 23. Enable Token Support on Web API Add Token Method to Controller Update client Logon to get Token Update API calls to pass token
  24. 24. Demo {Authentication} http://www.flickr.com/photos/steevithak/
  25. 25. Device Features
  26. 26. PhoneGap Plugin Model $ phonegap local plugin add org.apache.cordova.device $ phonegap local plugin add org.apache.cordova.camera $ phonegap local plugin add org.apache.cordova.geolocation $ phonegap [phonegap] [phonegap] [phonegap] local plugin list org.apache.cordova.camera org.apache.cordova.device org.apache.cordova.geolocation
  27. 27. /api/outagereport {POST} /api/outagereportphoto {POST} Upload Photo & GPS Coordinates
  28. 28. Demo {DEVICE FEATURES} http://www.flickr.com/photos/steevithak/
  29. 29. Headache #1: Cross Origin Resource Sharing
  30. 30. Headache #2: <access origin =“*”/>
  31. 31. Headache #3: Emulator networking
  32. 32. • http://docs.phonegap.com • http://coenraets.org/blog/phonegap-tutorial/ • Telerik Icenium – newly release implementation IDE of Cordova
  33. 33. Good luck!

×