Cara Menggunakan Kueri Firebase Kompleks di Angular

Salah satu fitur Firebase adalah Anda dapat membuat database NoSQL yang tersimpan di cloud. Anda juga dapat mengintegrasikan database ini ke dalam aplikasi yang Anda kembangkan, dan Anda dapat menyimpan, memperbarui, dan menghapus data di dalam database.

Anda juga dapat melakukan kueri database Firebase dari aplikasi Angular Anda. Firebase mengharuskan Anda untuk mengindeks kombinasi bidang untuk kueri yang menggunakan beberapa bidang. Ini memungkinkan Firebase untuk mencarinya dengan mudah saat Anda memanggil kueri di waktu lain.

Siapkan Aplikasi Sudut dan Basis Data Firebase

Sebelum menulis kueri Firebase, Anda harus membuat aplikasi sudut dan Basis Data Firebase. Anda juga perlu mengonfigurasi aplikasi Angular Anda untuk terhubung ke database Anda.

1. Jika Anda tidak memiliki aplikasi Angular, Anda dapat menggunakan
   instagram viewer
   baru perintah untuk membuat proyek baru dengan semua file Angular yang diperlukan.

   ng barubaru-sudut-aplikasi

2. Membuat Database Firebase baru untuk aplikasi Angular dengan masuk ke Firebase dan mengikuti petunjuk untuk membuat proyek Firebase baru.
3. Di Database Cloud Firestore baru Anda, buat dua koleksi (juga dikenal sebagai tabel) untuk "Produk" dan "Pemasok". Pemasok dapat memasok beberapa produk. Setiap produk juga terhubung ke pemasok menggunakan kolom "supplierId".
4. Masukkan data berikut ke dalam tabel "Produk". Masukkan bidang nama, productId, dan supplierId sebagai string. Masukkan bidang harga dan inStock sebagai angka.

   ID dokumen	bidang
   produk1	nama: "pita" harga: 12,99 stok: 10 ID produk: "P1" pemasokId: "S1"
   produk2	nama: "Balon" harga: 1,5 dalam Stok: 2 ID produk: "P2" pemasokId: "S1"
   produk3	nama: "Kertas" harga: 2.99 dalam Stok: 20 ID produk: "P3" pemasokId: "S1"
   produk4	nama: "Meja" harga: 199 dalam Stok: 1 ID produk: "P4" pemasokId: "S2"

   Berikut ini contoh yang menunjukkan tampilannya:
5. Masukkan data berikut ke dalam tabel "Pemasok". Masukkan semua bidang sebagai string.

   ID dokumen	bidang
   pemasok1	nama: "Supplier Seni dan Kerajinan" lokasi: "California, AS" pemasokId: "S1"
   pemasok2	nama: "Meja Menakjubkan" lokasi: "Sydney, Australia" pemasokId: "S2"

   Inilah yang seharusnya terlihat seperti entri pemasok1:
6. Install sudut/api ke dalam aplikasi Anda.

   npm saya @sudut/fire

7. Di Firebase, buka Pengaturan proyek. Klik logo kurung sudut untuk menambahkan Firebase ke aplikasi Angular Anda.
8. Firebase akan memberi Anda detail konfigurasi yang dapat Anda gunakan untuk menghubungkan aplikasi Angular Anda ke Firebase Database.
9. Ganti isinya di lingkungan/environment.ts dengan kode berikut. Anda perlu mengubah nilai di dalamnya firebaseConfig. Ubah ini agar sesuai dengan konfigurasi yang disediakan Firebase kepada Anda di langkah sebelumnya.

   eksporkonstan lingkungan = {
    produksi: Salah,
    firebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIanDlM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "muo-firebase-queries",
    storageBucket: "muo-firebase-queries.appspot.com",
    messagingSenderId: "569911365044",
    ID aplikasi: "1:569911365044:web:9557bfef800caa5cdaf6e1"
    }
   };

10. Impor lingkungan dari atas, bersama dengan modul Firebase Angular ke src/app/app.module.ts.

    impor { lingkungan } dari "../lingkungan/lingkungan";
    impor { AngularFireModule } dari '@sudut/api/kompat';
    impor { AngularFirestoreModule } dari "@angular/fire/compat/firestore";

11. Tambahkan modul Firebase ke larik impor:

    AngularFirestoreModule,
    AngularFireModul.inisialisasi Aplikasi(lingkungan.firebaseConfig)

Cara Menulis Kueri Firebase yang Kompleks dalam File Layanan

Anda dapat membuat kueri tabel di database Firebase menggunakan file layanan.

1. Buat folder baru bernama "layanan". Di dalam folder, buat file baru bernama "service.ts".
2. Tambahkan impor AngularFirestore, konstruktor, dan kelas ke dalam file.

   impor { Suntik } dari '@sudut/inti';
   impor { AngularFirestore } dari '@angular/fire/compat/firestore';
   @suntik({
    disediakanDalam: 'akar'
   })
   eksporkelasMelayani{
   konstruktor(db pribadi: AngularFirestore) {}
   }

3. Dalam contoh kueri ini, buat daftar produk berdasarkan nama Pemasok. Selain itu, filter daftar untuk hanya menampilkan item dengan stok terendah. Karena Firebase bukan Database rasional, kita perlu mengkueri dua tabel terpisah menggunakan lebih dari satu kueri.
4. Untuk melakukan ini, buat fungsi baru bernama dapatkanpemasok(), untuk menangani kueri pertama. Fungsi akan mengembalikan baris dalam tabel "Supplier" yang sesuai dengan namanya.

   getSupplier (nama: string) {
   kembalibaruJanji((menyelesaikan)=> {
    koleksi ini.db.('pemasok', ref => ref.dimana('nama', '==', nama)).valueChanges().subscribe (pemasok => menyelesaikan (pemasok))
    })
    }

5. Buat fungsi lain yang disebut getProductsFromSupplier(). Kueri ini menanyakan database untuk Produk yang terkait dengan pemasok tertentu. Selain itu, kueri juga mengurutkan hasil berdasarkan bidang "inStock" dan hanya menampilkan rekaman pertama dalam daftar. Dengan kata lain, itu akan mengembalikan produk untuk pemasok tertentu, dengan jumlah "InStock" terendah.

   getProductsFromSupplier (pemasokId: string) {
   kembalibaruJanji((menyelesaikan)=> {
    koleksi ini.db.('Produk', ref => ref.dimana('pemasokId', '==', pemasokId).orderBy('persediaan').startAt (0).limit (1)).valueChanges().subscribe (produk => menyelesaikan (produk))
    })
    }

6. Dalam src/app/app.component.ts file, impor layanan.

   impor { Melayani } dari 'src/aplikasi/layanan/layanan';

7. Tambahkan konstruktor di dalam kelas AppComponent, dan tambahkan layanan ke konstruktor.

   konstruktor(layanan pribadi: Layanan) {}

8. Buat fungsi baru bernama dapatkan Stok Produk(). Fungsi ini akan mencetak produk dengan stok terendah yang disediakan pemasok tertentu. Pastikan untuk memanggil fungsi baru di ngOnInit() fungsi, dan mendeklarasikan variabel untuk menyimpan hasilnya.

   produk: apa saja;
   ngOnInit(): ruang kosong {
   ini.getProductStock();
   }
   tidak sinkron getProdukStok() {
   }

9. Di dalam dapatkanStok Produk() fungsi, gunakan dua kueri dari file layanan. Gunakan kueri pertama untuk mendapatkan catatan pemasok berdasarkan nama. Kemudian, gunakan supplierId sebagai argumen untuk kueri kedua, yang akan menemukan produk dari pemasok tersebut, dengan stok terendah.

   membiarkan pemasok = menungguini.service.getSupplier('Penyedia Seni dan Kerajinan'); 
   ini.produk = menungguini.service.getProductsFromSupplier (pemasok[0].idpemasok);

10. Hapus konten di src/app/app.component.html file, dan ganti dengan yang berikut ini:

    <h2> Produk dengan stok terendah dari "Pemasok Seni dan Kerajinan"</h2>
    <div *ngFor="biarkan item produk">
    <p> Nama: {{item.name}} </p>
    <p> Jumlah stok: {{item.inStock}} </p>
    <p> Harga: ${{item.price}} </p>
    </div>

11. Jalankan aplikasi di browser web menggunakan ng melayani memerintah.

    ng melayani

12. Buka situs web Anda menggunakan browser web apa pun. Secara default, Angular menghosting aplikasi di host lokal: 4200.
13. Data Anda tidak akan ditampilkan di layar dengan benar. Klik kanan pada halaman web dan klik Memeriksa untuk membuka alat pengembang browser Anda.
14. Navigasikan ke Menghibur tab. Kesalahan akan ditampilkan untuk memberi tahu Anda bahwa kueri akan memerlukan indeks.

Cara Membuat Indeks Gabungan untuk Permintaan Anda

Firebase membuat indeks untuk kueri yang dapat berisi beberapa bidang. Menurut Dokumentasi Firebase, ini berfungsi sebagai peta, sehingga Firebase dapat mencari lokasi kolom yang terdapat dalam kueri.

1. Di konsol, klik tautan yang menampilkan kesalahan.
2. Masuk ke akun Firebase Anda.
3. Sebuah prompt akan muncul meminta Anda untuk membuat indeks untuk kueri Firebase. Klik Buat indeks.
4. Firebase akan mengindeks bidang yang digunakan kueri Anda. Tunggu beberapa menit hingga status berubah dari "Building" menjadi "Enabled".
5. Segarkan peramban web Anda. Kueri akan berjalan dan mengembalikan hasil yang benar di beranda. Jika Anda membuka debugger konsol menggunakan alat pengembang browser Anda, kesalahan seharusnya tidak ada lagi.

Menanyakan Basis Data Firebase Anda

Firebase memungkinkan Anda membuat database NoSQL di cloud. Anda kemudian dapat mengintegrasikan database tersebut ke dalam aplikasi Angular yang sedang Anda kembangkan. Anda dapat membuat berbagai jenis kueri untuk menyimpan, memperbarui, atau menghapus data. Anda juga dapat membuat kueri yang menggunakan beberapa bidang sekaligus.

Saat Anda membuat kueri yang menggunakan beberapa bidang, mencoba menjalankannya akan menghasilkan kesalahan. Anda perlu mengindeks kombinasi bidang yang digunakan dalam kueri, sehingga Firebase dapat dengan mudah mencarinya setiap kali Anda menjalankan kueri.

Anda juga dapat mempelajari tentang cara lain untuk mengatur Database NoSQL, seperti cara mengatur database menggunakan MongoDB.