Membina aplikasi sembang masa nyata dengan React dan Firebase

Tutorial ini menunjukkan membina aplikasi sembang masa nyata menggunakan React dan Firebase, yang memberi tumpuan kepada pengesahan pengguna. Kami akan mengintegrasikan penyedia pengesahan pihak ketiga (Google, GitHub) dan memanfaatkan pangkalan data Realtime Firebase untuk penyegerakan data masa nyata. Semasa dibina dengan React, konsep teras boleh dipindahkan ke kerangka lain.

Memahami firebase

Firebase, platform pembangunan aplikasi Google, menawarkan suite alat yang komprehensif, termasuk pengesahan, pangkalan data NoSQL masa nyata, fungsi awan, hosting statik, dan penyimpanan awan. Tahap percuma yang murah hati adalah sempurna untuk projek ini, menyediakan pengesahan (e -mel/kata laluan, Google, GitHub) dan akses pangkalan data masa nyata (dengan batasan sambungan dan penyimpanan serentak).

Ciri -ciri utama Firebase yang digunakan dalam aplikasi ini:

• Pengesahan: Log masuk pengguna selamat melalui e-mel/kata laluan dan Single Sign-on (SSO) dengan Google dan GitHub.
• Pangkalan Data Realtime: Pangkalan data NoSQL yang membolehkan kemas kini data masa nyata.

Permohonan cerewet

Permohonan kami, "cerewet," membolehkan pengguna yang disahkan menghantar dan menerima mesej. Pengguna boleh mendaftar dengan e -mel/kata laluan atau menggunakan Google/GitHub SSO. Kod sumber tersedia untuk rujukan.

Persediaan dan Konfigurasi

1. Projek Firebase: Buat projek baru di konsol Firebase. Namakannya (misalnya, "cerewet"). Anda boleh mengaktifkan analisis.
2. Persediaan Aplikasi Web: Di Konsol Firebase, navigasi ke bahagian "Web" dan daftar aplikasi anda. Catat butiran konfigurasi (kunci API, domain auth, dan lain -lain) - Anda memerlukannya kemudian.
3. Penyedia Pengesahan: Dayakan kaedah e-mel/kata laluan, Google, dan GitHub dalam tetapan pengesahan Firebase. Ingat untuk menambah domain aplikasi web anda (misalnya, localhost ) untuk pengalihan yang diberi kuasa.

Persekitaran pembangunan

1. Node.js dan NPM (atau benang): Pastikan Node.js dan Pengurus Pakej (NPM atau Benang) dipasang.
2. Buat Aplikasi React: Bootstrap Projek React Baru: npx create-react-app chatty
3. Pasang Ketergantungan: Pasang Router React dan Firebase: yarn add react-router-dom firebase (atau gunakan npm install jika menggunakan NPM).
4. Struktur Projek: Mengatur projek anda dengan folder untuk komponen, pembantu, halaman, dan perkhidmatan.

Mengintegrasikan Firebase

1. Konfigurasi Firebase ( src/services/firebase.js ): Import Firebase dan Inisialisasikannya Menggunakan Butiran Konfigurasi Anda Dari Langkah 2 Persediaan. Eksport modul auth dan database .

2. Persediaan App ( src/App.js ): Import Modul yang diperlukan (React, React Router, Firebase). Buat PrivateRoute dan PublicRoute Components Higher-Order (HOCs) untuk mengendalikan penghalaan berasaskan pengesahan. HOCs ini akan menyemak keadaan pengesahan dan pengalihan semula pengguna dengan sewajarnya.

3. loading Pengesahan ( src/App.js ): authenticated auth().onAuthStateChanged

4. Pembantu Pengesahan ( src/helpers/auth.js ): Buat fungsi untuk pendaftaran ( signup ), signin ( signin ), Google signin-in ( signInWithGoogle ), dan GitHub Log masuk ( signInWithGitHub ). Fungsi ini akan berinteraksi dengan perkhidmatan pengesahan Firebase.

5. Laman Pendaftaran dan Log masuk ( src/pages/Signup.js , src/pages/Login.js ): Buat borang untuk pendaftaran dan log masuk pengguna, menggunakan fungsi penolong dari src/helpers/auth.js . Mengendalikan penyerahan borang dan memaparkan mesej ralat.

6. Halaman sembang ( src/pages/Chat.js ): Gunakan db.ref("chats").on("value", ...) untuk mendengar kemas kini masa nyata dari pangkalan data Realtime Firebase. Membuat mesej sembang dan memberikan borang untuk menghantar mesej baru. Gunakan db.ref("chats").push(...) untuk menambah mesej baru ke pangkalan data. Melaksanakan pengendalian ralat untuk kedua -dua data membaca dan menulis.

7. Peraturan Pangkalan Data: Konfigurasi Peraturan Pangkalan Data Realtime Firebase untuk menyekat akses kepada pengguna yang disahkan sahaja.

Ujian dan penggunaan

Setelah selesai, uji permohonan dengan teliti. Penyebaran akan bergantung kepada penyedia hosting yang anda pilih.

Panduan terperinci ini menyediakan langkah komprehensif untuk membina aplikasi sembang yang selamat dan masa nyata menggunakan React dan Firebase. Ingatlah untuk berunding dengan dokumentasi Firebase untuk ciri dan pilihan yang lebih canggih.

Atas ialah kandungan terperinci Membina aplikasi sembang masa nyata dengan React dan Firebase. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!