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/

Pengertian API dan JSON

informatifplace.blogspot.com 

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.

Fitur Web API

Untuk membuat Web API, beberapa hal yang harus disediakan adalah:

1. Mendukung fungsi CRUD yang bekerja melalui HTTP protocol dengan method GET, POST, PUT dan DELETE
2. Memiliki response Accept Header dan HTTP status code
3. Response dengan format JSON, XML atau format apapun yang kamu inginkan. Akan tetapi kebanyak digunakan kedalam format JSON.
4. Mendukung fitur MVC seperti routing, controllers, action results, filter, model, IOC container, dll.
5. Web API dapat berjalan di Apache atau web server lainnya yang didukung sesuai bahasa pemrograman yang digunakan.

Web API seperti sebuah alamat web (end point) yang dibuat untuk menangani beberapa task sesuai request yang diterima, juga terkadang memiliki parameter sebagai data yang dibutuhkan agar dapat menampilkan hasil yang diinginkan, juga pada beberapa kasus untuk mengakses API dibutuhkan kode otentikasi yang telah diizinkan untuk melihat data yang diinginkan. Semua rule ini ditentukan oleh programmer yang membuatnya.

Perbedaan Web API dan Web Service

Seringkali saya mendapat pertanyaan tentang apa sih perbedaan antara web API dan web service? Berikut adalah perbedaan diantara keduanya:

1. Semua web service menggunakan API tapi tidak semua API digunakan sebagai web service
2. Web service memfasilitasi untuk melakukan interaksi antara dua perangkat atau aplikasi melalui jaringan. Sedangkan API bertindak sebagai penghubung antara dua aplikasi berbeda sehingga bisa berkomunikasi satu sama lain baik dengan ataupun tanpa jaringan.
3. Web service hanya menggunakan 3 style yaitu SOAP, REST, atau XML-RPC untuk berkomunikasi sedangkan API dapat menggunakan style apapun.
4. Web service selalu membutuhkan jaringan untuk pengoperasiannya sedangkan API tidak selalu memerlukan jaringan untuk operasinya.

 

 JSON 


JSON adalah salah satu format yang digunakan untuk pertukaran data antar aplikasi. Format ini relatif ringan, mudah dibaca dan dibuat karena pada dasarnya JSON berbasis javascript. Kepanjangan JSON sendiri adalah Javascript Object Notation.
Sebelum kita membahas JSON lebih dalam mari kita sedikit bercerita tentang teknologi pertukaran data antar web.

Pertukaran data antar Web

Dulu masih jarang ada Web yang dapat saling bertukar data dengan web lainnya seperti halnya facebook yang dapat saling bertukar data dengan web pihak ketiga atau bahkan aplikasi pihak ketiga. Namun setelah kehadiran XML sebagai format pertukaran data antar aplikasi (web/desktop) semuanya bukan tidak mungkin lagi untuk dilakukan.
Ya, sebelum adanya JSON, XML lah yang biasa digunakan untuk saling bertukar data dan hingga saat ini XML masih digunakan seperti pada RSS Feed yang mungkin menjadi santapan anda sehari-hari. XML sendiri adalah kependekan dari eXtensible Markup Language, jika anda senang “bercengkrama” dengan HTML anda akan familiar dengan XML, hanya saja tag-tag yang ada adalah buatan anda sendiri. Kira-kira beginilah format penulisan XML :

<phonebook>
    <contact>
        <name>Rian Ariona</name>
        <phone>+628572182XXXX</phone>
        <address>Bandung</address>
    </contact>

    <contact>
        <name>John Doe</name>
        <phone>+169572582XXXX</phone>
        <address>Los Angeles</address>
    </contact>

    <contact>
        <name>George</name>
        <phone>+196252145XXXX</phone>
        <address>Kanada</address>
    </contact>
</phonebook>

Sangat mudah untuk dimengerti bukan, dan inilah format yang sering digunakan dalam pertukaran data suatu web.

XML Bukanlah Satu-satunya

Namun kini, telah hadir JSON sebagai format baru untuk pertukaran data web. JSON adalah kependekan dari JavaScript Object Notation. Penulisan format data menggunakan JSON sangatlah singkat karena menggunakan notasi-notasi javascript seperti kurung siku [] dan kurung kurawal {}. Jika kita konversi data XML di atas ke dalam format JSON, kira-kira menjadi seperti berikut :

{
    "phonebook" : {
        "contact":[
        {
            "name":"Rian Ariona",
            "phone":"+628572182XXXX",
            "address":"bandung"
        },{
            "name":"John Doe",
            "phone":"+169572582XXXX",
            "address":"Los Angeles"
        },{
            "name":"George",
            "phone":"+196252145XXXX",
            "address":"Kanada"
        }
        ]
    }
}

Dan berikut ini adalah contoh penggunaan JSON dalam HTML menggunakan javascript:

<!DOCTYPE HTML>
<html>
<head>
    <title>JSON</title>
    <script>
        var person={
            "phonebook" : {
                "contact":[
                 {
                     "fname":"Rian Ariona",
                     "phone":"+628572182XXXX",
                     "address":"bandung"
                 },{
                     "fname":"John Doe",
                     "phone":"+169572582XXXX",
                     "address":"Los Angeles"
                 },{
                     "fname":"George",
                     "phone":"+196252145XXXX",
                     "address":"Kanada"
                 }
                ]
            }
        }

        for(i=0;i");
            document.writeln(person.phonebook.contact[i].phone +" ");
            document.writeln(person.phonebook.contact[i].address +" ");
        }
    </script>
</head>
<body>
    
</body>
</html>

Dari kode diatas kita melakukan perulangan untuk pengambilan data-data yang terdapat di dalam objek berformat json lalu menampilkan semua data tersebut secara berurutan.

Simple & Fast

Karena kesederhanaan penulisan JSON, ukuran file yang dihasilkanpun menjadi lebih ramping dibandingkan XML (karena terus mengulangi kata yang sama dalam tag-tag yang digunakan). Hal ini berimbas pada kecepatan loading transfer data, pertukaran data JSON lebih cepat jika dibandingkan dengan XML.
Oleh karena itu banyak situs-situs besar yang menggunakan JSON sebagai format pertukaran data. Sebagai contoh, twitter menyediakan API untuk digunakan pada situs pihak ketiga atau aplikasi pihak ketiga misalnya twitter client (tweetdeck dll). Data yang dikirimkan dari hasil request berupa data berformat JSON.

Kesimpulan

Dengan artikel yang singkat ini setidaknya anda sudah paham untuk keperluan apa API digunakan. Metode pendekatan yang digunakan untuk berkomunikasi dengan API menggunakan protokol yang telah kami tuliskan diatas masih tergolong protokol yang umum digunakan, masih ada banyak lagi yang belum kami tuliskan seiring perkembangan. Sedangkan bagaimana cara membuat API akan dibahas di artikel selanjutnya tergantung bahasa pemrograman apa yang digunakan.