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.

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

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: AngularDemoFirebase.

"@angular/fire": "^7.4.1",

constructor(
    private fbs: FirebaseService,
    // ..
)

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';

//..

imports: [
  // ..
  AngularFireModule.initializeApp(environment.firebase, 'AngularDemoFirebase'),
  AngularFireDatabaseModule
  // ..
]

Realizați modificările de mai sus și implementați următoarele funcționalități:

• Conectați-vă la Firebase folosind butonul Connect
• Folosiți butonul Add entry pentru a adăuga un element în Firebase
• Urmăriți actualizarea în timp real în consolă a modificărilor din Firebase
• Ștergeți din Firebase Console toate înregistrările și verificați actualizarea în aplicație

• Integrați Firebase în aplicația ArcGIS din laboratorul anterior (vezi “Aspecte importante”)
• Creați o funcție care să adauge puncte pe hartă și să înregistreze datele în Firebase
• Creați o funcție care să actualizeze poziția utilizatorului (centrul hărții) în timp real / cel mult o dată pe secundă
• Afișați datele din Firebase pe hartă la deschiderea aplicației sau atunci când acestea sunt actualizate
• Verificați sincronizarea datelor în aplicație prin deschiderea încă unei ferestre de browser și urmărirea actualizărilor pe hartă

<mat-list>
    <mat-list-item>
        <span class="label">Database entries</span>
    </mat-list-item>
    <mat-list-item *ngFor="let item of listItems">
        <span>{{item.val}}</span>
    </mat-list-item>
</mat-list>

• Firebase console
• AngularDemoFirebase