Yuk, Praktik Langsung! "Nge-gym" API Pake JSONPlaceholder

Udah kenalan sama tools kayak Postman buat "ngobrol" sama API? Keren! Sekarang, biar makin jago, kita perlu tempat latihan yang aman dan enak buat nyoba-nyoba berbagai jenis permintaan HTTP.

Kenalan yuk sama JSONPlaceholder (https://jsonplaceholder.typicode.com/)! Ini adalah API REST palsu (fake REST API) online gratis yang super populer buat testing dan prototyping.

Kenapa JSONPlaceholder Cocok Buat Latihan?

• Gratis dan Gak Perlu Daftar/API Key: Kamu bisa langsung pake!
• Menyediakan Endpoint Umum: Dia punya endpoint buat resource umum kayak /posts, /comments, /albums, /photos, /todos, /users.
• Ngedukung Semua HTTP Method Umum: Kita bisa nyoba GET, POST, PUT, PATCH, DELETE.
• Ngasih Response JSON yang Realistis: Meskipun datanya "palsu", responsenya beneran format JSON kayak API sungguhan.
• PENTING: Karena ini API "palsu", data yang kamu kirim (POST, PUT, PATCH) atau hapus (DELETE) itu gak bener-bener disimpen permanen di servernya. Dia cuma bakal ngasih response seolah-olah operasinya berhasil, tapi kalau kamu GET lagi datanya, ya balik ke data awal lagi. Ini justru bagus buat latihan, jadi kamu gak perlu khawatir ngerusak data beneran!

Siapin tool API client-mu (kayak Postman atau Insomnia), karena kita bakal banyak nyoba request!

1. GET: Ngambil Data dari JSONPlaceholder

Mari kita coba ngambil beberapa jenis data:

a. Ngambil Semua Posts (/posts)

• Method: GET

• URL Endpoint: https://jsonplaceholder.typicode.com/posts

• Apa yang Diharapkan: Kamu bakal dapet array JSON yang isinya banyak objek post (biasanya 100 post). Tiap objek post punya userId, id, title, dan body.

  Coba di Postman/Browser:

  1. Pilih method GET.
  2. Masukin URL https://jsonplaceholder.typicode.com/posts.
  3. Klik "Send".
  4. Lihat di bagian Response Body, kamu bakal liat daftar panjang data post dalam format JSON. Perhatiin juga Status Code-nya harusnya 200 OK.

b. Ngambil Satu Post Spesifik (/posts/1)

• Method: GET

• URL Endpoint: https://jsonplaceholder.typicode.com/posts/1 (Angka 1 di sini adalah ID post yang mau diambil).

• Apa yang Diharapkan: Kamu bakal dapet satu objek JSON yang isinya detail post dengan ID 1.

  Coba di Postman/Browser: Ganti URL-nya jadi https://jsonplaceholder.typicode.com/posts/1, terus Send. Coba juga ganti ID-nya jadi angka lain (misal, /posts/10).

c. Ngambil Komentar untuk Post Tertentu (/posts/1/comments)

• Method: GET
• URL Endpoint: https://jsonplaceholder.typicode.com/posts/1/comments
• Apa yang Diharapkan: Array JSON berisi semua komentar yang terkait sama post dengan ID 1.

d. Ngambil Data User (/users)

• Method: GET
• URL Endpoint: https://jsonplaceholder.typicode.com/users
• Apa yang Diharapkan: Array JSON berisi daftar user, lengkap dengan info kayak nama, username, email, alamat, dll.

Latihan GET Lainnya:

• Coba endpoint /todos, /albums, /photos.
• Coba pake query parameter buat filter, misalnya:
  • https://jsonplaceholder.typicode.com/posts?userId=1 (ambil semua post dari user dengan ID 1).
  • https://jsonplaceholder.typicode.com/comments?postId=5 (ambil semua komentar dari post ID 5).

2. POST: Nambahin Data Baru (Misal, Post Baru)

Sekarang kita coba "ngirim" data baru ke server.

• Method: POST
• URL Endpoint: https://jsonplaceholder.typicode.com/posts
• Body Request: Kita perlu ngirim data post baru dalam format JSON di body request.
  • Struktur datanya harus sesuai sama yang diharapkan server (biasanya title, body, userId).
• Apa yang Diharapkan: Response dengan Status Code 201 Created dan body JSON yang isinya data post yang baru aja kita "buat" (JSONPlaceholder biasanya ngasih ID baru juga, misal 101).

Coba di Postman:

1. Pilih method POST.
2. Masukin URL https://jsonplaceholder.typicode.com/posts.
3. Pindah ke tab Body.
4. Pilih tipe body raw dan formatnya JSON.
5. Di text area body, masukin data JSON kayak gini:

   {
       "title": "Postingan Keren Saya",
       "body": "Ini adalah isi dari postingan baru yang sangat menarik.",
       "userId": 1
   }

6. Klik "Send".
7. Lihat Response Body. Harusnya kamu dapet balik data yang kamu kirim, plus ada properti id baru (misal, id: 101). Status Code-nya juga harusnya 201 Created.

Ingat, karena ini API palsu, kalau kamu GET /posts/101 setelah ini, datanya gak bakal ada. Tapi proses POST-nya udah berhasil disimulasiin.

3. PUT: Ngupdate Data yang Udah Ada (Secara Keseluruhan)

PUT dipake buat ngupdate resource yang udah ada. Kamu harus ngirim semua field dari resource itu, meskipun cuma satu field yang mau diubah.

• Method: PUT
• URL Endpoint: https://jsonplaceholder.typicode.com/posts/1 (Kita mau ngupdate post dengan ID 1).
• Body Request: Data JSON lengkap dari post yang mau diupdate.
• Apa yang Diharapkan: Response dengan Status Code 200 OK dan body JSON yang isinya data post yang udah diupdate.

Coba di Postman:

1. Pilih method PUT.
2. Masukin URL https://jsonplaceholder.typicode.com/posts/1.
3. Di tab Body, pilih raw dan JSON.
4. Masukin data JSON kayak gini (ini data lengkap post ID 1, tapi kita ubah title-nya):

   {
       "id": 1, 
       "title": "Judul Postingan Sudah Saya Ganti Total!",
       "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto", // Body-nya kita biarin sama kayak aslinya
       "userId": 1
   }

   (Kamu bisa liat isi asli post ID 1 dengan GET dulu).
5. Klik "Send".
6. Lihat Response Body. Harusnya title-nya udah berubah. Status Code 200 OK.

4. PATCH: Ngupdate Sebagian Data Aja

Kalau kamu cuma mau ngubah satu atau beberapa field aja dari sebuah resource, PATCH lebih efisien daripada PUT. Kamu cukup kirim field yang mau diubah aja.

• Method: PATCH
• URL Endpoint: https://jsonplaceholder.typicode.com/posts/1
• Body Request: Data JSON yang isinya cuma field yang mau diubah.
• Apa yang Diharapkan: Response 200 OK dan body JSON yang isinya data post dengan field yang udah diupdate.

Coba di Postman:

1. Pilih method PATCH.
2. Masukin URL https://jsonplaceholder.typicode.com/posts/1.
3. Di tab Body, pilih raw dan JSON.
4. Masukin data JSON kayak gini (kita cuma mau ganti title-nya aja):

   {
       "title": "Judul Diupdate Sebagian Saja"
   }

5. Klik "Send".
6. Lihat Response Body. Harusnya cuma title-nya aja yang berubah, field lain tetep. Status Code 200 OK.

5. DELETE: Ngapus Data

Terakhir, kita coba ngapus resource.

• Method: DELETE
• URL Endpoint: https://jsonplaceholder.typicode.com/posts/1 (Kita mau ngapus post dengan ID 1).
• Body Request: Biasanya gak perlu body buat DELETE.
• Apa yang Diharapkan: Response dengan Status Code 200 OK dan body biasanya kosong.

Coba di Postman:

1. Pilih method DELETE.
2. Masukin URL https://jsonplaceholder.typicode.com/posts/1.
3. Klik "Send".
4. Lihat Status Code, harusnya 200 OK. Body responsenya mungkin kosong {}.

Kalau kamu coba GET https://jsonplaceholder.typicode.com/posts/1 lagi setelah DELETE, JSONPlaceholder mungkin bakal ngasih 404 Not Found (karena dia nyimulasiin penghapusan) atau tetep ngasih data aslinya (karena dia API palsu yang datanya direset). Yang penting, server udah ngasih tau kalau operasi DELETE-nya "berhasil" (status 200).

Dengan nyobain semua method HTTP ini (GET, POST, PUT, PATCH, DELETE) pake JSONPlaceholder dan tool kayak Postman, kamu jadi punya gambaran yang lebih nyata gimana sih aplikasi klien itu "ngobrol" sama server API.

Ingat ya, JSONPlaceholder ini buat latihan. Perilaku API beneran (terutama soal persistensi data setelah POST, PUT, DELETE) bakal beda. Tapi, alur request-response dan format datanya itu udah ngikutin standar API modern.

Ini bekal yang bagus banget sebelum kamu mulai manggil API pake JavaScript!