Differences
This shows you the differences between two versions of the page.
|
isi:laboratoare:05 [2024/11/04 11:14] alexandru.predescu [Task] |
isi:laboratoare:05 [2025/11/06 13:55] (current) sorin.ciolofan [Task] |
||
|---|---|---|---|
| Line 8: | Line 8: | ||
| * Actualizarea datelor în timp real în aplicația web | * Actualizarea datelor în timp real în aplicația web | ||
| * Sincronizarea elementelor de pe hartă | * Sincronizarea elementelor de pe hartă | ||
| - | |||
| ==== Firebase Realtime Database == | ==== Firebase Realtime Database == | ||
| Line 16: | Line 15: | ||
| === Creați un cont pe Firebase === | === Creați un cont pe Firebase === | ||
| - | === Creați un proiect nou și o aplicație web === | + | |
| + | <note tip>Folosiți contul vostru de Google.</note> | ||
| + | |||
| + | === Creați un proiect nou === | ||
| {{:isi:laboratoare:lab5:firebase_project.png?400|}} | {{:isi:laboratoare:lab5:firebase_project.png?400|}} | ||
| Line 26: | Line 28: | ||
| <note important>Selectați o locație din Europa atunci când creați baza de date</note> | <note important>Selectați o locație din Europa atunci când creați baza de date</note> | ||
| - | {{:isi:laboratoare:lab5:firebase_create_database.png?600|}} | + | <note tip>Configurați regulile de acces în mod public pentru o conexiune rapidă (nerecomandat în producție)</note> |
| - | + | ||
| - | Configurați regulile de acces în mod public pentru o conexiune rapidă (nerecomandat în producție) | + | |
| {{:isi:laboratoare:lab5:firebase_access.png?600|}} | {{:isi:laboratoare:lab5:firebase_access.png?600|}} | ||
| - | === Creați o aplicație nouă și salvați configurările necesare pentru conectare === | + | === Creați o aplicație web nouă și salvați configurările necesare pentru conectare === |
| + | |||
| + | <note tip>Dacă ați creat deja o aplicație în Firebase Console, reveniți la pagina de configurare (Project settings).</note> | ||
| {{:isi:laboratoare:lab5:firebase_config.png?600|}} | {{:isi:laboratoare:lab5:firebase_config.png?600|}} | ||
| + | |||
| + | <note important> | ||
| + | Verificați ca obiectul de configurare să conțină **databaseURL** (dacă nu, dați refresh la pagină) | ||
| + | </note> | ||
| ==== Aplicație web Angular cu ArcGIS și Firebase ==== | ==== Aplicație web Angular cu ArcGIS și Firebase ==== | ||
| Line 59: | Line 65: | ||
| ==== Task ==== | ==== Task ==== | ||
| - | Descărcați scheletul aplicației de pe GitHub. | + | Descărcați scheletul aplicației de pe GitHub: [[https://github.com/ACS-ISI/AngularDemoFirebase|AngularDemoFirebase]]. |
| <note> | <note> | ||
| Line 70: | Line 76: | ||
| </code> | </code> | ||
| - | * servicii: services/firebase.ts | + | * servicii: **services/firebase.ts** |
| - | * injectarea dependențelor: | + | * injectarea dependențelor: **pages/home/home.component.ts** |
| + | |||
| + | <code> | ||
| + | constructor( | ||
| + | private fbs: FirebaseService, | ||
| + | // .. | ||
| + | ) | ||
| + | </code> | ||
| * variabile de environment: environments - firebase config (doar obiectul de confgurare) | * variabile de environment: environments - firebase config (doar obiectul de confgurare) | ||
| - | * declararea modulelor: app.module.ts (ex. AngularFireModule) | + | * declararea modulelor: **app.module.ts** (ex. AngularFireModule) |
| <code> | <code> | ||
| - | AngularFireModule.initializeApp(environment.firebase, 'AngularDemoFirebase'), | + | import { AngularFireModule } from '@angular/fire/compat'; |
| - | AngularFireDatabaseModule | + | import { AngularFireDatabaseModule } from '@angular/fire/compat/database'; |
| + | |||
| + | //.. | ||
| + | |||
| + | imports: [ | ||
| + | // .. | ||
| + | AngularFireModule.initializeApp(environment.firebase, 'AngularDemoFirebase'), | ||
| + | AngularFireDatabaseModule | ||
| + | // .. | ||
| + | ] | ||
| </code> | </code> | ||
| </note> | </note> | ||
| Line 92: | Line 115: | ||
| * Integrați Firebase în aplicația ArcGIS **din laboratorul anterior** (vezi "Aspecte importante") | * 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ă 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ă | + | * Creați o funcție care să salveze si sa actualizeze in Firebase poziția centrului hărții în timp real / cel mult o dată pe secundă, atunci cind harta este mutata spre stanga/dreapta, sus/jos |
| * Afișați datele din Firebase pe hartă la deschiderea aplicației sau atunci când acestea sunt actualizate | * 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ă | * Verificați sincronizarea datelor în aplicație prin deschiderea încă unei ferestre de browser și urmărirea actualizărilor pe hartă | ||
| + | |||
| + | |||
| + | ==== Aspecte diverse ==== | ||
| + | |||
| + | === Actualizarea dinamică a conținutului paginilor în Angular === | ||
| + | |||
| + | <code html> | ||
| + | <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> | ||
| + | </code> | ||
| + | |||
| + | <note tip>Directiva Angular **NgFor** afișează / generează un template HTML în pagină pentru fiecare element dintr-o colecție. Similar, există **NgIf** pentru afișare condițională</note> | ||
| ==== Resurse ==== | ==== Resurse ==== | ||
