Integrare ArcGIS în Angular. Actualizări în timp real

• Înțelegerea modului de integrare a API-ului ArcGIS într-un framework de JavaScript
• Înțelegerea modului de integrare a API-ului Firebase pentru actualizări în timp real
  • Actualizarea datelor în timp real în aplicația web
  • Sincronizarea elementelor de pe hartă

Firebase oferă o suită de servicii cloud, de la autentificare până la machine learning în cloud. Dintre acestea, Realtime Database este un serviciu folosit pentru sincronizarea datelor în timp real, fiind util în dezvoltarea aplicațiilor colaborative.

Configurați regulile de acces în mod public pentru o conexiune rapidă (nerecomandat în producție)

Atunci când avem nevoie de funcționalități complexe, precum pagini multiple, elemente vizuale standard (butoane, liste, grid-uri, chart-uri, bară de navigație), sau interacțiunea cu un server/serviciu web extern (de ex. Firebase), este indicat să folosim un framework precum Angular.

Modificați conținutul fișierelor - adăugați datele de conectare la proiectul creat în Firebase Console:

/environments/environment.ts
/environments/environment.prod.ts

Actualizați /app/app.module.ts - decomentați următoarele rânduri:

AngularFireModule.initializeApp(environment.firebase, 'AngularDemoArcGIS'),
AngularFireDatabaseModule

Actualizați /app/pages/esri-map/esri-map.component.ts - decomentați următoarele rânduri:

private fbs: FirebaseService

Deschideți consola pentru a vizualiza datele din Firebase și încercați să adăugați date în baza de date. Verificați în consola Firebase dacă acestea au fost înregistrate.

Descărcați scheletul aplicației de pe GitHub. Realizați modificările de mai sus și implementați următoarele funcționalități:

• Adăugați API key-ul din contul ArcGIS Developer: esriConfig.apiKey = “MY_API_KEY”;
• Conectați-vă la Firebase folosind butonul Connect din stânga hărții și adăugați un punct în baza de date
  • Deschideți Developer Console din browser
  • Mutati pozitia hartii și folosiți butonul Add item pentru a adăuga un element în Firebase si un punct pe harta (in centrul hartii)
  • Urmăriți actualizarea în timp real în consolă a modificărilor din Firebase
  • Verificați că punctele sunt adăugate pe hartă. Inainte de a adauga un nou punct mutati harta
  • Ștergeți din Firebase Console toate punctele și verificația actualizarea pe hartă

• Actualizați în Firebase poziția punctului mișcător de pe hartă astfel incat in baza de date sa apara un obiect “obj” care sa contina coordonatele punctului miscator, observind cum acestea se modifica pe masura ce punctul se deplaseaza pe harta
  • Utilizați metoda syncPointItem din serviciul FirebaseService
  • Verificați actualizarea coordonatelor în Firebase console, colecția obj

• Firebase console