Senin, 09 Desember 2019

React JS dengan Firebase

React Js adalah sebuah library JavaScript yang di buat oleh facebook. React bukanlah sebuah framework MVC. React adalah library yang bersifat composable user interface, yang artinya kita dapat membuat berbagai UI yang bisa kita bagi menjadi beberapa komponen.

Kenapa harus React?

1. Cepat dan Efisien
Karena berbasis komponen maka react hanya perlu me-render  resource yang berhubungan dengan data yang berganti, tidak perlu me-render seluruh resource .

2. Reusable (dapat digunakan berulangkali)
Komponen yang telah kita buat dapat kita gunakan berkali-kali pada saat dibutuhkan. Ini sangat berguna bagi kita untuk mempersingkat waktu dan mengurangi resource yang ada.

3. Library JavaScript
JSX (JavaScript Extension) singkatnya kita dapat menyematkan syntax HTML kedalam Javascript. Ini sangat membantu kita dalam proses development, apalagi dengan adanya  fungsi dari ES6 (Ecma Script).

4. Immutable State
Kita dapat memanajemen state yang ada dengan menggunakan Redux. Kita dapat mengatasi permasalahan mutable state dengan RamdaJs. Untuk state yang berinteraksi dengan API kita dapat menggunakan Redux-Saga.


Firebase adalah suatu layanan dari google untuk mempermudah para pengembang-pengembang aplikasi untuk mengembangkan aplikasinya. Firebase(BaaS ‘Backend as a Service’) ini merupakan solusi yang ditawarkan oleh Google untuk mempermudah pekerjaan Developer. Dengan adanya Firebase, apps developer bisa fokus mengembangkan aplikasi tanpa harus memberikan effort yang besar untuk urusan backend.


Implementasi

Pertama, kita harus punya proyek di Firebase. Untuk buat proyek baru mudah, hanya butuh akun Google. Setelah buat proyek baru, akan terlihat page :




firebase telah menetapkan rules default. Rules tersebut menyatakan bahwa seseorang yang tidak login tidak bisa melihat database atau menulis database. Maka perlu dilakukan perubahan pada rules tersebut. Untuk merubah rules, klik pada menu database, lalu kunjungi tab rules. Dapat terlihat rules default yang telah ditetapkan secara default. Gantilah rules tersebut menjadi berikut:


jadi kita tidak perlu login untuk melakukan pengolahan data.


Sebelum memulai implementasi, untuk penjelasan berikut saya menggunakan ReactJS dan NodeJS yang dapat diinstal dengan library create-react-app dengan bantuan npm(node package manager). Untuk menginstall Firebase pada aplikasi ReactJS yang sudah terinstall, cukup jalankan perintah berikut pada folder aplikasi root react app.



Setelah menjalankan perintah tersebut, kita sudah dapat melakukan implementasi pada code. Pertama, cari folder src pada folder root aplikasi react. setelah itu buatlah file baru bernama “fire.js”. File ini akan berisi pengaturan database firebase, sebagai berikut:



Variable config bisa ditemukan di halaman project overview firebase.

Setelah itu mulai implementasi tabel untuk ambil data di database. Buat file baru di : /src/component/pages/pencocokanKornea.js



Dengan begitu, komponen di ReactJS untuk menerima data pasien selesai. Berikut contoh kondisi database yang digunakan.



Untuk mengisi data di database, gunakan file json yang berisi data dummy.

Sekian.


Referensi:
https://blog.internetclub.or.id/apa-itu-firebase/
https://www.kodingindonesia.com/react-js-dan-installasi/
https://medium.com/ppl-a1-iebs/weekly-individual-1-firebase-realtime-database-pada-reactjs-f70f453d4abd