Differences
This shows you the differences between two versions of the page.
|
isi:laboratoare:02 [2024/10/06 21:52] alexandru.predescu |
isi:laboratoare:02 [2024/10/20 16:17] (current) alexandru.predescu |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Laboratorul 02. Aplicații interactive cu ArcGIS ===== | + | ===== Laboratorul 02. Aplicație web cu ArcGIS în JavaScript ===== |
| ==== Obiective laborator ==== | ==== Obiective laborator ==== | ||
| + | * Introducere în realizarea aplicațiilor web configurabile cu ArcGIS Instant Apps builder | ||
| + | * Familiarizare cu servicii de date în ArcGIS, ex. un feature layer poate fi expus printr-un serviciu web (feature service) | ||
| + | * Introducere în ArcGIS for Developers | ||
| + | * Familiarizare cu ArcGIS Maps SDK for JavaScript | ||
| + | |||
| + | ==== ArcGIS Instant Apps builder ==== | ||
| + | |||
| + | Pentru a înțelege mai bine ce presupune o aplicație web ArcGIS, vom porni de la harta creată anterior și funcția **Create app > Instant Apps** disponibilă în Map Viewer | ||
| + | |||
| + | {{:isi:laboratoare:lab1:create_web_app.png?400|}} | ||
| + | |||
| + | Selectați modelul Basic, configurați componentele incluse, apoi publicați aplicația web și copiați link-ul generat într-o fereastra de browser. | ||
| + | |||
| + | {{:isi:laboratoare:lab1:create_web_app_publish.png?400|}} | ||
| + | |||
| + | Aceasta este o metodă simplă și rapidă de a crea aplicații web folosind portalul ArcGIS, dar nu este cea mai versatilă în cazul aplicațiilor mai complexe, cu funcționalități și integrări specifice. Enter ArcGIS for Developers: | ||
| + | |||
| + | ==== ArcGIS for Developers ==== | ||
| + | |||
| + | Pentru a dezvolta o aplicație web folosind direct SDK-ul și API-urile ArcGIS, aveți nevoie de un API KEY generat pe contul [[https://location.arcgis.com/|Location ArcGIS]]. | ||
| + | |||
| + | |||
| + | {{:isi:laboratoare:lab3:apikey.png?600|}} | ||
| + | |||
| + | ==== Familiarizare cu JavaScript ==== | ||
| + | |||
| + | JavaScript este un limbaj de programare aparent simplu (se poate face rapid o aplicație simplă, rulează în browser, nu necesită un toolkit avansat) dar în același timp complex (programare asincronă, multi-paradigmă). Există numeroase framework-uri de JavaScript pentru dezvoltarea aplicațiilor web, atât pe partea de front end (Angular, Vue, React), cât și de back end (Node.js). | ||
| + | |||
| + | Pentru acest laborator, vom realiza o aplicație simplă în browser, folosind SDK-ul ArcGIS pentru JavaScript, și un tutorial pas cu pas. Nu sunt necesare cunoștințe avansate de JavaScript, dar pentru o mai bună înțelegere a limbajului de programare și a modului de organizare a unei aplicații web, puteți consulta tutoriale disponibile online: | ||
| + | |||
| + | * [[https://www.freecodecamp.org/news/html-css-and-javascript-explained-for-beginners/|Learn Web Development Basics – HTML, CSS, and JavaScript Explained for Beginners]] | ||
| + | * [[https://www.geeksforgeeks.org/javascript/ |JavaScript - GeeksforGeeks]] | ||
| + | |||
| + | <note important>Rareori aplicațiile web de complexitate medie sunt scrise direct în JavaScript. De regulă se folosesc framework-uri pentru a gestiona structura și funcționalitățile generale ale aplicațiilor, dar toate acestea au la bază o cunoaștere bună a limbajului.</note> | ||
| + | |||
| + | <note tip>SDK-ul de JavaScript pentru ArcGIS este folosit pentru a crea aplicații web customizabile, independente de tipul de browser folosit. Are la bază framework-ul Dojo, un toolkit care permite realizarea aplicațiilor modulare.</note> | ||
| + | |||
| + | === Dojo === | ||
| + | |||
| + | SDK-ul ArcGIS are la bază toolkit-ul Dojo și este construit pe bază de module ce suportă încărcare modulară dinamică (AMD) prin require.js. | ||
| + | |||
| + | <note tip>Găsiți [[https://dojotoolkit.org/documentation/tutorials/1.10/modules/|aici]] informații suplimentare din documentația Dojo</note> | ||
| + | |||
| + | ==== Setup aplicație web ==== | ||
| + | |||
| + | Pentru a începe lucrul cu ArcGIS Maps SDK for JavaScript, găsiți aici un setup minimal pentru a afișa o hartă: [[https://developers.arcgis.com/javascript/latest/display-a-map/|Display a map]] | ||
| + | |||
| + | Structura aplicației ArcGIS are la bază sistemul modular bazat pe Dojo: | ||
| + | |||
| + | <file javascript> | ||
| + | require([ | ||
| + | "esri/config", | ||
| + | "esri/Map", | ||
| + | "esri/views/MapView" | ||
| + | ], function(esriConfig, Map, MapView) | ||
| + | { | ||
| + | </file> | ||
| + | |||
| + | === Sandbox === | ||
| + | |||
| + | Pentru a vă putea testa codul puteți folosi Sandbox-ul [[https://codepen.io/|codepen.io]] | ||
| + | Pentru a salva proiectele realizate în CodePen este necesar să vă creați un cont gratuit. | ||
| + | |||
| + | {{:isi:laboratoare:lab3:codepen.png?600|}} | ||
| + | |||
| + | <note important> | ||
| + | Folosiți tab-urile corespunzătoare pentru a scrie cod HTML, CSS și JavaScript, în loc să scrieți tot codul în HTML. | ||
| + | |||
| + | În proiecte mai complexe, separarea fișierelor (.html, .css, .js) permite o mai bună organizare a aplicației, și facilități de formatare și verificare a sintaxei în cazul folosirii unui IDE (de ex. [[https://code.visualstudio.com/|Visual Studio Code]]).</note> | ||
| + | |||
| - | * Familiarizare cu Map Viewer | ||
| - | * Familiarizare cu Scene Viewer | ||
| - | * Identificarea elementelor componente ale unei hărți; | ||
| - | * basemap, layere, legendă, ferestre pop-up, | ||
| - | * Înțelegerea conceptului de layer: | ||
| - | * conținutul principal al aplicațiilor pe care le veți construi cu ArcGIS. | ||
| - | * se pot baza pe servicii expuse prin API-ul ArcGIS REST | ||
| - | * se pot baza pe fișiere GeoJSON, CSV, sau alte tipuri fișiere disponibile pe disc sau într-o rețea. | ||
| - | * pot fi, de asemenea, create în aplicații din date arbitrare încărcate pe o rețea sau de pe disc utilizând API-urile ArcGIS și SDK-urile. | ||
| - | * elementele grafice pot fi afișate și pe hărți folosind layere grafice. | ||
| ==== Plan laborator ==== | ==== Plan laborator ==== | ||
| - | [[https://learn.arcgis.com/en/paths/public-account-experience-tutorials/|Tutorials for a public account experience]] | + | === Inițializare hartă === |
| + | Inițializați aplicația și afișați harta folosind ArcGIS Maps SDK for JavaScript: | ||
| + | |||
| + | https://developers.arcgis.com/javascript/latest/display-a-map/ | ||
| + | |||
| + | === Geolocație === | ||
| + | |||
| + | Adăugați modulul ''esri/widgets/Locate'' pentru a integra funcția de localizare și urmărire prin geolocație: | ||
| + | |||
| + | https://developers.arcgis.com/javascript/latest/display-your-location/ | ||
| + | |||
| + | /*<note tip>Care este diferența dintre Locate și Track?</note>*/ | ||
| + | |||
| + | === Elemente grafice pe hartă === | ||
| + | |||
| + | Se pot adăuga elemente grafice definite prin coordonate geografice (latitudine, longitudine). Aceste elemente definesc un layer grafic, ce poate fi gestionat direct la nivel de aplicație. | ||
| + | |||
| + | Elementele grafice de tip ''Point'', ''Polyline'', ''Polygon'' se definesc prin coordonate și simboluri, și sunt afișate pe hartă folosind un obiect de tip ''Graphic''. | ||
| + | |||
| + | https://developers.arcgis.com/javascript/latest/add-a-point-line-and-polygon/ | ||
| + | |||
| + | === Adăugare layere === | ||
| + | |||
| + | Se pot adăuga layere din surse externe în diferite moduri: | ||
| + | * ''FeatureLayer'' | ||
| + | * ''GeoJSONLayer'' | ||
| + | * ''RasterLayer'' | ||
| + | * ... | ||
| + | |||
| + | Adăugați modulul ''esri/layers/FeatureLayer'' pentru a integra layere de tip ''FeatureLayer''. | ||
| + | |||
| + | https://developers.arcgis.com/javascript/latest/add-a-feature-layer/ | ||
| + | |||
| + | Adăugați modulul ''esri/layers/GeoJSONLayer'' pentru a integra layere dintr-un fișier GeoJSON. | ||
| + | |||
| + | https://developers.arcgis.com/javascript/latest/sample-code/layers-geojson/ | ||
| + | |||
| + | <note tip>Folosind modulul ''esri/layers/GeoJSONLayer'' se pot integra layere din surse externe, fără a fi necesară crearea unui FeatureLayer pe platforma ArcGIS. Fișierul GeoJSON poate fi hostat pe un server, independent de platforma ArcGIS.</note> | ||
| + | |||
| + | /** | ||
| + | Nu avem încă un server separat, dar dorim să integrăm un layer dintr-un fișier. Vom importa mai întâi un layer din formatul GeoJSON în ArcGIS Developer. Încărcați layer-ul din fișierul ''Trails.geojson'' descărcat anterior (sau de {{:isi:laboratoare:lab3:la_hub_datasets.zip|aici}}) în contul ArcGIS Developer: https://developers.arcgis.com/layers/ | ||
| + | |||
| + | Configurați FeatureLayer-ul generat pentru a fi accesibil public: | ||
| + | |||
| + | {{:isi:laboratoare:lab3:public_layers.png?600|}} | ||
| + | |||
| + | <note tip>Alternativ, realizați operațiunea de partajare din secțiunea Content. Selectați resursa de tip ''Feature Layer (hosted)'' corespunzătoare layer-ului importat, apoi selectați opțiunea Share: Everyone (Public)</note> | ||
| + | |||
| + | Înlocuiți link-ul din tutorial cu link-ul către acest layer nou creat. | ||
| + | |||
| + | <note important>Serviciile hostate pe contul vostru de ArcGIS Developer sunt gratuite în limitele definite pe pagina de [[https://developers.arcgis.com/pricing/|Pricing]]</note> | ||
| + | |||
| + | **/ | ||
| + | |||
| + | === Configurare layere === | ||
| + | |||
| + | Layerele adăugate pot fi configurate programatic din aplicație. | ||
| + | |||
| + | https://developers.arcgis.com/javascript/latest/style-a-feature-layer/ | ||
| + | |||
| + | === Configurare popup-uri === | ||
| + | |||
| + | Popup-urile pot fi configurate programatic din aplicație. | ||
| + | |||
| + | https://developers.arcgis.com/javascript/latest/display-a-pop-up/ | ||
| ==== Task ==== | ==== Task ==== | ||
| + | /***Task 1***/ | ||
| + | Creați o (singură) aplicație web care să includă toate funcționalitățile din planul de laborator. | ||
| + | Adăugați toate resursele specificate în tutorial. | ||
| + | |||
| + | /***Task 2** | ||
| + | Adăugați un layer dintr-una din aplicațiile realizate în laboratoarele anterioare și adaptați aplicația web construită anterior. | ||
| + | |||
| + | <note tip>Un Feature Layer poate fi partajat în secțiunea Content ca resursă web. Urmăriți secțiunea [[https://developers.arcgis.com/javascript/latest/layers-and-data/|Layers and Data]] pentru adăugarea unui layer folosind ArcGIS Maps SDK for JavaScript: | ||
| + | |||
| + | <file javascript> | ||
| + | var layer = new FeatureLayer({ | ||
| + | portalItem: { | ||
| + | id: "883cedb8c9fe4524b64d47666ed234a7", // my-layer-id | ||
| + | portal: "https://www.arcgis.com" // Default: The ArcGIS Online Portal | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | map.layers.add(layer); | ||
| + | |||
| + | </file></note> | ||
| + | <note tip>Găsiți id-ul unui Feature Layer din secțiunea Content, în URL: | ||
| + | https://www.arcgis.com/home/item.html?id=<my-layer-id></note>*/ | ||
| ==== Resurse ==== | ==== Resurse ==== | ||
| - | * {{:isi:laboratoare:lab2:get_started_with_map_viewer_classic.pdf|Get started with Map Viewer Classic (PDF)}} | ||
| - | * {{:isi:laboratoare:lab2:resources.zip|}} | ||
| - | * [[https://learn.arcgis.com/en/projects/get-started-with-map-viewer-classic/|Get started with Map Viewer Classic]] | ||
| - | * [[https://developers.arcgis.com/documentation/core-concepts/layers/]] | ||
| + | * {{:isi:laboratoare:lab3:la_hub_datasets.zip|LA_Hub_Datasets.zip}} | ||
