Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
×
Upcoming SlideShare
Building Cross-Platform Mobile Apps
Next
Download to read offline and view in fullscreen.

5

Share

Download to read offline

Building data driven mobile apps with phone gap and webapi

Download to read offline

Raleigh Code Camp 2013 For a video of this presentation, go to http://www.codeovereasy.com

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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!
  • alieladly

    Jul. 25, 2016
  • peter69own

    Feb. 18, 2015
  • chjin

    Sep. 26, 2014
  • AlexSandrocruz

    Aug. 29, 2014
  • prasadbcs

    Jan. 14, 2014

Raleigh Code Camp 2013 For a video of this presentation, go to http://www.codeovereasy.com

Views

Total views

10,493

On Slideshare

0

From embeds

0

Number of embeds

9

Actions

Downloads

86

Shares

0

Comments

0

Likes

5

×