Cách xây dựng ứng dụng trò chuyện với React và Firebase
Bạn đã bao giờ tự hỏi WhatsApp hoạt động như thế nào chưa? Hoặc cách những người dùng khác nhau kết nối và trao đổi tin nhắn trong các cuộc trò chuyện? Tạo một ứng dụng trò chuyện đơn giản hóa có thể là một cách tuyệt vời để nắm bắt các chức năng cốt lõi đằng sau các ứng dụng trò chuyện.
Xây dựng một ứng dụng trò chuyện có vẻ như là một nhiệm vụ khó khăn, tuy nhiên, Firebase đơn giản hóa quá trình này. Nó cho phép bạn nhanh chóng khởi động bất kỳ ứng dụng nào, loại bỏ nhu cầu về phụ trợ tùy chỉnh hoặc thiết lập cơ sở dữ liệu.
Mục Lục
Cơ sở dữ liệu đám mây Firebase là gì
Firebase là một nền tảng phát triển dựa trên đám mây cung cấp nhiều dịch vụ phụ trợ như cơ sở dữ liệu thời gian thực, xác thực và lưu trữ. Cốt lõi của các dịch vụ cơ sở dữ liệu của nó là cơ sở dữ liệu đám mây NoSQL sử dụng mô hình tài liệu để lưu trữ dữ liệu trong thời gian thực.
Thiết lập Dự án Firebase và Máy khách React
Bạn có thể kiểm tra mã ứng dụng trò chuyện có sẵn trên kho lưu trữ GitHub này và nó miễn phí để sử dụng theo Giấy phép MIT. Đảm bảo bạn định cấu hình Firebase trước khi chạy ứng dụng.
Để bắt đầu, hãy truy cập Firebase và đăng ký tài khoản. Trên bảng điều khiển người dùng, nhấp vào Tạo dự án để thiết lập một dự án mới.
Sau khi tạo dự án của bạn, hãy chọn và nhấp vào biểu tượng mã trên trang tổng quan của dự án để đăng ký ứng dụng của bạn. Đăng ký với Firebase cho phép bạn truy cập và sử dụng các tài nguyên của nó để xây dựng ứng dụng web React của bạn.
Lưu ý hướng dẫn tích hợp SDK của Firebase vào dự án của bạn bên dưới Thêm SDK Firebase.
Tiếp theo, tạo ứng dụng React và cài đặt SDK Firebase trong ứng dụng của bạn. Ngoài ra, nhập các phản ứng-firebase-hook gói giúp đơn giản hóa việc làm việc với Firebase Trong React.
npm install firebase react-firebase-hooks
Định cấu hình Firebase trong ứng dụng React của bạn
trong bạn src thư mục, tạo một tập tin mới và đặt tên cho nó, firebase-config.js. Sao chép các biến môi trường từ bảng điều khiển dự án firebase của bạn và dán chúng vào tệp này.
import { initializeApp } from "firebase/app";
import { getFirestore } from '@firebase/firestore';
import { getAuth, GoogleAuthProvider } from "firebase/auth";const firebaseConfig = {
apiKey: "API_KEY",
authDomain: "authDomain",
projectId: "project ID",
storageBucket: "storage Bucket",
messagingSenderId: "messanging sender ID",
appId: "App ID"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app)
const provider = new GoogleAuthProvider();
export {db, auth, provider}
Sử dụng cấu hình của dự án Firebase, bạn khởi tạo các chức năng xác thực của Firebase, Firestore và Firebase để sử dụng trong ứng dụng của mình.
Thiết lập cơ sở dữ liệu Firestore
Cơ sở dữ liệu này sẽ lưu trữ dữ liệu người dùng và tin nhắn trò chuyện. Đi qua trang tổng quan về dự án của bạn và nhấp vào Tạo nên cơ sở dữ liệu để thiết lập Cloud Firestore của bạn.
Xác định chế độ cơ sở dữ liệu và vị trí.
Cuối cùng, hãy cập nhật quy tắc cơ sở dữ liệu Firestore để cho phép thao tác đọc và ghi từ ứng dụng React. bấm vào Quy tắc tab và thay đổi đọc và viết cai trị để ĐÚNG VẬY.
Khi bạn đã thiết lập xong cơ sở dữ liệu, bạn có thể tạo bộ sưu tập demo — đây là cơ sở dữ liệu NoSQL trong Firestore. Các bộ sưu tập được tạo thành từ các tài liệu dưới dạng hồ sơ.
Để tạo một bộ sưu tập mới, hãy nhấp vào Bắt đầu bộ sưu tập và cung cấp ID bộ sưu tập — tên bảng.
Tích hợp xác thực người dùng Firebase
Firebase cung cấp các giải pháp ủy quyền và xác thực sẵn dùng, dễ triển khai, chẳng hạn như nhà cung cấp thông tin đăng nhập xã hội hoặc nhà cung cấp mật khẩu email tùy chỉnh.
Trên trang tổng quan về dự án của bạn, hãy chọn xác thực từ danh sách các sản phẩm được hiển thị. Tiếp theo, nhấp chuột vào Thiết lập phương thức đăng nhập để định cấu hình nhà cung cấp Google. Chọn Google từ danh sách Nhà cung cấp, kích hoạt nó và điền vào email hỗ trợ dự án.
Tạo một thành phần đăng nhập
Khi bạn đã hoàn tất việc định cấu hình nhà cung cấp trên Firebase, hãy chuyển đến thư mục dự án của bạn và tạo một thư mục mới, các thành phầnbên trong /src danh mục. Bên trong các thành phần thư mục, tạo một tập tin mới: SignIn.js.
bên trong SignIn.js tập tin, thêm mã dưới đây:
import React from 'react';
import { signInWithPopup } from "firebase/auth";
import { auth, provider } from '../firebase-config'
function SignIn() {
const signInWithGoogle = () => {
signInWithPopup(auth,provider)
};
return (
<div>
<button onClick={signInWithGoogle}>Sign In With Google</button>
</div>
)
}export default SignIn
- Mã này nhập các đối tượng xác thực và nhà cung cấp Google mà bạn đã khởi tạo trong tệp cấu hình Firebase.
- Sau đó nó định nghĩa một Đăng nhập chức năng thực hiện các đăng nhậpWithPopup phương pháp từ Firebase có trong xác thực Và các nhà cung cấp thành phần như tham số. Chức năng này sẽ xác thực người dùng bằng thông tin đăng nhập mạng xã hội Google của họ.
- Cuối cùng, nó trả về một div chứa một nút mà khi được nhấp vào sẽ gọi đăng nhập bằng Google chức năng.
Tạo một thành phần trò chuyện
Thành phần này sẽ chứa tính năng chính của ứng dụng Trò chuyện của bạn, cửa sổ trò chuyện. Tạo một tệp mới bên trong các thành phần thư mục và đặt tên cho nó Trò chuyện.js.
Thêm mã dưới đây vào Trò chuyện.js Tài liệu:
import React, { useState, useEffect } from 'react'
import { db, auth } from '../firebase-config'
import SendMessage from './SendMessage'
import { collection, query, limit, orderBy, onSnapshot } from "firebase/firestore";function Chat() {
const [messages, setMessages] = useState([])
const { userID } = auth.currentUser
useEffect(() => {
const q = query(
collection(db, "messages"),
orderBy("createdAt"),
limit(50)
);
const data = onSnapshot(q, (QuerySnapshot) => {
let messages = [];
QuerySnapshot.forEach((doc) => {
messages.push({ ...doc.data(), id: doc.id });
});
setMessages(messages)
});
return () => data;
}, []);
return (
<div>
<button onClick={() => auth.signOut()}>Sign Out</button>
{messages && messages.map((message, id, uid, photoURL) =>
<div
key={id}
className={`msg ${userID === auth.currentUser.uid ? 'sent' : 'received'}`}>
<img src={message.photoURL} />
<p>{message.text}</p>
</div>
)}
<SendMessage />
</div>
)
}
export default Chat
- Mã này nhập cơ sở dữ liệu, các thành phần xác thực được khởi tạo trong firebase-config.js tệp và các phương thức tùy chỉnh của Firestore giúp dễ dàng thao tác với dữ liệu được lưu trữ.
- Nó thực hiện các bộ sưu tập, truy vấn, giới hạn, đặt bởiVà onSnapshot Các phương thức của Firestore để truy vấn và chụp ảnh chụp nhanh dữ liệu hiện được lưu trữ trong bộ sưu tập thư của Firestore, được sắp xếp theo thời gian chúng được tạo và chỉ đọc 50 thư gần đây nhất.
- Các phương thức Firestore được bọc và chạy bên trong một sử dụnghiệu ứng móc để đảm bảo rằng các tin nhắn được hiển thị ngay lập tức, mỗi khi bạn nhấn nút gửi mà không cần làm mới cửa sổ trang. Khi dữ liệu được đọc, nó sẽ được lưu trữ ở trạng thái tin nhắn.
- Sau đó, nó sẽ kiểm tra để phân biệt giữa tin nhắn đã gửi và đã nhận — nếu ID người dùng được lưu cùng với tin nhắn khớp với ID người dùng của người dùng đã đăng nhập, sau đó, đặt tên lớp và áp dụng kiểu phù hợp cho tin nhắn.
- Cuối cùng, nó hiển thị các tin nhắn, một đăng xuất nút, và Gửi tin nhắn thành phần. Các đăng xuất cái nút trong một cái nhấp chuột trình xử lý gọi auth.signOut() phương thức do Firebase cung cấp.
Tạo một thành phần gửi tin nhắn
Tạo một tệp mới, SendMessage.js tệp và thêm mã bên dưới:
import React, { useState } from 'react'
import { db, auth } from '../firebase-config'
import { collection, addDoc, serverTimestamp} from "firebase/firestore";function SendMessage() {
const [msg, setMsg] = useState('')
const messagesRef = collection(db, "messages");
const sendMsg = async (e) => {
const { uid, photoURL } = auth.currentUser
await addDoc(messagesRef, {
text: msg,
createdAt: serverTimestamp(),
uid: uid,
photoURL: photoURL
})
setMsg('');
};
return (
<div>
<input placeholder='Message...'
type="text" value={msg}
onChange={(e) => setMsg(e.target.value)}
/>
<button onClick={sendMsg}>Send</button>
</div>
)
}
export default SendMessage
- Tương tự như Trò chuyện.js thành phần, nhập các phương thức Firestore và cơ sở dữ liệu đã khởi tạo và các thành phần xác thực.
- Để gửi tin nhắn, các Gửi tin nhắn chức năng thực hiện các thêmDoc Phương thức Firestore tạo một tài liệu mới trên cơ sở dữ liệu và lưu trữ dữ liệu đã truyền.
- Các thêmDoc phương thức nhận hai tham số, đối tượng dữ liệu và đối tượng tham chiếu cho biết bộ sưu tập nào bạn muốn lưu trữ dữ liệu. Phương pháp bộ sưu tập Firestore chỉ định bộ sưu tập để lưu trữ dữ liệu.
- Cuối cùng, nó hiển thị trường nhập liệu và nút trên trang web để cho phép người dùng gửi thông báo tới cơ sở dữ liệu.
Nhập các thành phần trong tệp App.js
Cuối cùng, trong của bạn App.js tệp, nhập tệp Đăng nhập Và Trò chuyện các thành phần để hiển thị chúng trên trình duyệt của bạn.
trong bạn App.js tệp, xóa mã soạn sẵn và thêm mã bên dưới:
import Chat from './components/Chat';
import SignIn from './components/SignIn';
import { auth } from './firebase-config.js'
import { useAuthState } from 'react-firebase-hooks/auth'
function App() {
const [user] = useAuthState(auth)
return (
<>
{user ? <Chat /> : <SignIn />}
</>
);
}
export default App;
Mã này làm cho Đăng nhập Và Trò chuyện các thành phần có điều kiện bằng cách kiểm tra trạng thái xác thực của người dùng. Trạng thái xác thực bị hủy cấu trúc khỏi thành phần xác thực Firebase với sự trợ giúp của sử dụngAuthState móc từ phản ứng-firebase-hook bưu kiện.
Nó kiểm tra xem người dùng có được xác thực hay không và hiển thị Trò chuyện thành phần nếu không thì Đăng nhập thành phần được kết xuất. Cuối cùng, thêm bất kỳ kiểu CSS nào, khởi động máy chủ phát triển để lưu các thay đổi và truy cập trình duyệt của bạn để xem kết quả cuối cùng.
Chức năng không có máy chủ của Firebase
Firebase cung cấp nhiều tính năng ngoài cơ sở dữ liệu thời gian thực và xác thực. Bạn có thể sử dụng các chức năng serverless của nó để nhanh chóng khởi động và mở rộng bất kỳ ứng dụng nào. Hơn nữa, Firebase tích hợp liền mạch với cả ứng dụng web và thiết bị di động, giúp dễ dàng xây dựng các ứng dụng đa nền tảng.