Differences
This shows you the differences between two versions of the page.
|
isi:laboratoare:02 [2024/10/07 13:04] alexandru.predescu |
isi:laboratoare:02 [2024/10/20 16:17] (current) alexandru.predescu |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Laboratorul 02. Aplicație web cu ArcGIS JavaScript API ===== | + | ===== Laboratorul 02. Aplicație web cu ArcGIS în JavaScript ===== |
| ==== Obiective laborator ==== | ==== Obiective laborator ==== | ||
| - | * Familiarizare cu servicii de date în ArcGIS | + | * Introducere în realizarea aplicațiilor web configurabile cu ArcGIS Instant Apps builder |
| - | * Un feature layer poate fi expus ca printr-un serviciu web (feature service) | + | * 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 | * Introducere în ArcGIS for Developers | ||
| - | * Familiarizare cu ArcGIS JavaScript API | + | * Familiarizare cu ArcGIS Maps SDK for JavaScript |
| - | * Înțelegerea modului de realizare a unei aplicații web cu JavaScript API | + | |
| - | * Înțelegerea modului de integrare a funcționalităților ArcGIS interactive | + | |
| ==== ArcGIS Instant Apps builder ==== | ==== ArcGIS Instant Apps builder ==== | ||
| Line 25: | Line 21: | ||
| ==== ArcGIS for Developers ==== | ==== ArcGIS for Developers ==== | ||
| - | Pentru a folosi API-urile ArcGIS, aveți nevoie de un API KEY generat pe contul [[https://developers.arcgis.com/dashboard/|ArcGIS Developer]]. | + | 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]]. |
| - | <note important> | ||
| - | Pentru a accesa contul ArcGIS Developer, se poate transforma contul public în cont de developer, fără costuri suplimentare (în loc să creați un cont free trial care expiră). | ||
| - | </note> | ||
| {{:isi:laboratoare:lab3:apikey.png?600|}} | {{:isi:laboratoare:lab3:apikey.png?600|}} | ||
| Line 37: | Line 30: | ||
| 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). | 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 API-ul de JavaScript pentru ArcGIS, ș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: | + | 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.freecodecamp.org/news/html-css-and-javascript-explained-for-beginners/|Learn Web Development Basics – HTML, CSS, and JavaScript Explained for Beginners]] | ||
| Line 44: | Line 37: | ||
| <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 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>API-ul de JavaScript pentru ArcGIS este folosit pentru a crea aplicații web customizabile, independente de tipul de browser folosit. API-ul este bazat pe Dojo, un toolkit care permite realizarea aplicațiilor modulare.</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 === | === Dojo === | ||
| - | API-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. | + | 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> | <note tip>Găsiți [[https://dojotoolkit.org/documentation/tutorials/1.10/modules/|aici]] informații suplimentare din documentația Dojo</note> | ||
| Line 54: | Line 47: | ||
| ==== Setup aplicație web ==== | ==== Setup aplicație web ==== | ||
| - | Pentru a începe lucrul cu JavaScript API, 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]] | + | 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: | Structura aplicației ArcGIS are la bază sistemul modular bazat pe Dojo: | ||
| Line 85: | Line 78: | ||
| === Inițializare hartă === | === Inițializare hartă === | ||
| - | Inițializați aplicația și afișați harta folosind API-ul de JavaScript: | + | 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/ | https://developers.arcgis.com/javascript/latest/display-a-map/ | ||
| Line 123: | Line 116: | ||
| <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> | <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/ | 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/ | ||
| Line 134: | Line 128: | ||
| <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> | <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 === | === Configurare layere === | ||
| Line 156: | Line 152: | ||
| Adăugați un layer dintr-una din aplicațiile realizate în laboratoarele anterioare și adaptați aplicația web construită anterior. | 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 JavaScript API: | + | <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> | <file javascript> | ||
