Rabu, 08 April 2026

Cara Praktis Belajar API: Membuat Aplikasi Joke dalam 5 Menit (Cuma Pakai Notepad!)

on   with Tidak ada komentar


Banyak orang bilang belajar API itu susah. Harus instal ini-itu, belajar server, sampai pusing lihat kode yang panjang. Tapi tahukah kamu? Kita bisa mempraktekkan cara kerja API hanya dengan modal Notepad dan Browser.

Apa itu API?

Singkatnya, API (Application Programming Interface) adalah jembatan yang menghubungkan aplikasi kita dengan data milik pihak lain. Bayangkan API seperti pelayan restoran: kita memesan makanan (request), pelayan mengambilnya ke dapur (server), lalu membawakannya ke meja kita (response).

Langkah 1: Membuat API "Lokal" dengan Mocky.io

Kita akan membuat penyedia data sendiri menggunakan layanan Mocky.io. Ini cara tercepat tanpa perlu coding server.

  1. Buka Mocky.io.
  2. Di bagian HTTP Response Body, masukkan format JSON ini:
{
  "setup": "Kenapa ikan asin rasanya asin?",
  "punchline": "Karena kalau manis namanya ikan syukrin (Ikan Syukur)."
}

Klik Generate HTTP Response dan simpan URL yang diberikan.

Langkah 2: Menulis Kode di Notepad

Salin kode di bawah ini ke Notepad kamu. Jangan lupa ganti bagian LINK_MOCKY_KAMU_DISINI dengan URL yang tadi kamu dapatkan.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Generator Joke Lokal</title>
    <style>
        body { font-family: sans-serif; text-align: center; padding-top: 50px; }
        .box { border: 1px solid #ccc; padding: 20px; display: inline-block; border-radius: 10px; }
        button { cursor: pointer; padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; }
    </style>
</head>
<body>
    <div class="box">
        <h1>Joke Bapak-Bapak Hari Ini</h1>
        <p id="joke-text">Sedang mengambil joke garing...</p>
        <button onclick="ambilJoke()">Cari Joke Lain</button>
    </div>

    <script>
        function ambilJoke() {
            fetch('LINK_MOCKY_KAMU_DISINI')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('joke-text').innerHTML = 
                        `<strong>${data.setup}</strong> <br> <em>${data.punchline}</em>`;
                })
                .catch(err => {
                    document.getElementById('joke-text').innerText = "Gagal mengambil data.";
                });
        }
        ambilJoke();
    </script>
</body>
</html>

Langkah 3: Jalankan Aplikasi

Simpan file dari Notepad tadi dengan nama index.html. Klik dua kali file tersebut untuk membukanya di browser. Selamat! Kamu baru saja berhasil membuat aplikasi yang terhubung dengan API buatanmu sendiri.

Share:

0 komentar:

Posting Komentar