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

API dan JSON

1. API (Application Programming Interface)

API adalah singkatan dari Application Programming Interface, dan memungkinkan developer untuk mengintegrasikan dua bagian dari aplikasi atau dengan aplikasi yang berbeda secara bersamaan. API terdiri dari berbagai elemen seperti function, protocols, dan tools lainnya yang memungkinkan developers untuk membuat aplikasi. Tujuan penggunaan API adalah untuk mempercepat proses development dengan menyediakan function secara terpisah sehingga developer tidak perlu membuat fitur yang serupa. Penerapan API akan sangaat terasa jika fitur yang diinginkan sudah sangat kompleks, tentu membutuhkan waktu untuk membuat yang serupa dengannya. Misalnya: integrasi dengan payment gateway. Terdapat berbagai jenis sistem API yang dapat digunakan, termasuk sistem operasi, library, dan web.

API yang bekerja pada tingkat sistem operasi membantu aplikasi berkomunikasi dengan layer dasar dan satu sama lain mengikuti serangkaian protokol dan spesifikasi. Contoh yang dapat menggambarkan spesifikasi tersebut adalah POSIX (Portable Operating System Interface). Dengan menggunakan standar POSIX, aplikasi yang di-compile untuk bekerja pada sistem operasi tertentu juga dapat bekerja pada sistem lain yang memiliki kriteria yang sama. Software library juga memiliki peran penting dalam menciptakan compatibility antar sistem yang berbeda.

Aplikasi yang berinteraksi dengan library harus mengikuti serangkaian aturan yang ditentukan oleh API. Pendekatan ini memudahkan software developer untuk membuat aplikasi yang berkomunikasi dengan berbagai library tanpa harus memikirkan kembali strategi yang digunakan selama semua library mengikut API yang sama. Kelebihan lain dari metode ini menunjukkan betapa mudahnya menggunakan library yang sama dengan bahasa pemrograman yang berbeda.

Seperti namanya, Web API dalam diakses melalui protokol HTTP, ini adalah konsep bukan teknologi. Kita bisa membuat Web API dengan menggunakan teknologi yang berbeda seperti PHP, Java, .NET, dll. Misalnya Rest API dari Twitter menyediakan akses read dan write data dengan mengintegrasikan twitter kedalam aplikasi kita sendiri.

2. JSON (JavaScript Object Notation)

JSON (JavaScript Object Notation) adalah sebuah format untuk berbagi data. Seperti dapat kita lihat dari namanya, JSON diturunkan dari bahasa pemrograman javaScript, akan tetapi format ini tersedia bagi banyak bahasa lain termasuk Python, Ruby, PHP, dan Java. JSON biasanya dilafalkan seperti nama "Jason."

JSON menggunakan ekstensi .json saat ia berdiri sendiri. Saat didefinisikan di dalam format file lain (seperti di dalam .html), ia dapat tampil didalam tanda petik sebagai JSON string, atau ia dapat dimasukkan kedalam sebuah variabel. Format ini sangat mudah untuk ditransfer antar server web dengan klien atau browser.

Karena sangat mudah dibaca dan ringan, JSON memberikan alternatif lebih baik dari XML adn membutuhkan formatting yang tidak banyak. 

references:

https://www.codepolitan.com/mengenal-apa-itu-web-api-5a0c2855799c8

https://www.codepolitan.com/mengenal-format-json-59e8152dd0e51