Introductions
Beberapa waktu lalu aku melakukan pengujian aplikasi A ini bisa mengakses restapi atau nggak. Karena dibutuhkan restapi yang sederhana, terpikirlah untuk membuat menggunakan json-server sang penyelamat jika butuh restapi kilat.
Apa itu json-server?
json-server adalah package yang memudahkan kita untuk membuat restapi dari data static (JSON). Jadi kita hanya perlu untuk membuat file json yang berisi data-data yang akan kita perlukan kemudian menjalankan json-server ini.
penggunaan
- install package json-server
npm i json-server
- siapkan data json yang akan digunakan
Klik untuk melihat data
```javascript [ { "id": 1, "pokemon": "Bulbasaur", "type": "Grass", "abilities": [ "Overgrow" ], "hitpoints": 45, "evolutions": [ "Ivysaur", "Venusaur" ], "location": "Kanto region, Route 2", "image_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png" }, { "id": 2, "pokemon": "Charmander", "type": "Fire", "abilities": [ "Blaze" ], "hitpoints": 39, "evolutions": [ "Charmeleon", "Charizard" ], "location": "Kanto region, Route 24", "image_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png" }, { "id": 3, "pokemon": "Squirtle", "type": "Water", "abilities": [ "Torrent" ], "hitpoints": 44, "evolutions": [ "Wartortle", "Blastoise" ], "location": "Kanto region, Route 25", "image_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png" }, { "id": 4, "pokemon": "Pikachu", "type": "Electric", "abilities": [ "Static" ], "hitpoints": 35, "evolutions": [ "Raichu" ], "location": "Kanto region, Route 2", "image_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png" }, { "id": 5, "pokemon": "Gengar", "type": "Ghost", "abilities": [ "Levitate" ], "hitpoints": 60, "evolutions": [ "Haunter", "Gengar" ], "location": "Kanto region, Pokémon Mansion", "image_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/94.png" } ] ```- Masukkan data array ke key baru. key ini digunakan untuk path yang nanti digunakan
{
"pokemon": [
...data
]
}
- Jalankan command berikut
npx json-server data.json -P 3001
- Akses datanya pada path yang ditampilkan
Permasalahan
Jadi kemarin saya mencoba mengimplementasikan restapi itu untuk di consume aplikasi saya di VM (IP laptop dan port telah disesuaikan). tetapi yang terjadi adalah
saya sudah melakukan berbagai cara mulai dari mengatur firewall (menambah inbound & outbound rule), merubah setting network di VM (NAT & Bridges) tetapi tidak ada titik terang
Solusi
Ternyata solusinya adalah menerapkan host yang sesuai dengan IP address localhost. hal tersebut dapat dilakukan dengan cara menjalankan command berikut:
npx json-server data.json -H <IP address local> -P 3001
dan hasilnya
Sekian
Luthfi Anum Pratama