going mobile #2 - using phonegap to go native

Going Mobile #2Going Mobile #2

Creating Native Apps with PhoneGapCreating Native Apps with PhoneGap

Who Am I ?Who Am I ?Who Am I ?Who Am I ?

• AuctionAnything.comAuctionAnything.com• ASP.NET/MS SQLASP.NET/MS SQL• jQuery/JavaScriptjQuery/JavaScript• Mobile DeveloperMobile Developer

• @MorningZ@MorningZ

Stephen GilboyStephen GilboyStephen GilboyStephen Gilboy

Mobile MarketMobile MarketMobile MarketMobile Market

Let’s Go Mobile!Let’s Go Mobile!Let’s Go Mobile!Let’s Go Mobile!

Native ApplicationNative ApplicationNative ApplicationNative Application

PhoneGapPhoneGapPhoneGapPhoneGaphttp://www.phonegap.com

PhoneGap is an HTML5 app platform that allows

you to author native applications with web technologies and get

access to APIs and app stores. PhoneGap

leverages web technologies developers

already know best... HTML and JavaScript

Platform SupportPlatform SupportPlatform SupportPlatform Supporthttp://phonegap.com/about/features

PhoneGap WrapperPhoneGap WrapperPhoneGap WrapperPhoneGap WrapperPhoneGap provides an abstraction layer over

your JavaScript to give hooks to Native API’s like the Accelerometer, Camera, Media, Storage and

Geolocation of your phone/OS

What about .NET?What about .NET?What about .NET?What about .NET?PhoneGap is about turning your HTML5/JS/CSS files into a native

application.

Obviously this would not include .aspx/.ashx/mvc pages since

there is no version of .NET Framework running on the phone

So how do I leverage .NET?So how do I leverage .NET?So how do I leverage .NET?So how do I leverage .NET?Use your .NET code as your “data”

layer using handlers as access to your SQL Server data

The “app” itself will be html files making Ajax calls and consuming your

data via JSON that your server side code outputs

Consuming data via JSONConsuming data via JSONConsuming data via JSONConsuming data via JSONUsing the NewtonSoft JSON.Net Library, turn .NET

objects into JavaScript-consumable objects

http://james.newtonking.com/pages/json-net.aspx

Demo CodeDemo CodeDemo CodeDemo Code

Actually Building the AppActually Building the AppActually Building the AppActually Building the AppPhoneGap has made it TOO easy!

The site “build.phonegap.com” will take your HTML5/JS/CSS3 project and

build it for all platforms for you!

Wrap UpWrap UpWrap UpWrap Up

• Using your existing web Using your existing web skills, you can create a skills, you can create a robust mobile application.robust mobile application.

• jQuery Mobile does a lot of jQuery Mobile does a lot of the heavy lifting for you, the heavy lifting for you, simply define some simply define some properties on the DOM properties on the DOM objects and jQuery takes care objects and jQuery takes care of the rest !of the rest !

Helpful LinksHelpful LinksHelpful LinksHelpful Links

PhoneGap API Referencehttp://docs.phonegap.com/en/1.4.1/

PhoneGap Buildhttp://build.phonegap.com/

Ajax Callouts to ASPX server pageshttp://stackoverflow.com/questions/7730289/jquerymobile-phonegap-and-asp-net-mvc/

PhoneGap API Referencehttp://docs.phonegap.com/en/1.4.1/

PhoneGap Buildhttp://build.phonegap.com/

Ajax Callouts to ASPX server pageshttp://stackoverflow.com/questions/7730289/jquerymobile-phonegap-and-asp-net-mvc/

Contacting MeContacting MeContacting MeContacting Me

• Email:Email:sgilboy@auctionanything.comsgilboy@auctionanything.commorningz@morningz.commorningz@morningz.com

• LinkedIn:LinkedIn:morningz@morningz.commorningz@morningz.com

• Twitter: Twitter: @MorningZ@MorningZ

• Link to this content:Link to this content:http://bit.ly/codecamp_phonegaphttp://bit.ly/codecamp_phonegap

Q & AQ & AQ & AQ & A