Membuat RESTful API pertama kamu dengan Hapi.js

Ahmad Ramadan
5 min readApr 22, 2021

--

Ditulisan kali ini saya akan sharing sedikit pengetahuan yang saya miliki tentang membuat sebuah restful api sederhana dengan method GET, POST, PUT dan DELETE (disini saya tidak memberi tahu pengertian dari RESTAPI itu apa, itu bisa di wikipedia tentang pengertian API dan Hapi bisa dibaca di dokumentasi resminya).

1. Membuat Project

Yap hal pertama yang harus kita siapkan adalah membuat project kita, saya membuat folder nya di C -> Hapi -> restful, silahkan kalau ingin mengikuti seperti saya atau mau membuatnya di tempat lain.

Struktur Awal Folder

2. Inisialisasi proyek dengan NPM

Langkah kedua adalah menginisilasi proyek kita menggunakan NPM agar bisa memanfaatkan module module yang telah di sediakan oleh developer lain. Masuk ke folder yang telah anda buat kemudian ketik npm init atau npm init -y kalau ingin menggunakan settingan default (untuk yang belum mempunyai NPM bisa download dan install node js terlebih dahulu, link : https://nodejs.org/en/download/, download versi terbaru)

Inisialisasi proyek

Setelah setelah menginit proyek dengan npm kita bisa langsung ketik code . di terminal untuk masuk ke code editor favorit.

3. Membuat struktur folder

Disini kita akan membuat folder2 yang dibutuhkan di dalam aplikasi kita agar setiap file tidak tercecer.

Sedikit saya jelaskan maksud dari tiap tiap folder di atas, folder data digunakan untuk menaruh array kosong yg akan kita manfaatkan untuk pembuatan restful kita kali ini, folder handler berisi fungsi fungsi dari masing masing handler yang digunakan di folder routes, folder routes berisi konfigurasi routing server seperti menentukan path, method dan handler yang digunakan dan yang terakhir adalah folder server, folder ini berisi konfigurasi, mulai dari port yang kita gunakan dll serta untuk menjalankan server http menggunakan Hapi.

4. Menginstall Nodemon

Nodemon merupakan hal yang wajib kita install selama proses development, dengan tools ini kita tidak perlu menjalankan ulang server ketika terjadi perubahan pada berkas javascript. Nodemon akan mendeteksi perubahan kode pada proyek kita dan mengeksekusi ulang server secara otomatis.

npm install nodemon — save-dev

Dan tambahkan script pada package.json untuk menjalankan nodemon seperti ini :

Catatan : sesuaikan index.js atau file server dengan folder yang kamu buat

5. Membuat HTTP Server

Ayok kita mulai dengan membuat HTTP server menggunakan Hapi

Silahkan pasang package @hapi/hapi dengan mengetikan perintah berikut pada terminal proyek kita :

npm install @hapi/hapi

Setelah selesai memasang package Hapi kita lanjut membuat server pada folder telah kalian buat, disini saya menulisnya di folder src/server/index.js (oh iya jangan lupa install nano id npm i nanoid)

6. Menyimpan Data

Kriteria pertama restapi yang kita buat harus bisa menyimpan data, ketikan kode dibawah ini, mari kita buat file untuk menyimpan data di src/handler/add/index.js:

Menambahkan product

Oh iya saran saya selama belajar untuk mengikuti struktur folder yang sama seperti saya agar tidak membingungkan.

Tambahkan addProduct sebagai handler ke routing pertama kita dengan method POST seperti dibawah ini (src/routes/index.js) :

routes/index.js

7. Menampilkan Data

Kriteria kedua restapi yang kita buat adalah dapat menampilkan data yang telah kita input, mari kita buat file untuk menampilkan semua data di src/handler/get/index.js :

Menampilkan semua product

Tambahkan getAllProducts sebagai handler di routing kedua dengan method GET seperti dibawah ini (src/routes/index.js) :

8. Mengubah data

Kriteria ketiga adalah restapi yang kita buat harus bisa mengubah data miliknya, ayo kita buat file untuk mengubah data di src/handler/edit/index.js :

Jangan lupa tambahkan editProductById ke routing ketiga kita dengan method PUT di src/routes/index.js :

9. Menghapus Data

Kriteria terakhir data restapi yang kita buat adalah dapat menghapus data, langsung saja kita buat file nya di src/handler/delete/index.js :

Dan tambahkan handler terakhir kita yaitu deleteProduct pada routing kita di src/routes/index.js dengan method DELETE :

10. Mengetes RestApi dengan PostMan

Terakhir yaitu mengetes restapi yang telah kita buat apakah berjalan dengan baik atau tidak, pertama jalankan server dengan mengetik npm start di terminal proyek

Test pertama yang akan kita lakukan adalah mengirimkan data dengan method POST (jangan lupa buka postman nya) :

dannnnn wala kita berhasil mengirimkan data ke restapi, selamat :

Untuk mengecek apakah data sudah masuk atau belum kita bisa saja langsung mengetiknya di browser seperti ini ( bisa menggunakan postman atau bisa menggunakan fetch ) :

Oke, dua kriteria sudah terpenuhi yaitu menambahkan data dan menampilkan data, sekarang kita selesaikan dua kriteria lagi yaitu mengubah data dan menghapus data.

Mengubah data, ubah method POST menjadi PUT di postman lalu isikan seperti ini (untuk mengubah data kita perlu melampirkan id nya ya) :

dannn selamat, data berhasil diubah :

ayo kita cek apakah data sudah berubah atau belum dengan menggunakan method GET di path localhost:3000/products :

Yap data berhasil terubah

Kriteria terakhir yaitu menghapus data, ganti method PUT menjadi DELETE di postman ya dan jangan lupa lampirkan id nya juga :

Yeayyyyy kita telah menyelesaikan restapi pertama kita, terimakasih telah mengikuti nya dengan baik, ohh iyaa tahap ini bisa dibilang untuk pemula ya

--

--

Ahmad Ramadan
Ahmad Ramadan

Written by Ahmad Ramadan

0 Followers

Seorang antusias teknologi dan seorang yang suka belajar

No responses yet