Cikaldev

Implementasi API RajaOngkir dengan NodeJS + Express

on nodejsjavascriptapi

Pandemi bukan jadi satu halangan atau alasan bagi kita para developer untuk tetap berkarya, pasalnya sebelum masa pandemi pun, sebagian besar dari kita bekerja secara remote dari rumah / kantor / bahkan ada yang sambil duduk santuy di coffee shop.

Hari ini saya akan sharing dengan kalian, cara Implementasi API RajaOngkir dengan NodeJS dan Express. Saya asumsikan di PC / Laptop kalian sudah terinstall NodeJS, dan sebelumnya kalian sudah pernah berkenalan / latihan dengan NodeJS. Jadi kita tidak perlu membahas hal-hal mendasar yang sudah ada di jawaban dan tutorial nya di belantara Internet, saya akan langsung ke pokok pembahasan.

Demo sederhana bisa kalian kunjungi pada link berikut, demo.

Link dokumentasi RajaOngkir pada link berikut, dockumentasi.

Real world, use case

Fitur Cek Ongkos Kirim (Ongkir), biasanya akan digunakan pada sistem / aplikasi / website Toko Online. Untuk meng-kalkulasi total belanja berikut ongkos kirim, fitur ini akan digunakan sebelum sistem / aplikasi / website yang kita buat menerbitkan Invoice / Nota Tagihan atas pembelanjaan Customer / Pelanggan.

Pada project ini saya menggunakan akun Starter Plan, yang hanya memiliki kemampuan untuk mengakses endpoint Province, City, Costs, dan limitasi hanya pada 3 kurir tersohor JNE, POS Indonesia dan Tiki. Singkat kata project kita kali ini hanya akan implementasi penarikan data pendukung wilayah dan implementasi cek ongkos kirim.

lu-mayan lah daripada lu-manyun. 😜

Persiapan

Jika persiapan sudah matang, mari kita langsung gaskeun main becek-becekan..

Proses

Buat sebuah folder baru dimanapun kalian inginkan, kemudian beri nama “ongkir”, lalu buka folder tersebut di Text Editor kesayangan kalian.

image

Lakukan inisialisasi NPM, dengan perintah :

npm init -y

Lanjut install paket yang kita butuhkan, dengan perintah :

npm install express cors axios --save

Struktur folder sudah dibuat, instalasi paket pun sudah selesai. Saatnya kita lanjut ke pembuatan kode backend dengan NodeJS + Express.

Buat sebuah file index.js pada root folder project kita, kemudian isi dengan kode berikut lalu simpan :

Penjelasan singkat index.js :

Lanjut ke proses berikutnya, buat sebuah file dengan nama api.js didalam folder routes/api.js, kemudian isi dengan kode berikut lalu simpan :

Penjelasan singkat api.js :

Sampai tahap ini, kode backend sudah berhasil kita selesaikan. Mari beralih ke proses berikutnya yaitu pembuatan kode frontend, jangan berharap Too Fancy alias muluk-muluk, karena pada project ini saya tidak menitik beratkan tampilan yang keren dan kekinian, yang saya share adalah logic dan cara Implementasi API RajaOngkir dengan NodeJS dan Express (gak pake bootstrap) 😜

Lanjut buat sebuah file dengan nama index.html didalam folder public/index.html, kemudian isi dengan kode berikut lalu simpan :

Penjelasan singkat index.html :

Lanjut ke proses berikut nya, buat sebuah file dengan nama script.js didalam folder public/js/script.js kemudian isi dengan kode berikut lalu simpan :

Tinggal 1 file terakhir yang harus kita buat, sederhana saja untuk mempercantik tampilan form yang sudah kita buat pada file “index.html”. Silahkan buat sebuah file dengan nama style.css didalam folder public/css/style.css kemudian isi dengan kode berikut lalu simpan :

Dan saat nya kita lakukan percobaan pada project ini, apakah sudah berjalan sebagaimana mesti nya? atau terdapat error, karena typo atau salah ketik dalam penulisan kode. 😃

Untuk menyalakan server, silahkan jalankan perintah berikut :

node index.js

Jika server sudah berjalan, silahkan buka browser anda kemudian akses URL http://localhost:4000

Semoga bermanfaat..