Show page

Differences

This shows you the differences between two versions of the page.

--- isi:laboratoare:02 [2024/10/03 19:32]
alexandru.predescu
+++ isi:laboratoare:02 [2024/10/20 16:17] (current)
alexandru.predescu
@@ Line 1: / Line 1: @@
-===== Laboratorul 02. Reprezentarea datelor în ArcGIS =====
+===== Laboratorul 02. Aplicație web cu ArcGIS în JavaScript =====
 ==== 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
-  * Familiarizare cu Map Viewer
+==== ArcGIS Instant Apps builder ====
-  * 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 ====
+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
-[[https://learn.arcgis.com/en/projects/get-started-with-map-viewer-classic/|Get started with Map Viewer Classic]]
+{{:isi:laboratoare:lab1:create_web_app.png?400|}}
-{{:isi:laboratoare:lab2:get_started_with_map_viewer_classic.pdf|Get started with Map Viewer Classic (PDF)}}
+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:plan.png?400|}}
+{{:isi:laboratoare:lab1:create_web_app_publish.png?400|}}
-==== Crearea unui layer ====
+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:
-De multe ori, informațiile sunt stocate în fișiere. Un format deseori utilizat este CSV. Se pot importa datele în ArcGIS, fiind preluate direct coordonatele sau [[https://www.micromapper.ro/ce-este-geocadarea-si-geocodare-inversa/|geocodate]] pe baza adreselor.
+==== ArcGIS for Developers ====
-Fișierele CSV se pot importa prin opțiunea Add Layer from File.
+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:lab1:introducere_date.png?600|}}
-Se configurează atributele care vor fi mapate, apoi se selectează țara în care se află entitățile reprezentate.
+{{:isi:laboratoare:lab3:apikey.png?600|}}
-{{:isi:laboratoare:lab1:csv_layer.png?300|}}
+==== Familiarizare cu JavaScript ====
-{{:isi:laboratoare:lab1:csv_layer_create.png?400|}}
+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).
-Layer-ul generat va fi listat în secțiunea My Content.
+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:
-{{:isi:laboratoare:lab1:layer_my_content.png?400|}}
+  * [[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]]
-{{:isi:laboratoare:lab1:layer_config.png?400|}}
+<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>
-==== Formatul GeoJSON ====
+<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>
-Formatul GeoJSON poate fi utilizat pentru stocarea datelor geospațiale. Are la bază formatul JSON și conține tipuri predefinite pentru reprezentarea entităților: puncte (Point), linii (LineString), poligoane (Polygon), colecții geometrice (MultiPoint, MultiLineString, MultiPolygon, GeometryCollection).
+=== Dojo ===
-Exemplu de atribut specific formatului GeoJSON:
+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.
-<file json>
+<note tip>Găsiți [[https://dojotoolkit.org/documentation/tutorials/1.10/modules/|aici]] informații suplimentare din documentația Dojo</note>
-"geometry":{
-   "coordinates":[
+==== Setup aplicație web ====
-      -99.88897705,
-.23457718
+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]]
-   ],
-   "type":"Point"
+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>
-<note>Descărcați arhiva [[https://www.arcgis.com/home/item.html?id=a04933c045714492bda6886f355416f2|LA_Hub_Datasets]]. Vizualizați fișierele ce conțin date geospațiale în diferite formate: GeoJSON, CSV, Shapefile.</note>
+=== Sandbox ===
-==== Task ====
+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.
-În acest laborator aveți de creat o hartă care prezintă vulcanii din Hawaii, adăposturile vulcanice și zonele de pericol.
+{{:isi:laboratoare:lab3:codepen.png?600|}}
-==== Resurse ====
+<note important>
-  * {{:isi:laboratoare:lab2:get_started_with_map_viewer_classic.pdf|Get started with Map Viewer Classic (PDF)}}
+Folosiți tab-urile corespunzătoare pentru a scrie cod HTML, CSS și JavaScript, în loc să scrieți tot codul în HTML.
-  * {{: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/]]
+Î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>
-<ifauth @isi>
-----
-Alternative:
-  * [[https://learn.arcgis.com/en/projects/get-started-with-map-viewer/arcgis-online/#explore-a-map]]
-  * [[https://learn.arcgis.com/en/projects/analyze-volcano-shelter-access-in-hawaii/]]
-**TODO 2024**: trecut pe noul tutorial, si adaugat partea cu layer din CSV, sau adaugat tutorialul cu vulcani direct pe OCW, adaptat pentru Map Viewer
+==== Plan laborator ====
-</ifauth>
+=== 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 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 ====
+  * {{:isi:laboratoare:lab3:la_hub_datasets.zip|LA_Hub_Datasets.zip}}

Administrativ

Laboratoare

Laboratoare (arhiva)

Proiect

Arhivă

isi/laboratoare/02.1727973124.txt.gz · Last modified: 2024/10/03 19:32 by alexandru.predescu

Show page Old revisions

Media Manager Back to top