0
Building Data
Driven Mobile
Apps with
PhoneGap and
WebAPI
Derek Smith
@smithderekm
codeovereasy.com
There are
10 kinds
of apps in
the world.
APP

PhoneGap

API

Asp.Net WebAPI
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
anothe...
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 Be...
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 ...
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...
/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...
Good luck!
Building data driven mobile apps with phone gap and webapi
Building data driven mobile apps with phone gap and webapi
Building data driven mobile apps with phone gap and webapi
Building data driven mobile apps with phone gap and webapi
Building data driven mobile apps with phone gap and webapi
Building data driven mobile apps with phone gap and webapi
Building data driven mobile apps with phone gap and webapi
Building data driven mobile apps with phone gap and webapi
Building data driven mobile apps with phone gap and webapi
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

7,849

Published on

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
7,849
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
63
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Building data driven mobile apps with phone gap and webapi"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×