Tutorial Membuat HTTP Client Axios pada NextJS dengan ADF
Pada tutorial ini saya akan membuat sebuah frontend web menggunakan NextJS, lalu mengenerate Axios client dengan daftar API pada desain Online Shop berikut.
Generator kode yang digunakan:
@graf-research/adf-codegen-api-axiosPrerequisite:
- npm v10+
- npx v10+
- node v20+
Untuk instalasi npm, node, dan npx dapat menggunakan tools nvm https://github.com/nvm-sh/nvm
1. Persiapan
Buat sebuah proyek NextJS.
Misal pada proyek ini diberi nama frontend-next. Pastikan menggunakan Typescript pada saat instalasi NextJS.
Instal axios
2. Desain ADF
Saya akan menggunakan desain ADF yang ada pada link desain di atas https://desain.pagonila.id/online-shop.adf
3. Code Generator
Generate kode dengan nama output folder axios-client. Pada folder proyek frontend-next, jalankan perintah shell berikut
Sebuah folder berisi model data dan daftar API akan muncul dengan nama axios-client/
4. Gunakan API Client
Berikut contoh cara penggunaan API client axios, contoh isi file /src/pages/index.tsx
Happy hacking!!
Hak Cipta © 2024 Graf Research