Arsitektur Microservice untuk Data Publik (Bagian 2) : Implementasi dengan Next.js

Artikel ini adalah bagian dari Serial Arsitektur Microservice untuk Data Publik, sebuah uraian untuk membuat data publik tersedia . Lihat Bagian 1.

Microservice tanpa Database? Bisa.

Di artikel sebelumnya, saya membahas desain layanan data publik yang lebih baik. Mulai dari paling sederhana hingga kompleks. Tapi seperti kata Linus Trovalds, “Talk is cheap. Show me the code.” Sekarang waktunya untuk singsingkan lengan baju dan meraih kibor.

Di kesempatan ini, saya akan membuat API untuk menampilkan data perusahaan/emiten yang terdaftar di Bursa Efek Indonesia alias IDX. Data tersebut akan disimpan sebagai file JSON, sehingga menghilangkan kebutuhan pemakaian database. Selanjutnya, saya membutuhkan framework FE yang dilengkapi manajemen routing dan request-response. Next.js adalah kandidat yang cocok, ditambah dengan opsi integrated deploy lewat Vercel. Gratis pula.

Gambar 1: Arsitektur Microservice

Mengacu pada Gambar 1, yang perlu dilakukan sebagai berikut

1. Mencari data emiten publik. https://idx.co.id/ adalah tempat paling cocok untuk mencari.
2. Mengubah data menjadi JSON.
3. Membuat repository Next.js, lalu mulai koding.
4. Deploy microservice ke Vercel.

Karena saya baik hati dan lolos Tes Karakteristik Kepribadian CPNS, saya sudah sediakan data emiten format JSON. Jika berkenan, silakan repo Github saya di-star ya😉. Kalau penasaran bagaimana cara menjalankan langkah 1 dan 2, silakan baca artikel saya tentang data wrangling di dev.to (bahasa Inggris ya).

Kalau ingin melihat hasil akhirnya, bisa cek ke https://emiten-api.vercel.app/api/emiten. Repository bisa dicek di https://github.com/yogski/emiten-api. Tutorial lengkapnya silakan baca sampai selesai ya.

Implementasi dengan Next.js

Sekarang saya beralih ke repository. Pastikan Node.js dan NPM sudah dipasang di komputer. Kalau belum, silakan merujuk pada halaman berikut. Selanjutnya, pilih workspace di komputer. Oh ya, di artikel ini saya pakai Windows 10. OS lain bisa menyesuaikan. Lalu masukkan perintah berikut.

npx create-next-app emiten-api -e api-routes

Sabar menanti setup Next.js

Folder repository emiten-api akan muncul dengan template ala REST API. Isinya kurang lebih seperti ini.

-- components
 |-- Person.js  --> untuk tampilan front-end (tidak diperlukan)
-- node_modules
-- pages
 |-- api/people --> endpoint API yang penting untuk microservice ini
   |-- [id].js
   |-- index.js
 |-- person --> route untuk front-end denga tampilan HTML (tidak diperlukan)
   |-- [id].js
 |-- index.js --> tidak diperlukan
.gitignore
data.js --> template data, bisa diganti dengan data emiten
package-lock.json
package.json
README.md

Ini mempercepat kita membuat microservice. Hanya perlu penyesuaian untuk megganti data dan logika template (Person) dengan emiten.

Tahap selanjutnya adalah bersih-bersih template. Di dalam template terdapat folder/file yang tidak diperlukan, seperti /components , /pages/person , /pages/index.js , dan data.js . Semuanya dihapus agar lebih ramping.

Selanjutnya, pasang file JSON daftar emiten terdaftar di IDX. Setelah itu, ganti nama folder untuk mengganti route di API. Misalnya folder person diganti dengan nama emiten .

Kemudian, diketahui bahwa pencarian emiten biasanya berdasarkan kode emiten yang terdiri dari 4 huruf kapital. Untuk mengakomodasi hal tersebut, file [id].js dalam folder /api/emiten (sudah diganti dari person ya) diubah menjadi [code].js . Hasil akhirnya, struktur project emiten-api bisa lebih ramping, seperti ini.

-- node_modules
-- pages
 |-- api/emiten --> ganti nama folder
   |-- [code].js --> ganti nama file
   |-- index.js
.gitignore
indonesia_public_companies.json --> ganti sumber data
package-lock.json
package.json
README.md

Sekarang beralih ke logic dari API. Ada 2 endpoint yang telah dibuat, /api/emiten dan /api/emiten/{:code} . Isinya jadi seperti berikut.

Apa lagi?

Sudah beres development, sekarang tinggal coba dijalankan dengan perintah berikut:

npm run dev

Lalu akses http://localhost:3000/api/emiten/BBRI , maka akan terlihat respon sebagai berikut.

{
  "kode_emiten":"BBRI",
  "nama_emiten":"Bank Rakyat Indonesia (Persero",
  "tanggal_listing":"2003-11-10T00:00:00",
  "jumlah_saham":122112351900,
  "kategori":"Utama"
}

Tambah Endpoint Baru

Perlu tambah endpoint baru? Tidak masalah. Kita tentukan dulu routing, kemudian tambahkan file atau folder baru. Misalnya saya akan membuat endpoint untuk tampilkan emiten berdasarkan kategori. Saya tentukan routing /api/emiten/category/{:category} . Berarti saya perlu membuat folder category dalam emiten , dan di dalamnya buat file [category].js .

Struktur project akan jadi seperti berikut.

-- node_modules
-- pages
 |-- api/emiten --> ganti nama folder
   |-- [code].js --> ganti nama file
   |-- index.js
   |-- categories
     |-- [category].js
.gitignore
indonesia_public_companies.json --> ganti sumber data
package-lock.json
package.json
README.md

Implementasi endpoint untuk pencarian berdasarkan kategori

Deployment

Mengikuti panduan resmi di halaman ini, deployment Next.js ke Vercel sangat praktis. Intinya yang perlu dilakukan adalah

1. Daftar Vercel
2. Hubungkan Vercel ke repository Github yang akan di-deploy.
3. Pastikan Vercel memiliki permission untuk akses repository yang akan di-deploy.
4. Begitu sudah berhasil, proses deployment gratis akan berjalan cepat.
5. Jika deployment berhasil, kita akan mendapat address dari microservice. Saya dapat https://emiten-api.vercel.app/api/emiten/BBCA dengan tampilan seperti ini.

Beberapa Hal Kecil yang Penting

• Jangan lupa buat dokumentasi API anda, routing bagaimana, parameter URL apa saja, dll.
• Jangan berharap membuat microservice yang siap naik production dari artikel sini. Ini adalah proof of concept.
• Jangan berharap kinerja response time di bawah 200ms. Orang deploy aja gratisan 😅.

Penutup

Implementasi dengan Next.js ini memungkinkan data publik tersedia lewat standar REST API dan dijalankan oleh microservice ringan. Tentunya ada beberapa kekurangan seperti pembaruan data yang harus manual. Namun secara keseluruhan manfaatnya lebih besar dan kekurangannya bisa diantisipasi.

Besar harapan saya tulisan ini dibaca oleh pegiat teknologi dan pengambil kebijakan di sektor publik. Kalau jadi diimplementasikan ya lumayan, punya segudang API yang bisa dimanfaatkan publik.

Artikel ini adalah bagian dari Serial Arsitektur Microservice untuk Data Publik. Lihat artikel bagian 1di sini (Bagian 1). Lihat juga artikel lain tentang teknologi dan implementasinya untuk berbagai industri di Medium dan dev.to saya. [Yogi Saputro : Full Stack Developer | M.B.A | creating useful IT solutions]