Laboratorul 05. Integrarea datelor cu Firebase Realtime Database

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

Obiective laborator

  • Î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 Realtime Database

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.

Creați un cont pe Firebase

Creați un proiect nou și o aplicație web

Creați o bază de date de tip Realtime Database

Selectați o locație din Europa atunci când creați baza de date

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

Creati o aplicatie noua si salvați configurările necesare pentru conectare

Aplicație web Angular cu ArcGIS și Firebase

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.

Angular Material este o colecție de componente de UI standardizate care se pot integra ușor într-o aplicație Angular. Acestea presupun niste elemente HTML cu funcționalitate integrată.

AngularFire este un modul Angular pentru integrarea bibliotecii Firebase Javascript SDK.

Descărcați proiectul de pe GitHub: AngularDemoArcGISFirebase. Acesta este similar ca structură cu proiectul din laboratorul anterior și integrează modulul Firebase și Angular Material.

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

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.

Task

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

Task 1

  • Conectați-vă la Firebase folosind butonul Connect
    • 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ă

Task 2

  • Adăugați API key-ul din contul ArcGIS Developer: esriConfig.apiKey = “MY_API_KEY”;
  • 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

Resurse

isi/laboratoare-arhiva/05.txt · Last modified: 2024/10/27 16:56 by alexandru.predescu
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0