Mobile app class Chicago
-
date post
18-Oct-2014 -
Category
Technology
-
view
811 -
download
1
description
Transcript of Mobile app class Chicago
Build your first app with HTML5, APIs and PhoneGap
@mdobs @adammagaluk
© 2013 Apigee – All Rights Reserved
We work for Apigee
!4
© 2013 Apigee – All Rights Reserved
We help power AT&T, eBay Best Buy, Walgreens, Digital River, NewEgg, LiveNation, Cars.com, Dell, Getty Images, GraceNote, Shazam, HomeAway, Pearson, cheezburger, ...
!5
© 2013 Apigee – All Rights Reserved
We’ve organized this training in LA, San Jose, Austin, Denver, Amsterdam, Atlanta, Houston, Denver, Portland, Seattle, Chicago…
!6
© 2013 Apigee – All Rights Reserved
Why do we do this? Why free?
!7
© 2013 Apigee – All Rights Reserved
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
© 2013 Apigee – All Rights Reserved
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
© 2013 Apigee – All Rights Reserved
What are you here to learn today?
!10
© 2013 Apigee – All Rights Reserved
Hopefully you know HTML basics, some Javascript... and Phonegap!
!11
© 2013 Apigee – All Rights Reserved !12
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
© 2013 Apigee – All Rights Reserved
Today’s goal: a simple list app
!13
© 2013 Apigee – All Rights Reserved
What is an app?
!14
© 2013 Apigee – All Rights Reserved
Is a website an app?
!15
© 2013 Apigee – All Rights Reserved
Different approaches: Native PhoneGap MonoTouch RubyMotion Appcelerator...
!16
© 2013 Apigee – All Rights Reserved
What is HTML5?
!17
© 2013 Apigee – All Rights Reserved
data-attributes geolocation localstorage history
!18
© 2013 Apigee – All Rights Reserved
For more info:
diveintohtml5.info caniuse.com html5rocks.com
!19
© 2013 Apigee – All Rights Reserved
jQuery and jQuery Mobile
!20
Section 1 Building the UI
© 2013 Apigee – All Rights Reserved
Build something that looks like this: j.mp/museums-mock
!22
© 2013 Apigee – All Rights Reserved
Sign up for a trial of Codiqa: j.mp/ codiqa-trial-unlimited
!23
© 2013 Apigee – All Rights Reserved
Solution !
j.mp/museums-codiqa-ui
!24
Section 2 Add data to the backend
© 2013 Apigee – All Rights Reserved
Why do we need a backend?
!26
© 2013 Apigee – All Rights Reserved
Can I just reuse my existing backend? Maybe.
!27
© 2013 Apigee – All Rights Reserved
Gotcha #1 No server-side page generation!
!28
© 2013 Apigee – All Rights Reserved
Gotcha #2 Most differentiating features (geoloc, push notifications, etc.) require dedicated servers, code, and infrastructure.
!29
© 2013 Apigee – All Rights Reserved
We’re going to use a BaaS today! !
Efficiently addresses Gotchas 1 & 2 + doesn’t require code
!30
© 2013 Apigee – All Rights Reserved
It’s like a database that you call directly from your client code.
!31
© 2013 Apigee – All Rights Reserved
It’s a cloud service that makes it easy to store your data, retrieve it & query it.
!32
© 2013 Apigee – All Rights Reserved
It’s like iCloud or Skydrive to synchronize all your app data across users and devices
!33
© 2013 Apigee – All Rights Reserved
Even in BaaS, there are plenty of alternatives!
!34
© 2013 Apigee – All Rights Reserved
(Apache) Usergrid !
2+ years in OSS 500+ stars 200+ forks 35 contributors
!35
© 2013 Apigee – All Rights Reserved
Core technology behind the free developer platform “App Services” at Apigee
!36
© 2013 Apigee – All Rights Reserved
You can install and run it yourself from git.io/usergrid !
Or go hosted j.mp/apigee-start
!37
© 2013 Apigee – All Rights Reserved
Add some data
!38
Section 3 Retrieve data using App Services
© 2013 Apigee – All Rights Reserved !40
Server Infrastructure
App Code SDK API
© 2013 Apigee – All Rights Reserved
SDKs available for… !
JS, node.js, iOS, Android, Ruby, Rails, C#, Java, WP8, etc.
!41
© 2013 Apigee – All Rights Reserved
Download the SDK j.mp/javascript-sdk
Getting Started j.mp/museum-quickstart
!42
© 2013 Apigee – All Rights Reserved
Add some view code
!43
© 2013 Apigee – All Rights Reserved
Add the museums to the listview using jQuery
!45
Section 4
What if you have no connection?
© 2013 Apigee – All Rights Reserved
Add localStorage for offline access to the museums
!48
Section 5 Add a new museum from the App
© 2013 Apigee – All Rights Reserved
`
Make the form add a museum to the list
!51
© 2013 Apigee – All Rights Reserved
Limit and sort the list then use jQuery Mobile to filter the list
!53
© 2013 Apigee – All Rights Reserved
Solution !
j.mp/museum-filter
!54
Section 6 Geolocation
© 2013 Apigee – All Rights Reserved
Add location to objects
!56
© 2013 Apigee – All Rights Reserved
Find your location - returned as latitude and longitude
!57
© 2013 Apigee – All Rights Reserved
Query for nearby objects
!58
© 2013 Apigee – All Rights Reserved
To avoid the geolocation security error in Chrome !
python -m SimpleHTTPServer then open http://localhost:8000
!59
© 2013 Apigee – All Rights Reserved
Geolocation docs !
j.mp/apigee-geoloc
!60
© 2013 Apigee – All Rights Reserved
Advanced Demo j.mp/targets-demo !
Code j.mp/targets-code
!62
Section 7 Run on mobile!
© 2013 Apigee – All Rights Reserved
A look at PhoneGap PhoneGap Build, Trigger.io, etc.
!64
© 2013 Apigee – All Rights Reserved
Apache Cordova vs.
Adobe PhoneGap
!65
© 2013 Apigee – All Rights Reserved
To create a PhoneGap project phonegap create folder com.package.name ClassName
!66
© 2013 Apigee – All Rights Reserved
Add your HTML to the top level www folder
!67
© 2013 Apigee – All Rights Reserved
*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
© 2013 Apigee – All Rights Reserved
Build for iOS !
phonegap local build ios
!69
© 2013 Apigee – All Rights Reserved
Build for Android !
phonegap local build android
!70
© 2013 Apigee – All Rights Reserved
PhoneGap 3.0+ Whitelisting! !
in config.xml set <access origin=‘*’ />
!71
© 2013 Apigee – All Rights Reserved
Android project j.mp/apigee-books-android !
iOS project j.mp/apigee-books-ios
!72
© 2013 Apigee – All Rights Reserved
Build and run in XCode
!73
© 2013 Apigee – All Rights Reserved
Android j.mp/phonegap-android-guide
!74
© 2013 Apigee – All Rights Reserved
What could you do next?
!76
© 2013 Apigee – All Rights Reserved
Push Notifications File Storage Social Features 3rd-party integration Legacy integration
!77
© 2013 Apigee – All Rights Reserved
For more information !
j.mp/apigee-docs!78
© 2013 Apigee – All Rights Reserved
Great for prototyping, works at scale too! !
!79
© 2013 Apigee – All Rights Reserved
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
© 2013 Apigee – All Rights Reserved
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
© 2013 Apigee – All Rights Reserved
One of the 10 largest private companies in the US used it to create an internal info management system for its 52k employees
!82
© 2013 Apigee – All Rights Reserved
A large luxury brand based in the UK mandates all contractors use it to build catalogs, campaign sites and apps for them
!83
© 2013 Apigee – All Rights Reserved
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
© 2013 Apigee – All Rights Reserved
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
© 2013 Apigee – All Rights Reserved
Ask for help! Announce projects! !
j.mp/app-craft !
Sign up now :)!86
© 2013 Apigee – All Rights Reserved
Get more training !
Advanced class? Training for your company? Still free! [email protected]
!87
© 2013 Apigee – All Rights Reserved
Congratulations! !
I don’t accept tips but I do accept tweets! @mdobs #apigee !