Tích hợp Firebase React Native – Phần 2
Như vậy là chúng ta đã tích hợp thành công Firebase vào project React Native ở bài trước. Ở phần 2 này, thầy sẽ hướng dẫn cách hiển thị, thêm, sửa, xóa dữ liệu từ Realtime Database.
- Tạo Realtime Database
Truy cập trang quản trị Firebase mà các em đã đăng kí ở bài trước.
Mở mục Develop -> Database -> Create database


Sau khi khởi tạo xong, các em lưu ý cần mở chế độ đọc, ghi nhé.

- Thêm dữ liệu
Để thêm dữ liệu vào Realtime Database vừa tạo chúng ta sẽ gọi câu lệnh sau :
function storeNewStudent(documentId, studentId, name, address) {
firebase.database().ref('students/' + documentId).set({
StudentID: studentId,
Name : name,
Address : address
}, function(error) {
if (error) {
// The write failed...
alert('Loi')
} else {
// Data saved successfully!
alert('Thanh cong!!!')
}
});
}
Mọi người lưu ý trong ví dụ này Thầy sử dụng documentId như là khóa chính (Unique Key ) cho 1 đối tượng Student
- Sửa, cập nhật dữ liệu
Để sửa, cập nhật dữ liệu chúng ta gọi câu lệnh tương tự như thêm dữ liệu nhưng nếu documentId đã tồn tại thì chương trình sẽ tự động ghi đè dữ liệu
function storeNewStudent(documentId, studentId, name, address) {
firebase.database().ref('students/' + documentId).set({
StudentID: studentId,
Name : name,
Address : address
}, function(error) {
if (error) {
// The write failed...
alert('Loi')
} else {
// Data saved successfully!
alert('Thanh cong!!!')
}
});
}
- Xóa dữ liệu
Để xóa dữ liệu, chúng ta gọi câu lệnh
deleteData(documentId){
firebase.database().ref('students/' + documentId).remove();
}
- Hiển thị danh sách dữ liệu
readUserData() {
firebase.database().ref('students/').on('value', function (snapshot) {
console.log(snapshot.val())
});
}
Array Students sẽ được trả về trong biến snapshot. Mn sử dụng biến này truyền dữ liệu vào FlatList để hiển thị thông tin lên màn hình
firebase.database().ref('students/').on('value', function (snapshot) {
let array = [];
snapshot.forEach(function(childSnapshot) {
var childData = childSnapshot.val();
array.push({
id : childSnapshot.key,
name : childData.Name,
address : childData.Address,
studentId : childData.StudentID
});
});
thisState.setState({
data : array
})
});
câu lệnh forEach giúp chúng ta đọc toàn bộ dữ liệu tại ref students.
cứ mỗi 1 vòng lặp, chúng ta thêm các thuộc tính vào trong biến array với câu lệnh push
Lưu ý : thisState là biến khai báo trong hàm contructor thay thế cho từ khóa this để có thể sử dụng trong hàm Callback của Firebase
constructor(props){
super(props);
// Set the configuration for your app
this.state = {
data : [],
}
thisState = this;
}
Code cho Flatlist như sau :
<FlatList style = {{flex :1}}
data = {this.state.data}
renderItem={({item}) => <Text>Hello : {item.name}</Text>}
keyExtractor = {(item, index) => item.id}
/>
Như vậy, chúng ta đã hoàn thành ứng dụng bao gồm các chức năng thêm, sửa, xóa và hiển thị danh sách Sinh viên từ Realtime Database. Mọi câu hỏi, thắc mắc các em commnet tại link này nhé. Chúc các em 1 ngày học tập và làm việc vui vẻ