Matt training-html-halfday

Build your firstmobile app with

HTML5, PhoneGap, jQuery and APIs

@mdobs@apigee

hashtag: #ApigeeHTML5

Tuesday, September 3, 13

Matt [email protected]@apigee.comTim Burks@timburks


mailto:[email protected]


Did everybody install PhoneGap + XCode, ADT or Visual Studio?


I work @ Apigee


We help power eBayBest Buy, Walgreens, Gilt Groupe, NewEgg, Cars.com, Dell, Getty Images, GraceNote, Shazam, HomeAway, Pearson, cheezburger


We’ve organized this training in LA, San Jose, Austin, Denver, Amsterdam, Atlanta, Detroit, Toronto…


Why do we do this?Why free?


Apigee is always free for developersFree Hosted Accounts25GB storage limit,10M push notifs/mono API/bandwidth limitCommercial use OKFree OSS versiongit.io/usergrid


Paid plans available for large companies if you need to deploy this on your own servers or SLAs, 4 nines, multi-region, phone support, more storage, etc.


What do you want to learn today?


Everybody good withHTML Basics,Variables,Functions,etc. ?


1 HTML52 API Backend3 Add more!4 PhoneGap5 Q&A


Meetup tonight @ DUMBO Kitchen


Buildinga simple list app


HTML5


use relatively few:data-attributesgeolocationhistory


diveintohtml5.info


http://diveintohtml5.info/

http://diveintohtml5.info/

Other approachesNativeMonoTouchRubyMotion etc.


jQueryand jQuery Mobile


Section 1Start with the UI


Build something that looks like this

j.mp/apigee-loc-ss


http://j.mp/apigee-mockup

http://j.mp/apigee-mockup

The nice guys at Codiqa let me offer you unlimited trial:

j.mp/codiqa-trial-unlimited


http://j.mp/codiqa-trial-unlimited






Answer

j.mp/apigee-loc-1


http://j.mp/apigee-ui

http://j.mp/apigee-ui

Section 2Add live data


Why do we need a backend?


Many options here too…


We’re going to usean API Backend today!


It’s like a database that you call directly from your client code.


It’s a cloud service that makes it easy tostore your data, retrieve it & query it.


It’s a like a Dropbox or iCloud to synchronize all your app data across users and devices


ServerInfrastructure

AppCode SDK API


Apigee App Servicesvs. Usergrid


Let’s take a look at Apigee

j.mp/apigee-sign-up


https://j.mp/apigee-sign-up




Add some data


SDKs available for…

JS, node.js, iOS, Android, Ruby, Rails,C#, Java, WP8, etc.


Explore the Quickstart

j.mp/apigee-loc-qs


http://j.mp/apigee-js-sdk

http://j.mp/apigee-js-sdk

Add some view code


Answer

j.mp/apigee-loc-2


http://j.mp/apigee-read

http://j.mp/apigee-read

Now let’s create a form!


Answer

j.mp/apigee-loc-3


http://j.mp/apigee-form

http://j.mp/apigee-form

Wire it up to Apigee!


Answer

j.mp/apigee-loc-4


http://j.mp/apigee-write

http://j.mp/apigee-write

Section 3Run on mobile!


A look at PhoneGapPhoneGap Build, Trigger.io, etc.


Apache Cordovavs.Adobe PhoneGap


Add your HTML


Android projectj.mp/apigee-android

iOS projectj.mp/apigee-ios


http://j.mp/apigee-android

http://j.mp/apigee-android

http://j.mp/apigee-ios

http://j.mp/apigee-ios

Run!


What runs where?


PhoneGap Build


Full Source of class

j.mp/apigee-loc-src


Congrats!


What else could you do next?


Push NotificationsFile StorageSocial GraphLocal capabilities3rd-party integrationLegacy integrationCode execution


Great for prototyping,works at scale too!


When you use Apigee, every piece of data you store gets saved in 3 different data centers around the US (soon 3 copies in Europe too)


A top 10 US retaileruses it for everye-commerce call made to its app or website (over 50M users, thousands of calls per second).


One of the 10 largest private companies in the US used it to create an internal info management system for its 52k employees


A large luxury brand based in the UK mandates all contractors use it to build catalogs, campaign sites and apps for them


Apigee is free for developersFree Hosted Accounts25GB storage limit,10M push notifs/mo.no API/bandwidth limitCommercial use OKFree OSS versiongit.io/usergrid


Paid plans available for large companies if you need to deploy this on your own servers or SLAs, 4 nines, multi-region, phone support, more storage, etc.


Ask for help!Announce projects!

j.mp/app-craft

Sign up now :)


https://j.mp/app-craft

https://j.mp/app-craft

Get more training

Advanced class?Training for your company? Still [email protected]


mailto:[email protected]?subject=

mailto:[email protected]?subject=

Congrats!

If you liked it,post it on Twitter/LinkedIn :)@apigee @mdobs

[email protected], September 3, 13



Technology

Matt training-html-halfday