3 pelajaran dari react native malam ini

07 April 2019| Super Administrator| Tags:

React native adalah framework dari facebook untuk membuat aplikasi mobile (IOS/Andorid) dengan satu bahasa pemograman javascript.  Awalnya senang sekali ketika tahu fungsi framework ini begitu membantu saya jadi tak perlu repot belajar pemograman native untuk masing-masing platform OS mobile.  Ditambah sepertinya akan terbuka kesempatan untuk membuat karya yang lebih waw lagi dengan bantuan framework ini. Hehe

Namun dalam perjalanan memahami framework ini, begitu banyak hal yang perlu saya pelajari. Berangkat dari pengalaman di pemograman PHP, banyak paradigma baru yang harus mengubah cara saya dalam berkoding ria.Mulai dari ES6 javascript hingga beberapa patern pemograman yang perlu saya pahami agar perjalanan pembelajaran  ini bisa berlangsung mulus. Namun untuk artikel kali ini, saya hanya sanggup membuat 3 poin penting saja. Sebagai pengingat diri di masa depan nanti agar tak melakukan kesalahan yang sama :D.

1) Apa fungsi require di komponen image react native ga bisa semi dinamis yah? :(

Saya menggunakan react navigation versi 3 untuk membuat tab navigasi di bagian bawah.  Rencana saya ingin menyisipkan sebuah variable di dalam fungsi require yang ada pada komponen image.

Pertama saya mencoba memasukan sebuah variabel pada fungsi require seperti ini.

 

let url;
        if (routeName === 'Layanan') {
          url = require('standarlayanan.png');
        } else if (routeName === 'Profil') {
          url = require('profil.png');
        }else if (routeName === 'Regulasi') {
          url = require('regulasi.png');
        }else if (routeName === 'Faq') {
          url = require('qna.png');
        }else if (routeName === 'Publik') {
          url = require('informasi.png');
        }else{
          url = require('layanan.jpg');
        }
        
        return ;

namun ternyata tidak berhasil dan ada eror seperti ini.

akhirnya saya mengubah kodenya menjadi seperti ini

 if (routeName === 'Layanan') {
          url = require('./assets/iconppid/iconsubmenu/standarlayanan.png');
        } else if (routeName === 'Profil') {
          url = require('./assets/iconppid/iconsubmenu/profil.png');
        }else if (routeName === 'Regulasi') {
          url = require('./assets/iconppid/iconsubmenu/regulasi.png');
        }else if (routeName === 'Faq') {
          url = require('./assets/iconppid/iconsubmenu/qna.png');
        }else if (routeName === 'Publik') {
          url = require('./assets/iconppid/iconsubmenu/informasi.png');
        }else{
          url = require('./assets/iconppid/iconsubmenu/layanan.jpg');
        }
        // You can return any component that you like here!
        return ;

dari sini muncul kesimpulan sementara apakah fungsi require() tidak bisa disisipkan variabel agar dinamis :(. Mungkin saya belum riset lebih jauh mengenai hal ini. Semoga tidak benar yah. 

2) Selalu gunakan arrow function

Ini terjadi ketika saya mencoba menggunakan this di dalam fungsi firebase. Ketika itu niatnya ingin mengubah nilai state sesuai dengan data yang di ambil dari firebase. Namun apa daya ternyata tidak berjalan sesuai keinginan. seperti ini kodenya

firebase.database().ref('Pengajuan/'+this.state.user).on('value',function(snapshot){
          let pengajuan = [];
          snapshot.forEach(child => {
              pengajuan.push({
                rincian: child.val().rincian,
                waktu: child.val().waktu,
                tujuan: child.val().tujuan,
                selected2: child.val().selected2,
                selected3: child.val().selected3,
                key: child.key,
                status: child.val().status,
                Keberatan : child.val().Keberatan
              });
            });
          this.setState({listpengajuan:pengajuan});
          this.setState({loading:false});
      });

masalahnya ternyata konteks this tidak bisa di terapkan karena berada di dalam fungsi firebase. Memang di php pun saya jarang menggunakan fungsi di dalam fungsi. tapi penulisan fungsi di phpun jarang saya tulis seperti itu.

Akhirnya setelah melihat solusi di stack overflow, saya harus mendefinisikan arow function jika ingin menggunakan this di dalam fungsi itu. Akhirnya kode berubah menjadi seperti ini.

firebase.database().ref('Pengajuan/'+this.state.user).on('value',(snapshot) => {
          let pengajuan = [];
          snapshot.forEach(child => {
              pengajuan.push({
                rincian: child.val().rincian,
                waktu: child.val().waktu,
                tujuan: child.val().tujuan,
                selected2: child.val().selected2,
                selected3: child.val().selected3,
                key: child.key,
                status: child.val().status,
                Keberatan : child.val().Keberatan
              });
            });
          this.setState({listpengajuan:pengajuan});
          this.setState({loading:false});
      });

Yup, semua sudah berjalan seperti semestinya. Dari sekarang sepertinya saya harus membiasakan diri untuk menulis kode fungsi ke dalam bentuk arrow function. Memang agak aneh pada awalnya. Tapi saya yakin ini akan berguna kedepannya. 

3) gunakan fungsi async dan await untuk mendapatkan rasa prosedural.

tidak seperti PHP dimana kode akan di eksekusi secara sequential, dimana kode di baris 1 akan di jalankan sampai tuntas baru menjalankan kode pada baris 2. Hal seperti tidak terjadi secara default pada react native dimana paham asyncronus di anut. :D

ini yang membuat saya semalaman di landa kebimbangan dikarenakan mencari penyebab apa yang membuat kode ini tidak berjalan sesuai keinginan.

contoh pada kode berikut saya ingin menampilkan list pengajuan oleh user yang sedang login.

componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
        this.setState({user : user.uid});
    });

    firebase.database().ref('Pengajuan/'+this.state.user).on('value',(snapshot) => {
          let pengajuan = [];
          snapshot.forEach(child => {
              pengajuan.push({
                rincian: child.val().rincian,
                waktu: child.val().waktu,
                tujuan: child.val().tujuan,
                selected2: child.val().selected2,
                selected3: child.val().selected3,
                key: child.key,
                status: child.val().status,
                Keberatan : child.val().Keberatan
              });
            });
          this.setState({listpengajuan:pengajuan});
          this.setState({loading:false});
      });
  }

Biasanya kalau di pemograman PHP caranya ketikan perintah kode untuk mengambil user ID yang sedang login, lalu pada baris berikutnya tarik data list sesuai dengan user id yang telah ditangkap.

Pertama mencoba gaya seperti itu, rasa bingung mulai melanda karena heran kok bisa ID user-nya tidak dapat, padahal perintah tersebut sudah saya letakan diatas kode pengambilan list.

Ternyata penyebabnya karena di react native, semua kode di jalankan secara ascycronus. Artinya perintah di baris bawah tidak akan menunggu perintas di atasnya selesai, sehingga perlu di tambahkan si duo async dan await untuk menyelesaikan problem ini.

async componentDidMount() {
    await firebase.auth().onAuthStateChanged(user => {
        this.setState({user : user.uid});
    });

    if(this.state.user){
      firebase.database().ref('Pengajuan/'+this.state.user).on('value',(snapshot) => {
          let pengajuan = [];
          snapshot.forEach(child => {
              pengajuan.push({
                rincian: child.val().rincian,
                waktu: child.val().waktu,
                tujuan: child.val().tujuan,
                selected2: child.val().selected2,
                selected3: child.val().selected3,
                key: child.key,
                status: child.val().status,
                Keberatan : child.val().Keberatan
              });
            });
          this.setState({listpengajuan:pengajuan});
          this.setState({loading:false});
      });
    }
  }

Yup, berkat si duo async dan await akhirnya saya bisa menyelesaikan case diatas.

Sampai disini saya merasa bahwa pemograman javascript itu tidak sulit. Namun sukar untuk menjadi master. Kenapa saya bisa bilang begitu, karena javascript akan selalu mengalami perubahan kedepan. Sehingga akan selalu ada teknik pemograman baru yang ada pada pemograman ini.

Tinggalkan Komentar

 

SO WHAT YOU THINK ?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis,
possimus commodi, fugiat magnam temporibus vero magni recusandae? Dolore, maxime praesentium.

Contact With Me