[Week 9] Akhirnya bisa menggunakan database

Setelah sekian lama mempelajari cara menghubungkan aplikasi yang dibuat dengan database, akirnya kami dapat memunculkan data dari database secara real time. berikut screenshot dari tampilan beranda aplikasi kami yang sudah terisi dengan data dari database.

Beranda dengan product feed dari database

berikut adalah struktur produk di database yang ditampilkan.

struktur database sementara dari product detail

referensi database dimana data akan diambil dinamakan productRef.

this.productsRef = firebase.database().ref().child(“productDetails/productId”);

lalu dibuat fungsi untuk mendeteksi perubahan pada database. Kemungkinan perubahan yang terjadi adalah penambahan dan pengurangan data. Oleh karena itu ditambahkan fungsi untuk menghandle ketika ada child baru pada productRef atau ada child yang dihapus yaitu fungsi componentDidMount()

componentDidMount() {
this.productsRef.on(“child_added”, (dataSnapshot) => {
this.products.push({id: dataSnapshot.key, product: dataSnapshot.val()});
this.setState({
productsSource: this.state.productsSource.cloneWithRows(this.products)
});
});

this.productsRef.on(“child_removed”, (dataSnapshot) => {
this.products = this.products.filter((x) => x.id != dataSnapshot.key);
this.setState({
productsSource: this.state.productsSource.cloneWithRows(this.products)
});
});
}

dari kode diatas, ketika ada sebuah child yang ditambah atau dibuang, maka kondisi produk pada state (disimpan di variabel productsSource) akan di-update dengan kondisi terbaru dari database.

Isi dari daftar produk yang akan ditampilkan di halaman beranda ini ditampilkan dengan komponen FlatList dari React Native.

<FlatList
data={this.products}
keyExtractor={(item) => item.id}
renderItem={({item, index}) =>
<ProductsItem index={index} products={item.product} />}
/>