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ẻ