Differences
This shows you the differences between two versions of the page.
|
isi:laboratoare:03 [2024/10/06 21:57] alexandru.predescu [Task] |
isi:laboratoare:03 [2024/10/22 09:45] (current) sorin.ciolofan [Servicii ArcGIS avansate] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Laboratorul 03. Servicii ArcGIS avansate ===== | + | ===== Laboratorul 03. Integrarea funcțională. Servicii GIS avansate ===== |
| + | Integrarea funcțională presupune fie apelarea unor servicii web / API-uri, instalarea unor pachete / SDK-uri, sau chiar utilizarea unui Framework ca structură generală a aplicației. În acest laborator, vom folosi în continuare SDK-ul ArcGIS pentru JavaScript, la care vom adăuga servicii avansate disponibile pe bază de API-uri. Apoi vom face setup-ul pentru un proiect realizat în framework-ul Angular, unde vom integra harta și alte funcționalități separate de ArcGIS. | ||
| ==== Obiective laborator ==== | ==== Obiective laborator ==== | ||
| - | * 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 | * Înțelegerea modului de integrare a funcționalităților ArcGIS interactive | ||
| * Familiarizare cu serviciile avansate din ArcGIS | * Familiarizare cu serviciile avansate din ArcGIS | ||
| * Serviciul de rutare | * Serviciul de rutare | ||
| * Serviciul de căutare a locațiilor | * Serviciul de căutare a locațiilor | ||
| + | * Familiarizare cu structura unei aplicații într-un framework web (Angular) | ||
| ==== Servicii ArcGIS avansate == | ==== Servicii ArcGIS avansate == | ||
| - | ArcGIS pune la dispoziție o multitudine de servicii interactive ce pot fi integrate în aplicații web folosind JavaScript API: [[https://developers.arcgis.com/documentation/mapping-apis-and-services/|Mapping APIs and location services]] | + | ArcGIS pune la dispoziție o multitudine de servicii interactive ce pot fi integrate în aplicații web folosind ArcGIS Maps SDK: [[https://developers.arcgis.com/documentation/mapping-apis-and-services/|Mapping APIs and location services]] |
| === Rutare === | === Rutare === | ||
| Se poate folosi serviciul de rutare pentru calcularea rutelor și afișarea indicațiilor de navigație (este necesar contul de developer și API key-ul generat) | Se poate folosi serviciul de rutare pentru calcularea rutelor și afișarea indicațiilor de navigație (este necesar contul de developer și API key-ul generat) | ||
| - | [[https://developers.arcgis.com/documentation/mapping-apis-and-services/routing/services/routing-service/|Routing service]] | + | [[https://developers.arcgis.com/javascript/latest/tutorials/find-a-route-and-directions/|Routing service]] |
| Testați serviciul de rutare în CodePen, folosind API key-ul generat în laboratorul anterior. | Testați serviciul de rutare în CodePen, folosind API key-ul generat în laboratorul anterior. | ||
| === Căutare locații === | === Căutare locații === | ||
| - | Pentru căutarea locațiilor dintr-o arie geografică se poate folosi serviciul [[https://developers.arcgis.com/documentation/mapping-apis-and-services/search/place-search/|Place search]]. Acesta poate returna locații după categorie (ex. cafenea), nume (ex. Starbucks), adresă, sau coordonate (lat, lng). | + | Pentru căutarea locațiilor dintr-o arie geografică se poate folosi serviciul [[https://developers.arcgis.com/javascript/latest/tutorials/find-places/|Place search]]. Acesta poate returna locații după categorie (ex. cafenea), nume (ex. Starbucks), adresă [[https://developers.arcgis.com/javascript/latest/tutorials/search-for-an-address/|Address search]], sau coordonate (lat, lng). |
| Line 30: | Line 31: | ||
| **Task 1** | **Task 1** | ||
| + | |||
| Creați o (singură) aplicație web care să includă toate funcționalitățile din planul de laborator. | 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. | Adăugați toate resursele specificate în tutorial. | ||
| + | <note tip>Sugestie: folosiți aplicația realizată în laboratorul anterior.</note> | ||
| + | |||
| + | **Task 2** | ||
| + | |||
| + | Realizați setup-ul proiectului Angular de mai jos, pe care îl vom folosi în laboratorul următor. Verificați că aplicația rulează în browser fără erori: | ||
| + | |||
| + | * se încarcă interfața? | ||
| + | * se încarcă harta? (dacă nu, identificați cauza și modificați codul .ts al paginii în care este afișată) | ||
| + | |||
| + | <note>Pentru a verifica dacă există erori la runtime, deschideți consola de developer (F12 sau click dreapta: inspect), apoi selectați tab-ul Console. | ||
| + | </note> | ||
| + | |||
| + | |||
| + | ==== Setup local pentru dezvoltare aplicații web cu Angular ==== | ||
| + | |||
| + | <note>Descărcați proiectul de pe GitHub: [[https://github.com/alexp25/AngularDemoArcGIS|AngularDemoArcGIS]]</note> | ||
| + | |||
| + | ==== Setup și instalare proiect minimal cu Angular ==== | ||
| + | |||
| + | Pentru început am lucrat în CodePen. În laboratorul următor, dorim să realizăm un proiect mai complex și vom lucra pe mașina locală. Avem nevoie de câteva tool-uri înainte de a începe. | ||
| + | |||
| + | === Instalare Node.js și NPM === | ||
| + | |||
| + | Instalați versiunea LTS de aici, dacă nu aveți deja instalat Node.js: https://nodejs.org/en/ | ||
| + | |||
| + | <note important>Pentru a păstra compatibilitatea cu proiectul existent, recomandăm versiunea [[https://nodejs.org/en/blog/release/v16.15.1/|Node v16.15.1 (LTS)]], dar este posibil să meargă și cu versiunea actuală LTS</note> | ||
| + | |||
| + | === Instalare dependențe globale === | ||
| + | |||
| + | PowerShell | ||
| + | <code> | ||
| + | npm install -g @angular/cli | ||
| + | </code> | ||
| + | |||
| + | /*PowerShell Administrator | ||
| + | <code> | ||
| + | npm install -g windows-build-tools | ||
| + | </code> | ||
| + | |||
| + | <note warning>Dacă terminalul rămâne blocat după ce s-a instalat python, se poate închide (ctrl+c)</note>*/ | ||
| + | |||
| + | https://angular.io/guide/setup-local | ||
| + | |||
| + | === Instalare dependențe locale === | ||
| + | |||
| + | În folder-ul dezarhivat pe care l-ați descărcat anterior, deschideți un terminal (e.g. PowerShell, shift+click dreapta / Open PowerShell window here) și rulați comanda: | ||
| + | |||
| + | <code> | ||
| + | npm install | ||
| + | </code> | ||
| + | |||
| + | === Compilare și rulare proiect === | ||
| - | <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: | + | Pentru a împacheta proiectul și a deschide un server local, ne folosim de toolkit-ul Angular (ng serve). Putem folosi următoarea comandă definită în configurarea proiectului (package.json) |
| - | <file javascript> | + | <code> |
| - | var layer = new FeatureLayer({ | + | npm run start |
| - | portalItem: { | + | </code> |
| - | id: "883cedb8c9fe4524b64d47666ed234a7", // my-layer-id | + | |
| - | portal: "https://www.arcgis.com" // Default: The ArcGIS Online Portal | + | |
| - | } | + | |
| - | }); | + | |
| - | map.layers.add(layer); | + | Dacă totul este ok (nu sunt erori în cod și toate dependențele au fost instalate corect), se va deschide un server pe portul 4200. |
| - | </file></note> | + | Deschideți browser-ul la adresa: http://localhost:4200/ |
| - | <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:lab3:la_hub_datasets.zip|LA_Hub_Datasets.zip}} | ||
