Show page

Differences

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

--- isi:laboratoare:03 [2024/10/06 21:59]
alexandru.predescu
+++ isi:laboratoare:03 [2024/10/22 09:45] (current)
sorin.ciolofan [Servicii ArcGIS avansate]
@@ Line 1: / Line 1: @@
-===== Laboratorul 03. Integrarea serviciilor 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 ====
-  * 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
   * Familiarizare cu serviciile avansate din ArcGIS
     * Serviciul de rutare
     * Serviciul de căutare a locațiilor
+  * Familiarizare cu structura unei aplicații într-un framework web (Angular)
 ==== 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 ===
 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.
 === 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 33: / Line 34: @@
 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.
+<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 ===
+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)
+<code>
+npm run start
+</code>
+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.
+Deschideți browser-ul la adresa: http://localhost:4200/
 ==== Resurse ====
-  * {{:isi:laboratoare:lab3:la_hub_datasets.zip|LA_Hub_Datasets.zip}}

Administrativ

Laboratoare

Laboratoare (arhiva)

Proiect

Arhivă

isi/laboratoare/03.1728241179.txt.gz · Last modified: 2024/10/06 21:59 by alexandru.predescu

Show page Old revisions

Media Manager Back to top