das web wird mobil - geolocation und location based services

83
das web wird mobil Stephan Schmidt, 1&1 Internet AG International PHP Conference 2012 Hotel Maritim proArte, Berlin

Upload: stephan-schmidt

Post on 08-May-2015

2.320 views

Category:

Technology


0 download

DESCRIPTION

Vortrag auf der International PHP Conference 2012 Spring Edition zu Geolocation im Browser und Location Based Services wie Google Places und Foursquare

TRANSCRIPT

Page 1: Das Web Wird Mobil - Geolocation und Location Based Services

das web wird mobilStephan Schmidt, 1&1 Internet AG

International PHP Conference 2012Hotel Maritim proArte, Berlin

Page 2: Das Web Wird Mobil - Geolocation und Location Based Services

beiArbeit

Page 3: Das Web Wird Mobil - Geolocation und Location Based Services

Sport

Page 4: Das Web Wird Mobil - Geolocation und Location Based Services

und Spiel

Page 5: Das Web Wird Mobil - Geolocation und Location Based Services

ich suche cup-cakes in meiner nähe.

Page 6: Das Web Wird Mobil - Geolocation und Location Based Services

schritt eins:wo bin ich?

Page 7: Das Web Wird Mobil - Geolocation und Location Based Services

geolocation vor dem jahr 2008:

Page 8: Das Web Wird Mobil - Geolocation und Location Based Services

91.22.203.142

Page 9: Das Web Wird Mobil - Geolocation und Location Based Services
Page 10: Das Web Wird Mobil - Geolocation und Location Based Services

where the heck is oberderdingen?

Page 11: Das Web Wird Mobil - Geolocation und Location Based Services
Page 12: Das Web Wird Mobil - Geolocation und Location Based Services

google weiß ziemlich genau wo* ich bin.

* und zwar nicht in oberderdingen.

Page 13: Das Web Wird Mobil - Geolocation und Location Based Services

geolocation im jahr 2012:

Page 14: Das Web Wird Mobil - Geolocation und Location Based Services

48.96977,8.613199

geographische breite

geographische länge

Page 15: Das Web Wird Mobil - Geolocation und Location Based Services

längengrade

breitengrade

Page 16: Das Web Wird Mobil - Geolocation und Location Based Services

woher weiß mein browser das?

Page 17: Das Web Wird Mobil - Geolocation und Location Based Services

geolocation api

Page 18: Das Web Wird Mobil - Geolocation und Location Based Services
Page 19: Das Web Wird Mobil - Geolocation und Location Based Services

+

Page 20: Das Web Wird Mobil - Geolocation und Location Based Services

und etwas Magie!

Page 21: Das Web Wird Mobil - Geolocation und Location Based Services

die Magie ist aus javascript nutz-bar.

Page 22: Das Web Wird Mobil - Geolocation und Location Based Services

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition ( function(position) { // location retrieved }, function(error) { // error happened } );}

Page 23: Das Web Wird Mobil - Geolocation und Location Based Services
Page 24: Das Web Wird Mobil - Geolocation und Location Based Services
Page 25: Das Web Wird Mobil - Geolocation und Location Based Services

Geoposition coords : Coordinates accuracy : 65 // meter altitude : null altitudeAccuracy : null heading : null latitude : 52.518328398571434 longitude : 13.387145829999998 speed : null

Page 26: Das Web Wird Mobil - Geolocation und Location Based Services

PositionError code : 1 constructor : PositionErrorConstructor PERMISSION_DENIED : 1 POSITION_UNAVAILABLE : 2 TIMEOUT : 3 message: "User denied Geolocation"

Page 27: Das Web Wird Mobil - Geolocation und Location Based Services

navigator.geolocation.getCurrentPosition( function(position) {...}, function(error) {...}, { enableHighAccuracy : true, timeout : 5000, // milliseconds maximumAge : 1000 * 60 // milliseconds } );}

Page 28: Das Web Wird Mobil - Geolocation und Location Based Services

navigator.geolocation.watchPosition ( function(pos) { // position changed }, function(error) { // error happened })

Page 29: Das Web Wird Mobil - Geolocation und Location Based Services

9.0+ 3.5+ 5.0+ 5.0+ 10.6+

3.0+ 2.0+

Page 30: Das Web Wird Mobil - Geolocation und Location Based Services

where the heck is 52.51832,13.387145?

Page 31: Das Web Wird Mobil - Geolocation und Location Based Services

var latlon = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);var options = { zoom: 15, center: latlon, mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map($("#map"), options);

var marker = new google.maps.Marker({ position: latlon, map: map, title:"Sie sind hier!"});

Page 32: Das Web Wird Mobil - Geolocation und Location Based Services
Page 33: Das Web Wird Mobil - Geolocation und Location Based Services

menschen wollen lieber adressen.

Page 38: Das Web Wird Mobil - Geolocation und Location Based Services

genug javascript, jetzt kommt der elefant.

Page 39: Das Web Wird Mobil - Geolocation und Location Based Services

public function geocodeReverse($lat, $lon) { $url = sprintf('http://maps.google.com/maps/api/' . 'geocode/json?latlng=%s,%s&sensor=false', $lat, $lon); $json = file_get_contents($url); $response = json_decode($json);

if ($response->status === 'OK') { return $response->results; } else { throw new Exception($response->status); } }

Page 40: Das Web Wird Mobil - Geolocation und Location Based Services

"results" : [ { "address_components" : [...], "formatted_address" : "Mittelstraße 23, 10117 Berlin, Germany", "geometry" : { "location" : { "lat" : 52.51820, "lng" : 13.387170 }, "location_type" : "ROOFTOP", "viewport" : { "northeast" : {...}, "southwest" : {...} } }, "types" : [ "street_address" ] }, { "address_components" : [ ... ], "formatted_address" : "10117 Berlin, Germany", "geometry" : { "bounds" : {...} }, "location" : {...}, "location_type" : "APPROXIMATE", "viewport" : {...}, "types" : [ "postal_code" ] }, ...]

Page 41: Das Web Wird Mobil - Geolocation und Location Based Services

try { $geocoder = new Geocoder(); $results = $geocoder->geocodeReverse($lat, $lon);

echo "<ul>"; foreach ($results as $result) { printf("<li>%s (%s)</li>", $result->formatted_address, implode(', ', $result->types)); } echo "</ul>";} catch (Exception $e) { echo "Geocodierung ist fehlgeschlagen: " . $e->getMessage();}

Page 42: Das Web Wird Mobil - Geolocation und Location Based Services

•Mittelstraße 23, 10117 Berlin, Germany (street_address)

•10117 Berlin, Germany (postal_code)

•Mitte, Berlin, Germany (sublocality, political)

•Berlin, Germany (locality, political)

•Berlin, Germany (administrative_area_level_1, political)

•Germany (country, political)

Page 43: Das Web Wird Mobil - Geolocation und Location Based Services

Laut Google:

Mittelstraße 2310117 BerlinGermany

Laut Hotel:

Friedrichstraße 15110117 BerlinGermany

Page 44: Das Web Wird Mobil - Geolocation und Location Based Services
Page 45: Das Web Wird Mobil - Geolocation und Location Based Services

schritt zwei:wo sind die cupcakes?

Page 46: Das Web Wird Mobil - Geolocation und Location Based Services
Page 47: Das Web Wird Mobil - Geolocation und Location Based Services
Page 52: Das Web Wird Mobil - Geolocation und Location Based Services

locationradiussensor

keywordnametypes

rankbylanguage

Page 53: Das Web Wird Mobil - Geolocation und Location Based Services

https://maps.googleapis.com/maps/api/place/search/json?location=52.5185,13.3885&types=food&radius=25000&key=...&sensor=false&name=cupcake

Page 54: Das Web Wird Mobil - Geolocation und Location Based Services

{ "html_attributions" : [ "Listings by ...." ], "results" : [ { "geometry" : { "location" : { "lat" : 52.5107460, "lng" : 13.4577320 } }, "icon" : "http://maps.gstatic.com/ma...s/restaurant-71.png", "id" : "b9a03f408df6ade6021a150d3bf5ae04f24853db", "name" : "Cupcake", "rating" : 4.10, "reference" : "CnRl...R7TAHjPh_H2Mw", "types" : [ "store", "cafe", "restaurant", "food"], "vicinity" : "Krossener Straße 12, Berlin" }, ....], "status" : "OK"}

Page 55: Das Web Wird Mobil - Geolocation und Location Based Services

$config = parse_ini_file('google-places.ini');

$long = $_GET['long'];$lat = $_GET['lat'];

$searchUrl = sprintf("https://maps.....search/json". "?location=%s,%s&types=food&radius=25000&“. "key=%s&sensor=false", $lat, $long, $config['googlekey']);

if (isset($_GET['search'])) { $searchUrl = $searchUrl . "&name=" . $_GET['search'];}

$jsonResponse = file_get_contents($searchUrl);$response = json_decode($jsonResponse);

Page 56: Das Web Wird Mobil - Geolocation und Location Based Services

if ($response->status !== 'OK') { printf('<p>Es ist ein Fehler aufgetreten: %s</p>', $response->status);} else { print '<ul style="float: left; margin-right: 25px;">'; foreach ($response->results as $entry) { $rating = isset($entry->rating) ? $entry->rating : 0; print '<li>'; printf('<a href="google-detail.php?reference=%s">%s</a>'. '<div class="rating_bar" title="Bewertung: %s"> '. '<div style="width:%d%%"></div></div>', $entry->reference, $entry->name, $rating, $rating/5*100); print '</li>'; } print '</ul>';}

Page 57: Das Web Wird Mobil - Geolocation und Location Based Services
Page 58: Das Web Wird Mobil - Geolocation und Location Based Services

schritt zwei ½:wie weit ist es noch?

Page 59: Das Web Wird Mobil - Geolocation und Location Based Services

ba c

Page 60: Das Web Wird Mobil - Geolocation und Location Based Services

die erde ist eine kugel*.

* eigentlich ein ellipsoid.

Page 61: Das Web Wird Mobil - Geolocation und Location Based Services

dist = 6378.388 * acos( sin(lat1) * sin(lat2) + cos(lat1) * cos(lat2) * cos(lon2 - lon1))

http://www.kompf.de/gps/distcalc.html

Page 62: Das Web Wird Mobil - Geolocation und Location Based Services

function calcDistance($lat1, $lon1, $lat2, $lon2) { $lat1 = deg2rad($lat1); $lon1 = deg2rad($lon1); $lat2 = deg2rad($lat2); $lon2 = deg2rad($lon2); return 6378.388 * acos(sin($lat1) * sin($lat2) + cos($lat1) * cos($lat2) * cos($lon2 - $lon1));}

Page 63: Das Web Wird Mobil - Geolocation und Location Based Services
Page 64: Das Web Wird Mobil - Geolocation und Location Based Services

geht das auch ohne google?

Page 65: Das Web Wird Mobil - Geolocation und Location Based Services
Page 66: Das Web Wird Mobil - Geolocation und Location Based Services
Page 67: Das Web Wird Mobil - Geolocation und Location Based Services
Page 68: Das Web Wird Mobil - Geolocation und Location Based Services

https://api.foursquare.com/v2/venues/search?intent=browse&ll=lat,lon&radius=10000&limit=15&query=Cupcake&client_id=[id]&client_secret=[secret]&v=20111113

Page 69: Das Web Wird Mobil - Geolocation und Location Based Services

https://api.foursquare.com/v2/venues/search?intent=browse&ll=lat,lon&radius=10000&limit=15&query=Cupcake&client_id=[id]&client_secret=[secret]&v=20111113

sicherheit

Page 70: Das Web Wird Mobil - Geolocation und Location Based Services

https://api.foursquare.com/v2/venues/search?intent=browse&ll=lat,lon&radius=10000&limit=15&query=Cupcake&client_id=[id]&client_secret=[secret]&v=20111113

versionierung

Page 71: Das Web Wird Mobil - Geolocation und Location Based Services

https://api.foursquare.com/v2/venues/search?intent=browse&ll=lat,lon&radius=10000&limit=15&query=Cupcake&client_id=[id]&client_secret=[secret]&v=20111113

position

Page 72: Das Web Wird Mobil - Geolocation und Location Based Services

$config = parse_ini_file('config/foursquare-config.ini');$searchUrl = sprintf('https://....../venues/search?'. 'intent=browse&ll=%s,%s&radius=10000&limit=15'. '&query=Cupcake&client_id=%s&client_secret=%s'. '&v=20111113', $lat, $long, $config['clientId'], $config['clientSecret']);

$jsonResponse = file_get_contents($searchUrl);$response = json_decode($jsonResponse);

foreach ($response->response->venues as $venue) { printf("<li>%s (%0.2f km)</li>", $venue->name, $venue->location->distance/1000);}

Page 73: Das Web Wird Mobil - Geolocation und Location Based Services
Page 74: Das Web Wird Mobil - Geolocation und Location Based Services

"categories": [ { "id" : "4bf58dd8d48988d1bc941735", "name" : "Cupcake Shop", "pluralName" : "Cupcake Shops", "shortName" : "Cupcakes", "icon" : { "prefix" : "https://.../categories/food/cupcakes_", "sizes" : [32,44,64,88,256], "name" : ".png" }, "primary" : true } ]

Page 75: Das Web Wird Mobil - Geolocation und Location Based Services

personalisierte empfehlungen

Page 76: Das Web Wird Mobil - Geolocation und Location Based Services
Page 77: Das Web Wird Mobil - Geolocation und Location Based Services

wie unterstützt das mein business?

Page 78: Das Web Wird Mobil - Geolocation und Location Based Services
Page 79: Das Web Wird Mobil - Geolocation und Location Based Services
Page 80: Das Web Wird Mobil - Geolocation und Location Based Services

Beware of the Dark Side, Luke.

Page 81: Das Web Wird Mobil - Geolocation und Location Based Services

http://www.cultofmac.com/157641/this-creepy-app-isnt-just-stalking-women-without-their-knowledge-its-a-wake-up-call-about-facebook-privacy/

Page 82: Das Web Wird Mobil - Geolocation und Location Based Services
Page 83: Das Web Wird Mobil - Geolocation und Location Based Services

vielen dank.

Stephan SchmidtHead of Web Sales Development1&1 Internet AG

[email protected]/schst