Differences
This shows you the differences between two versions of the page.
|
isi:laboratoare:05 [2024/11/04 11:06] alexandru.predescu [Firebase Realtime Database] |
isi:laboratoare:05 [2024/11/04 12:52] (current) sorin.ciolofan [Firebase Realtime Database] |
||
|---|---|---|---|
| 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 28: | Line 30: | ||
| {{:isi:laboratoare:lab5:firebase_create_database.png?600|}} | {{:isi:laboratoare:lab5:firebase_create_database.png?600|}} | ||
| - | Configurați regulile de acces în mod public pentru o conexiune rapidă (nerecomandat în producție) | + | <note tip>Configurați regulile de acces în mod public pentru o conexiune rapidă (nerecomandat în producție)</note> |
| {{: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 67: | ||
| ==== 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> | ||
| - | Aspecte importante: | + | **Aspecte importante:** |
| - | * fișierul package.json | + | |
| + | * fișierul package.json (**npm install** pt a re/instala dependențele specificate) | ||
| <code> | <code> | ||
| Line 69: | Line 78: | ||
| </code> | </code> | ||
| - | * servicii: services/firebase.ts | + | * servicii: **services/firebase.ts** |
| - | * variabile de environment: environments - firebase config | + | * injectarea dependențelor: **pages/home/home.component.ts** |
| - | * declararea modulelor: app.module.ts (ex. AngularFireModule) | + | |
| - | </note> | + | |
| + | <code> | ||
| + | constructor( | ||
| + | private fbs: FirebaseService, | ||
| + | // .. | ||
| + | ) | ||
| + | </code> | ||
| + | |||
| + | * variabile de environment: environments - firebase config (doar obiectul de confgurare) | ||
| + | * 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> | ||
| Realizați modificările de mai sus și implementați următoarele funcționalități: | Realizați modificările de mai sus și implementați următoarele funcționalități: | ||
| Line 94: | Line 120: | ||
| * 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 ==== | ||
