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

2. Building Data
Driven Mobile
Apps with
PhoneGap and
WebAPI

3. Derek Smith
@smithderekm
codeovereasy.com

4. There are
10 kinds
of apps in
the world.

10. APP
PhoneGap
API
Asp.Net WebAPI

11. ASP.NET Web API is an ideal
platform for building RESTful
applications on the .NET
Framework.

13. Architecture

14. HTML
CSS
JSON
jQueryMobile
WebApi
DAL
Data Store

15. HTML
CSS
JSON
jQueryMobile
WebApi
DAL
Data Store

17. /api/account/
{POST}

18. /api/outagereports/
{GET}

19. /api/outagereport
{POST}
/api/outagereport
{GET, PUT}

20. /api/outagereport
{DELETE}

21. /api/outagereport
{POST}
Upload Photo &
GPS Coordinates

22. Demo
{structure}
http://www.flickr.com/photos/steevithak/

23. 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

25. Demo
{CORS}
http://www.flickr.com/photos/steevithak/

26. Authentication

27. Forms
•Cookie Based
•WebApi has no UI
Basic
•HTTP header
•Plaintext on wire
Token
•3 step
•Token passed on header

28. GET
401 Unauthorized
POST
Authorization Basic
Client
200
TOKEN
Authorization
Server
/api/account
POST
Authorization Bearer: TOKEN
200
Resource
Server
/api/report

29. Enable Token Support on Web API

30. Enable Token Support on Web API
Add Token Method to Controller

31. Enable Token Support on Web API
Add Token Method to Controller
Update client Logon to get Token

32. Enable Token Support on Web API
Add Token Method to Controller
Update client Logon to get Token
Update API calls to pass token

33. Demo
{Authentication}
http://www.flickr.com/photos/steevithak/

34. Device Features

35. 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

37. /api/outagereport
{POST}
/api/outagereportphoto
{POST}
Upload Photo & GPS
Coordinates

38. Demo
{DEVICE FEATURES}
http://www.flickr.com/photos/steevithak/

39. Headache #1:
Cross Origin Resource Sharing

40. Headache #2:
<access origin =“*”/>

41. Headache #3:
Emulator networking

42. • http://docs.phonegap.com
• http://coenraets.org/blog/phonegap-tutorial/
• Telerik Icenium – newly release
implementation IDE of Cordova

43. Good luck!