Building data driven mobile apps with phone gap and webapi

  • 6,482 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,482
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
43
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Building Data Driven Mobile Apps with PhoneGap and WebAPI
  • 2. Derek Smith @smithderekm codeovereasy.com
  • 3. There are 10 kinds of apps in the world.
  • 4. APP PhoneGap API Asp.Net WebAPI
  • 5. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.
  • 6. Architecture
  • 7. HTML CSS JSON jQueryMobile WebApi DAL Data Store
  • 8. HTML CSS JSON jQueryMobile WebApi DAL Data Store
  • 9. /api/account/ {POST}
  • 10. /api/outagereports/ {GET}
  • 11. /api/outagereport {POST} /api/outagereport {GET, PUT}
  • 12. /api/outagereport {DELETE}
  • 13. /api/outagereport {POST} Upload Photo & GPS Coordinates
  • 14. Demo {structure} http://www.flickr.com/photos/steevithak/
  • 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. Demo {CORS} http://www.flickr.com/photos/steevithak/
  • 17. Authentication
  • 18. Forms •Cookie Based •WebApi has no UI Basic •HTTP header •Plaintext on wire Token •3 step •Token passed on header
  • 19. GET 401 Unauthorized POST Authorization Basic Client 200 TOKEN Authorization Server /api/account POST Authorization Bearer: TOKEN 200 Resource Server /api/report
  • 20. Enable Token Support on Web API
  • 21. Enable Token Support on Web API Add Token Method to Controller
  • 22. Enable Token Support on Web API Add Token Method to Controller Update client Logon to get Token
  • 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. Demo {Authentication} http://www.flickr.com/photos/steevithak/
  • 25. Device Features
  • 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. /api/outagereport {POST} /api/outagereportphoto {POST} Upload Photo & GPS Coordinates
  • 28. Demo {DEVICE FEATURES} http://www.flickr.com/photos/steevithak/
  • 29. Headache #1: Cross Origin Resource Sharing
  • 30. Headache #2: <access origin =“*”/>
  • 31. Headache #3: Emulator networking
  • 32. • http://docs.phonegap.com • http://coenraets.org/blog/phonegap-tutorial/ • Telerik Icenium – newly release implementation IDE of Cordova
  • 33. Good luck!