Mobile app class Chicago

Build your first app with HTML5, APIs and PhoneGap

@mdobs @adammagaluk

© 2013 Apigee – All Rights Reserved

Matt Dobson !

@mdobs [email protected]

!2

http://twitter.com/garazi

mailto:[email protected]?subject=

© 2013 Apigee – All Rights Reserved !3

Adam Magaluk !

@adammagaluk [email protected]

http://twitter.com/garazi



We work for Apigee

!4


We help power AT&T, eBay Best Buy, Walgreens, Digital River, NewEgg, LiveNation, Cars.com, Dell, Getty Images, GraceNote, Shazam, HomeAway, Pearson, cheezburger, ...

!5


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

!6


Why do we do this? Why free?

!7


Apigee is always free for developers

Free Hosted Accounts 25GB storage limit, 10M push notifs/mo no API/bandwidth limit Commercial use OK

Free OSS version git.io/usergrid

!8


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.

!9


What are you here to learn today?

!10


Hopefully you know HTML basics, some Javascript... and Phonegap!

!11


9 - 10 Introduction & Basics10 - 11 UI Design & Walkthrough11 - 12 Creating the Backend12 - 1 Lunch

1 - 2 Reading Data2 - 3 Writing Data3 - 4 Phonegap4 - ? Q & A


Today’s goal: a simple list app

!13


What is an app?

!14


Is a website an app?

!15


Different approaches: Native PhoneGap MonoTouch RubyMotion Appcelerator...

!16


What is HTML5?

!17


data-attributes geolocation localstorage history

!18


For more info:

diveintohtml5.info caniuse.com html5rocks.com

!19

http://diveintohtml5.info/

http://caniuse.com

http://html5rocks.com


jQuery and jQuery Mobile

!20

Section 1 Building the UI


Build something that looks like this: j.mp/museums-mock

!22

http://j.mp/apigee-books-design


Sign up for a trial of Codiqa: j.mp/ codiqa-trial-unlimited

!23

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


Solution !

j.mp/museums-codiqa-ui

!24

http://j.mp/museums-codiqa-ui

Section 2 Add data to the backend


Why do we need a backend?

!26


Can I just reuse my existing backend? Maybe.

!27


Gotcha #1 No server-side page generation!

!28


Gotcha #2 Most differentiating features (geoloc, push notifications, etc.) require dedicated servers, code, and infrastructure.

!29


We’re going to use a BaaS today! !

Efficiently addresses Gotchas 1 & 2 + doesn’t require code

!30


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

!31


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

!32


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

!33


Even in BaaS, there are plenty of alternatives!

!34


(Apache) Usergrid !

2+ years in OSS 500+ stars 200+ forks 35 contributors

!35


Core technology behind the free developer platform “App Services” at Apigee

!36


You can install and run it yourself from git.io/usergrid !

Or go hosted j.mp/apigee-start

!37

http://git.io/usergrid%0B

http://j.mp/apigee-start


Add some data

!38

Section 3 Retrieve data using App Services


Server Infrastructure

App Code SDK API


SDKs available for… !

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

!41


Download the SDK j.mp/javascript-sdk

Getting Started j.mp/museum-quickstart

!42

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

http://j.mp/museum-quickstart


Add some view code

!43


Solution !

j.mp/museum-fetch

!44

http://j.mp/museum-fetch


Add the museums to the listview using jQuery

!45


Solution !

j.mp/museum-list

!46

http://j.mp/museum-list

Section 4

What if you have no connection?


Add localStorage for offline access to the museums

!48


Solution !

j.mp/museum-storage

!49

http://j.mp/museum-storage

Section 5 Add a new museum from the App


`

Make the form add a museum to the list

!51


Solution !

j.mp/museum-add

!52

http://j.mp/apigee-books-add


Limit and sort the list then use jQuery Mobile to filter the list

!53


Solution !

j.mp/museum-filter

!54

http://j.mp/apigee-books-filter

Section 6 Geolocation


Add location to objects

!56


Find your location - returned as latitude and longitude

!57


Query for nearby objects

!58


To avoid the geolocation security error in Chrome !

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

!59

http://localhost:8000


Geolocation docs !

j.mp/apigee-geoloc

!60

http://j.mp/apigee-geoloc


Solution !

j.mp/museum-geo

!61

http://j.mp/apigee-books-geo


Advanced Demo j.mp/targets-demo !

Code j.mp/targets-code

!62

http://j.mp/targets-demo

http://j.mp/targets-code

Section 7 Run on mobile!


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

!64


Apache Cordova vs.

Adobe PhoneGap

!65


To create a PhoneGap project phonegap create folder com.package.name ClassName

!66


Add your HTML to the top level www folder

!67


*replace the www folder created in the last step with this one

www folder* in case you missed something j.mp/apigee-books-www

!68

http://j.mp/apigee-books-www


Build for iOS !

phonegap local build ios

!69


Build for Android !

phonegap local build android

!70


PhoneGap 3.0+ Whitelisting! !

in config.xml set <access origin=‘*’ />

!71


Android project j.mp/apigee-books-android !

iOS project j.mp/apigee-books-ios

!72

http://j.mp/apigee-books-android

http://j.mp/apigee-books-ios


Build and run in XCode

!73


Android j.mp/phonegap-android-guide

!74

http://j.mp/phonegap-android-guide


PhoneGap Build

!75

http://build.phonegap.com/


What could you do next?

!76


Push Notifications File Storage Social Features 3rd-party integration Legacy integration

!77


For more information !

j.mp/apigee-docs!78

http://j.mp/apigee-docs


Great for prototyping, works at scale too! !

!79


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

!80


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

!81


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

!82


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

!83


Apigee is free for developers !

Free Hosted Accounts 25GB storage limit, 10M push notifs/mo. no API/bandwidth limit Commercial use OK Free OSS version git.io/usergrid

!84


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.

!85


Ask for help! Announce projects! !

j.mp/app-craft !

Sign up now :)!86

https://j.mp/app-craft


Get more training !

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

!87



Congratulations! !

I don’t accept tips but I do accept tweets! @mdobs #apigee !

[email protected]!88


Mobile app class Chicago

Technology