Jago JavaScript 3 #1: Apa itu API & JSON? (Bahasa Gaul Antar Komputer)

Sebelum kita ngetik kode fetch(), kita harus paham dulu konsep komunikasinya. Komputer itu kayak manusia, punya bahasa persatuan biar gak salah paham saat tukar-menukar informasi.

🧩 Apa yang Akan Dipelajari

Memahami konsep API (Application Programming Interface).
Mengenal JSON sebagai format data standar dunia.
Melihat struktur JSON (Object & Array).
Cara membaca data JSON agar bisa diolah JavaScript.

⚙️ Persiapan

Browser Chrome/Edge.
Extension JSON Viewer (Opsional, biar tampilan JSON di browser jadi rapi).
Imajinasi tentang "Pelayan Restoran".

🚀 Langkah-Langkah

1. Apa itu API?

API adalah sekumpulan aturan yang membolehkan satu aplikasi bicara dengan aplikasi lain.

Contoh Nyata: Saat kamu login ke game pakai akun Google, game tersebut "ngobrol" sama server Google lewat API buat nanya: "Eh, si Kay beneran punya akun gak?". Google jawab "Ya", dan kamu bisa masuk.

2. Apa itu JSON?

JSON (JavaScript Object Notation) adalah format teks yang digunakan untuk mengirim data. Kenapa pakai JSON? Karena ringan, gampang dibaca manusia, dan sangat mudah dimengerti oleh hampir semua bahasa pemrograman.

Bentuknya mirip banget sama Object di JavaScript yang sudah kita pelajari di Season 1!

{
  "nama": "Kay",
  "perangkat": "Xiaomi 15",
  "hobi": ["Coding", "Gaming"],
  "isPremium": true
}

3. Struktur JSON vs JavaScript Object

Meskipun mirip, ada aturan tegas di JSON:

Key harus pakai kutip dua ("nama" bukan nama).
Value string harus pakai kutip dua (gak boleh kutip satu).
Gak boleh ada koma terakhir di elemen paling bawah.
Gak bisa nyimpen fungsi, cuma bisa data (Teks, Angka, Boolean, Array, Object, Null).

4. Mengubah JSON (Parse & Stringify)

Saat kita nerima data dari internet, bentuknya adalah String (teks panjang). Kita harus ubah jadi Object biar bisa diakses datanya.

JSON.parse(): Ngubah teks JSON jadi Object JS.
JSON.stringify(): Ngubah Object JS jadi teks JSON (buat dikirim ke server).

const dataTeks = '{"nama": "Kay", "skor": 100}';

// Ubah ke Object
const dataObjek = JSON.parse(dataTeks);
console.log(dataObjek.nama); // Hasil: Kay

// Ubah balik ke Teks
const kirimData = JSON.stringify(dataObjek);

💡 Tips Tambahan

Stateless: API itu gak punya ingatan. Setiap kali kamu minta data, kamu harus kasih tau siapa kamu (biasanya pakai API Key).
Public API: Ada banyak API gratis yang bisa kamu coba buat latihan, seperti PokeAPI (data Pokemon) atau OpenWeatherMap (data cuaca).
Format Lain: Selain JSON, ada juga XML, tapi sekarang JSON sudah jadi pemenang karena jauh lebih ringkas.

❗ Troubleshooting

Masalah: Muncul error Uncaught SyntaxError: Unexpected token ... in JSON at position 0. Solusi: Ini biasanya terjadi karena teks yang kamu JSON.parse() bukan format JSON yang bener (misal ada typo kutip satu atau ada karakter aneh di awal teks). Pastikan sumber datanya bersih!

🎯 Kesimpulan

API adalah "jembatan" komunikasinya, dan JSON adalah "pesan" yang dibawa di atas jembatan itu. Sekarang kamu sudah tahu cara baca pesan tersebut dan cara ngubahnya jadi objek yang bisa diolah JavaScript.