Build your firstmobile app with

HTML5, PhoneGap, jQuery and APIs

@mdobs@apigee

hashtag: #ApigeeHTML5wifi: Bento Miso/misoconnected

Monday, July 29, 13

Matt Dobson@mdobsmatt.d@apigee.comKevin Swiber@kevinswiberkswiber@apigee.com

Monday, July 29, 13

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

Monday, July 29, 13

I work @ Apigee

Monday, July 29, 13

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

Monday, July 29, 13

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

Monday, July 29, 13

Why do we do this?Why free?

Monday, July 29, 13

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

Monday, July 29, 13

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.

Monday, July 29, 13

What do you want to learn today?

Monday, July 29, 13

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

Monday, July 29, 13

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

Monday, July 29, 13

Buildinga simple list app

Monday, July 29, 13

HTML5

Monday, July 29, 13

use relatively few:data-attributesgeolocationhistory

Monday, July 29, 13

diveintohtml5.info

Monday, July 29, 13

Other approachesNativeMonoTouchRubyMotion etc.

Monday, July 29, 13

jQueryand jQuery Mobile

Monday, July 29, 13

Section 1Start with the UI

Monday, July 29, 13

Build something that looks like this

j.mp/apigee-loc-ss

Monday, July 29, 13

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

j.mp/codiqa-trial-unlimited

Monday, July 29, 13

Answer

j.mp/apigee-loc-1

Monday, July 29, 13

Section 2Add live data

Monday, July 29, 13

Why do we need a backend?

Monday, July 29, 13

Many options here too…

Monday, July 29, 13

We’re going to usean API Backend today!

Monday, July 29, 13

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

Monday, July 29, 13

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

Monday, July 29, 13

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

Monday, July 29, 13

ServerInfrastructure

AppCode SDK API

Monday, July 29, 13

Apigee App Servicesvs. Usergrid

Monday, July 29, 13

Let’s take a look at Apigee

j.mp/apigee-sign-up

Monday, July 29, 13

Add some data

Monday, July 29, 13

SDKs available for…

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

Monday, July 29, 13

Explore the Quickstart

j.mp/apigee-loc-qs

Monday, July 29, 13

Add some view code

Monday, July 29, 13

Answer

j.mp/apigee-loc-2

Monday, July 29, 13

Now let’s create a form!

Monday, July 29, 13

Answer

j.mp/apigee-loc-3

Monday, July 29, 13

Wire it up to Apigee!

Monday, July 29, 13

Answer

j.mp/apigee-loc-4

Monday, July 29, 13

Section 3Run on mobile!

Monday, July 29, 13

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

Monday, July 29, 13

Apache Cordovavs.Adobe PhoneGap

Monday, July 29, 13

Androidj.mp/phonegap-android-guide

iOS, Windows Phonej.mp/cordova-25-getstarted

Monday, July 29, 13

Add your HTML

Monday, July 29, 13

Android projectj.mp/apigee-android

iOS projectj.mp/apigee-ios

Monday, July 29, 13

Run!

Monday, July 29, 13

What runs where?

Monday, July 29, 13

PhoneGap Build

Monday, July 29, 13

Full Source of class

j.mp/apigee-loc-src

Monday, July 29, 13

Section 4Geolocation

Monday, July 29, 13

0.Add location to objects1.Find your location2.Query for nearby objects

Monday, July 29, 13

I’ve created landmarks for you!

j.mp/geo-feed

Monday, July 29, 13

To avoid the geoloc security error

python -m SimpleHTTPServer& open http://localhost:8000

Monday, July 29, 13

Geoloc docs

j.mp/apigee-geoloc

Monday, July 29, 13

Solution

j.mp/apigee-loc-5

Monday, July 29, 13

Advanced Demoj.mp/targets-demo

Codej.mp/targets-code

Monday, July 29, 13

Section 5Identity & Security

Monday, July 29, 13

Managing your users

Monday, July 29, 13

Signup is open, but everything else is controlled.

Monday, July 29, 13

Permissions

Monday, July 29, 13

Creating a user (signup)

Monday, July 29, 13

Getting a token (login)

Monday, July 29, 13

Mixing identity into our code!

Monday, July 29, 13

Solution

j.mp/apigee-loc-6

Monday, July 29, 13

Demoj.mp/messagee-demo

Codej.mp/messagee-code

Monday, July 29, 13

What else could you do next?

Monday, July 29, 13

Push NotificationsFile StorageSocial GraphLocal capabilities3rd-party integrationLegacy integrationCode execution

Monday, July 29, 13

Great for prototyping,works at scale too!

Monday, July 29, 13

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)

Monday, July 29, 13

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

Monday, July 29, 13

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

Monday, July 29, 13

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

Monday, July 29, 13

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

Monday, July 29, 13

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.

Monday, July 29, 13

Ask for help!Announce projects!

j.mp/app-craft

Sign up now :)

Monday, July 29, 13

Get more training

Advanced class?Training for your company? Still free!matt.d@apigee.com

Monday, July 29, 13

Congrats!

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

matt.d@apigee.comMonday, July 29, 13