Building a Mobile, Cloud,Check-in App in 75 Minutes                 -           Zero to Hero alaframboise@esri.com | @AL_L...
Dev Meet Ups www.esri.com/devmeetups
Esri = “ezri”
GISGeospatial platform… solve location-based problems.
Modeling with layers…            Geospatial Sandwich
BasicsPoint    Line      Polygonplace    street    parcel        Features
The “arc”Start                 Direction                              End        Intelligent Feature
“Arc”GIS         Web                  Create                               Cloud                   Store                 M...
GIS apps      are   Location-based apps                   GIS               Location-based                  Systems
Location Intelligence                                           Quake MapE311/Service Request                          Cam...
Social Intelligence
Geolocation
Power of Social
GIS architecture - 101                                       Mobile                                        Web           F...
So you want to build an app…
The idea           +
Pizza Finder!
Maps        AppsValue
User Requirements        Find pizza restaurants        Within a certain “tolerance”        Around me, address or touch ...
the mock-up
System Requirements           Multiple devices           No hardware           Single service provider
Business Requirements
Got a cloud-based,       geospatial solution?              Bueller?
ArcGIS Online Platform
www.arcgis.com
ArcGIS Online Subscription - your personal cloud.
POI      Check InUpload to the cloud
Forgot to demo?
ArcGIS APIsChoosing your weapon
Mobile and WebApple iOSMicrosoft WindowsPhone 7Google Android                       Native or Web?
ArcGIS for JavaScript        ArcGIS for iOS ArcGIS for Windows Phone     ArcGIS for AndroidArcGIS for Windows Silverlight ...
ArcGIS Online Basemaps      Visualizing your world
Base layer options…
Projections and Spatial References
Where in the world am I?                               Mercator    Geographic - WGS 1984         -87.6,41.9               ...
Basemap Servicevar basemapURL =“http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer”;dojo.requi...
ArcGIS Online Services      Solving problems
Where am I?
Input Coordinatesnavigator.geolocation.getCurrentPosition(zoomToLocation, this.geolocationError);function zoomToLocation(l...
Geocode Servicevar geocodeService = newesri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/Geoco...
Drive time tolerance?
Geoprocessing Servicevar geoProcessService = new esri.tasks.Geoprocessor("http://sampleserver1.arcgisonline.com/ArcGIS/res...
Find places of interest
Feature Service – “geo query”var poiCloudFeatureService = new QueryTask("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgi...
Select a place
Graphics Queryvar pizzaLayer= map.layers["pizzaLayer"]; // stay localdojo.connect(pizzaLayer, "onClick", displayInfo);func...
Ok, take me there!
Route Servicevar routeService = new esri.tasks.RouteTask("http://tasks.arcgisonline.com/arcgis/rest/services/Network/USA/N...
Are we there yet?
Geometry Service - geofencingVar geomService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com /ArcGIS/rest/...
check-in
Feature Service – update the cloudvar checkInLayer = new FeatureLayer("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/...
edn1.esri.com/pizzafinder
Putting it all together  Monetizing your cloud
Sharing your cloud   Webmaps                                  Gino’s                                  sBarro              ...
Forgot again?
A closer look with GIS                         Customers                              Demographics                        ...
That’s your mobile, cloud, check-in solution                   in 75 minutes!         The “Ultimate” Geospatial Sandwich
Questions?      http://edn1.esri.com/pizzafinder  (via Chrome, iPhone, iPad and Android)alaframboise@esri.com | @AL_Lafram...
Building a mobile, cloud, checkin app in 75 minutes -  zero to hero.
Building a mobile, cloud, checkin app in 75 minutes -  zero to hero.
Upcoming SlideShare
Loading in …5
×

Building a mobile, cloud, checkin app in 75 minutes - zero to hero.

2,400 views
2,219 views

Published on

Session on how to build a complete mobile-cloud solution using ArcGIS mobile APIs and an ArcGIS Online Subscription. How to monetize your solution too! By Allan Laframboise, Esri

Published in: Technology

Building a mobile, cloud, checkin app in 75 minutes - zero to hero.

  1. 1. Building a Mobile, Cloud,Check-in App in 75 Minutes - Zero to Hero alaframboise@esri.com | @AL_Laframboise dmartinez@esri.com | @ DMDevDude Esri Developer Network
  2. 2. Dev Meet Ups www.esri.com/devmeetups
  3. 3. Esri = “ezri”
  4. 4. GISGeospatial platform… solve location-based problems.
  5. 5. Modeling with layers… Geospatial Sandwich
  6. 6. BasicsPoint Line Polygonplace street parcel Features
  7. 7. The “arc”Start Direction End Intelligent Feature
  8. 8. “Arc”GIS Web Create Cloud Store Manage AnalyzeMobile Visualize Enterprise Share Desktop
  9. 9. GIS apps are Location-based apps GIS Location-based Systems
  10. 10. Location Intelligence Quake MapE311/Service Request Campus Routing Sky Harbor Airport
  11. 11. Social Intelligence
  12. 12. Geolocation
  13. 13. Power of Social
  14. 14. GIS architecture - 101 Mobile Web Flex Social Media ArcGIS OnlineBasemaps Geo Services ArcGIS Server GPS Geodatabase
  15. 15. So you want to build an app…
  16. 16. The idea +
  17. 17. Pizza Finder!
  18. 18. Maps AppsValue
  19. 19. User Requirements  Find pizza restaurants  Within a certain “tolerance”  Around me, address or touch map  Route  Check-in
  20. 20. the mock-up
  21. 21. System Requirements  Multiple devices  No hardware  Single service provider
  22. 22. Business Requirements
  23. 23. Got a cloud-based, geospatial solution? Bueller?
  24. 24. ArcGIS Online Platform
  25. 25. www.arcgis.com
  26. 26. ArcGIS Online Subscription - your personal cloud.
  27. 27. POI Check InUpload to the cloud
  28. 28. Forgot to demo?
  29. 29. ArcGIS APIsChoosing your weapon
  30. 30. Mobile and WebApple iOSMicrosoft WindowsPhone 7Google Android Native or Web?
  31. 31. ArcGIS for JavaScript ArcGIS for iOS ArcGIS for Windows Phone ArcGIS for AndroidArcGIS for Windows Silverlight ArcGIS for Flex resources.arcgis.com
  32. 32. ArcGIS Online Basemaps Visualizing your world
  33. 33. Base layer options…
  34. 34. Projections and Spatial References
  35. 35. Where in the world am I? Mercator Geographic - WGS 1984 -87.6,41.9 -9743828.3,5131825.1
  36. 36. Basemap Servicevar basemapURL =“http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer”;dojo.require("esri.map");map = new esri.Map("mapDiv", { wrapAround180: true, null });map.SetSpatialReference({"wkid":102100});var basemap = newesri.layers.ArcGISTiledMapServiceLayer(basemapURL);map.addLayer(basemap);
  37. 37. ArcGIS Online Services Solving problems
  38. 38. Where am I?
  39. 39. Input Coordinatesnavigator.geolocation.getCurrentPosition(zoomToLocation, this.geolocationError);function zoomToLocation(location) { var centerPoint = esri.geometry.geographicToWebMercator( new esri.geometry.Point(location.coords.longitude, location.coords.latitude)); var symbol = new esri.symbol.PictureMarkerSymbol( {"url":”images/BluePin1LargeB.png“,”width":28,"height":28} ); var graphic = new esri.Graphic(centerPoint, symbol); geolocationLayer.graphics.add(graphic); map.centerAndZoom(centerPoint, 16);}
  40. 40. Geocode Servicevar geocodeService = newesri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer");var address = { "SingleLine": address };locator.outSpatialReference = map.spatialReference;var params = {address: address, outFields: ["Loc_name"]}geocodeService.addressToLocations(params, geoCodeResults);Ext.each(candidates, function (candidate) { if (candidate.score > 80) { var geom = candidate.location; var graphic = new esri.Graphic(geom, symbol, null); geoCodeLayer.graphics.add(graphic); }});
  41. 41. Drive time tolerance?
  42. 42. Geoprocessing Servicevar geoProcessService = new esri.tasks.Geoprocessor("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons");var driveTimes = “1 2 3”; // minutesvar featureSet = new esri.tasks.FeatureSet();featureSet.features = features.push(geoCodeGraphic);var params = {"Location":featureSet,"Times":driveTimes };geoProcessService.execute(params, driveTimeResults, null);function driveTimeResults(results,messages) { var features = results[0].value.features; for (var f = 0, fl = features.length; f < fl; f++) { var feature = features[f]; if (f == 0) // minute 1 feature.setSymbol(polySymbolRed); if (f ==1) // minute 2 … driveTimeLayer.add(feature); } );}
  43. 43. Find places of interest
  44. 44. Feature Service – “geo query”var poiCloudFeatureService = new QueryTask("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/BIG_POI/FeatureServer/0");var q = new esri.tasks.Query();q.returnGeometry = true;q.outFields = ["NAME", "ADDRESS", "PHONE", "DESCRIPTION"];q.geometry = driveTimeGeometry;q.spatialRelationship = esriSpatialRelIntersectsq.where = "Cuisine = pizza";poiCloudFeatureService.execute(q, addPizzaLocations, null);function addPizzaLocations(features) { Ext.each(features , function(feature){ graphic = new esri.Graphic(feature.geometry, symbol, null); pizzaLayer.add(graphic); });}
  45. 45. Select a place
  46. 46. Graphics Queryvar pizzaLayer= map.layers["pizzaLayer"]; // stay localdojo.connect(pizzaLayer, "onClick", displayInfo);function displayInfo(args) { var pizzaLocation = args.graphic; var newView = Ext.create(PF.view.PizzaLocation, { fullscreen:true, feature:pizzaLocation, title:pizzaLocation.attributes[Name] }); this.defaultMapView.push(newView);}
  47. 47. Ok, take me there!
  48. 48. Route Servicevar routeService = new esri.tasks.RouteTask("http://tasks.arcgisonline.com/arcgis/rest/services/Network/USA/NAServer/Route");var params = new esri.tasks.RouteParameters();params.stops.features[0] = startLoc;params.stops.features[1] = endLoc;params.returnDirections = true;params.directionsLengthUnits = esri.Units.MILES;routeService.solve(params, function (solveResult) { var directions = solveResult.routeResults[0].directions; directionFeatures = directions.features; var routeGeom = directions.mergedGeometry; var startPt = routeGeom.getPoint(0,0); var lastPath = routeGeom.paths[routeGeom.paths.length - 1]; var endPt = routeGeom.getPoint(routeGeom.paths.length – 1, lastPath.length - 1);}function addGraphics(startPt, endPt, lastPath)…
  49. 49. Are we there yet?
  50. 50. Geometry Service - geofencingVar geomService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com /ArcGIS/rest/services/Geometry/GeometryServer");var bufParams = new esri.tasks.BufferParameters();bufParams.distances = [ 25 ];bufParams.geometries = [ toPt ];bufParams.outSpatialReference = newesri.SpatialReference({"wkid":102100});geomService.buffer(bufParams,function (geometries) { var geoFence = geometries[0]; var symbol = self.checkinToleranceSymbol; var graphic = new esri.Graphic(geoFence, symbol); geoFenceGraphicLayer.add(graphic) });…isPoint InFence = geoFence.contains(currentLocation); // local
  51. 51. check-in
  52. 52. Feature Service – update the cloudvar checkInLayer = new FeatureLayer("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PizzaCheckins/FeatureServer/1");// Invisible layersvar distance = getDistance(routeGraphic);var duration = getDuration(checkInTime, checkOutTime);var userRating = getUserRating(duration, distance);routeGraphic.Attributes["POI_ID"] = poi.attribues[ POI_ID ];routeGraphic.Attributes["Name"] = poi.attributes[ NAME ];routeGraphic.Attributes["CheckIn"] = checkInTime;routeGraphic.Attributes["CheckOut"] = checkOutTime;routeGraphic.Attributes["Duration"] = duration;routeGraphic.Attributes["Distance"] = distance;routeGraphic.Attributes["Rating"] = userRating;checkInLayer.applyEdits([routeGraphic], null, null);
  53. 53. edn1.esri.com/pizzafinder
  54. 54. Putting it all together Monetizing your cloud
  55. 55. Sharing your cloud Webmaps Gino’s sBarro ArcGIS Online Tomato Head Cloud Space
  56. 56. Forgot again?
  57. 57. A closer look with GIS Customers Demographics Location Spatial PatternsMonetization Advertising Stronger Business
  58. 58. That’s your mobile, cloud, check-in solution in 75 minutes! The “Ultimate” Geospatial Sandwich
  59. 59. Questions? http://edn1.esri.com/pizzafinder (via Chrome, iPhone, iPad and Android)alaframboise@esri.com | @AL_Laframboise dmartinez@esri.com | @ DMDevDude

×