Cách kết nối ứng dụng React của bạn với Firebase
Theo khảo sát Stack Overflow năm 2022, 21,14% nhà phát triển sử dụng Firebase, khiến nó trở thành nền tảng đám mây phổ biến thứ tư. Đó là một công nghệ đang phát triển để tích hợp chương trình phụ trợ một cách liền mạch.
Với Firebase, bạn có thể phát triển một ứng dụng đầy đủ mà không cần viết một dòng mã phụ trợ. Tìm hiểu cách kết nối ứng dụng React.js của bạn với Firebase ngay hôm nay và xây dựng khi đang di chuyển.
Mục Lục
Cài đặt Gói Firebase
Sau khi tạo ứng dụng React, hãy thay đổi thư mục thành thư mục gốc của dự án và cài đặt gói Firebase bằng cách chạy:
npm install firebase
Thêm ứng dụng React của bạn vào dự án Firebase
Bước tiếp theo là tạo một dự án Firebase và liên kết nó với ứng dụng React của bạn. Đi tới bảng điều khiển Firebase:
- Nhấp chuột Thêm dự án để bắt đầu một dự án Firebase mới.
- Nhập tên dự án, sau đó nhấp vào Tiếp tục.
- Nhấp chuột Tiếp tục trên trang tiếp theo.
- Chọn tài khoản Firebase của bạn từ menu thả xuống hoặc nhấp vào Tạo tài khoản mới nếu bạn chưa có.
- Cuối cùng, bấm vào Tạo dự án.
- Nhấp chuột Tiếp tục khi quá trình hoàn tất.
- Tiếp theo, nhấp vào biểu tượng Web () về phía trên cùng bên trái của trang sau để thiết lập Firebase cho web.
- Nhập biệt hiệu cho ứng dụng của bạn vào trường được cung cấp. Sau đó nhấp vào Đăng ký ứng dụng.
- Sao chép mã đã tạo và giữ nó cho bước sau (được thảo luận trong phần sau).
- Nhấp chuột Tiếp tục đến bảng điều khiển.
- Có nhiều tùy chọn trên trang sau. Cuộn xuống và chọn Cloud Firestore vì bạn chỉ cần thiết lập cơ sở dữ liệu trong trường hợp này.
- Tiếp theo, nhấp vào Tạo nên cơ sở dữ liệu.
- Nhấp chuột Tiếp theo. Chọn vị trí Firestore ưa thích của bạn từ menu thả xuống.
- Sau đó nhấp vào Cho phép để tạo cơ sở dữ liệu Firestore.
Khởi tạo Firebase trong ứng dụng React của bạn
Tạo một thư mục mới bên trong dự án của bạn src danh mục. Bạn có thể gọi đây là firebase_setup. Tiếp theo, tạo một firebase.js tệp bên trong thư mục đó. Sau đó, dán mã đã tạo trước đó vào tệp này.
Hiện tại, bạn có thể lưu trữ đối tượng cấu hình (firebaseConfig) bên trong .env tập tin. Nhưng hãy cân nhắc sử dụng một cách an toàn hơn để che giấu các bí mật của React trong quá trình sản xuất. Dữ liệu mà bạn lưu trữ trong một .env tệp có thể dễ dàng bị rò rỉ trong bản dựng ứng dụng của bạn.
Nếu sử dụng tùy chọn .env, hãy thêm “REACT_APP” vào từng tên biến bên trong .env. Nếu không, ứng dụng của bạn sẽ không đọc các chuỗi. Ngoài ra, hãy khởi động lại máy chủ React của bạn mỗi khi bạn thay đổi chi tiết trong .env tập tin.
Ví dụ: để nhập khóa bí mật Firebase của ứng dụng của bạn trong .env tập tin:
REACT_APP_apiKey = yourFirebaseAccessKey
Do đó, bạn có thể tinh chỉnh mã đã tạo như sau:
import { initializeApp } from "firebase/app";
import { getFirestore } from "@firebase/firestore"
const firebaseConfig = {
apiKey: process.env.REACT_APP_apiKey,
authDomain: process.env.REACT_APP_authDomain,
projectId: process.env.REACT_APP_projectId,
storageBucket: process.env.REACT_APP_storageBucket,
messagingSenderId: process.env.REACT_APP_messagingSenderId,
appId: process.env.REACT_APP_appId,
measurementId: process.env.REACT_APP_measurementId
};
const app = initializeApp(firebaseConfig);
export const firestore = getFirestore(app)Kiểm tra kết nối Firebase của bạn
Bạn có thể kiểm tra kết nối bằng cách gửi dữ liệu giả tới Firestore. Bắt đầu bằng cách tạo tay cầm thư mục bên trong dự án của bạn src danh mục. Tạo một trình xử lý gửi bên trong tệp này. Bạn có thể gọi cái này handleubmit.js, ví dụ:
import { addDoc, collection } from "@firebase/firestore"
import { firestore } from "../firebase_setup/firebase"const handleSubmit = (testdata) => {
const ref = collection(firestore, "test_data")
let data = {
testData: testdata
}
try {
addDoc(ref, data)
} catch(err) {
console.log(err)
}
}
export default handleSubmit
Sau đó bên trong App.js:
import './App.css';
import handleSubmit from './handles/handlesubmit';
import { useRef } from 'react';function App() {
const dataRef = useRef()
const submithandler = (e) => {
e.preventDefault()
handleSubmit(dataRef.current.value)
dataRef.current.value = ""
}
return (
<div className="App">
<form onSubmit={submithandler}>
<input type= "text" ref={dataRef} />
<button type = "submit">Save</button>
</form>
</div>
);
}
export default App;
Chạy ứng dụng React của bạn và thử gửi dữ liệu qua biểu mẫu. Làm mới bảng điều khiển cơ sở dữ liệu Firebase để xem thông tin đã gửi trong bộ sưu tập của bạn. Với những điều cơ bản đã có, bạn có thể khám phá nhiều thứ khác mà Firebase có thể làm để xem cách sử dụng nó tốt nhất.
Xây dựng khi đang di chuyển với Firebase và React
Firebase là một giải pháp phụ trợ như một dịch vụ linh hoạt cho phép bạn mở rộng ứng dụng của mình một cách hiệu quả. Sau khi kết nối ứng dụng React, bạn có thể tận dụng nhiều tính năng của nó để xây dựng trang web theo ý muốn của mình.
Ví dụ: bộ công cụ xác thực Firebase là một trong những tính năng bạn có thể muốn khám phá.