47
Geolocation in Web and Mobile Apps Aaron Parecki – Web Directions – May 2011 [email protected] – http://aaron.pk – @aaronpk Slides and code available at aaron.pk/unplugged11

Geolocation in Web and Native Mobile Apps

Embed Size (px)

DESCRIPTION

While location-based mobile apps are becoming increasingly popular, they are still relatively new. Special considerations need to be made for battery life and handling large data sets of geolocated data. The good news is there are many services and technologies you can use to assist you in building mobile location-based apps.In this session, Aaron Parecki, co-founder of Geoloqi.com, shows you services you can leverage to do things like nearby business lookups, location-based triggers, nearest intersection queries, and more. Aaron also covers the location services available on the various mobile platforms as well as in HTML 5, and shares some insights on how to deal with battery life. The session concludes with some real-world use cases for real-time location such as turning on and off your lights in your house or sending an SMS when you leave work.

Citation preview

Page 1: Geolocation in Web and Native Mobile Apps

Geolocation in Web and Mobile Apps

Aaron Parecki – Web Directions – May 2011 [email protected] – http://aaron.pk – @aaronpk

Slides and code available at

aaron.pk/unplugged11

Page 2: Geolocation in Web and Native Mobile Apps

Displaying a Map

aaron.pk/unplugged11 @aaronpk

Page 3: Geolocation in Web and Native Mobile Apps

Displaying a Map - HTML

@aaronpk aaron.pk/unplugged11

Page 4: Geolocation in Web and Native Mobile Apps

Displaying a Map - iPhone

aaron.pk/unplugged11 @aaronpk

Page 5: Geolocation in Web and Native Mobile Apps

Displaying a Map - Android

aaron.pk/unplugged11 @aaronpk

Page 6: Geolocation in Web and Native Mobile Apps

Finding the User’s Location

aaron.pk/unplugged11 @aaronpk

Page 7: Geolocation in Web and Native Mobile Apps

Browser Geolocation

!   Desktop browsers use nearby wifi hotspots

!   Mobile devices may use GPS or cell tower positioning

!   You can also use IP lookups to get a rough location (but is usually very inaccurate)

aaron.pk/unplugged11 @aaronpk

Page 8: Geolocation in Web and Native Mobile Apps

Browser Geolocation

with Wifi

aaron.pk/unplugged11 @aaronpk

Page 9: Geolocation in Web and Native Mobile Apps

Browser Geolocation

aaron.pk/unplugged11 @aaronpk

Page 10: Geolocation in Web and Native Mobile Apps

Browser Geolocation

aaron.pk/unplugged11 @aaronpk

Page 11: Geolocation in Web and Native Mobile Apps

Finding the User’s Location using Javascript

aaron.pk/unplugged11 @aaronpk

Page 12: Geolocation in Web and Native Mobile Apps

Browser Geolocation

aaron.pk/unplugged11 @aaronpk

Page 13: Geolocation in Web and Native Mobile Apps

Browser Geolocation

!   Usability problem with this approach:

!   User is left with an empty page waiting for them to press “allow”

!   You should do the best you can with no location, and then update your page after you get the user’s location

!   Could use IP-based location to center a map somewhere that is (probably) nearby

aaron.pk/unplugged11 @aaronpk

Page 14: Geolocation in Web and Native Mobile Apps

Using SimpleGeo

aaron.pk/unplugged11 @aaronpk

Start with IP-based geolocation to quickly center the map. Update with browser-based geolocation after it’s available.

aaron.pk/unplugged11

Page 15: Geolocation in Web and Native Mobile Apps

Finding Nearby Businesses

! SimpleGeo Places

!   Foursquare API

!   Twitter API

!   Yelp API

!   Google Places API

!   Many others

aaron.pk/unplugged11 @aaronpk

Page 16: Geolocation in Web and Native Mobile Apps

Place Search with Foursquare

aaron.pk/unplugged11 @aaronpk

developer.foursquare.com

Page 17: Geolocation in Web and Native Mobile Apps

Place Search with SimpleGeo

aaron.pk/unplugged11 @aaronpk

Page 18: Geolocation in Web and Native Mobile Apps

Place Search with SimpleGeo

aaron.pk/unplugged11 @aaronpk

aaron.pk/unplugged11

Page 19: Geolocation in Web and Native Mobile Apps

Finding Information About a Location

aaron.pk/unplugged11 @aaronpk

Page 20: Geolocation in Web and Native Mobile Apps

SimpleGeo Context

aaron.pk/unplugged11 @aaronpk

Page 21: Geolocation in Web and Native Mobile Apps

SimpleGeo Context

aaron.pk/unplugged11 @aaronpk

Page 22: Geolocation in Web and Native Mobile Apps

Monitoring Continuous Location

aaron.pk/unplugged11 @aaronpk

Page 23: Geolocation in Web and Native Mobile Apps

Monitoring Continuous Location in Javascript

aaron.pk/unplugged11 @aaronpk

Now go run around outside! (But keep the browser open)

Page 24: Geolocation in Web and Native Mobile Apps

Keep the browser open? That’s kind of lame.

aaron.pk/unplugged11 @aaronpk

Page 25: Geolocation in Web and Native Mobile Apps

Monitoring Continuous Location on the iPhone

aaron.pk/unplugged11 @aaronpk

This will keep running in the background! (But now you will potentially drain the battery)

Page 26: Geolocation in Web and Native Mobile Apps

Getting the User’s Approximate Location

Saving battery by

aaron.pk/unplugged11 @aaronpk

Page 27: Geolocation in Web and Native Mobile Apps

Retrieving Approximate Location on the iPhone

[locationManager startMonitoringSignificantLocationChanges];

aaron.pk/unplugged11 @aaronpk

•  Your app will be re-launched in the background when the user moves “significantly”

•  Most likely when they change cell towers

•  Location is very rough, ~500-1500m accuracy

Page 28: Geolocation in Web and Native Mobile Apps

Retrieving Approximate Location on Android

locationManager.requestLocationUpdate( LocationManager.PASSIVE_PROVIDER, 0, 0, listener);

aaron.pk/unplugged11 @aaronpk

•  Service runs in the background, gets locations when other providers or apps request location.

•  Could be cell tower location, could be GPS

Page 29: Geolocation in Web and Native Mobile Apps

Location-Based Triggers

aaron.pk/unplugged11 @aaronpk

Page 30: Geolocation in Web and Native Mobile Apps

Geonotes Location-Based Reminders

aaron.pk/unplugged11 @aaronpk

Try it! aaron.pk/geonote

Page 31: Geolocation in Web and Native Mobile Apps

Trigger-Based Actions

Create triggers based on where users are.

aaron.pk/unplugged11 @aaronpk

Page 32: Geolocation in Web and Native Mobile Apps

Send a message to all users within a radius.

aaron.pk/unplugged11 @aaronpk

Page 33: Geolocation in Web and Native Mobile Apps

Notify X when you arrive at place Y

Arrived

aaron.pk/unplugged11 @aaronpk

Page 34: Geolocation in Web and Native Mobile Apps

Real-time location-based gaming aaron.pk/unplugged11 @aaronpk

Page 35: Geolocation in Web and Native Mobile Apps

aaron.pk/unplugged11 @aaronpk

mapattack.org

Page 36: Geolocation in Web and Native Mobile Apps

Hybrid Web/Native App

aaron.pk/unplugged11 @aaronpk

Web Views

Page 37: Geolocation in Web and Native Mobile Apps

Communicating Between the Web and Native Components

aaron.pk/unplugged11 @aaronpk

Page 38: Geolocation in Web and Native Mobile Apps

Communicating Between the Web and Native Components

aaron.pk/unplugged11 @aaronpk

Page 39: Geolocation in Web and Native Mobile Apps

Turning On/Off Your Lights

aaron.pk/unplugged11 @aaronpk

Geoloqi  API  Your  Home  Server  

X10  SMSified.com  

Your  Home  Lights  And sending an SMS when you leave work

Page 40: Geolocation in Web and Native Mobile Apps

X10 Lamp Switch

Linux Command Line X10 Client

www.heyu.org

$ heyu on A1

aaron.pk/unplugged11 @aaronpk

Page 41: Geolocation in Web and Native Mobile Apps

aaron.pk/unplugged11 @aaronpk

Page 42: Geolocation in Web and Native Mobile Apps

Create a Layer in Geoloqi

aaron.pk/unplugged11 @aaronpk

Docs: geoloqi.org/API/layer/create

Page 43: Geolocation in Web and Native Mobile Apps

Create a Trigger in Geoloqi

aaron.pk/unplugged11 @aaronpk

Docs: geoloqi.org/API/trigger/create

Page 44: Geolocation in Web and Native Mobile Apps

Handling a Trigger from Geoloqi

aaron.pk/unplugged11 @aaronpk

Docs: geoloqi.org/Trigger_Callback

Page 45: Geolocation in Web and Native Mobile Apps

Create an SMS Number

aaron.pk/unplugged11 @aaronpk

smsified.com      or      tropo.com  

Page 46: Geolocation in Web and Native Mobile Apps

Send an SMS

aaron.pk/unplugged11 @aaronpk

Page 47: Geolocation in Web and Native Mobile Apps

Questions? Code: aaron.pk/unplugged11 Geoloqi API: geoloqi.org/API SMS API: smsified.com

Aaron Parecki @aaronpk

aaron.pk/unplugged11 @aaronpk