Tips & Tricks

Membuat REST API dengan Claude Code | Panduan Praktis untuk Pemula

Pelajari dasar-dasar REST API bersama Claude Code. Panduan praktis mencakup desain endpoint, validasi, dan penanganan error — dengan kode siap copy-paste.

“Saya tidak tahu harus mulai dari mana dengan REST API” — itulah yang saya rasakan di awal juga.

Membaca dokumentasi terasa terlalu abstrak. Saya tidak tahu apa yang sebenarnya harus dibuat. Lalu saya mulai menggunakan Claude Code dan menyadari bahwa “bangun sesuatu yang berjalan dulu, belajar sambil jalan” adalah pendekatan paling cepat.

Dalam panduan ini, kita akan pergi dari nol pengetahuan REST API sampai ke API yang berfungsi penuh — langkah demi langkah, bersama Claude Code. Semua cuplikan kode siap di-copy-paste.


Apa itu REST API? (Dalam 3 Baris)

REST API adalah konvensi untuk memanipulasi resource (data) di web melalui HTTP.

Browser/App  →  HTTP Request  →  Server (API)
             ←  JSON Response  ←

Untuk API manajemen pengguna, tampilannya seperti ini:

TujuanMetode HTTPURL
Ambil semua penggunaGET/users
Ambil pengguna tertentuGET/users/123
Buat penggunaPOST/users
Perbarui penggunaPUT/users/123
Hapus penggunaDELETE/users/123

Setelah memahami ini, Anda siap mulai membangun dengan Claude Code.


Pengaturan Lingkungan

Kita akan menggunakan Hono — framework web TypeScript yang ringan. Lebih type-safe dibanding Express dan bekerja sangat baik dengan Claude Code.

mkdir my-first-api
cd my-first-api
npm init -y
npm install hono
npm install -D typescript @types/node ts-node
npx tsc --init

Buat src/index.ts dan tanyakan ke Claude Code:

claude -p "
Buat boilerplate REST API menggunakan Hono di src/index.ts.
- Jalankan server di port 3000
- Tambahkan endpoint GET /health untuk health check
- Kembalikan response JSON
Perintah jalankan: npx ts-node src/index.ts
"

Claude Code akan menghasilkan sesuatu seperti ini:

// src/index.ts
import { Hono } from "hono";
import { serve } from "@hono/node-server";

const app = new Hono();

app.get("/health", (c) => {
  return c.json({ status: "ok", timestamp: new Date().toISOString() });
});

serve({ fetch: app.fetch, port: 3000 }, () => {
  console.log("Server running at http://localhost:3000");
});
npx ts-node src/index.ts
# → Server running at http://localhost:3000

curl http://localhost:3000/health
# → {"status":"ok","timestamp":"2026-04-27T07:30:00.000Z"}

Berhasil? Itulah titik awal REST API Anda.


Step 1: Buat CRUD Dasar

Selanjutnya, mari bangun API untuk mengelola daftar Todo. Minta Claude Code:

claude -p "
Tambahkan endpoint CRUD Todo ke src/index.ts.
- GET  /todos         — Daftar semua todos
- GET  /todos/:id     — Ambil satu todo
- POST /todos         — Buat (title: string wajib)
- PUT  /todos/:id     — Perbarui (title: string)
- DELETE /todos/:id   — Hapus

Kelola data dalam array di memori.
Tipe Todo: { id: string, title: string, done: boolean, createdAt: string }
Generate id dengan crypto.randomUUID()
"

Kode yang dihasilkan:

import { Hono } from "hono";
import { serve } from "@hono/node-server";

const app = new Hono();

// Penyimpanan data di memori
type Todo = { id: string; title: string; done: boolean; createdAt: string };
let todos: Todo[] = [];

// Ambil semua todos
app.get("/todos", (c) => c.json(todos));

// Ambil satu todo
app.get("/todos/:id", (c) => {
  const todo = todos.find((t) => t.id === c.req.param("id"));
  if (!todo) return c.json({ error: "Not found" }, 404);
  return c.json(todo);
});

// Buat
app.post("/todos", async (c) => {
  const body = await c.req.json();
  if (!body.title) return c.json({ error: "title is required" }, 400);
  const todo: Todo = {
    id: crypto.randomUUID(),
    title: body.title,
    done: false,
    createdAt: new Date().toISOString(),
  };
  todos.push(todo);
  return c.json(todo, 201);
});

// Perbarui
app.put("/todos/:id", async (c) => {
  const idx = todos.findIndex((t) => t.id === c.req.param("id"));
  if (idx === -1) return c.json({ error: "Not found" }, 404);
  const body = await c.req.json();
  todos[idx] = { ...todos[idx], ...body };
  return c.json(todos[idx]);
});

// Hapus
app.delete("/todos/:id", (c) => {
  const idx = todos.findIndex((t) => t.id === c.req.param("id"));
  if (idx === -1) return c.json({ error: "Not found" }, 404);
  todos.splice(idx, 1);
  return c.json({ message: "Deleted" });
});

serve({ fetch: app.fetch, port: 3000 }, () => {
  console.log("Server running at http://localhost:3000");
});

Coba:

# Buat Todo
curl -X POST http://localhost:3000/todos \
  -H "Content-Type: application/json" \
  -d '{"title": "Coba Claude Code"}'

# Ambil semua todos
curl http://localhost:3000/todos

# Hapus (gunakan id yang dikembalikan di atas)
curl -X DELETE http://localhost:3000/todos/<id>

Step 2: Tambahkan Validasi

“Title kosong masih bisa dibuat” atau “String apapun bisa digunakan sebagai ID” — validasi mencegah masalah ini. Tanya Claude Code:

claude -p "
Tambahkan validasi menggunakan zod untuk POST /todos dan PUT /todos/:id.
- title: string, 1-100 karakter
- done: (hanya PUT) boolean
Kembalikan error 400 dengan pesan error spesifik saat validasi gagal
"
npm install zod

Claude Code menambahkan zod schema:

import { z } from "zod";

const CreateTodoSchema = z.object({
  title: z.string().min(1, "Judul harus minimal 1 karakter").max(100, "Judul maksimal 100 karakter"),
});

const UpdateTodoSchema = z.object({
  title: z.string().min(1).max(100).optional(),
  done: z.boolean().optional(),
});

// POST /todos (dengan validasi)
app.post("/todos", async (c) => {
  const body = await c.req.json().catch(() => ({}));
  const result = CreateTodoSchema.safeParse(body);
  if (!result.success) {
    return c.json({ error: result.error.flatten().fieldErrors }, 400);
  }
  const todo: Todo = {
    id: crypto.randomUUID(),
    title: result.data.title,
    done: false,
    createdAt: new Date().toISOString(),
  };
  todos.push(todo);
  return c.json(todo, 201);
});

Periksa error validasi:

# Buat tanpa judul → seharusnya error
curl -X POST http://localhost:3000/todos \
  -H "Content-Type: application/json" \
  -d '{}'
# → {"error":{"title":["Judul harus minimal 1 karakter"]}}

Step 3: Satukan Penanganan Error

Saat ini, setiap endpoint mengembalikan error dalam format berbeda. Biarkan Claude Code menstandarkannya:

claude -p "
Satukan penanganan error.
- Format response error umum: { error: { code: string, message: string } }
- 404: NOT_FOUND
- 400: VALIDATION_ERROR
- 500: INTERNAL_SERVER_ERROR
Implementasikan global error handler menggunakan onError dari Hono
"
// Definisi tipe error
class AppError extends Error {
  constructor(
    public code: string,
    public message: string,
    public statusCode: number = 400
  ) {
    super(message);
  }
}

// Global error handler
app.onError((err, c) => {
  if (err instanceof AppError) {
    return c.json(
      { error: { code: err.code, message: err.message } },
      err.statusCode as any
    );
  }
  console.error(err);
  return c.json(
    { error: { code: "INTERNAL_SERVER_ERROR", message: "Terjadi error yang tidak terduga" } },
    500
  );
});

// Penggunaan
app.get("/todos/:id", (c) => {
  const todo = todos.find((t) => t.id === c.req.param("id"));
  if (!todo) throw new AppError("NOT_FOUND", "Todo tidak ditemukan", 404);
  return c.json(todo);
});

Step 4: Auto-generate Dokumentasi Swagger UI

Setelah API dibangun, Anda perlu dokumentasi. Claude Code bisa mengaturnya dalam hitungan menit:

claude -p "
Gunakan @hono/swagger-ui dan @hono/zod-openapi untuk
menambahkan Swagger UI di /docs.
Tambahkan schema OpenAPI ke endpoint yang sudah ada.
"
npm install @hono/swagger-ui @hono/zod-openapi

Setelah selesai, kunjungi http://localhost:3000/docs untuk melihat dokumentasi API Anda.


Alur Pengembangan API dengan Claude Code (Ringkasan)

Inilah alur yang saya gunakan sehari-hari:

1. Beritahu Claude Code "Saya butuh API yang melakukan X"
    ↓
2. Review dan test kode yang dihasilkan
    ↓
3. Iterasi: "Perbaiki ini", "Tambahkan validasi", dll.
    ↓
4. git commit saat tests lulus

Kendala pertama saya (pengalaman nyata)

Ketika membangun API pertama, saya melewatkan penanganan error sepenuhnya dan harus menambahkannya belakangan — yang memakan waktu lama. Sekarang saya tinggal tambahkan “sertakan penanganan error” di prompt dari awal, dan kodenya langsung bersih. Trik dengan Claude Code adalah memberikan semua persyaratan sekaligus dari awal.


3 Jebakan Umum

Jebakan 1: Mengabaikan error parsing JSON

// ❌ Error di sini tidak terdeteksi
const body = await c.req.json();

// ✅ Tangkap kegagalan parsing
const body = await c.req.json().catch(() => null);
if (!body) return c.json({ error: "Invalid JSON" }, 400);

Jebakan 2: Mencampuradukkan 404 dan 400

400: Request-nya sendiri yang salah (error validasi, field wajib tidak ada)
404: Resource tidak ada (ID tidak ditemukan)
422: Format request benar tapi tidak bisa diproses

Tanya Claude Code “Haruskah saya kembalikan 404 atau 400 di sini?” dan Anda akan mendapat jawaban yang tepat.

Jebakan 3: Menyimpan semua di memori

Kode dalam panduan ini menggunakan array di memori untuk keperluan demo. Data hilang saat server di-restart. Di produksi, Anda membutuhkan database seperti PostgreSQL atau MongoDB. Cukup bilang ke Claude Code “simpan ini di SQLite bukan di memori” dan akan diurus migrasinya.


Langkah Selanjutnya

Setelah menguasai dasar-dasar REST API, coba ini:

LangkahApa yang Dilakukan
DatabaseSQLite → PostgreSQL (dengan Prisma)
AutentikasiTambahkan autentikasi JWT
TestingTulis API test dengan vitest
DeployPublikasikan ke Vercel / Cloudflare Workers

Untuk semua ini, cukup bilang ke Claude Code “tambahkan X” dan fondasinya siap dalam beberapa menit. Bangun sesuatu yang berjalan dulu — itulah jalan tercepat.

Artikel Terkait

#claude-code #rest-api #beginner #typescript #backend #tutorial

Tingkatkan alur kerja Claude Code kamu

50 template prompt yang sudah teruji, siap copy-paste ke Claude Code sekarang juga.

Gratis

PDF Gratis: Cheatsheet Claude Code dalam 5 Menit

Cukup masukkan emailmu dan kami akan langsung mengirim cheatsheet PDF A4 satu halaman.

Kami menjaga data pribadimu dengan aman dan tidak pernah mengirim spam.

Masa

Tentang Penulis

Masa

Engineer yang aktif menggunakan Claude Code. Mengelola claudecode-lab.com, media teknologi 10 bahasa dengan lebih dari 2.000 halaman.