Mobile app class Chicago

Build your first app  
with HTML5, APIs and
PhoneGap
@mdobs
@adammagaluk

Matt Dobson
!

@mdobs
matt@apigee.com
© 2013 Apigee – All Rights Reserved

!2

Adam Magaluk
!

@adammagaluk
amagaluk@apigee.com

!3

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, multiregion, 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
10 - 11
11 - 12
12 - 1
1-2
2-3
3-4
4-?

Introduction & Basics
UI Design & Walkthrough
Creating the Backend
Lunch
Reading Data
Writing Data
Phonegap
Q&A
!12

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

jQuery
and jQuery Mobile

!20

Build something
that looks like this:

j.mp/museums-mock


!22

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

!23

Solution
!

j.mp/museumscodiqa-ui

!24

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

Add some data


!38

Section 3

Retrieve data using App Services

App
SDK
Code


API

Server
Infrastructure

!40

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

Add some view code


!43

Solution
!

j.mp/museum-fetch

!44

Add the museums to the
listview using jQuery


!45

Solution
!

j.mp/museum-list

!46

Section 4

What if you have no connection?

Add localStorage for offline
access to the museums


!48

Solution
!

j.mp/museumstorage

!49

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

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


!53

Solution
!

j.mp/museum-filter

!54

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

Geolocation docs
!

j.mp/apigee-geoloc

!60

Solution
!

j.mp/museum-geo

!61

Advanced Demo
j.mp/targets-demo
!

Code
j.mp/targets-code

!62

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

www folder* in case
you missed
something
j.mp/apigee-bookswww
*replace the www folder created in the last step with this one

!68

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-booksandroid
!

iOS project
j.mp/apigee-books-ios

!72

Build and run in
XCode

!73

Android
j.mp/phonegapandroid-guide

!74

PhoneGap Build


!75

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

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

Get more training
!

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

!87

Congratulations!
!

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

matt@apigee.com

!88

Mobile app class Chicago

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Mobile app class Chicago

Similar to Mobile app class Chicago (20)

Recently uploaded

Recently uploaded (20)

Mobile app class Chicago