Setup
Trước khi đọc bài này bạn nên đọc trước bài Bắt đầu với Firebase để biết những tính năng có trong Firebase
Bài này chúng ta sẽ bàn về cách sử dụng Firebase realtime với React Native. Trước khi bắt đầu ta cần tạo một project trên Firebase Console
Sau khi nhập tên project, khu vực, chúng ta đến màn hình welcome
Chọn Add Firebase to your web app, copy mấy thông tin này lại lưu ở đâu để dành dùng sau này
Cài firebase thôi
npm install firebase --save
Khởi tạo firebase object để bắt đầu sử dụng, trong file app.js
hoặc index.js
const config = {
databaseURL: "<database-url>",
projectId: "<project-id>",
};
firebase.initializeApp(config);
Khả năng cao là sẽ gặp lỗi sau Firebase app named ‘[DEFAULT]’ already exists (app/duplicate-app)
Để fix lỗi này, chỉ cần kiểm tra xem có bao nhiêu instance đang sử dụng firebase.apps
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
Vậy là chúng ta có thể bắt đầu sử dụng Firebase realtime, hay bắt đầu với một thao tác đọc/ghi dữ liệu đơn giản
Ghi dữ liệu
writeUserData(email, fname, lname) {
firebase.database().ref('Users/').set({
email,
fname,
lname
}).then((data) => {
console.log('data', data);
}).catch((error) => {
console.log('error', error);
});
}
Kết quả khi thành công
Để push vào một array
writeUserData(email,fname,lname){
firebase.database().ref('UsersList/').push({
email,
fname,
lname
}).then((data) => {
console.log('data ' , data)
}).catch((error) => {
console.log('error ' , error)
})
}
Đọc dữ liệu
readUserData() {
firebase.database().ref('Users/').once('value', function (snapshot) {
console.log(snapshot.val());
});
}
Nếu muốn lấy data khi có 1 thay đổi xảy ra, ta dùng hàm on
readUserData() {
firebase.database().ref('Users/').on('value', function (snapshot) {
console.log(snapshot.val())
});
}
Cập nhập database
Nếu muốn cập nhập data của một object, tạo một reference tới nó và sử dụng hàm update()
với dữ liệu muốn thay đổi
updateSingleData(email) {
firebase.database().ref('Users/').update({
email,
});
}
Xóa dữ liệu
Dùng hàm remove()
hoặc là set
, update
giá trị về null
, nó sẽ tự động xóa
deleteData() {
firebase.database().ref('Users/').remove();
}
Initializing...