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

Building data driven mobile apps with phone gap and webapi

on

  • 6,138 views

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

Statistics

Views

Total Views
6,138
Views on SlideShare
6,138
Embed Views
0

Actions

Likes
3
Downloads
36
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building data driven mobile apps with phone gap and webapi Building data driven mobile apps with phone gap and webapi Presentation Transcript

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