Realm in React Native App

Haloo.. mungkin beberapa dari kalian udah ga asing lagi dengan database internal di mobile apps khususnya para mobile developer, database internal sudah banyak di gunakan di industri aplikasi mobile saat ini.

Pada Mobile Apps, setiap aplikasi memiliki akses ke database untuk menyimpanan data secara internal. Database yang dibuat oleh sebuah aplikasi hanya bisa dipakai (dilihat dan diubah) oleh aplikasi tersebut saja. Aplikasi lain akan memakai database berbeda yang khusus untuk aplikasi tersebut.

Dengan demikian, database bawaan ini tidak ditujukan untuk pertukaran data seperti halnya pada database client server umumnya. Ia hanya ditujukan sebagai penampungan data permanen bagi masing-masing aplikasi; menulis data ke database dapat dianggap sebagai solusi penampungan data yang lebih terstruktur dibandingkan dengan menulis data ke file.

Seperti yang udah dibahas di blog ini Realm - AnAlternative to SQLite.. saat ini untuk beberapa aspek Realm masih lebih baik dari SQLite. Dan kali saya akan membahas penggunaan Realm di aplikasi React Native.

Prerequisites

• Pastikan aplikasi React Native yang kamu gunakan sudah berhasil diinstall dan di jalankan. Jika belum, silahkan ikuti step by step Getting Start React Native.
• Aplikasi yang menggunakan Realm ditargetkan untuk platform iOS dan Android.
• Realm support untuk versi React Native 0.31.0 dan setelahnya.

Installation

1. Buat project React Native.

 react-native init <project-name>  

2. Ubah direktori project (cd <project-name>) dan install plugin realm.

 npm install --save realm  

3. Hubungkan plugin realm ke project.

 react-native link realm  

Pastikan react-native link berjalan dengan benar dengan mengecheck native code dibawah

• Masukan beberapa line code di direktori android/settings.gradle:

 include ':realm'  
 project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')  

• Masukan baris compile ke dependencies yang berada di direktori android/app/build.gradle:

 dependencies {  
      compile project(':realm')  
 }  

• Import package yang sudah diinstall dan panggil package tersebut di MainApplication.java:

 import io.realm.react.RealmReactPackage; // add this import  
 public class MainApplication extends Application implements ReactApplication {  
   @Override  
   protected List<ReactPackage> getPackages() {  
     return Arrays.<ReactPackage>asList(  
       new MainReactPackage(),  
       new RealmReactPackage() // add this line  
     );  
   }  
 }  

jika semua sudah di setup dengan benar, 

Lets Do It!!!

Pertama, setelah plugin realm sudah berhasil terinstall di aplikasi import plugin tersebut, dan defisikan schema yang dibutuhkan pada aplikasi kalian. Untuk memasukan data ke database realm dibuat dummy data (optional)

 import Realm from 'realm';  
 // Define your models and their properties  
 const CarSchema = {  
   name: 'Car',  
   properties: {  
     make: 'string',  
     model: 'string',  
     miles: 'int' // optional property  
   }  
 };  
 Realm.open({schema: [CarSchema]})  
 .then(realm => {  
   // Create Realm objects and write to local storage  
   realm.write(() => {  
     let delallCar = realm.objects('Car');  
     realm.delete(delallCar)  
   })  
   // Write list car in CarSchema  
   realm.write(() => {  
     realm.create('Car', {  
       make: 'Honda',  
       model: 'Civic',  
       miles: 1000,  
     });  
     realm.create('Car', {  
       make: 'Ford',  
       model: 'Focus',  
       miles: 2000,  
     });  
   });  
 })  
 .catch(error => {  
   console.log(error);  
 });  

Setelah schema database sudah terisi lalu kita tampilkan dalam bentuk FlatList dengan cara seperti dibawah ini

 import React, { Component } from 'react';  
 import {   
   StyleSheet, View, Text, FlatList  
 } from 'react-native';  
 export default class ListCars extends Component {  
   constructor(props) {  
     super(props);  
     this.state = { listCars: [] };  
   }  
   componentWillMount() {  
     Realm.open({schema: [ CarSchema ]})  
     .then(realm => {  
       // Get all data in CarSchema  
       let allCar = realm.objects('Car');  
       this.setState({ listCars : allCar });  
     });  
   }  
   render() {  
     const info = this.state.listCars  
     ? 'Number of cars in this Realm: ' + this.state.listCars.length : 'Loading...';  
     return (  
     <View style={styles.container}>  
       <Text style={styles.item}>  
         {info}  
       </Text>  
       <FlatList  
         data={this.state.listCars}  
         renderItem={({item}) => (  
           <Text style={styles.item}>{item.make} – {item.model}</Text>  
         )}  
         keyExtractor={ item => item.make }  
       />  
     </View>  
   );  
  }  
 }  
 const styles = StyleSheet.create({  
   container: {  
     flex: 1,  
     paddingTop: 22  
   },  
   item: {  
     padding: 10,  
     fontSize: 18,  
     height: 44,  
   },  
 })  

Setelah semua sudah, coba run aplikasi react-native dengan menggunakan

 react-native run-android  

 react-native run-ios  

Maka akan tampil seperti dibawah

Android

IOS

Conclusion

Realm Database merupakan salah satu solusi yang terbaik untuk anda yang ingin menggunakan internal database pada aplikasi mobile anda, Realm juga menyediakan support SDK di beberapa platform yang umum digunakan salah satunya adalah JavaScript yang dalam pembahasan kali ini di terapkan di React Native. Realm pada React Native mudah digunakan dan dokumentasinya juga lengkap, dan dengan menggunakan React Native pula aplikasi yang dibuat bisa dijalankan di platfrom Android dan IOS.

References

• https://realm.io/docs/javascript/latest/
• http://blog.nostratech.com/2017/06/realm-alternative-to-sqlite.html
• https://thesolidsnake.wordpress.com/2015/03/28/memakai-database-sqlite-di-android/