ESRI ROMANIA BLOG
Ghid pentru ArcGIS Experience Builder-Developer Edition (Partea 1)
Ianuarie 2024
Autor: Aya Mohamed
Prezentare generală
Experience Builder Developer Edition este un instrument modern și configurabil, conceput atât pentru dezvoltatori, cât și pentru utilizatori fără experiență în programare. Acesta permite crearea de aplicații web personalizate utilizând o abordare no-code și low-code, oferind o varietate de șabloane și widgeturi pentru a simplifica procesul de dezvoltare a aplicațiilor. Instrumentul oferă utilizatorilor posibilitatea de a proiecta aplicații web moderne, bazate pe date, axate atât pe cazuri de utilizare centrate pe hărți, cât și pe cele care nu implică hărți.
Condițiile specifice în care apare problema
Cuprins
- De ce să folosiți Developer Edition
- Instalare și configurare
- Crearea unui Client ID
- Accesarea Experience Builder
- Crearea unei noi aplicații
De ce să folosiți Developer Edition?
- Proiectați aplicații cu șabloane și machete flexibile, adaptate nevoilor dvs.
- O bibliotecă bogată de widgeturi predefinite pentru dezvoltarea aplicațiilor fără cod.
- Extindeți funcționalitatea prin widgeturi și teme personalizate.
- Construit utilizând cele mai recente tehnologii: JavaScript API v4, React, Redux și TypeScript.
- Aplicațiile pot fi optimizate pentru vizualizare pe mobil, tabletă și desktop, toate sub un singur URL.
- Poate fi instalat și rulat în medii offline cu pachetele Node.js corespunzătoare.
- Integrare Storybook pentru dezvoltarea și previzualizarea componentelor UI.
Tehnologii utilizate
Experience Builder Developer Edition este construit pe o platformă tehnologică modernă, optimizată pentru performanță:
- TypeScript este limbajul principal al întregului cadru, asigurând tipare stricte și o calitate sporită a codului.
- React este o bibliotecă JavaScript folosită pentru crearea de interfețe dinamice și interactive.
- Redux este o bibliotecă pentru gestionarea stării aplicației, care garantează un comportament previzibil.
- Webpack este un module bundler utilizat pentru împachetarea eficientă a codului JavaScript.
- Jimu Library este o colecție de componente și instrumente reutilizabile, concepute pentru dezvoltarea de widgeturi și interfețe.
Instalare și configurare
Pentru instrucțiuni detaliate de instalare, consultați ghidul oficial: Ghid de Instalare.
Cerințe Node.js
- Pentru configurarea versiunii Developer Edition a Experience Builder, asigurați-vă că Node.js este instalat pe sistemul dvs.
- Experience Builder necesită o versiune specifică de Node.js. Se recomandă utilizarea versiunilor 16, 18, 19 sau 20 (Node 17 nu este suportat).
- Node.js este necesar pentru rularea Developer Edition a Experience Builder, fiind folosit pentru instalarea dependențelor și pornirea mediului local de dezvoltare.
- Comenzi precum npm start și npm run build:prod depind de Node.js pentru configurarea și compilarea aplicației.
2. Descărcarea versiunii Developer Edition
Utilizarea unei versiuni nesuportate poate provoca erori de dependență, probleme de compatibilitate sau imposibilitatea de a rula serverul de dezvoltare — consultați ghidul de instalare pentru versiunea recomandată.
- Obțineți cea mai recentă versiune a ArcGIS Experience Builder Developer Edition de pe site-ul ArcGIS Developers.
- Dezarhivați fișierul descărcat într-o locație preferată pe unitatea dvs. locală. Localizați folderele server și client dependente
A.) Instalarea Dependențelor pentru Server
Serverul gestionează procesele backend, cum ar fi administrarea solicitărilor API, furnizarea datelor, autentificarea utilizatorilor și facilitarea comunicării între client și sursele de date. Urmați pașii de mai jos pentru a instala și rula serverul:
- Navigați la directorul /server din folderul dezarhivat al Experience Builder.
- Deschideți o fereastră Command Prompt sau Terminal.
- Rulați comanda npm ci pentru a instala modulele necesare.
- În același director, executați npm start pentru a porni serverul. Implicit, serverul rulează pe portul 3001.
B.) Instalarea dependențelor pentru client
Clientul oferă interfața front-end prin care utilizatorii proiectează și interacționează cu aplicația. Acesta este responsabil de redarea elementelor vizuale ale aplicației, widgeturilor și interacțiunilor utilizatorului.
- Navigați la directorul /client din folderul dezarhivat al Experience Builder.
- Deschideți o nouă fereastră Command Prompt sau Terminal.
- Rulați comanda npm ci pentru a instala modulele necesare.
- În același director /client, executați npm start pentru a porni clientul.
Crearea unui Client ID
Pentru a lucra cu versiunea Developer Edition a Experience Builder, este necesar să creați un Client ID. Există două modalități de a crea un Client ID:
- Prin Application
- Prin Developer Credentials
Crearea unui Client ID prin Application
- Autentificați-vă în portalul ArcGIS Online sau ArcGIS Enterprise.
- Navigați la fila My Content, faceți clic pe New Item și selectați Application.
- Selectați Other application și continuați.
- Introduceți un titlu (de exemplu: "Experience Builder credentials") și, opțional, etichete (tags).
- Salvați elementul.
- După salvare, veți fi direcționat către pagina de setări a aplicației.
- În secțiunea Credentials, faceți clic pe butonul Manage.
- În secțiunile Application URL și Redirect URI, faceți clic pe Add și introduceți:
https://localhost:3001/ - Copiați App ID generat; acesta va servi drept Client ID în timpul autentificării.
2. Crearea unui Client ID prin Developer Credential
- Autentificați-vă în portalul ArcGIS Online sau ArcGIS Enterprise.
- Navigați la fila My Content și faceți clic pe New Item.
- Selectați Developer Credentials cu acreditive OAuth 2.0.
- Va trebui să configurați Redirect URL și URL la:
https://localhost:3001/ - Redirect URL este adresa la care utilizatorul va fi redirecționat după autorizare. În mod obișnuit, aceasta trebuie să fie aceeași cu Application URL.
- Atribuiți un nume Client ID-ului și faceți clic pe Next pentru a-l salva.
- După salvare, veți primi un Client ID pe care îl puteți utiliza pentru autorizare.
Accesarea Experience Builder
1. Accesarea Localhost și Autentificarea
- Deschideți un browser web și accesați:
https://localhost:3001/ - Faceți clic pe Advanced, apoi continuați către localhost.
Când vi se solicită, introduceți URL-ul ArcGIS Online sau ArcGIS Enterprise și App ID (Client ID) obținut anterior.
2. Crearea unei Noi Aplicații
- După autentificare, vi se va afișa tabloul de bord principal al Experience Builder (Developer Edition).
- Faceți clic pe butonul Create New din tabloul de bord.
- Vi se va solicita să alegeți un șablon sau să începeți de la o pagină goală.
Experience Builder oferă o bibliotecă de șabloane pe care le puteți folosi pentru a crea rapid aplicații. Aceste șabloane sunt preconfigurate pentru cazuri de utilizare specifice (de exemplu, turism, comunitate etc.).
- Răsfoiți șabloanele disponibile.
- Previzualizați orice șablon pentru a verifica dacă se potrivește nevoilor dvs.
- Selectați un șablon și faceți clic pe Create App.
- Dacă preferați să începeți de la zero, selectați șablonul Blank Page.
- După crearea aplicației, veți fi direcționat către Design Canvas.
Puteți personaliza aplicația adăugând widgeturi, configurând machete și modificând conținutul, iar acum sunteți pregătit să vă publicați și să utilizați propria aplicație creată în Experience Builder.
Pentru a afla mai multe despre cum să extindeți Experience Builder, citiți întreaga serie:
Widget-uri personalizate în Experience Builder Developer Edition (Partea 2)
Teme personalizate în Experience Builder Developer Edition (Partea 3)
Actualizarea și implementarea aplicațiilor în Experience Builder Developer Edition (Partea 4)