Build your first
mobile app with
HTML5, PhoneGap,
jQuery and APIs
@mdobs
@apigee
hashtag: #ApigeeHTML5
wifi: Bento Miso/mi...
Matt Dobson
@mdobs
matt.d@apigee.com
Kevin Swiber
@kevinswiber
kswiber@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 eBay
Best Buy, Walgreens,
Gilt Groupe, NewEgg,
Cars.com, Dell, Getty
Images, GraceNote,
Shazam, HomeAway,
Pe...
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 developers
Free Hosted Accounts
25GB 	storage limit,
10M push notifs/mo
no API/bandwidth limit
C...
Paid plans available
for large companies if
you need to deploy
this on your own
servers or SLAs,
4 nines, multi-region,
ph...
What do you want to
learn today?
Monday, July 29, 13
Everybody good with
HTML Basics,
Variables,
Functions,
etc. ?
Monday, July 29, 13
1 HTML5
2 API Backend
3 Add more!
4 PhoneGap
5 Q&A
Monday, July 29, 13
Building
a simple list app
Monday, July 29, 13
HTML5
Monday, July 29, 13
use relatively few:
data-attributes
geolocation
history
Monday, July 29, 13
diveintohtml5.info
Monday, July 29, 13
Other approaches
Native
MonoTouch
RubyMotion etc.
Monday, July 29, 13
jQuery
and jQuery Mobile
Monday, July 29, 13
Section 1
Start 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 2
Add 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 use
an 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 to
store 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
Server
Infrastructure
App
Code
SDK API
Monday, July 29, 13
Apigee App Services
vs. 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 3
Run on mobile!
Monday, July 29, 13
A look at PhoneGap
PhoneGap Build,
Trigger.io, etc.
Monday, July 29, 13
Apache Cordova
vs.
Adobe PhoneGap
Monday, July 29, 13
Android
j.mp/phonegap-
android-guide
iOS, Windows Phone
j.mp/cordova-25-
getstarted
Monday, July 29, 13
Add your HTML
Monday, July 29, 13
Android project
j.mp/apigee-android
iOS project
j.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 4
Geolocation
Monday, July 29, 13
0.	Add location
	 	 to objects
1.	Find your location
2.	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 Demo
j.mp/targets-demo
Code
j.mp/targets-code
Monday, July 29, 13
Section 5
Identity & 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
Demo
j.mp/messagee-demo
Code
j.mp/messagee-code
Monday, July 29, 13
What else could you
do next?
Monday, July 29, 13
Push Notifications
File Storage
Social Graph
Local capabilities
3rd-party integration
Legacy integration
Code execution
Mo...
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 ...
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 ...
One of the 10 largest
private companies in
the US used it to
create an internal info
management system
for its 52k employe...
A large luxury brand
based in the UK
mandates all
contractors use it to
build catalogs,
campaign sites and
apps for them
M...
Apigee is free for
developers
Free Hosted Accounts
25GB 	storage limit,
10M push notifs/mo.
no API/bandwidth limit
Commerc...
Paid plans available
for large companies if
you need to deploy
this on your own
servers or SLAs,
4 nines, multi-region,
ph...
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.com
Monday, July 29, 13
Upcoming SlideShare
Loading in...5
×

HTML5 Slides

399

Published on

Build your first mobile app with HTML5 and PhoneGap!

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
399
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Slides

  1. 1. Build your first mobile app with HTML5, PhoneGap, jQuery and APIs @mdobs @apigee hashtag: #ApigeeHTML5 wifi: Bento Miso/misoconnected Monday, July 29, 13
  2. 2. Matt Dobson @mdobs matt.d@apigee.com Kevin Swiber @kevinswiber kswiber@apigee.com Monday, July 29, 13
  3. 3. Did everybody install PhoneGap + XCode, ADT or Visual Studio? Monday, July 29, 13
  4. 4. I work @ Apigee Monday, July 29, 13
  5. 5. We help power eBay Best Buy, Walgreens, Gilt Groupe, NewEgg, Cars.com, Dell, Getty Images, GraceNote, Shazam, HomeAway, Pearson, cheezburger Monday, July 29, 13
  6. 6. We’ve organized this training in LA, San Jose, Austin, Denver, Amsterdam, Atlanta, Houston, Denver… Monday, July 29, 13
  7. 7. Why do we do this? Why free? Monday, July 29, 13
  8. 8. 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 Monday, July 29, 13
  9. 9. 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
  10. 10. What do you want to learn today? Monday, July 29, 13
  11. 11. Everybody good with HTML Basics, Variables, Functions, etc. ? Monday, July 29, 13
  12. 12. 1 HTML5 2 API Backend 3 Add more! 4 PhoneGap 5 Q&A Monday, July 29, 13
  13. 13. Building a simple list app Monday, July 29, 13
  14. 14. HTML5 Monday, July 29, 13
  15. 15. use relatively few: data-attributes geolocation history Monday, July 29, 13
  16. 16. diveintohtml5.info Monday, July 29, 13
  17. 17. Other approaches Native MonoTouch RubyMotion etc. Monday, July 29, 13
  18. 18. jQuery and jQuery Mobile Monday, July 29, 13
  19. 19. Section 1 Start with the UI Monday, July 29, 13
  20. 20. Build something that looks like this j.mp/apigee-loc-ss Monday, July 29, 13
  21. 21. The nice guys at Codiqa let me offer you unlimited trial: j.mp/ codiqa-trial-unlimited Monday, July 29, 13
  22. 22. Answer j.mp/apigee-loc-1 Monday, July 29, 13
  23. 23. Section 2 Add live data Monday, July 29, 13
  24. 24. Why do we need a backend? Monday, July 29, 13
  25. 25. Many options here too… Monday, July 29, 13
  26. 26. We’re going to use an API Backend today! Monday, July 29, 13
  27. 27. It’s like a database that you call directly from your client code. Monday, July 29, 13
  28. 28. It’s a cloud service that makes it easy to store your data, retrieve it & query it. Monday, July 29, 13
  29. 29. It’s a like a Dropbox or iCloud to synchronize all your app data across users and devices Monday, July 29, 13
  30. 30. Server Infrastructure App Code SDK API Monday, July 29, 13
  31. 31. Apigee App Services vs. Usergrid Monday, July 29, 13
  32. 32. Let’s take a look at Apigee j.mp/apigee-sign-up Monday, July 29, 13
  33. 33. Add some data Monday, July 29, 13
  34. 34. SDKs available for… JS, node.js, iOS, Android, Ruby, Rails, C#, Java, WP8, etc. Monday, July 29, 13
  35. 35. Explore the Quickstart j.mp/apigee-loc-qs Monday, July 29, 13
  36. 36. Add some view code Monday, July 29, 13
  37. 37. Answer j.mp/apigee-loc-2 Monday, July 29, 13
  38. 38. Now let’s create a form! Monday, July 29, 13
  39. 39. Answer j.mp/apigee-loc-3 Monday, July 29, 13
  40. 40. Wire it up to Apigee! Monday, July 29, 13
  41. 41. Answer j.mp/apigee-loc-4 Monday, July 29, 13
  42. 42. Section 3 Run on mobile! Monday, July 29, 13
  43. 43. A look at PhoneGap PhoneGap Build, Trigger.io, etc. Monday, July 29, 13
  44. 44. Apache Cordova vs. Adobe PhoneGap Monday, July 29, 13
  45. 45. Android j.mp/phonegap- android-guide iOS, Windows Phone j.mp/cordova-25- getstarted Monday, July 29, 13
  46. 46. Add your HTML Monday, July 29, 13
  47. 47. Android project j.mp/apigee-android iOS project j.mp/apigee-ios Monday, July 29, 13
  48. 48. Run! Monday, July 29, 13
  49. 49. What runs where? Monday, July 29, 13
  50. 50. PhoneGap Build Monday, July 29, 13
  51. 51. Full Source of class j.mp/apigee-loc-src Monday, July 29, 13
  52. 52. Section 4 Geolocation Monday, July 29, 13
  53. 53. 0. Add location to objects 1. Find your location 2. Query for nearby objects Monday, July 29, 13
  54. 54. I’ve created landmarks for you! j.mp/geo-feed Monday, July 29, 13
  55. 55. To avoid the geoloc security error python -m SimpleHTTPServer & open http:// localhost:8000 Monday, July 29, 13
  56. 56. Geoloc docs j.mp/apigee-geoloc Monday, July 29, 13
  57. 57. Solution j.mp/apigee-loc-5 Monday, July 29, 13
  58. 58. Advanced Demo j.mp/targets-demo Code j.mp/targets-code Monday, July 29, 13
  59. 59. Section 5 Identity & Security Monday, July 29, 13
  60. 60. Managing your users Monday, July 29, 13
  61. 61. Signup is open, but everything else is controlled. Monday, July 29, 13
  62. 62. Permissions Monday, July 29, 13
  63. 63. Creating a user (signup) Monday, July 29, 13
  64. 64. Getting a token (login) Monday, July 29, 13
  65. 65. Mixing identity into our code! Monday, July 29, 13
  66. 66. Solution j.mp/apigee-loc-6 Monday, July 29, 13
  67. 67. Demo j.mp/messagee-demo Code j.mp/messagee-code Monday, July 29, 13
  68. 68. What else could you do next? Monday, July 29, 13
  69. 69. Push Notifications File Storage Social Graph Local capabilities 3rd-party integration Legacy integration Code execution Monday, July 29, 13
  70. 70. Great for prototyping, works at scale too! Monday, July 29, 13
  71. 71. 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
  72. 72. 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). Monday, July 29, 13
  73. 73. 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
  74. 74. 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
  75. 75. 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 Monday, July 29, 13
  76. 76. 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
  77. 77. Ask for help! Announce projects! j.mp/app-craft Sign up now :) Monday, July 29, 13
  78. 78. Get more training Advanced class? Training for your company? Still free! matt.d@apigee.com Monday, July 29, 13
  79. 79. Congrats! If you liked it, post it on Twitter/ LinkedIn :) @apigee @mdobs matt.d@apigee.com Monday, July 29, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×