Your SlideShare is downloading. ×
Building data driven mobile apps with phone gap and webapi
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Building data driven mobile apps with phone gap and webapi

6,967
views

Published 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

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,967
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
45
Comments
0
Likes
4
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!