going mobile #2 - using phonegap to go native

17
Going Mobile #2 Going Mobile #2 Creating Native Apps with PhoneGap Creating Native Apps with PhoneGap

Upload: stephen-g

Post on 18-Dec-2014

406 views

Category:

Technology


1 download

DESCRIPTION

Talk 2 of 2 that I gave at Feb 18th's South Florida CodeCamp

TRANSCRIPT

Page 1: Going Mobile #2 - Using PhoneGap to go native

Going Mobile #2Going Mobile #2

Creating Native Apps with PhoneGapCreating Native Apps with PhoneGap

Page 2: Going Mobile #2 - Using PhoneGap to go native

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

Page 3: Going Mobile #2 - Using PhoneGap to go native

Mobile MarketMobile MarketMobile MarketMobile Market

Page 4: Going Mobile #2 - Using PhoneGap to go native

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

Page 5: Going Mobile #2 - Using PhoneGap to go native

Native ApplicationNative ApplicationNative ApplicationNative Application

Page 6: Going Mobile #2 - Using PhoneGap to go native

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

Page 7: Going Mobile #2 - Using PhoneGap to go native

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

Page 8: Going Mobile #2 - Using PhoneGap to go native

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

Page 9: Going Mobile #2 - Using PhoneGap to go native

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

Page 10: Going Mobile #2 - Using PhoneGap to go native

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

Page 11: Going Mobile #2 - Using PhoneGap to go native

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

Page 12: Going Mobile #2 - Using PhoneGap to go native

Demo CodeDemo CodeDemo CodeDemo Code

Page 13: Going Mobile #2 - Using PhoneGap to go native

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!

Page 14: Going Mobile #2 - Using PhoneGap to go native

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 !

Page 15: Going Mobile #2 - Using PhoneGap to go native

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/

Page 16: Going Mobile #2 - Using PhoneGap to go native

Contacting MeContacting MeContacting MeContacting Me

• Email:Email:[email protected]@[email protected]@morningz.com

• LinkedIn:LinkedIn:[email protected]@morningz.com

• Twitter: Twitter: @MorningZ@MorningZ

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

Page 17: Going Mobile #2 - Using PhoneGap to go native

Q & AQ & AQ & AQ & A