Ikuti panduan ini untuk menggunakan Firebase JavaScript SDK di aplikasi web Anda atau sebagai klien untuk akses pengguna akhir, misalnya, di desktop Node.js atau aplikasi IoT.
Langkah 1 : Buat proyek Firebase dan daftarkan aplikasi Anda
Sebelum Anda dapat menambahkan Firebase ke aplikasi JavaScript, Anda perlu membuat proyek Firebase dan mendaftarkan aplikasi Anda ke proyek tersebut. Saat Anda mendaftarkan aplikasi Anda ke Firebase, Anda akan mendapatkan objek konfigurasi Firebase yang akan Anda gunakan untuk menghubungkan aplikasi Anda dengan sumber daya proyek Firebase Anda.
Kunjungi Memahami Proyek Firebase untuk mempelajari lebih lanjut tentang proyek Firebase dan praktik terbaik untuk menambahkan aplikasi ke proyek.
Jika Anda belum memiliki proyek JavaScript dan hanya ingin mencoba produk Firebase, Anda dapat mendownload salah satu contoh quickstart kami.
Langkah 2 : Instal SDK dan inisialisasi Firebase
Halaman ini menjelaskan petunjuk penyiapan untuk Firebase JS SDK versi 9, yang menggunakan format Modul JavaScript .
Alur kerja ini menggunakan npm dan memerlukan bundler modul atau alat framework JavaScript karena SDK v9 dioptimalkan untuk bekerja dengan bundler modul guna menghilangkan kode yang tidak digunakan (tree-shaking) dan mengurangi ukuran SDK.
Instal Firebase menggunakan npm:
npm install firebase
Inisialisasi Firebase di aplikasi Anda dan buat objek Aplikasi Firebase:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);
Aplikasi Firebase adalah objek mirip wadah yang menyimpan konfigurasi umum dan berbagi autentikasi di seluruh layanan Firebase. Setelah menginisialisasi objek Aplikasi Firebase dalam kode, Anda dapat menambahkan dan mulai menggunakan layanan Firebase.
Langkah 3 : Akses Firebase di aplikasi Anda
Layanan Firebase (seperti Cloud Firestore, Authentication, Realtime Database, Remote Config, dan lainnya) tersedia untuk diimpor dalam sub-paket individual.
Contoh di bawah menunjukkan cara menggunakan Cloud Firestore Lite SDK untuk mengambil daftar data.
import { initializeApp } from 'firebase/app'; import { getFirestore, collection, getDocs } from 'firebase/firestore/lite'; // Follow this pattern to import other Firebase services // import { } from 'firebase/<service>'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); // Get a list of cities from your database async function getCities(db) { const citiesCol = collection(db, 'cities'); const citySnapshot = await getDocs(citiesCol); const cityList = citySnapshot.docs.map(doc => doc.data()); return cityList; }
Langkah 4 : Gunakan bundler modul (webpack/Rollup) untuk pengurangan ukuran
Firebase Web SDK dirancang untuk bekerja dengan bundler modul untuk menghapus kode yang tidak terpakai (tree-shaking). Kami sangat menyarankan menggunakan pendekatan ini untuk aplikasi produksi. Alat seperti Angular CLI , Next.js , Vue CLI , atau Create React App secara otomatis menangani pemaketan modul untuk pustaka yang diinstal melalui npm dan diimpor ke basis kode Anda.
Lihat panduan kami Menggunakan pemaket modul dengan Firebase untuk informasi lebih lanjut.
Layanan Firebase yang tersedia untuk web
Sekarang setelah Anda siap menggunakan Firebase, Anda dapat mulai menambahkan dan menggunakan salah satu layanan Firebase berikut yang tersedia di aplikasi web Anda.
Perintah berikut menunjukkan cara mengimpor pustaka Firebase yang dipasang secara lokal dengan npm
. Untuk opsi impor alternatif, lihat dokumentasi perpustakaan yang tersedia .
Langkah selanjutnya
Pelajari tentang Firebase:
Jelajahi contoh aplikasi Firebase .
Dapatkan pengalaman langsung dengan Firebase Web Codelab .
Jelajahi kode sumber terbuka di GitHub .
Tinjau lingkungan yang didukung untuk Firebase JavaScript SDK.
Percepat pengembangan Anda dengan tambahan pustaka sumber terbuka yang dikelola oleh Firebase, seperti AngularFire , RxFire , dan FirebaseUI untuk web .
Bersiaplah untuk meluncurkan aplikasi Anda:
- Siapkan peringatan anggaran untuk proyek Anda di Google Cloud Console.
- Pantau dasbor Penggunaan dan penagihan di Firebase console untuk mendapatkan gambaran keseluruhan tentang penggunaan proyek Anda di beberapa layanan Firebase.
- Tinjau daftar periksa peluncuran Firebase .