building a mobile, cloud, checkin app in 75 minutes - zero to hero
DESCRIPTION
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, EsriTRANSCRIPT
![Page 1: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/1.jpg)
[email protected] | @AL_Laframboise
[email protected] | @ DMDevDude
Esri Developer Network
Building a Mobile, Cloud, Check-in App in 75 Minutes
- Zero to Hero
![Page 2: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/2.jpg)
www.esri.com/devmeetups
Dev Meet Ups
![Page 3: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/3.jpg)
Esri = “ezri”
![Page 4: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/4.jpg)
GIS
Geospatial platform… solve location-based problems.
![Page 5: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/5.jpg)
Modeling with layers…
Geospatial Sandwich
![Page 6: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/6.jpg)
Basics
place street parcel
Features
Point Line Polygon
![Page 7: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/7.jpg)
The “arc”
Intelligent Feature
Direction
Start
End
![Page 8: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/8.jpg)
“Arc”GIS
Mobile
Desktop
Web Create
Store
Manage
Analyze
Visualize
Share
Cloud
Enterprise
![Page 9: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/9.jpg)
GIS apps are
Location-based apps
GIS
Location-based Systems
![Page 10: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/10.jpg)
Location Intelligence
E311/Service Request
Campus Routing
Sky Harbor Airport
Quake Map
![Page 11: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/11.jpg)
Social Intelligence
![Page 12: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/12.jpg)
Geolocation
![Page 13: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/13.jpg)
Power of Social
![Page 14: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/14.jpg)
GIS architecture - 101
Basemaps
Geo Services ArcGIS Server
GPS
Geodatabase
Social Media
ArcGIS Online
Mobile Web
Flex
![Page 15: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/15.jpg)
So you want to build an app…
![Page 16: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/16.jpg)
The idea
+
![Page 17: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/17.jpg)
Pizza Finder!
![Page 18: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/18.jpg)
Maps
Apps Value
![Page 19: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/19.jpg)
User Requirements
Find pizza restaurants
Within a certain “tolerance”
Around me, address or touch map
Route
Check-in
![Page 20: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/20.jpg)
the mock-up
![Page 21: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/21.jpg)
System Requirements
Multiple devices
No hardware
Single service provider
![Page 22: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/22.jpg)
Business Requirements
![Page 23: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/23.jpg)
Got a cloud-based, geospatial solution?
Bueller?
![Page 24: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/24.jpg)
ArcGIS Online Platform
![Page 25: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/25.jpg)
www.arcgis.com
![Page 26: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/26.jpg)
ArcGIS Online Subscription - your personal cloud.
![Page 27: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/27.jpg)
Upload to the cloud
POI
Check In
![Page 28: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/28.jpg)
Forgot to demo?
![Page 29: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/29.jpg)
ArcGIS APIs
Choosing your weapon
![Page 30: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/30.jpg)
Mobile and Web
Apple iOS
Microsoft Windows
Phone 7
Google Android
Native or Web?
![Page 31: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/31.jpg)
ArcGIS for JavaScript
ArcGIS for iOS
ArcGIS for Windows Phone
ArcGIS for Android
ArcGIS for Windows Silverlight
ArcGIS for Flex
resources.arcgis.com
![Page 32: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/32.jpg)
ArcGIS Online Basemaps
Visualizing your world
![Page 33: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/33.jpg)
Base layer options…
![Page 34: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/34.jpg)
Projections and Spatial References
![Page 35: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/35.jpg)
Where in the world am I?
-87.6,41.9
-9743828.3,5131825.1
Geographic - WGS 1984
Mercator
![Page 36: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/36.jpg)
Basemap Service
dojo.require("esri.map"); map = new esri.Map("mapDiv", { wrapAround180: true, null }); map.SetSpatialReference({"wkid":102100}); var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL); map.addLayer(basemap);
var basemapURL = “http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer”;
![Page 37: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/37.jpg)
ArcGIS Online Services
Solving problems
![Page 38: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/38.jpg)
Where am I?
![Page 39: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/39.jpg)
Input Coordinates
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); }
navigator.geolocation.getCurrentPosition(zoomToLocation, this.geolocationError);
![Page 40: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/40.jpg)
Geocode Service
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); } });
var geocodeService = new esri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer");
![Page 41: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/41.jpg)
Drive time tolerance?
![Page 42: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/42.jpg)
Geoprocessing Service
var driveTimes = “1 2 3”; // minutes var 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); } ); }
var geoProcessService = new esri.tasks.Geoprocessor( "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons");
![Page 43: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/43.jpg)
Find places of interest
![Page 44: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/44.jpg)
Feature Service – “geo query”
var q = new esri.tasks.Query(); q.returnGeometry = true; q.outFields = ["NAME", "ADDRESS", "PHONE", "DESCRIPTION"]; q.geometry = driveTimeGeometry; q.spatialRelationship = esriSpatialRelIntersects q.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); }); }
var poiCloudFeatureService = new QueryTask ("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/BIG_POI/FeatureServer/0");
![Page 45: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/45.jpg)
Select a place
![Page 46: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/46.jpg)
Graphics Query
dojo.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);
}
var pizzaLayer= map.layers["pizzaLayer"]; // stay local
![Page 47: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/47.jpg)
Ok, take me there!
![Page 48: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/48.jpg)
Route Service
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)…
var routeService = new esri.tasks.RouteTask ("http://tasks.arcgisonline.com/arcgis/rest/services/Network/USA/NAServer/Route");
![Page 49: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/49.jpg)
Are we there yet?
![Page 50: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/50.jpg)
Geometry Service - geofencing
var bufParams = new esri.tasks.BufferParameters(); bufParams.distances = [ 25 ]; bufParams.geometries = [ toPt ]; bufParams.outSpatialReference = new esri.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
Var geomService = new esri.tasks.GeometryService( "http://tasks.arcgisonline.com /ArcGIS/rest/services/Geometry/GeometryServer");
![Page 51: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/51.jpg)
check-in
![Page 52: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/52.jpg)
Feature Service – update the cloud
// Invisible layers var 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);
var checkInLayer = new FeatureLayer( "http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PizzaCheckins/FeatureServer/1");
![Page 53: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/53.jpg)
edn1.esri.com/pizzafinder
![Page 54: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/54.jpg)
![Page 55: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/55.jpg)
Putting it all together
Monetizing your cloud
![Page 56: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/56.jpg)
Sharing your cloud
Cloud Space
Webmaps
Gino’s
Tomato Head
sBarro
ArcGIS Online
![Page 57: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/57.jpg)
Forgot again?
![Page 58: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/58.jpg)
A closer look with GIS
Demographics Location
Advertising
Spatial Patterns
Customers
Monetization
Stronger Business
![Page 59: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/59.jpg)
![Page 60: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/60.jpg)
The “Ultimate” Geospatial Sandwich
That’s your mobile, cloud, check-in solution in 75 minutes!
![Page 61: Building a mobile, cloud, checkin app in 75 minutes - zero to hero](https://reader033.vdocuments.site/reader033/viewer/2022052900/555e0905d8b42a9e188b48d7/html5/thumbnails/61.jpg)
Questions?
http://edn1.esri.com/pizzafinder
(via Chrome, iPhone, iPad and Android)
[email protected] | @AL_Laframboise
[email protected] | @ DMDevDude