Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Pernah bertanya-tanya bagaimana cara kerja WhatsApp? Atau bagaimana pengguna yang berbeda terhubung dan bertukar pesan dalam obrolan? Membuat aplikasi obrolan yang disederhanakan bisa menjadi cara yang bagus untuk memahami fungsionalitas inti di balik aplikasi obrolan.

Membangun aplikasi obrolan mungkin tampak seperti tugas yang menakutkan, namun, Firebase menyederhanakan prosesnya. Ini memungkinkan Anda untuk mem-bootstrap aplikasi apa pun dengan cepat, menghilangkan kebutuhan akan backend khusus atau penyiapan basis data.

Apa Itu Basis Data Firebase Cloud

Firebase adalah platform pengembangan berbasis cloud yang menawarkan berbagai layanan backend seperti database real-time, autentikasi, dan hosting. Inti dari layanan databasenya adalah database cloud NoSQL yang menggunakan model dokumen untuk menyimpan data secara real-time.

instagram viewer

Siapkan Proyek Firebase dan React Client

Anda dapat memeriksa kode aplikasi obrolan yang tersedia di sini repositori GitHub dan gratis untuk digunakan di bawah Lisensi MIT. Pastikan Anda mengonfigurasi Firebase sebelum menjalankan aplikasi.

Untuk memulai, pergilah ke Firebase dan mendaftar untuk sebuah akun. Di dasbor pengguna, klik Buat Proyek untuk menyiapkan proyek baru.

Setelah membuat proyek Anda, pilih dan klik ikon kode di halaman ikhtisar proyek untuk mendaftarkan aplikasi Anda. Mendaftar ke Firebase memungkinkan Anda mengakses dan memanfaatkan sumber dayanya untuk membangun aplikasi web React Anda.

Catat instruksi untuk mengintegrasikan SDK Firebase ke proyek Anda di bawah Tambahkan Firebase SDK.

Berikutnya, membuat aplikasi Bereaksi dan instal Firebase SDK di aplikasi Anda. Selain itu, impor file react-firebase-hooks paket yang menyederhanakan bekerja dengan Firebase In React.

npm install firebase react-firebase-hooks

Konfigurasikan Firebase di Aplikasi React Anda

Di Anda src direktori, buat file baru dan beri nama, firebase-config.js. Salin variabel lingkungan dari dasbor proyek firebase Anda dan tempelkan ke file ini.

impor { initializeApp } dari"firebase/aplikasi";
impor { getFirestore } dari'@firebase/firestore';
impor { getAuth, GoogleAuthProvider } dari"firebase/auth";
const firebaseConfig = {
 kunci API: "KUNCI API",
 domain auth: "Domain auth",
 id proyek: "ID proyek",
 ember penyimpanan: "ember penyimpanan",
 messagingSenderId: "ID pengirim pesan",
 appId: "ID Aplikasi"
};
const aplikasi = initializeApp (firebaseConfig);
const db = getFirestore (aplikasi);
const auth = getAuth (aplikasi)
const penyedia = baru GoogleAuthProvider();
ekspor {db, autentikasi, penyedia}

Dengan menggunakan konfigurasi proyek Firebase, Anda menginisialisasi fungsi autentikasi Firebase, Firestore, dan Firebase untuk penggunaan dalam aplikasi Anda.

Menyiapkan Database Firestore

Database ini akan menyimpan data pengguna dan pesan obrolan. Buka halaman ikhtisar proyek Anda dan klik Buat basis data tombol untuk menyiapkan Cloud Firestore Anda.

Tentukan mode dan lokasi basis data.

Terakhir, perbarui aturan database Firestore untuk mengizinkan operasi baca-dan-tulis dari aplikasi React. Klik pada Aturan tab dan ubah Baca dan tulis aturan untuk BENAR.

Setelah selesai menyiapkan database, Anda dapat membuat koleksi demo — ini adalah database NoSQL di Firestore. Koleksi tersebut berupa dokumen-dokumen sebagai arsip.

Untuk membuat koleksi baru, klik pada Mulai koleksi tombol, dan berikan ID koleksi — nama tabel.

Integrasikan Autentikasi Pengguna Firebase

Firebase menyediakan out-of-the-box otentikasi dan otorisasi solusi yang mudah diterapkan seperti penyedia login sosial atau penyedia kata sandi email khusus.

Di halaman ikhtisar proyek Anda, pilih Autentikasi dari daftar produk yang ditampilkan. Selanjutnya, klik pada Siapkan metode masuk tombol untuk mengonfigurasi penyedia Google. Pilih Google dari daftar Penyedia, aktifkan, dan isi email dukungan proyek.

Buat Komponen Masuk

Setelah Anda selesai mengonfigurasi penyedia di Firebase, buka folder proyek Anda dan buat folder baru, komponen, dalam /src direktori. Di dalam komponen folder, buat file baru: Masuk.js.

Dalam Masuk.js file, tambahkan kode di bawah ini:

impor Reaksi dari'reaksi';
impor { masukDenganPopup } dari"firebase/auth";
impor { autentikasi, penyedia } dari'../firebase-config'

fungsiMasuk() {
const masukDenganGoogle = () => {
 signInWithPopup (auth, provider)
 };
kembali (




eksporbawaan Masuk
  • Kode ini mengimpor autentikasi dan objek penyedia Google yang Anda inisialisasi dalam file konfigurasi Firebase.
  • Ini kemudian mendefinisikan a Masuk fungsi yang mengimplementasikan masukDenganPopup metode dari Firebase yang menggunakan autentikasi Dan pemberi komponen sebagai parameter. Fungsi ini akan mengautentikasi pengguna dengan login sosial Google mereka.
  • Akhirnya, ia mengembalikan div yang berisi tombol yang, ketika diklik, memanggil masukDenganGoogle fungsi.

Buat Komponen Obrolan

Komponen ini akan menampung fitur utama aplikasi Obrolan Anda, jendela obrolan. Buat file baru di dalam komponen folder, dan beri nama Obrolan.js.

Tambahkan kode di bawah ini di Obrolan.js Mengajukan:

impor Bereaksi, { useState, useEffect } dari'reaksi'
impor { db, autentikasi } dari'../firebase-config'
impor Mengirim pesan dari'./Mengirim pesan'
impor { koleksi, kueri, batas, orderBy, onSnapshot } dari"firebase/firestore";
fungsiMengobrol() {
const [pesan, setMessage] = useState([])
const { userID } = auth.currentUser
 gunakanEfek(() => {
const q = permintaan(
 koleksi (db, "pesan"),
 dipesan oleh("dibuat di"),
 membatasi(50)
 );
const data = onSnapshot (q, (QuerySnapshot) => {
membiarkan pesan = [];
 QuerySnapshot.forEach((dokter) => {
 pesan.push({ ...doc.data(), pengenal: doc.id });
 });
 setMessages (pesan) 

 });
kembali() => data; 

 }, []);

kembali (
  • Kode ini mengimpor database, komponen autentikasi yang diinisialisasi dalam firebase-config.js file, dan metode khusus Firestore yang memudahkan manipulasi data yang disimpan.
  • Ini mengimplementasikan koleksi, pertanyaan, membatasi, dipesan oleh, Dan onSnapshot Metode Firestore untuk membuat kueri dan mengambil snapshot dari data yang disimpan saat ini dalam kumpulan pesan Firestore, diurutkan berdasarkan waktu pembuatannya, dan hanya membaca 50 pesan terbaru.
  • Metode Firestore dibungkus dan dijalankan di dalam a useEffect hook untuk memastikan bahwa pesan segera dirender, setiap kali Anda menekan tombol kirim, tanpa menyegarkan jendela halaman. Setelah data dibaca, itu disimpan dalam status pesan.
  • Kemudian memeriksa untuk membedakan antara pesan yang dikirim dan diterima — jika ID pengguna yang disimpan dengan pesan cocok ID pengguna untuk pengguna yang masuk, dan setelah itu, tetapkan nama kelas dan terapkan gaya yang sesuai untuk pesan.
  • Terakhir, itu membuat pesan, a keluar tombol, dan Mengirim pesan komponen. Itu keluar tombol onClick pawang memanggil auth.signOut() metode yang disediakan oleh Firebase.

Buat Komponen Kirim Pesan

Buat berkas baru, SendMessage.js file, dan tambahkan kode di bawah ini:

impor Bereaksi, { useState } dari'reaksi'
impor { db, autentikasi } dari'../firebase-config'
impor { koleksi, addDoc, serverTimestamp} dari"firebase/firestore";
fungsiMengirim pesan() {
const [pesan, setMsg] = useState('')
const pesanRef = koleksi (db, "pesan");

const sendMsg = asinkron (e) => {
const { uid, photoURL } = auth.currentUser

menunggu addDoc (messagesRef, {
 teks: pesan,
 dibuatDi: serverTimestamp(),
 uid: uid,
 URL foto: URL foto
 })
 setMsg('');
 };


kembali (




'Pesan...'
 jenis="teks" nilai={pesan} 
 onChange={(e) => setMsg (e.target.nilai)}
 />


eksporbawaan Mengirim pesan
  • Mirip dengan Obrolan.js komponen, impor metode Firestore dan database yang diinisialisasi dan komponen autentikasi.
  • Untuk mengirim pesan, file Mengirim pesan fungsi mengimplementasikan addDoc Metode Firestore yang membuat dokumen baru di database dan menyimpan data yang diteruskan.
  • Itu addDoc metode mengambil dua parameter, objek data dan objek referensi yang menunjukkan koleksi mana yang ingin Anda simpan datanya. Metode pengumpulan Firestore menentukan koleksi untuk menyimpan data.
  • Terakhir, itu merender bidang input dan tombol di halaman web untuk memungkinkan pengguna mengirimkan pesan ke database.

Impor Komponen di File App.js

Terakhir, di Anda Aplikasi.js file, impor Masuk Dan Mengobrol komponen untuk merendernya di browser Anda.

Di Anda Aplikasi.js file, hapus kode boilerplate, dan tambahkan kode di bawah ini:

impor Mengobrol dari'./komponen/Obrolan';
impor Masuk dari'./komponen/Masuk';
impor { autentikasi } dari'./firebase-config.js'
impor { useAuthState } dari'react-firebase-hooks/auth'
fungsiAplikasi() {
const [pengguna] = useAuthState (auth)
kembali (
 <>
 {pengguna? <Mengobrol />: <Masuk />}
 </>
 );
}
eksporbawaan Aplikasi;

Kode ini merender Masuk Dan Mengobrol komponen kondisional dengan memeriksa status otentikasi pengguna. Status autentikasi dirusak dari komponen autentikasi Firebase dengan bantuan useAuthState kait dari react-firebase-hooks kemasan.

Ini memeriksa apakah pengguna diautentikasi, dan merender Mengobrol komponen sebaliknya Masuk komponen dirender. Terakhir, tambahkan gaya CSS apa pun, jalankan server pengembangan untuk menyimpan perubahan, dan buka browser Anda untuk melihat hasil akhirnya.

Fungsionalitas Tanpa Server Firebase

Firebase menyediakan berbagai fitur di luar basis data dan autentikasi real-time. Anda dapat menggunakan fungsionalitas tanpa servernya untuk mem-bootstrap dan menskalakan aplikasi apa pun dengan cepat. Selain itu, Firebase terintegrasi secara mulus dengan aplikasi web dan seluler sehingga memudahkan pembuatan aplikasi lintas platform.