building data driven mobile apps with phone gap and webapi

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!