Upload
derek-smith
View
7.420
Download
3
Tags:
Embed Size (px)
DESCRIPTION
Raleigh Code Camp 2013 For a video of this presentation, go to http://www.codeovereasy.com
Citation preview
Building Data Driven Mobile Apps with PhoneGap and WebAPI
Derek Smith @smithderekm
codeovereasy.com
There are 10 kinds
of apps in the world.
API APP Asp.Net WebAPI PhoneGap
ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.
Architecture
Data Store
DAL
WebApi
JSON
HTML
jQueryMobile
CSS
Data Store
DAL
WebApi
JSON
HTML
jQueryMobile
CSS
/api/account/ {POST}
/api/outagereports/ {GET}
/api/outagereport {POST} /api/outagereport {GET, PUT}
/api/outagereport {DELETE}
/api/outagereport {POST} Upload Photo & GPS Coordinates
http://www.flickr.com/photos/steevithak/
Demo {structure}
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
http://www.flickr.com/photos/steevithak/
Demo {CORS}
Authentication
•Cookie Based
•WebApi has no UI Forms
•HTTP header
•Plaintext on wire Basic
•3 step
•Token passed on header Token
Client
Authorization Server
Resource Server
POST Authorization Basic
401 Unauthorized
GET
200 TOKEN
POST Authorization Bearer: TOKEN
200
/api/account
/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
http://www.flickr.com/photos/steevithak/
Demo {Authentication}
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 local plugin list [phonegap] org.apache.cordova.camera [phonegap] org.apache.cordova.device [phonegap] org.apache.cordova.geolocation
/api/outagereport {POST} /api/outagereportphoto
{POST} Upload Photo & GPS Coordinates
http://www.flickr.com/photos/steevithak/
Demo {DEVICE FEATURES}
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!