Cara konfigurasi firestore dan react js

 Firebase salah satu layanan cloud computing yang diakuisisi google memiliki beberapa layanan. diantaranya yaitu oAuth, realtime database, cloud firestore, machine learning, dan banyak lagi.

pada tutorial ini kita akan mencoba mengintegasikan antara cloud firestore dengan reactjs (bukan react native). sebenarnya ada 2 database yang bisa dipakai untuk realtime data, yaitu realtime database dan cloud firestore, tapi saya disini lebih menyukai firestore.

kenapa firestore ? bukan realtime database?. simple, karena itu adalah database terbaru keluaran firebase dan menurut saya lebih mudah menggunakan firestore daripada realtieme database.

ok.. next

Tahap persiapan

1. pertama kita buka firebase dulu di browser. klik tombol mulai untuk membuat projek baru kita.

 



3. lanjut kita klik tambahkan projek

 



4. masukkan nama projek. disini saya menamai projek saya dengan chat saja. penting untuk diingat, jangan mencentang aktifkan google analityc untuk projek ini. alasannya karena kita tidak membutuhkannya tentu saja.

 



5. ok klik buat projek, lalu tunggu beberapa saat hingga projek selesai dibuat.


Memulai membuat projek web

saat kita sudah masuk  ke dashboard, firebase menyediakan berbagai pilihan untuk platform, seperti web, android, ios, atauput unity.

1. untuk memulai aplikasi web, kita klik tanda berikut

 



2. pada form nama aplikasi kita tambahkan nama aplikasi kita yaitu testing. lalu klik tambahkan aplikasi. yang bawah tidak usah dicentang

 



3. seperti yang kalian lihat. akan muncul script dari firebase untuk kita gunakan nantinya di react. silakan kalian salin kode yang dikotak merah yang lainnya abaikan saja.



script ini tidak usah dimengerti juga tidak apa-apa, karena sript ini hanya untuk menghubungkan firebase dengan aplikasi kita.

4.  buat file baru bernama firebase.js lalu paste dan edit kode yang tadi sehingga menjadi seperti gambar. simpan filenya di direktori apapun. 

 



5. balik ke projek firebase. klik lanjutkan ke konsol. disebelah kiri klik cloud firestore lalu buat database.

 



6. kita pilih yang mulai dalam mode pengujian saja, agar lebih enak saat debugging nantinya.

 



7. pilih lokasi server di asia-south1, agar lebih cepat saat kita mengakses nantinya. ok klik aktifkan, dan tunggu sampai selesai.(biarkan saja errornya)

 



Mencoba hasil konfigurasi

sekarang kita coba untuk membuat satu saja koleksi dan dokumen sederhana, lalu memanggilnya di project react js kita.

1. kita buat koleksi bernama chat,

 



2. dan dokumen dengan field/kolom message, dengan nilai 'hi im firestore'. untuk id pilih isi otomatis.

 


 



3. buat projek baru dengan create-react-app bernama testing, bagi yang belum menginstal create-react-app, bisa lihat di internet cara installnya



4. install library firebase sdk. gunanya agar kita bisa berkomunikasi dengan firebase tentu saja. saya sarankan menggunakan yarn daripada npm, karna npm kalau sinyal lemah akan error.

 kodenya : yarn add firebase

5. masukkan file firebase.js yang tadi kita buat ke direktori src yang ada di projek testing. buat komponen baru dengan nama Testing.js (pakai huruf besar diawal). pada Testing.js masukkan kode berikut. dan save.

 



6. edit juga App.js yang ada di folder src menjadi seperti berikut. lalu save

 


ok sampai disini seharusnya masih tidak ada masalah, tahap terakhir. kita tinggal menjalankan kode kita.

7. buka command prompt, masuk ke direktori react kalian, dan jalankan perintah dibawah ini. browser akan terbuka dan jika berhasil . browser akan memunculkan pesan kita

 perintah : yarn start

8.  hasil akhirdi browser akan memunculkan kata 'Hi im firebase' yang merupakan nilai dari document kita. jika kalian ganti nilai dari field message yang ada di firebase dengan 'hi all'. maka seharusnya kata yang ditampilkan dibrowser akan otomatis berubah tanpa harus di refresh. ini karena firestore merupakan realtime database, sehingga setiap kali ada perubahan data pada koleksi yang kita snapshot (lihat onSnapshot di Testing.js), maka browser akan otomatis menyesuakannya. dibawah adalah hasil akhir dari program kita yang sangat sederhana.



 

 Akhir kata

sebenarnya inti dari tutorial ini ada di library firebase dan cara menggunakannya di reactjs, dan juga bagaimana cara memasukkan kode script dari firebase itu sendiri.

saya yakin tutorial ini masih belum sempurna, untuk itu jika kalian menemukan kesulitan  ataupun ada salah dalam penulisan artikel ini, saya harap kalian mau berkomentar disini.pasti saya jawab jika saya online. terimakasih.