Node.jsandbrowserapplicationswithArcGISRESTJSAllisonDavis

NoahMulnger

slides:

@araedavis

@noahmulnger

bit.ly/3aLDzaz

Agenda1.-WhatisArcGISRESTJS?Why?2.-Whoisusingit?Forwhat?3.-What'snewin2020?4.-CommonPatterns5.-Demos/code(tolearnhowitworks)

OpenSourceonGitHubCode

Doc

github.com/Esri/arcgis-rest-js

esri.github.io/arcgis-rest-js

@esri/arcgis-rest-jshelpsyoutalk

toArcGISOnlineandEnterprise

frommodernbrowsersandNode.js.

VanillaXMLHttpRequest

//constructtheurlyourselfanddon'tforgettotackonf=jsonconsturl="https://www.arcgis.com/sharing/rest/community/users/dmfenton";url+="?f=json";varxhr=newXMLHttpRequest();xhr.onreadystatechange=function()if(xhr.readyState==XMLHttpRequest.DONE)//makesureJSONresponsedoesntindicateanerrorif(!xhr.responseText.error)xhr.responseText;//firstName:"Daniel",description:"opensourcegeodev";xhr.open("GET",url,true);xhr.send(null);

VanillaFetch

consturl="https://www.arcgis.com/sharing/rest/community/users/dmfenton";fetch(url,method:"POST",//settherequesttypeheaders:"Content­Type":"application/x­www­form­urlencoded"//appendtherightheader,//concatandencodeparameters,appendf=jsonbody:encodeURIComponent("f=json")).then(response=>if(response.ok)returnresponse.json();//digoutthejson).then(response=>//trapforerrorsinsidea200responseif(!response.error)returnresponse;);

EvenmorecomplexityWhatarealltheerrorcodes?Howdoyouhandleauth?Howaredatessupposedtobeencoded?Properencodingforobjects?Howdoyoumanagetokensforfederatedservers?Refreshingauthenticationwhennecessary?

@esri/arcgis­rest­js

importrequestfrom"@esri/arcgis­rest­request";request(url).then(response)//firstName:"Daniel",description:"opensourcegeodev"....catch((error=>if(err.name==="ArcGISAuthError")//handleanautherrorelse//handlearegularerror)

Valueaddsappendsf=jsonandrequestheadersencodesquerystringparameterscreatesFormData(whenrequired)clearandinformativeerrorhandlingproperparameterencodingsupportforauthenticationdisplayamapclientsideanalysis

requestonlyexpectsaurl,butitexposesrequestOptionstoo.

//url,IRequestOptionsrequest(url,params://anythingyouwanttopassfoo:true,bar:"baz",more:File(),num:999,when:Date().now()//etc.//httpMethod:"GET",//authentication//portal,//headers,//fetch);

therestoftheAPIbuildsontopofrequest

importgeocodefrom"@esri/arcgis­rest­geocoding";//assumesyouwanttouseArcGISOnlinegeocode("LAX").then(response);//...candidates:[]//IRequestOptionsisstillavailablegeocode(singleLine:"LAX",params:forStorage:true,authentication);

GoalsNode.jsand(modern)browsersalacarte/svelteframeworkagnosticshavedownthesharpedgesalignwithJSecosystem

Disclaimer*notaproduct,noroadmapworkscratchingourownitch

inprogress

ComparisonkindofanalogoustoArcGISAPIforPythonmuchdifferentthantheArcGISAPIforJavaScript

Inthebeginning...

customers!

ArcGISforDevelopersArcGISHub

Asof2020ArcGISHubArcGISforDevelopersStorymapsWebAppBuilder(nextgeneration)ArcGISSolutionsArcGISEnterpriseArcGISAnalyticsforIoTEsriUKStartups/PartnersCustomersYou?

packages!request2.8kBauth3.6kBportal5.1kBfeature­layer1.3kBservice­admin746Bgeocoding1kBrouting642B

CommonPatterns

whenonlyonepieceofinformationisrequired

youcanpassinitindirectly.

importsearchItemsfrom"@esri/arcgis­rest­portal";searchItems("water").then(response);//total:355,etc...//orsearchItems(query:"water",httpMethod:"GET",authentication);

ifmorethanonepieceofinformationisneeded

onlyanobjectcanbepassedin, IRequestOptions

deleteFeatures(url:"https://server.arcgis.com/arcgis/rest/objectIds:[123]).then(response)

//response"deleteResults":["objectId":123,"success":true]

extends

updatewhocanaccessanitemimportsetItemAccessfrom"@esri/arcgis­rest­sharing";setItemAccess(id:`fe8`,//whichitem?access:`public`,//whoshouldbeabletoseeit?authentication//userallowedtoupdate).then(response);

ISetItemAccessOptions

Simplieddeveloperexperience,evenwhentheunderlyinglogicis

weensuretheresponseisdeterministicwegureoutwhichurltocall(basedonrole)

complicated

AuthenticationimportUserSessionfrom"@esri/arcgis­rest­auth";//ArcGISOnlinecredentialsconstauthentication=newUserSession(username,password);//ArcGISEnterprisecredentialsconstenterpriseAuth=newUserSession(username,password,portal:`https://gis.city.gov/sharing/rest`);

UserSessionkeepstrackoftokenexpiration

andwhetherornotaserveristrusted(federated)

consturl=`http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/`;constauthentication=newUserSession(username,password);request(url,authentication).then(response=>//thesametokenwillbereusedforthesecondrequestrequest(url,authentication););

sinceDevSummit2019...rest-jsv2.0.0!

(plus20additionalreleases)

What'snewinv2+

Improved

setDefaultRequestOptions()andwithOptions()

Packageandtypereorganization

SearchQueryBuilder

paging

Buildingsearchqueries//1.xconstq="TreesANDowner:USForestServiceAND(type:'WebMappingApplication'ORtype://2.xconstq=newSearchQueryBuilder().match("Trees").and().match("USForestService").in("owner").and().startGroup().match("WebMappingApplication").in("type").or().match("MobileApplication").in("type").endGroup();

Oneportalpackagetorulethemall//1.xnpminstall@esri/arcgis­rest­items&&@esri/arcgis­rest­users&&@esri/arcgis­rest­groups&&@esri/arcgis­rest­sharing//2.xnpminstall@esri/arcgis­rest­portal

Packagesinstalltypesautomatically//1.ximportIPointfrom"@esri/arcgis­rest­common­types";importreverseGeocodefrom"@esri/arcgis­rest­geocoder";reverseGeocode(x:34,y:­118asIPoint);//2.ximportIPoint,reverseGeocodefrom"@esri/arcgis­rest­geocoding";reverseGeocode(x:34,y:­118asIPoint);

Checkoutthe forthefulllistreleasenotes

DemoOAuthinBrowser

Authpackagerest-jsviaCDN

DemoReactComponent

GeocodingpackageDownshift

DemoJSAPIIntegrationwithAngular

DemoNode.js

Resources

MoreDemos

LinktoslidesGitHubrepoDocssiteDemoatObservables

SapperWebComponentswithStencilLamdaFunctions