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

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

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 Manage AnalyzeMobile Visualize Enterprise Share Desktop

GIS apps are Location-based apps GIS Location-based Systems

Location Intelligence Quake MapE311/Service Request Campus Routing Sky Harbor Airport

Social Intelligence

Geolocation

Power of Social

GIS architecture - 101 Mobile Web Flex Social Media ArcGIS OnlineBasemaps Geo Services ArcGIS Server GPS Geodatabase

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 map  Route  Check-in

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 for Flex resources.arcgis.com

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 -9743828.3,5131825.1

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);

ArcGIS Online Services Solving problems

Where am I?

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);}

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); }});

Drive time tolerance?

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); } );}

Find places of interest

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); });}

Select a place

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);}

Ok, take me there!

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)…

Are we there yet?

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

check-in

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);

edn1.esri.com/pizzafinder

Putting it all together Monetizing your cloud

Sharing your cloud Webmaps Gino’s sBarro ArcGIS Online Tomato Head Cloud Space

Forgot again?

A closer look with GIS Customers Demographics Location Spatial PatternsMonetization Advertising Stronger Business

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_Laframboise dmartinez@esri.com | @ DMDevDude

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

by OReillyWhere20 on Apr 05, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 22

Statistics

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