Jika anda membina aplikasi dengan React atau React Native dan ingin menambah log masuk, pangkalan data masa nyata atau hanya berhenti risau tentang bahagian belakang, Firebase ialah salah satu pilihan paling mudah dan berkuasa yang tersedia sekarang . Ia membolehkan anda mempunyai pengesahan, pangkalan data, storan fail dan banyak lagi tanpa mencipta satu API anda sendiri.
Dalam artikel ini, kita akan melihat, langkah demi langkah, cara menyambungkan aplikasi React (dan juga React Native/Expo) ke Firebase , cara menstrukturkan projek, mengkonfigurasi e-mel dan pengesahan Google, mengekalkan sesi pengguna dan membaca/menulis data ke Firestore dan Pangkalan Data Masa Nyata. Kita akan melakukan ini dengan contoh dunia sebenar dan kod yang diulas, menerangkannya dalam bahasa yang mudah difahami supaya anda boleh mengikutinya walaupun anda bukan pakar teknologi.
Apakah Firebase dan mengapa ia begitu sesuai dengan React?
Firebase ialah Google Backend sebagai Perkhidmatan yang menyediakan pelbagai perkhidmatan sedia untuk digunakan: pengesahan, pangkalan data masa nyata, Firestore (pangkalan data dokumen NoSQL), storan fail, analitik, alat pertumbuhan, pengewangan dan banyak lagi. Ia bermula sebagai pangkalan data masa nyata, tetapi selepas beberapa lelaran, ia telah berkembang menjadi platform backend yang komprehensif.
Daripada menyediakan pelayan anda sendiri, mereka bentuk API anda, mengurus infrastruktur dan menskalakannya, dengan Firebase anda boleh menyambungkan aplikasi React anda terus ke bahagian belakang menggunakan SDK rasminya . Ini bermakna banyak tugas bahagian belakang biasa (auth, CRUD, peraturan keselamatan, pemberitahuan, dll.) dikurangkan kepada beberapa panggilan kepada fungsi JavaScript yang didokumenkan dengan baik.
Integrasi dengan React adalah sangat semula jadi kerana Firebase mendedahkan datanya dalam format JSON , dan SDKnya direka bentuk untuk berfungsi di bahagian klien. Dengan React, anda hanya perlu membaca data tersebut, mengisi keadaan komponen anda dan membiarkan pustaka mengendalikan pemaparan semuanya apabila sesuatu berubah. Apabila anda menggunakan pendengar masa nyatanya, setiap kemas kini pangkalan data mencetuskan pemaparan semula automatik, yang sesuai dengan model deklaratif React.
Cipta dan konfigurasikan projek Firebase
Sebelum anda mula menulis kod React, anda perlu menyediakan persekitaran Firebase anda. Prosesnya sangat serupa sama ada anda menggunakannya daripada aplikasi web React, React Native atau Expo. Dalam semua kes, langkah pertama adalah mencipta projek dalam konsol Firebase.
Pergi ke https://firebase.google.com/ , log masuk dengan akaun Google anda dan akses konsol. Dari situ, buat projek baharu , berikannya nama yang boleh dikenali (contohnya, “react-firebase” atau “auth-firebase-react”) dan pilih rantau yang paling sesuai untuk khalayak aplikasi anda.
Setelah projek dibuat, Firebase akan membawa anda ke papan pemuka utama. Anda akan melihat beberapa pilihan untuk menambah aplikasi: iOS, Android dan Web. Untuk aplikasi web React, anda memilih ikon web, manakala untuk React Native, anda boleh mendaftarkan aplikasi iOS dan/atau Android mengikut keperluan. Matlamat dalam semua kes adalah untuk mendapatkan konfigurasi Firebase dengan kekunci seperti apiKey, authDomain, projectId dan yang serupa.
Konsol akan menunjukkan kepada anda coretan kod yang kelihatan seperti ini:
const config = { apiKey: "AIzaSy*", authDomain: "tu-proyecto.firebaseapp.com", databaseURL: "https://tu-proyecto.firebaseio.com", projectId: "tu-proyecto", storageBucket: "tu-proyecto.appspot.com", messagingSenderId: "796"};firebase.initializeApp(config);Dalam React Web, anda hanya memerlukan objek konfigurasi dan panggilan untuk memulakan Aplikasi menggunakan SDK modular semasa. Anda akan melihat cara untuk menyesuaikannya ke dalam struktur projek anda kemudian.
Memilih pangkalan data: Pangkalan Data Masa Nyata vs Firestore
Firebase menawarkan dua jenis pangkalan data utama: Pangkalan Data Masa Nyata dan Cloud Firestore . Kedua-duanya adalah NoSQL, tetapi mempunyai perbezaan penting dalam model data, pertanyaan dan pengebilan.
Pangkalan Data Masa Nyata ialah pangkalan data JSON gergasi di mana semuanya disusun ke dalam struktur pokok tunggal. Ia sesuai apabila anda memerlukannya Kemas kini yang sangat pantas dan penyegerakan masa nyata yang mudahStrukturnya berdasarkan nod dan laluan, dan anda mengaksesnya dengan rujukan seperti firebase.database().ref('object/name')Ia merupakan pilihan klasik jika anda mahukan sesuatu seperti sembang, kehadiran pengguna atau data yang sangat mudah.
Firestore, sebaliknya, menyusun maklumat ke dalam koleksi dan dokumen . Setiap dokumen mempunyai medan dan anda boleh menyusun subkoleksi di dalamnya. Ia membolehkan pertanyaan yang lebih kompleks, indeks komposit, pengisihan dan penapis gabungan. Ia sesuai untuk aplikasi yang sedikit lebih besar di mana anda memerlukan pertanyaan fleksibel, kebolehskalaan dan peraturan keselamatan yang lebih ekspresif.
Kedua-dua pangkalan data boleh digunakan dengan lancar dalam React, walaupun dalam aplikasi yang sama. Contohnya, anda boleh menyimpan pengguna, siaran atau tugasan dalam Firestore dan memanfaatkan Pangkalan Data Masa Nyata untuk data yang sangat dinamik yang anda ingin pantau secara berterusan. Kesimpulannya ialah dalam React, anda hanya perlu mendengar perubahan dan mengemas kini keadaan ; Firebase mengendalikan selebihnya.
Cipta aplikasi React Native/Expo dengan Firebase
Jika anda menggunakan React Native, anda boleh mengintegrasikan Firebase menggunakan Firebase Web SDK , yang serasi sepenuhnya dengan projek yang dibuat dengan Expo atau React Native CLI rasmi. Dengan cara ini, anda tidak terikat dengan pustaka perantara dan anda kekal dalam rangka kerja sokongan rasmi Google.
Untuk bermula dengan Expo, pasang Expo CLI secara global dari terminal menggunakan npm install -g expo-cliSeterusnya, buat projek React Native baharu dengan expo initPilih templat asas (contohnya, "kosong" dengan aliran kerja terurus) dan mulakan aplikasi dengan yarn ios o yarn androidExpo akan menunjukkan kod QR yang boleh anda imbas dengan kamera pada iOS atau dengan aplikasi Expo pada Android untuk melihat projek anda pada peranti.
Sebaik sahaja aplikasi asas anda berjalan, tambahkan kebergantungan yang diperlukan: pertama, SDK Firebase itu sendiri, dengan yarn add firebaseKemudian anda boleh memasukkan pustaka navigasi seperti @navigasi-tindak balas/asli y @navigasi-tindak balas/tindanan, bersama-sama dengan pakej tambahan yang mereka perlukan dalam React Native (pengendali-gesture, reanimated, screens, safe-area-context, dll.) untuk mengurus aliran antara log masuk, pendaftaran dan skrin utama.
Ia juga sangat berguna untuk memasang beberapa komponen tambahan untuk UI mudah alih, seperti react-native-keyboard-aware-scroll-view untuk mengendalikan papan kekunci dalam borang dengan betul dan pustaka seperti base64 untuk menyediakan fungsi global yang hilang dalam beberapa runtime mudah alih (btoa, atob, dll.). Semua ini ditambah dengan satu arahan pemasangan menggunakan yarn dalam projek anda.
Sediakan Firebase dalam React / React Native
Anda akan memusatkan konfigurasi Firebase anda dalam satu fail, jadi aplikasi yang lain hanya perlu mengimport tika yang telah dimulakan terlebih dahulu. Cipta, sebagai contoh, folder src/firebase dan di dalam fail konfigurasi, seperti config.js (o config.ts dalam TypeScript).
Dalam fail tersebut, import fungsi yang diperlukan daripada Firebase SDK dan tentukan objek konfigurasi anda dengan nilai yang disediakan oleh konsol Firebase. Dalam projek React Native yang menggunakan SDK yang lebih lama, anda mungkin melihat sesuatu seperti ini:
import * as firebase from 'firebase';import '@firebase/auth';import '@firebase/firestore';const configuracionFirebase = { apiKey: 'TU_CLAVE_API', authDomain: 'tu-dominio-auth.firebaseapp.com', databaseURL: 'https://tu-bd.firebaseio.com', projectId: 'tu-id-proyecto', storageBucket: 'tu-id-proyecto.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:codigoapp'};if (!firebase.apps.length) { firebase.initializeApp(configuracionFirebase);}export { firebase };Projek web yang menggunakan Vite dan TypeScript biasanya menggunakan versi modular Firebase SDK 9, dan merupakan amalan yang baik untuk meletakkannya nilai sensitif dalam pembolehubah persekitaranContohnya, anda boleh mencipta fail .env dalam akar dan takrifkan kekunci sebagai VITE_FIREBASE_API_KEY, VITE_FIREBASE_AUTH_DOMAINdll. Kemudian, dalam fail konfigurasi, anda membina objek daripada import.meta.env['VITE_FIREBASE_API_KEY'] dan sebagainya
Walau apa pun pendekatannya, coraknya adalah sama: anda memulakan aplikasi Firebase hanya sekali dan mengeksport tika tersebut (atau mengeksport objek tertentu seperti FirebaseAuth , Firestore atau Realtime Database ) untuk kegunaan mudah dalam projek yang lain.
Seni bina skrin asas: log masuk, pendaftaran dan laman utama
Apabila anda mengintegrasikan pengesahan ke dalam aplikasi React Native, struktur yang sangat biasa adalah mempunyai tiga skrin utama: Log Masuk, pendaftaran y RumahSelain itu, anda boleh memusatkan logik navigasi dalam komponen akar tunggal, biasanya App.js.
Dalam React Native dengan React Navigation, perkara biasa yang perlu dilakukan ialah membuat folder src/screens dengan subfolder setiap skrin (LoginScreen, RegistrationScreen, HomeScreen) dan fail indeks yang mengeksport setiap satunya. Kemudian, dalam App.jsAnda mencipta navigator tindanan yang memaparkan satu skrin atau yang lain bergantung pada sama ada terdapat pengguna yang disahkan atau tidak.
Ideanya adalah untuk menyelamatkan keadaan komponen. App un pengguna (atau nol) dan bendera bagi loadingSemasa status pengesahan sedang disemak, anda boleh memaparkan skrin kosong atau pemuat. Sebaik sahaja anda tahu sama ada pengguna telah log masuk, anda boleh memutuskan laluan mana yang hendak ditunjukkan: jika terdapat pengguna, tunjukkan skrin utama; jika tidak, tunjukkan skrin log masuk dan pendaftaran.
Secara visual, skrin log masuk dan pendaftaran merupakan borang mudah dengan medan seperti e-mel, kata laluan, dan, dalam kes pendaftaran, nama penuh atau pengesahan kata laluan. Untuk meningkatkan pengalaman mudah alih, semuanya biasanya dibalut dengan KeyboardAwareScrollView supaya papan kekunci tidak menutupi medan input. Sementara itu, Skrin Utama boleh bermula sebagai paparan minimum (teks mudah) dan kemudian berkembang menjadi bahagian aplikasi tempat anda membaca dan menulis data daripada Firestore.
Mereka bentuk dan mengurus borang dengan cangkuk dalam React
Dalam aplikasi web React dengan TypeScript, cara yang bersih untuk mengendalikan borang pengesahan adalah dengan merangkum logik dalam a cangkuk tersuaiContohnya, anda boleh mencipta useForm.tsx dalam folder src/hooks, yang menerima keadaan permulaan generik (objek dengan sifat borang) dan mengembalikan kedua-dua nilai dan fungsi untuk mengendalikan perubahan.
Cangkuk itu boleh digunakan useState secara dalaman untuk menyimpan borang dan mendedahkan fungsi handleChange yang menerima peristiwa input, membaca atribut nama elemen dan kemas kini sifat yang sepadan dalam keadaan. Dengan cara ini, anda akan mempunyai nama yang betul dalam input (contohnya, name="email" y name="pass") adalah kunci untuk memastikan semuanya berfungsi.
Dalam komponen log masuk, sebagai contoh, anda akan memanggil useForm({ email: '', pass: '' }) Dan anda akan mendapat e-mel, kata laluan, objek borang dan fungsi handleChange. Setiap input akan mempunyai inputnya sendiri nilai y padaPerubahan dikaitkan dengan nilai-nilai tersebut dan fungsi cangkuk. Apabila menghantar borang, anda akan mempunyai handleSubmit Apakah e.preventDefault() dan kemudian memanggil logik pengesahan dengan Firebase.
Perkara yang sama berlaku untuk borang pendaftaran; anda juga boleh mengekstrak komponen borang yang boleh diguna semula, kerana selalunya hanya teks butang dan panggilan balik yang dilaksanakan semasa penyerahan berubah, manakala struktur asasnya kekal sama.
Konfigurasikan pengesahan dalam Firebase
Untuk mendayakan React bagi mengesahkan dengan Firebase, anda perlu mendayakan penyedia pengesahan dalam konsol Firebase. Dalam bahagian Pengesahan , pergi ke tab Kaedah daftar masuk dan dayakan e-mel/kata laluan dan, jika dikehendaki, pengesahan Google.
Untuk pembekal e-mel/kata laluan, hanya aktifkannya dan simpan. Untuk Google, selain mendayakannya, anda perlu memilih alamat e-mel yang akan digunakan secara lalai. Mulai saat itu, projek anda akan sedia untuk menerima log masuk menggunakan kedua-dua kaedah.
Dalam tab Pengguna pada bahagian yang sama, anda akan melihat bagaimana akaun baharu yang dibuat melalui aplikasi anda didaftarkan, sama ada dengan e-mel dan kata laluan atau melalui Google. Ia merupakan tempat yang baik untuk mengesahkan bahawa integrasi medan-ke-medan berfungsi dengan betul.
Ciri pengesahan dengan Firebase dalam React
Dalam aplikasi web yang menggunakan React dan TypeScript, disyorkan untuk mengumpulkan semua logik pengesahan dalam fail perkhidmatan, contohnya, src/firebase/services.ts . Di sana anda boleh mempunyai fungsi khusus untuk setiap tindakan: log masuk dengan Google, log masuk dengan kelayakan, pendaftaran, log keluar dan monitor status pengesahan.
Untuk menggunakan penyedia Google, langkah pertama adalah membuat contoh GoogleAuthProvider (atau pembekal yang setara bergantung pada kes anda), dan kemudian tentukan fungsi tak segerak yang memanggil signInWithPopup(FirebaseAuth, provider)Jika panggilan itu berjaya, anda akan menerima objek dengan pengguna yang disahkan, yang boleh anda ekstrak uid, nama paparan, URL foto dan medan lain. Selalunya, anda hanya perlu menggunakan UID dan mengembalikannya untuk mewujudkan sesi global.
Untuk pengesahan menggunakan e-mel dan kata laluan, anda mempunyai dua fungsi utama: ciptaPenggunaDenganE-melDanKata Laluan y daftar masukDenganE-melDanKata LaluanKedua-duanya menunggu peluang untuk... FirebaseAuthE-mel dan kata laluan diperlukan. Yang pertama mencipta pengguna baharu, yang kedua mengesahkan kewujudan mereka dan mengesahkannya. Secara dalaman, Firebase mengendalikan pengesahan format e-mel, panjang kata laluan dan faktor lain, mengembalikan ralat jelas yang boleh anda pintas dalam blok. cuba tangkap dan tunjukkan dengan cara yang mudah alert atau dengan sistem pemberitahuan anda sendiri.
Untuk log keluar, hanya gunakan signOut(FirebaseAuth) , yang anda juga boleh rangkumankan dalam fungsi perkhidmatan anda untuk memastikan API kod anda lebih bersih dan konsisten.
Perhatikan perubahan sesi dengan onAuthStateChanged
Satu masalah yang sangat biasa apabila bermula dengan pengesahan ialah, walaupun log masuk berfungsi, apabila anda memuat semula halaman aplikasi React anda atau menutup dan membuka semula aplikasi mudah alih, ia kelihatan seolah-olah sesi telah hilang . Walau bagaimanapun, Firebase mempunyai kegigihan keadaan pengesahan secara lalai: anda tidak membacanya dengan betul.
Penyelesaiannya adalah dengan menggunakan fungsi onAuthStateChanged daripada Firebase Auth SDK. Fungsi ini menerima tika pengesahan dan panggilan balik yang akan dilaksanakan setiap kali keadaan berubah: apabila pengguna log masuk, apabila mereka log keluar atau apabila aplikasi dimulakan dan Firebase mendapatkan semula kelayakan yang disimpan.
Dalam aplikasi React, perkara biasa yang perlu dilakukan ialah mencipta fungsi, contohnya observeAuthState, yang menerima penetap keadaan (seperti setSession) dan panggilan dalaman onAuthStateChanged(FirebaseAuth, user => { ... })Dalam panggilan balik itu, jika pengguna adalah nol atau tidak ditakrifkanAnda menetapkan sesi global sebagai tidak disahkan; jika terdapat pengguna, anda menyimpan nama pengguna mereka. uid dan tandakan status tersebut sebagai disahkan.
Pemerhati ini biasanya dicetuskan dalam useEffect pada tahap tertinggi aplikasi (contohnya, dalam konteks) supaya ia hanya berjalan sekali apabila aplikasi dilancarkan. Ini memastikan bahawa walaupun pengguna memuat semula pelayar, jika Firebase mengingati sesi tersebut, keadaan global anda dikemas kini secara automatik dan dihantar terus ke bahagian peribadi aplikasi tanpa meminta kelayakan lagi.
Konteks pengesahan global dalam React
Untuk mengelakkan pemindahan prop dari satu komponen ke komponen yang lain, strategi yang sangat mudah dalam React adalah dengan mencipta API Konteks khusus untuk pengesahan . Dengan cara ini, mana-mana bahagian aplikasi boleh menentukan sama ada pengguna telah disahkan, UID mereka dan fungsi yang tersedia untuk mereka (log masuk, log keluar, dll.) tanpa perlu mencari prop.
Mulakan dengan mencipta folder src/context dan di dalam fail, contohnya authContext.tsxDi sana anda menentukan antara muka yang menerangkan apa yang akan didedahkan oleh konteks anda: terkini sesi (contohnya, 'menyemak', 'disahkan', 'tiada pengesahan'), ID Pengguna (atau null jika tiada pengguna) dan fungsi untuk log masuk atau log keluar.
Seterusnya, tentukan keadaan awal, dengan status dalam 'pemeriksaan' dan userId dalam null, dan cipta konteks dengan createContextSeterusnya, bina komponen AuthProvider yang menerima kanak-kanak, gunakan useState untuk mengurus sesi dan memanggil fungsi anda observeAuthState yang useEffect semasa pemasangan.
Dalam penyedia ini, adalah berguna untuk mempunyai fungsi tambahan: satu untuk log keluar yang memanggil perkhidmatan logoutFirebase anda dan meninggalkan keadaan sebagai tidak disahkan, satu lagi untuk memaksa keadaan 'menyemak' apabila anda memulakan aliran pengesahan dan satu lagi untuk mengesahkan hasil log masuk/pendaftaran (jika anda menerima uid, tandakannya sebagai disahkan; jika tidak, panggil fungsi log keluar untuk mengosongkan sebarang sisa sesi).
Dengan itu, anda boleh melaksanakan tiga tindakan awam dalam konteks tersebut: mengendalikanLog MasukDenganGoogle, mengendalikanLoginDenganKelayakan y mengendalikanDaftarDenganKelayakanSetiap satu akan memulakan "pemeriksaan", menggunakan fungsi perkhidmatan yang sepadan dan mewakilkan keputusan muktamad kepada pengesahan biasa yang telah anda buat. Akhirnya, AuthContext.Provider Ia akan mendedahkan kedua-dua keadaan (status, userId) dan fungsi-fungsi ini, dan anda akan membungkus aplikasi anda AuthProvider dalam fail root (contohnya, dalam src/main.tsx).
Menggunakan konteks dalam komponen log masuk, pendaftaran dan laman utama
Sebaik sahaja konteks pengesahan anda sedia, penggunaannya dalam komponen anda adalah sangat mudah. Dalam komponen Log masuk.tsxIa penting useContext, akses ke Konteks Pengesahan dan ekstrak, contohnya, fungsi mengendalikanLoginDenganKelayakan y mengendalikanLog MasukDenganGoogleDalam penyerahan borang log masuk, anda akan menghubungi yang pertama, memberikan e-mel dan kata laluan daripada hook anda. useFormmanakala butang eksklusif “Log masuk dengan Google” akan melancarkan versi keduanya di acaranya onClick.
Untuk komponen Register.tsx , anda akan melakukan sesuatu yang hampir serupa, tetapi hanya menggunakan handleRegisterWithCredentials . Borang tersebut akan meminta medan yang sama (e-mel dan kata laluan), atau beberapa lagi jika anda mahu, dan setelah penyerahan, logik konteks akan bertanggungjawab untuk mencipta pengguna dan mengemas kini status global.
Dalam komponen utama App.tsx , anda juga akan menggunakan konteks untuk membaca status dan userId . Semasa status 'sedang disemak', anda boleh memaparkan mesej pemuatan kecil atau skrin peralihan. Apabila status berubah, jika pengguna disahkan dan mempunyai userId yang sah, anda akan memaparkan komponen Laman Utama yang menunjukkan kandungan hanya untuk pengguna yang log masuk (contohnya, userId mereka dan butang log keluar yang memanggil handleLogOut ). Jika status menunjukkan bahawa pengguna tidak disahkan, anda akan memaparkan komponen AuthPage yang mengandungi borang Log Masuk dan Daftar anda.
Pendaftaran dan log masuk dengan Firebase Auth dalam React Native
Dalam React Native, walaupun struktur teknikalnya berbeza daripada web, corak konseptualnya adalah sama. Pada skrin pendaftaran (RegistrationScreen), anda akan mempunyai keadaan setempat untuk nama penuh, e-mel, kata laluan y sahkanKata LaluanApabila anda mengklik butang cipta akaun, anda menyemak sama ada kata laluan sepadan dan, jika semuanya kelihatan betul, anda akan menghubungi firebase.auth().createUserWithEmailAndPassword(email, password).
Sebaik sahaja Firebase mencipta akaun, anda boleh menyimpan maklumat pengguna tambahan dalam kedai api, dalam koleksi usersdengan menetapkan ID dokumen kepada UID yang dikembalikan oleh Firebase. Ini memberi anda lokasi pusat untuk menyimpan data. nama penuh, gambar profil atau maklumat peribadi lain yang tidak muat dalam jadual pengesahan standard. Jika keseluruhan rentetan berfungsi, anda akan menavigasi ke skrin utama dengan menghantar objek pengguna sebagai parameter.
Pada skrin log masuk (LoginScreen), anda juga mengimport Firebase dan menggunakan firebase.auth().signInWithEmailAndPassword(email, password)Sebaik sahaja anda menerima respons daripada pengguna, anda boleh membaca data lanjutan mereka daripada Firestore menggunakan UID dan jika dokumen itu wujud, navigasi ke Laman Utama dengan pengguna tersebut dalam bar navigasi. Jika pertanyaan tidak mengembalikan apa-apa kerana pengguna telah dipadamkan daripada Firestore, anda akan memaklumkan pengguna dan menghalang pemprosesan selanjutnya.
Kegigihan sesi dalam React Native dengan onAuthStateChanged
Sama seperti di web, dalam React Native, pengguna agak menjengkelkan kerana perlu log masuk setiap kali mereka membuka aplikasi. Firebase Auth juga mengingati log masuk dan membolehkan anda mendapatkan semula pengguna semasa menggunakan log masuk yang sama. padaAuthStateChangDalam persekitaran ini, logik biasanya diletakkan dalam komponen App atau dalam konteks yang serupa dengan web.
Anda menggunakan a useEffect yang hanya berjalan sekali semasa memasang komponen dan di dalamnya anda memanggil firebase.auth().onAuthStateChangedJika anda menerima pengguna dalam panggilan balik, anda akan mencari dokumen yang sepadan dalam koleksi tersebut. users dari Firestore, dan apabila anda mendapatkannya, anda mengemas kini statusnya pengguna dan nyahtanda bendera pemuatan. Jika tiada pengguna yang disahkan, tetapkan sahaja pemuatan kepada palsu dan biarkan pengguna sebagai null, yang akan menyebabkan pokok navigasi memaparkan skrin awam.
Corak ini memastikan bahawa jika pengguna membuka aplikasi beberapa ketika yang lalu dan meninggalkannya di latar belakang, atau jika mereka menutup dan membukanya semula, ia akan terus muncul terus pada Skrin Utama selagi token sesi mereka kekal sah, sekali gus meningkatkan pengalaman pengguna dengan ketara tanpa anda perlu mengurus token secara manual.
Membaca dan menulis data ke Firestore daripada React Native
Setelah pengesahan disusun, tiba masanya untuk melakukan sesuatu yang berguna dengan pangkalan data. Satu contoh yang sangat tipikal ialah mencipta Skrin Utama yang membolehkan pengguna menambah item teks pada koleksi dan menyenaraikannya dalam masa nyata . Bayangkan item ini adalah tugasan, nota atau siaran pantas dan anda mahu pengguna hanya melihat item mereka sendiri.
Pada skrin Utama, anda mengisytiharkan keadaan untuk teks semasa (entityText) dan satu lagi untuk senarai entiti (entitiesAnda juga mencipta rujukan kepada koleksi Firestore, contohnya entityRef = firebase.firestore().collection('entities'), dan anda menyimpan ID pengguna yang disahkan (contohnya. userID = props.extraData.id).
Dalam a useEffectAnda menyediakan pendengar masa nyata dengan entityRef.where('authorID', '==', userID).orderBy('createdAt', 'desc').onSnapshot(...)Panggilan balik ini dicetuskan apabila terdapat perubahan dalam dokumen yang memenuhi syarat tersebut. Anda mengulang dokumen dalam snapshot, membina tatasusunan dengan kandungan setiap entiti, memasukkan ID dokumen dan mengemas kini keadaan. entiti dengan tatasusunan baharu itu. Disebabkan itu, FlatList yang anda gunakan untuk memaparkan entiti akan dipaparkan dengan data terkini.
Untuk menambah elemen baharu, anda perlu mencipta fungsi onAddButtonPress yang mengesahkan bahawa entityText tidak kosong, jana cap waktu pelayan dengan firebase.firestore.FieldValue.serverTimestamp() dan hubungi entityRef.add({ text: entityText, authorID: userID, createdAt: timestamp })Jika operasi berjaya, anda boleh mengosongkan medan teks dan menutup papan kekunci; Firestore akan menguruskan pelancaran snapshot baharu yang akan menjadikan item baharu muncul dalam senarai.
Apabila menggunakan penapis dan pengisihan gabungan, Firestore mungkin memerlukan anda mencipta indeks kompositJika itu berlaku, anda akan melihat pemberitahuan dalam log dengan pautan terus ke konsol Firebase untuk mencipta indeks tersebut dengan satu klik. Setelah dicipta, pertanyaan yang bercampur where y orderBy Mereka akan bekerja tanpa masalah.
Sambungkan web React dengan Pangkalan Data Masa Nyata Firebase
Selain Firestore, anda mungkin perlu menggunakan Pangkalan Data Masa Nyata Firebase daripada aplikasi web yang dibina dengan React. Aliran amnya ialah: anda memulakan Firebase dengan konfigurasi projek anda, mengimport pustaka pangkalan data/firebase dan anda mencipta rujukan kepada nod yang menarik minat anda, seperti object/nameIa sangat berguna untuk senario di mana Anda mahu melihat perubahan tercermin serta-merta dalam antara muka..
Bayangkan dalam konsol Firebase anda mencipta nod object dengan harta name yang nilainya ialah “Carlos”. Dalam aplikasi React anda, anda mentakrifkan keadaan setempat name dengan nilai awal, contohnya “Pepe”, dan anda memaparkan <h1>{this.state.name}</h1> (jika anda menggunakan komponen kelas) atau yang setara dengan cangkuk.
Dalam kaedah kitaran hayat componentDidMount (atau di a useEffect dengan kebergantungan kosong pada komponen berfungsi), anda mencipta rujukan dengan firebase.database().ref().child('object').child('name') dan anda menambah pendengar jenis on('value', snapshot => { ... })Setiap kali peristiwa nilai dicetuskan, anda akan menerima gambaran ringkas tentang nilai semasa nod; anda melakukan setState dengan snapshot.val() React mengendalikan pemaparan semula teks. Anda menukar nama dalam konsol Firebase dan melihatnya serta-merta dalam pelayar anda.
Untuk memastikan ini berfungsi tanpa pengesahan, anda perlu melaraskan peraturan keselamatan dalam panel Pangkalan Data Masa Nyata untuk membenarkan akses baca dan tulis awam semasa pembangunan (contohnya, dengan menetapkan `baca` dan `tulis` kepada `benar`). Walau bagaimanapun, adalah penting untuk menyekat peraturan ini dalam pengeluaran, biasanya dengan memerlukan pengesahan pengguna atau menggunakan syarat berdasarkan laluan atau UID untuk menghalang pangkalan data anda daripada dibuka kepada umum.
Pertimbangan akhir
Dengan corak asas ini, anda boleh membina pelbagai kes penggunaan: penunjuk kehadiran, kaunter kongsi, papan pemuka masa nyata atau aplikasi demo kecil yang memerlukan interaktiviti segera antara pelanggan.
Seperti yang anda lihat, menggabungkan React (di web dan mudah alih) dengan Firebase membolehkan anda membina projek dengan cepat menggunakan pengesahan masa nyata, pangkalan data dan logik, memanfaatkan cangkuk, konteks dan pendengar masa nyata untuk menyegerakkan keadaan visual dengan apa yang berlaku dalam bahagian belakang yang diuruskan oleh Google. Gabungan pembangunan pesat dan kebolehskalaan ini bermakna, bagi banyak projek, tidak masuk akal untuk mencipta semula keseluruhan lapisan pelayan apabila anda boleh menumpukan pada pengalaman pengguna dan membiarkan Firebase mengendalikan selebihnya.