Cara Menyimpan, Memperbarui, Menghapus, dan Mengambil Data Dari Database Firebase Menggunakan Angular

Firebase adalah platform yang memberi Anda banyak layanan untuk membantu membangun dan menskalakan aplikasi. Beberapa fitur ini termasuk layanan hosting, penyimpanan data, dan kemampuan untuk melacak analitik data.

Tutorial ini berfokus terutama pada cara membuat dan menambahkan data ke database Firebase, dan cara melakukan operasi buat, baca, tulis, dan hapus ke database dari aplikasi Angular lokal.

Cara Membuat dan Menambahkan Data ke Database Firebase

Dengan asumsi Anda sudah menyiapkan dan menjalankan aplikasi Angular secara lokal, aplikasi tersebut harus terhubung ke database Firebase untuk menyimpan dan mengakses data. Jika Anda tidak terbiasa dengan Angular, Anda dapat membaca lebih lanjut tentang Konsep sudut, komponen, dan struktur keseluruhan dari proyek Sudut.

Jika Anda belum memiliki Database Firebase, Anda dapat menggunakan kredensial akun Google Anda untuk masuk ke Firebase dan mengikuti petunjuknya. Setelah ini diatur, buat proyek:

1. Dari Halaman beranda Firebase, Pilih Pergi ke Konsol di pojok kanan atas situs.
instagram viewer
2. Di bawah "Proyek Firebase Anda", pilih Tambahkan Proyek.
3. Ikuti petunjuk untuk membuat proyek baru.
4. Setelah selesai, proyek akan dibuka. Di sisi kiri layar, ada panel yang mencantumkan fitur yang disediakan Firebase. Arahkan kursor ke ikon sampai Anda melihat Basis Data Firestore, dan pilih.
5. Pilih Buat basis data, dan ikuti petunjuk untuk membuat database.
6. Saat memilih aturan keamanan, pilih Mulai dalam mode uji. Ini dapat diubah nanti untuk memastikan data lebih aman. Anda dapat membaca lebih lanjut tentang aturan keamanan Firestore mengikuti Dokumentasi Firebase.
7. Setelah selesai, database akan terbuka. Struktur database menggunakan Collections, yang pada dasarnya memiliki konsep yang sama dengan tabel database. Misalnya, jika Anda memerlukan dua tabel, satu untuk menyimpan informasi akun, dan satu untuk menyimpan informasi pengguna, Anda akan membuat dua koleksi bernama Akun dan Pengguna.
8. Pilih Mulai koleksi dan tambahkan ID Koleksi yang disebut "Pengguna".
9. Tambahkan catatan pertama, dengan informasi tentang satu pengguna. Klik Tambahkan bidang untuk menambahkan tiga bidang baru: firstName (string), lastName (string), dan vipMember (boolean). ID Dokumen dapat dibuat secara otomatis.
10. Klik Menyimpan.
11. Untuk menambahkan lebih banyak catatan ke koleksi "Pengguna", klik pada Tambahkan dokumen (tambahkan dokumen sama dengan menambahkan catatan atau pengguna baru). Tambahkan empat pengguna lagi dengan tiga bidang yang sama.

Basis data sekarang disiapkan dengan beberapa data uji.

Cara Mengintegrasikan Firebase ke dalam Aplikasi Angular Anda

Untuk mengakses data ini di aplikasi Angular lokal Anda, pertama-tama konfigurasikan beberapa pengaturan aplikasi untuk terhubung ke database Firebase:

1. Di Firebase, buka panel sebelah kiri dan klik Ulasan Proyek.
2. Pilih Web tombol (ditunjukkan dengan kurung sudut).
3. Daftarkan aplikasi lokal Anda dengan menambahkan nama aplikasi.
4. Instal Firebase di aplikasi Angular lokal Anda.

   npm saya firebase
   

5. Firebase kemudian akan menampilkan beberapa detail konfigurasi. Simpan detail ini dan klik Lanjutkan ke Konsol.
6. Berdasarkan detail yang diberikan pada langkah sebelumnya, salin kode berikut ke environment.prod.ts dan environment.ts di aplikasi Angular.

   ekspor const lingkungan = {
    produksi: benar,
    firebaseConfig: {
    apiKey: "kunci-api-Anda",
    authDomain: "domain-auth-anda",
    projectId: "id-proyek-Anda",
    storageBucket: "uang-penyimpanan-Anda",
    messagingSenderId: "id-pengirim-pesan-Anda",
    appId: "id-api-anda",
    pengukuranId: "id-pengukuran-Anda"
    }
   };
   

7. AngularFirestore dari @angular/api/firestore akan digunakan untuk mengonfigurasi Firebase di Angular. Perhatikan bahwa AngularFirestore tidak kompatibel dengan Angular Versi 9 ke atas. Di aplikasi Angular lokal, jalankan:

   npm saya @angular/fire
   

8. Tambahkan modul Firestore dan lingkungan ke bagian impor di app.module.ts.

   impor { AngularFireModule } dari "@angular/fire";
   impor { AngularFirestoreModule } dari "@angular/fire/firestore";
   import { lingkungan } dari "../environments/environment";
   

9. Modul Firestore juga perlu disertakan dalam larik impor di app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   AngularFirestoreModule,

Cara Mengambil Data dari Firebase Menggunakan Layanan

Biasanya merupakan praktik yang baik untuk memiliki satu atau beberapa layanan.ts file yang Anda gunakan untuk berinteraksi secara khusus dengan database. Fungsi yang Anda tambahkan ke dalam file layanan kemudian dapat dipanggil di file TypeScript lain, halaman, atau komponen lain di seluruh aplikasi.

1. Buat file bernama service.ts di src/aplikasi/layanan map.
2. Tambahkan modul AngularFirestore ke bagian impor, dan sertakan dalam konstruktor.

   import { Suntik } dari '@angular/core';
   impor { AngularFirestore } dari '@angular/fire/firestore';
   @Injeksi({
    disediakanIn: 'root'
   })
   layanan kelas ekspor {
    konstruktor (db pribadi: AngularFirestore) {}
   }
   

3. Tambahkan fungsi yang mengembalikan janji yang berisi daftar semua pengguna. "this.db.collection('Pengguna')" mengacu pada koleksi "Pengguna" dalam database.

   getAllUsers() {
    kembalikan Janji baru((menyelesaikan)=> {
    this.db.collection('User').valueChanges({ idField: 'id' }).subscribe (pengguna => menyelesaikan (pengguna));
    })
   }
   

4. Untuk menggunakan fungsi ini di file TypeScript lain, impor layanan baru, dan tambahkan ke konstruktor.

   impor { Layanan } dari 'src/app/services/service
   konstruktor (layanan pribadi: Layanan) {}
   

5. Dapatkan daftar semua pengguna yang menggunakan fungsi yang dibuat di file layanan.

   async getUsers() {
    this.allUsers = menunggu this.service.getAllUsers();
    console.log (this.allUsers);
   }
   

Cara Menambahkan Catatan Baru ke Basis Data Firebase

Tambahkan catatan baru untuk pengguna ke dalam Firebase Database.

1. Di services.ts, tambahkan fungsi baru untuk membuat record baru. Fungsi ini mengambil ID pengguna baru, dan semua detailnya. Ini menggunakan fungsi set Firestore untuk mengirim informasi itu ke Firebase dan membuat catatan baru.

   addNewUser (_newId: apa saja, _fName: string, _lName: string, _vip: boolean) {
    this.db.collection("User").doc (_newId).set({FirstName: _fName, LastName: _lName, vipMember: _vip});
   }

2. Panggil fungsi addNewUser() di file TypeScript lain. Jangan lupa untuk mengimpor layanan dan memasukkannya ke dalam konstruktor, seperti yang ditunjukkan sebelumnya. Jangan ragu untuk menggunakan generator ID acak untuk membuat ID baru bagi pengguna.

   this.service.addNewUser("62289836", "Jane", "Doe", benar);
   

Cara Memperbarui Data di Basis Data Firebase

Firebase memiliki banyak fungsi yang menjadikannya salah satu alat terbaik yang tersedia. Untuk memperbarui bidang tertentu dalam catatan tertentu, gunakan fungsi pembaruan Firestore.

1. Dalam file service.ts, buat fungsi yang disebut updateUserFirstName(). Fungsi ini akan memperbarui nama depan dari catatan pengguna yang dipilih. Fungsi mengambil ID catatan yang perlu diperbarui, dan nilai baru untuk nama depan pengguna.

   updateUserFirstName (_id: apa saja, _firstName: string) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName});
   }

2. Untuk memperbarui beberapa bidang untuk catatan yang sama, cukup perluas bidang yang dimasukkan di dalam fungsi pembaruan Firestore. Alih-alih hanya firstName, tambahkan lastName untuk memperbaruinya dengan nilai baru juga.

   updateUserFullName (_id: apa saja, _firstName: string, _lastName: string) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName, lastName: _lastName});
   }

3. Salah satu fungsi di atas dapat digunakan dalam file TypeScript lainnya.

   this.service.updateUserFirstName("vLBnSegFl1pD7XQ42TBv", "Kay");
   this.service.updateUserFullName("vLBnSegFl1pD7XQ42TBv", "Kay", "Jones");

Cara Menghapus Catatan Dari Database Firebase

Untuk menghapus catatan, gunakan fungsi hapus Firestore.

1. Dalam file service.ts, buat fungsi yang disebut deleteUser(). Fungsi ini mengambil ID catatan yang perlu dihapus.

   deleteUser (_id: apa saja) {
    this.db.doc(`User/${_id}`).delete();
    }
   

2. Fungsi di atas kemudian dapat digunakan di file TypeScript lainnya.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Ambil Data Firebase Menggunakan Kueri dan Filter

Filter "di mana" dapat memfilter hasil yang dikembalikan berdasarkan kondisi tertentu.

1. Di services.ts, buat fungsi yang mendapatkan semua pengguna VIP (ini jika bidang vipMember disetel ke true). Ini ditunjukkan oleh bagian "ref.where('vipMember', '==', true)" dari panggilan Firebase di bawah ini.

   getAllVipMembers() {
    kembalikan Janji baru((menyelesaikan)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (pengguna => menyelesaikan (pengguna))
    })
    }

2. Gunakan fungsi ini di file TypeScript lain.

   async getAllVipMembers() {
    this.vipUsers = menunggu this.service.getAllVipMembers();
    console.log (this.vipUsers);
    }

3. Kueri dapat dimodifikasi untuk menambahkan operasi lain seperti Order By, Start At, atau Limit. Ubah fungsi getAllVipMembers() di services.ts untuk diurutkan dengan nama belakang. Operasi Order By mungkin memerlukan indeks untuk dibuat di Firebase. Jika demikian, klik tautan yang disediakan dalam pesan kesalahan di konsol.

   getAllVipMembers() {
    kembalikan Janji baru((menyelesaikan)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (pengguna => menyelesaikan (pengguna) )
    })
    }

4. Ubah kueri untuk hanya mengembalikan tiga rekaman pertama. Operasi Start At dan Limit dapat digunakan untuk ini. Ini berguna jika Anda perlu menerapkan paging, yaitu saat sejumlah catatan tertentu ditampilkan per halaman.

   getAllVipMembers() {
    kembalikan Janji baru((menyelesaikan)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (pengguna => menyelesaikan (pengguna))
    })
    }

Tambahkan Lebih Banyak Data ke Firebase dan Lebih Banyak Permintaan di Aplikasi Sudut

Ada banyak kombinasi kueri lain yang dapat Anda jelajahi saat mencoba mengambil data dari database Firebase. Semoga Anda sekarang memahami cara menyiapkan database Firebase sederhana, cara menghubungkannya ke aplikasi Angular lokal, dan cara membaca dan menulis ke database.

Anda juga dapat mempelajari lebih lanjut tentang layanan lain yang disediakan Firebase. Firebase adalah salah satu dari banyak platform yang dapat Anda integrasikan dengan Angular, dan terlepas dari apakah Anda berada di level pemula atau mahir, selalu ada banyak hal yang harus dipelajari.

8 Kursus Sudut Teratas untuk Pemula dan Pengguna Tingkat Lanjut

Baca Selanjutnya

Tentang Penulis