ReactJS dan Firebase

>> Apa itu react js ?

React JS adalah sebuah pustaka/library javascript yang bersifat opensource untuk membangun User Interface yang dibuat oleh Facebook. React JS hanya mengurusi semua hal yang berkaitan dengan tampilan dan logika di sekitarnya. React JS ini diciptakan dengan tujuan untuk :

“Membangun aplikasi skala besar dengan data yang berubah dan terus berubah dari waktu ke waktu.”

>> Keunggulan react js ?

1. Mudah dipahami
   Gaya penulisan yang deklaratif membuat react js mudah dipahami dan membuat react mudah di prediksi jika ada kesalahan penulisan kode.
2. JSXJSX adalah sebuah extension javascript yang di gunakan react untuk menulis HTML di dalam Javascript. JSX bukanlah sintaks javascript, sehingga browser tidak bisa membaca sintaks ini, di butuh kan sebuah JSX compiler yang di gunakan untuk menterjemahkan JSX kedalam bahasa regular javascript agar bisa terbaca oleh browser. Saya sendiri menggunakan BABEL JS sebagai JSX compilernya.
3. ModularUntuk membuat aplikasi dengan skala besar, kita dapat menulis kode-kode dengan skala yang lebih kecil untuk di satukan menjadi aplikasi utuh, dan dapat di gunakan kembali (reusable).
4. ScalableReact js dapat menangani dengan sangat baik sebuah program dengan skala yang besar yang dapat menampilkan perubahan data yang sangat kompleks.
5. FlexibelDengan belajar 1 libary saja kita dapat membuat aplikasi Web, Moblie, maupun Desktop.
6. Effisien dan Cepat
   React JS menciptakan Virtual DOM untuk mempercepat urusan perubahan DOM. Semua operasi di kerjakan di dalam Virtual DOM, setelah operasi selesai React JS menulis perubahan tersebut di dalam DOM. Contoh kasusnya seperti ini: “Jika kita menulis dalam secarik kertas menggunakan spidol, apabila terjadi kesalahan penulisan kita harus menulis di kertas yang baru. Berbeda jika kita menggunakan pensil, cukup menghapus dan memperbaiki pada bagian yang salah ”.
7. Mudah DebuggingKetika kita mulai menggunakan React JS, jangan lupa menginstall extensi resmi React JS. Kita dapat dengan mudah menjelejah Virtual DOM pada aplikasi yang sudah kita buat, sehingga jika ada bug bisa cepat ditemukan.
8. SEO Bagus
   Salah satu masalah terbesar dari library Javascript pada umumnya adalah mereka sidak support search engine. Meskipun sudah banyak perbaikan, mesin pencari umumnya masih mengalami kesulitan. Namun tidak dengan React JS, kita dapat menjalankan React JS pada server dan Virtual DOM diberikan ke browser sebagai halaman web biasa, sehingga sangat support SEO.

>> Kelemahan react js ?

Meskipun React JS sangat powerfull, namun juga memiliki beberapa kelemahan antara lain:

1. Hanya View LayerReact js hanya sebuah pustaka View Layer, untuk membangun aplikasi besar kita harus menyusun sendiri kebutuhan aplikasi lainya seperti data layer, router, struktur aplikasi dan event system(kecuali event DOM).
2. Dokumentasi tidak bagusBeberapa sumber artikel yang saya baca mengatakan bahwa dokumentasi react js tidak bagus karena informasi yang di berikan tidak lengkap, meskipun seperti itu kita tetap bisa mempelajarinya kok, tentunya dengan semangat dan ketekunan.
3. Permasalahan lisensi
   Baru-baru ini muncul issue tentang lisensi react. Sebetulnya issue ini sudah ada sejak 2015, namun tampaknya ada pihak-pihak yang belum puas dan mempermasalahkanya. Menurut pemahaman saya bahwa “facebook memperbolehkan kita menggunakan react js untuk mengembangkan produk kita dengan catatan tidak untuk berkompetisi dengan produknya facebook”. Tapi sebenarnya ini tidak masalah , temen-teman bisa baca penjelasanya detail disini.
4. Dukungan browserReact js tidak mendukung browser versi lama, hanya browser versi baru. React js menghentikan dukungan pada browser Internet Explorer versi 8, sampai saat ini react yang bisa jalan di IE 8 adalah react versi v0.14. Versi terbaru dari react hanya mendukung Internet Explorer versi 9 keatas.

Contoh Program

membuat  file package.json seperti ini:




Kemudian buat file webpack.config.js, ketik pengaturan seperti berikut:



Selanjutanya teman-teman buatlah folder-folder dan file-file yang diperlukan (folder harus sesuai dengan yang kita atur pada webpack config).







File bundle.js jangan dibuat karena akan terbuat secara otomatis saat kita menajalankan webpack nanti.
Kemudian pada file src/js/app.js, ketiklah perintah berikut:








 

Firebase adalah BaaS (Backend as a Service) yang saat ini dimiliki oleh Google. Firebase ini merupakan solusi yang ditawarkan oleh Google untuk mempermudah pekerjaan Mobile Apps Developer. Dengan adanya Firebase, apps developer bisa fokus mengembangkan aplikasi tanpa harus memberikan effort yang besar untuk urusan backend. So it’s awesome right 🙂

Beberapa fitur yang dimiliki oleh Firebase adalah sebagai berikut :

1. Firebase Analytics.
2. Firebase Cloud Messaging dan Notifications.
3. Firebase Authentication.
4. Firebase Remote Config.
5. Firebase Real Time Database.
6. Firebase Crash Reporting.

Dua fitur yang menarik adalah Firebase Remote Config dan Firebase Real Time Database. Secara sederhananya, Remote Config adalah fitur yang memungkinkan developer mengganti / mengubah beberapa konfigurasi aplikasi Android / iOS tanpa harus memberikan update aplikasi via Play Store / App Store. Salah satu konfigurasi yang bisa dimanipulasi adalah seperti warna / tema aplikasi.

Sedangkan Firebase Real Time Database adalah fitur yang memberikan sebuah NoSQL database yang bisa diakses secara Real Time oleh pengguna aplikasi. Dan hebatnya adalah aplikasi bisa menyimpan data secara lokal ketika tidak ada akses internet, kemudian melakukan sync data segera setelah mendapatkan akses internet.

Nah disini kita akan membahas fitur-fitur yang disebutkan di atas, untuk mengenal lebih dalam mengenai Firebase.

1. Firebase Analytics

Sebenarnya Analytics dari Firebase tidak jauh berbeda dengan Analytics yang digunakan oleh Google Analytics. Hanya saja Firebase menyediakan dashboard yang dirasa lebih sederhana dibandingkan dashboard yang digunakan oleh Google Analytics.

Firebase menawarkan fitur Analytics untuk keperluan koleksi data dan reporting untuk aplikasi Android / iOS. Koleksi data yang bisa digunakan pun bervariasi. Beberapa contohnya adalah kita bisa membuat report untuk pengguna aplikasi di negara Indonesia saja, atau negara Jepang saja, dll.

Selain itu kita bisa melihat fungsi / bagian mana dari aplikasi kita yang paling sering digunakan oleh user. Salah satu hal yang paling menarik dari Analytics ini adalah kita bisa membuat segmentasi user berdasarkan ‘user attribute’. User attribute ini adalah parameter yang bisa kita gunakan sebagai filter untuk reporting dan notifikasi. Contoh sederhananya diibaratkan untuk aplikasi online shop. Dengan ‘user attribute’, kita bisa mencari tahu berapa jumlah user yang membeli handphone dengan merk ‘A’, atau berapa jumlah user yang membeli sepeda. Atau kita bahkan bisa mencari tahu pada jam berapa paling banyak terjadi transaksi yang dilakukan user.

Nah dengan data-data ini kita juga bisa memberikan notifikasi kepada segmentasi user yang kita inginkan, contohnya kita hanya ingin mengirimkan notifikasi untuk user yang telah membeli handphone dengan merk ‘A’. Selain itu masih ada banyak fitur-fitur dari Analytics yang ditawarkan oleh Firebase.

2. Firebase Cloud Messaging dan Notifications.

Firebase Cloud Messaging / FCM, adalah layanan yang diberikan oleh Firebase untuk menggantikan Google Cloud Messaging (GCM). Pihak Google menyarankan untuk aplikasi yang masih menggunakan GCM untuk segera migrasi ke FCM.

Fitur-fitur yang diberikan oleh GCM sebenarnya tidak terlalu jauh berbeda dengan GCM. Dengan FCM kita bisa memberikan push notification dan membuat komunikasi dua arah antara device. Teknologi yang digunakan terbagi menjadi dua :

• XMPP (Extensible Messaging and Presence Protocol)
• HTTP (Hypertext Transfer Protocol).

Untuk XMPP kita harus membangun server XMPP terlebih dahulu, sedangkan untuk HTTP kita bisa menggunakan console yang disediakan oleh Firebase. Kita juga bisa mengatur push notification yang ingin kita kirim, contohnya kita hanya ingin mengirimkan notifikasi kepada segmentasi user / audience yang membeli handphone dengan merk ‘A’. Atau kita ingin mengirimkan notifikasi hanya kepada user yang menggunakan aplikasi dengan versi 1.0. Selain itu ada juga fitur untuk mengirimkan notifikasi berdasarkan ‘topic’. Fitur ini mirip dengan ‘user attribute’, tetapi dengan ‘topic’, user bisa melakukan kegiatan ‘subscribe’ dan ‘unsubscribe’.

3. Firebase Authentication

Firebase authentication adalah layanan yang diberikan oleh Firebase untuk fungsi user membership. Fitur-fitur yang diberikan adalah register / login dengan beberapa metode :

– Alamat email dan password.
– Akun Google.
– Akun Facebook.
– Akun Twitter.
– Akun GitHub.
– Akun Anonymous.

Fitur yang menarik adalah fitur login dengan akun anonymous. Contohnya adalah user bisa melakukan login secara sementara ketika melihat-lihat barang di aplikasi online shop kita. Nah ketika user ingin melakukan pembelian, maka user tersebut diharuskan untuk login dengan salah satu metode yang didukung Firebase (email-password, Google, Facebook, Twitter, GitHub). Setelah user tersebut login, kita bisa mengumpulkan data-data yang dilihat oleh user tersebut ketika masih menggunakan akun anonymous, kemudian menggabungkannya dengan user yang sekarang telah login dengan salah satu metode login yang dipilih.

Salah satu tujuan penggunaan akun anonymous adalah supaya kita tidak perlu memaksa user untuk login, sebelum user tersebut ingin melakukan transaksi.

4. Firebase Remote Config.

 SUMBER : 

https://medium.com/skyshidigital/1-pendahuluan-seminggu-menjadi-master-react-js-seri-tingkat-dasar-7b6ec7b04af 
https://coolnetkid.wordpress.com/2016/09/08/android-apa-itu-firebase/