Menerapkan Plugin dan Routing Pada Aplikasi Hapi JS

Andro Syahreza
5 min readMar 8, 2023

--

Pada artikel sebelumnya, Membuat Web Service Menggunakan Framework Hapi JS, kita telah berhasil membuat web service sederhana. Pada artikel ini, kita akan membahas penggunaan plugin pada Hapi JS dan bagaimana menerapkannya pada routing.

Menerapkan modularisasi dalam aplikasi

Semakin kompleks aplikasi yang dikembangkan, maka semakin kompleks kode yang kita buat. Oleh karena itu, dibutuhkan teknik modularisasi. Modularisasi adalah suatu konsep dalam pemrograman yang memecah sebuah program besar menjadi modul-modul kecil yang lebih terorganisir dan mudah dikelola. Dalam pengembangan web, modularisasi dapat dilakukan dengan memisahkan definisi routing, middleware, model, dan controller menjadi file-file terpisah yang masing-masing berisi fungsionalitas tertentu.

Silakan buka repositori Github untuk melihat kode sebelumnya.

Untuk melakukan modularisasi pada aplikasi Hapi, langkah-langkahnya adalah sebagai berikut:

  • Buatlah folder dengan nama src pada direktori utama aplikasi.
  • Pindahkan file server.js ke dalam folder src.
  • Buatlah folder di dalam src dengan nama routes.
  • Buatlah file baru dengan nama route.js di dalam folder routes.

Berikut adalah struktur folder setelah melakukan modularisasi:

- src
- server.js
- routes
- route.js

Membuat plugin dan menerapkan routing

Hapi memiliki fitur sistem plugin yang dapat memudahkan kita dalam memecah aplikasi menjadi bagian-bagian yang terisolasi, termasuk business logic dan utility yang dapat digunakan kembali. Kita dapat menggunakan plugin yang telah tersedia atau membuatnya sendiri sesuai dengan kebutuhan aplikasi yang sedang kita bangun.

Pada dasarnya, plugin pada Hapi adalah sebuah objek yang memiliki properti register. Selain itu, objek plugin juga harus memiliki properti name yang merupakan nama dari plugin tersebut, serta beberapa properti opsional seperti version dan lain-lain tergantung pada kebutuhan.

  • Properti register adalah sebuah fungsi yang menerima parameter server dan options.
  • Parameter server berisi instance server Hapi yang sedang berjalan.
  • Sedangkan parameter options berisi konfigurasi atau opsi tambahan yang dibutuhkan oleh plugin. Informasi lebih detail mengenai Plugin Hapi dapat ditemukan pada dokumentasi resmi Hapi.

Langsung saja kita buat plugin hapi!

Buka route.js dan ketikkan kode berikut:

const routes = [

];

module.exports = {
name: "routes",
version: '1.0.0',
register: async (server, options) => {
server.route(routes);
},
};

Terdapat variabel routes yang berisi array kosong. Nantinya variabel routes akan menampung setiap endpoint pada aplikasi. Selanjutnya, kita mengekspor sebuah objek dengan properti name, version, dan register. Pada fungsi callback, kita memanggil fungsi server.route dan memasukkan variabel routes sebagai parameter. Hal ini akan mendaftarkan rute-rute pada aplikasi yang sudah didefinisikan di dalam variabel routes. Dengan begitu, ketika plugin ini di-register pada server Hapi, maka rute-rute pada aplikasi akan otomatis terdaftar pada server Hapi.

Selanjutnya kita akan pindahkan route pada server.js ke dalam route.js , buka file server.js dan lakukan cut (ctrl + x) untuk route berikut:

  server.route({
method: "GET",
path: "/",
handler: (request, h) => {
return "Hello World !";
},
});

Paste code (ctrl +v) pada array routes di file route.js, dan hapus baris kode server.route(). Kemudian sisakan hanya objek-objek route saja, seperti contoh berikut:

const routes = [
{
method: "GET",
path: "/",
handler: (request, h) => {
return "Hello World !";
},
}
];

module.exports = {
name: "routes",
version: '1.0.0',
register: async (server, options) => {
server.route(routes);
},
};

Menginstall nodemon

Dalam Node JS, kita sering memulai ulang proses untuk menerapkan perubahan. Nodemon dapat membantu kita untuk memulai ulang proses secara otomatis. Buka terminal lalu jalankan perintah berikut:

npm install -D nodemon

Flag -D adalah shortcut dari — save-dev, hal ini membuat package akan muncul di devDependencies.

Buka package.json, kemudian hapus baris kode yang berisikan test, dan tambahkan kode berikut:

"start" : "nodemon src/server.js"
package.json

Untuk menjalankan aplikasi jalankan perintah berikut pada terminal:

npm start

Menambahkan path parameter dalam routing

Pada Hapi, path yang memiliki parameter ditandai dengan { }. Contohnya, /users/{user}. Untuk mendapatkan nilai dari parameter path tersebut, kita dapat menggunakan request.params, dengan menggunakan nama parameter sebagai key, contohnya request.params.user .

Ketikkan kode berikut tepat setelah object dengan path / :

 {
method: "GET",
path: "/users/{user}",
handler: (request, h) => {
return `Hello ${request.params.user}`;
},
},

Jangan lupa untuk menyimpan (ctrl + s) file yang telah dibuat. Kemudian buka browser dan masukkan contoh url berikut : http://localhost:3000/users/johndoe

http://localhost:3000/users/johndoe

Jika kita mengosongkan parameter dari path maka akan muncul error seperti berikut:

http://localhost:3000/users/

Hal tersebut terjadi karena dalam route.js kita telah memasukkan path: “/users/{user}” yang membuat parameter user wajib untuk dimasukkan. Namun, untuk mengatasi hal tersebut kita bisa menambahkan ? pada akhiran path untuk membuatnya menjadi opsional, berikut contohnya:

{
method: "GET",
path: "/users/{user?}",
handler: (request, h) => {
return `Hello ${request.params.user}`;
},
},

Dengan rute “/users/{user?}” nilai request.params.users akan disetel menjadi string kosong. Berikut adalah contohnya:

http://localhost:3000/users/

Menambahkan wildcard dalam path parameter

Pada Hapi routes dipanggil dalam urutan tertentu, sehingga kita tidak akan mengalami masalah di mana dua rute saling bertentangan. Routes dipanggil dari yang paling spesifik hingga ke yang paling tidak spesifik. Contohnya: route dengan path “/home” akan dipanggil sebelum “/{any*}”.

Tambahkan route baru dengan mengetikkan kode berikut:

  {
method: "GET",
path: "/{any*}",
handler: (request, h) => {
return "Oops! You must be lost!";
},
},

Path parameter “/{any*}” menandakan parameter dapat berisi karakter apa pun dan memiliki panjang berapa pun. Hal ini membuat path tersebut akan menangkap dan mengarahkan permintaan ke semua rute yang tidak sesuai dengan path yang ditentukan di route lainnya. Dalam kasus ini, kita menggunakan path “/{any*}” untuk menangani permintaan ke halaman 404 atau halaman kesalahan umum lainnya.

Perlu diketahui bahwa kita tidak harus menggunakan {any*} dalam path, kita bisa menerapkan yang lainnya seperti {persons*}, {books*}, dan lain-lain. Namun pada umumnya menggunakan {any*}.

Sekarang, masukkan url berikut : http://localhost:3000/persons . Path persons tidak kita definisikan dalam route, dan seharusnya mengembalikan 404 Not found. Namun karena kita telah menerapkan wildcard {any*}, maka hasilnya sebagai berikut:

http://localhost:3000/persons

Selamat !!! kamu telah berhasil membuat plugin dan menerapkan routing pada aplikasi Hapi JS kamu!

Sumber :
https://hapi.dev/tutorials/plugins/?lang=en_US
https://hapi.dev/tutorials/routing/?lang=en_US
https://developer.android.com/topic/modularization?hl=id
https://nodemon.io/

Silakan kunjungi repositori Github untuk melihat seluruh kode yang telah dibahas dalam artikel ini.

Ingin mengetahui lebih banyak? Jangan lewatkan artikel selanjutnya yang akan membahas topik Menarik tentang Mengimplementasikan Operasi CRUD dengan Hapi JS dan PostgreSQL.

--

--