NodeJS #14: Apa itu API? – Pengertian dan Contoh Sederhana

🍭 NodeJS #14: Apa itu API? – Pengertian dan Contoh Sederhana

Halo, calon developer web! 👋

Di tutorial-tutorial sebelumnya, kita sudah membuat server web yang mengirimkan halaman HTML ke browser. Tapi tahukah kamu bahwa server juga bisa mengirimkan data (bukan HTML) untuk digunakan oleh aplikasi lain? Nah, di sinilah konsep API (Application Programming Interface) berperan. API adalah salah satu konsep paling penting dalam pengembangan web modern. Yuk, kita pelajari dengan cara yang menyenangkan! 🚀

🧐 Apa Itu API?

API adalah singkatan dari Application Programming Interface. Secara sederhana, API adalah perantara yang memungkinkan dua aplikasi berbeda untuk berbicara satu sama lain. API menentukan aturan bagaimana sebuah aplikasi bisa meminta data atau layanan dari aplikasi lain.

Mari gunakan analogi restoran untuk memahaminya:

Di Restoran Di Dunia API
Kamu (pelanggan) duduk di meja Client (aplikasi yang membutuhkan data, seperti browser atau aplikasi mobile)
Pelayan datang membawa menu Dokumentasi API (daftar apa saja yang bisa diminta)
Kamu memesan makanan ke pelayan Request (permintaan data ke API)
Pelayan menyampaikan pesanan ke dapur API meneruskan permintaan ke server
Koki memasak makanan Server memproses permintaan, mengambil data dari database
Pelayan membawakan makanan ke meja kamu Response (data dikembalikan ke client)

Jadi, dalam konteks web, API adalah jembatan antara aplikasi klien (browser, aplikasi mobile) dan server. Server menyediakan "menu" berupa endpoint-endpoint (alamat URL khusus) yang bisa diakses oleh klien untuk mendapatkan data atau melakukan tindakan tertentu.

🌐 Contoh API dalam Kehidupan Sehari-hari

  • API Cuaca: Aplikasi cuaca di HP-mu menggunakan API dari BMKG atau layanan cuaca lain untuk menampilkan prakiraan cuaca.
  • API Google Maps: Saat kamu melihat peta di website, biasanya website itu menggunakan API Google Maps untuk menampilkan peta.
  • API Pembayaran: Saat belanja online, website e-commerce menggunakan API dari bank atau penyedia pembayaran (seperti Midtrans) untuk memproses pembayaran.
  • API Media Sosial: Aplikasi bisa menampilkan postingan Instagram atau tweet menggunakan API yang disediakan Instagram/Twitter.

🔧 Jenis-Jenis API Berdasarkan Arsitektur

Ada beberapa jenis API, tapi yang paling populer saat ini adalah REST API (Representational State Transfer). REST API menggunakan method HTTP (GET, POST, PUT, DELETE) untuk melakukan operasi pada data. Data biasanya dikirim dalam format JSON (JavaScript Object Notation) yang ringan dan mudah dibaca.

Contoh endpoint REST API:

  • GET /api/users → mengambil daftar semua pengguna
  • GET /api/users/1 → mengambil data pengguna dengan ID 1
  • POST /api/users → menambah pengguna baru
  • PUT /api/users/1 → mengupdate data pengguna ID 1
  • DELETE /api/users/1 → menghapus pengguna ID 1

🛠️ Membuat API Sederhana dengan Express

Sekarang kita akan membuat API sederhana menggunakan Express.js. API kita akan menyediakan data tentang buah-buahan dalam format JSON.

Langkah 1: Persiapan Proyek

Buat folder baru, inisialisasi npm, dan instal express:

mkdir api-sederhana
cd api-sederhana
npm init -y
npm install express

Langkah 2: Buat File app.js

Buat file app.js dengan kode berikut:

const express = require('express');
const app = express();
const port = 3000;

// Data buah-buahan (nanti bisa diganti dengan database)
const buah = [
  { id: 1, nama: 'Apel', warna: 'Merah', harga: 5000 },
  { id: 2, nama: 'Jeruk', warna: 'Oranye', harga: 7000 },
  { id: 3, nama: 'Mangga', warna: 'Kuning', harga: 10000 },
  { id: 4, nama: 'Pisang', warna: 'Kuning', harga: 4000 }
];

// Middleware untuk membaca JSON (jika ada request dengan body JSON)
app.use(express.json());

// ENDPOINT 1: Mendapatkan semua buah
app.get('/api/buah', (req, res) => {
  res.json(buah);
});

// ENDPOINT 2: Mendapatkan satu buah berdasarkan ID
app.get('/api/buah/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const buahItem = buah.find(b => b.id === id);

  if (buahItem) {
    res.json(buahItem);
  } else {
    res.status(404).json({ pesan: 'Buah tidak ditemukan' });
  }
});

// ENDPOINT 3: Menambah buah baru (POST)
app.post('/api/buah', (req, res) => {
  const buahBaru = {
    id: buah.length + 1,
    nama: req.body.nama,
    warna: req.body.warna,
    harga: req.body.harga
  };

  // Validasi sederhana
  if (!buahBaru.nama || !buahBaru.warna || !buahBaru.harga) {
    return res.status(400).json({ pesan: 'Data tidak lengkap' });
  }

  buah.push(buahBaru);
  res.status(201).json(buahBaru);
});

// Jalankan server
app.listen(port, () => {
  console.log(`API berjalan di http://localhost:${port}`);
});

Langkah 3: Jalankan API

Jalankan server dengan perintah:

node app.js

Sekarang API kita sudah berjalan di http://localhost:3000. Mari kita coba endpoint-endpoint yang sudah dibuat.

🧪 Mencoba API dengan Browser dan Postman

Untuk endpoint GET, kita bisa mencoba langsung di browser:

  • http://localhost:3000/api/buah → akan menampilkan daftar semua buah dalam format JSON.
  • http://localhost:3000/api/buah/2 → akan menampilkan buah dengan ID 2 (Jeruk).
  • http://localhost:3000/api/buah/99 → akan menampilkan pesan error 404.

Untuk endpoint POST yang mengirim data, kita tidak bisa menggunakan browser biasa. Kita perlu alat seperti Postman atau Insomnia, atau menggunakan fetch dari kode JavaScript. Berikut contoh menggunakan Postman:

  • Method: POST
  • URL: http://localhost:3000/api/buah
  • Headers: Content-Type: application/json
  • Body (raw JSON): { "nama": "Anggur", "warna": "Ungu", "harga": 15000 }

Jika berhasil, server akan mengembalikan data buah yang baru ditambahkan dengan status 201 (Created).

💡 Tips: Kamu bisa menginstal Postman dari sini. Postman adalah alat yang sangat berguna untuk menguji API.

📱 Menggunakan API dari Aplikasi Lain

Sekarang bayangkan kita punya aplikasi frontend (misalnya website atau aplikasi mobile) yang ingin menampilkan daftar buah. Aplikasi tersebut bisa memanggil endpoint /api/buah menggunakan fetch di JavaScript.

Contoh kode JavaScript di frontend:

fetch('http://localhost:3000/api/buah')
  .then(response => response.json())
  .then(data => {
    console.log(data); // data adalah array buah
    // Tampilkan data di halaman HTML
  });

Inilah kehebatan API: data bisa digunakan oleh berbagai aplikasi yang berbeda (web, mobile, desktop) tanpa perlu membuat ulang logika di setiap platform.

🔍 Memahami Response JSON

Perhatikan bahwa semua response dari API kita dikirim dalam format JSON. JSON punya struktur yang mirip dengan object JavaScript, tapi dalam bentuk teks. Contoh:

[
  { "id": 1, "nama": "Apel", "warna": "Merah", "harga": 5000 },
  { "id": 2, "nama": "Jeruk", "warna": "Oranye", "harga": 7000 }
]

JSON mudah dibaca oleh manusia dan mudah di-parse oleh berbagai bahasa pemrograman.

🧪 Latihan Mandiri

  1. Tambahkan endpoint PUT /api/buah/:id untuk mengupdate data buah (misalnya mengubah harga).
  2. Tambahkan endpoint DELETE /api/buah/:id untuk menghapus buah.
  3. Buat API untuk data siswa (nama, kelas, nilai) dengan CRUD sederhana.
  4. Coba gunakan API yang kamu buat dari file HTML terpisah dengan JavaScript fetch.

📚 Rangkuman

Konsep Penjelasan
API Antarmuka yang memungkinkan aplikasi berkomunikasi satu sama lain.
Endpoint URL spesifik yang disediakan API untuk mengakses sumber daya tertentu.
Method HTTP GET (ambil data), POST (tambah data), PUT (ubah data), DELETE (hapus data).
JSON Format data ringan yang sering digunakan dalam API.
REST Arsitektur API yang memanfaatkan method HTTP dan sumber daya (resource).

🏁 Penutup

Selamat! Kamu sekarang sudah memahami konsep dasar API dan bahkan bisa membuat API sederhana dengan Express.js. API adalah fondasi dari banyak aplikasi modern. Di tutorial selanjutnya (NodeJS #15) kita akan belajar mengambil data dari API eksternal menggunakan fetch di Node.js. Kita akan memanggil API publik dan menampilkan datanya.

Jangan lupa untuk mencoba latihan dan bereksperimen sendiri. Kalau ada pertanyaan, tulis di komentar. Selamat coding! 💻😊


Ditulis dengan ❤️ untuk para pemula yang ingin menjadi programmer handal.

Lebih baru Lebih lama

نموذج الاتصال