Membuat REST API Sederhana dengan JavaScript Murni

1. Mengingat Kembali Konsep CRUD#

CRUD merupakan singkatan dari:

• Create: membuat data.
• Read: membaca data.
• Update: mengubah data.
• Delete: menghapus data.

Dalam API HTTP, kita sering menggunakan pemetaan berikut:

Contoh tersebut menggunakan pendekatan endpoint berbasis resource.

Resource yang kita kelola adalah artikel.

Perlu diingat, penggunaan pola endpoint dan HTTP method ini merupakan praktik umum dalam desain REST API. REST sendiri memiliki prinsip arsitektural yang lebih luas.

Untuk latihan, kita akan fokus pada implementasi API HTTP sederhana dengan pola tersebut.

2. Menyiapkan Proyek#

Buat folder baru:

1
belajar-rest-api/

Di dalamnya, buat file:

1
server.js

Strukturnya:

1
belajar-rest-api/
2
└── server.js

Kita tidak perlu menginstal package tambahan.

Pastikan Node.js sudah terpasang dengan menjalankan:

1
node --version

Kemudian buka folder proyek menggunakan editor kode.

Seluruh kode pada artikel ini akan kita tulis dalam server.js.

3. Menyiapkan Data Artikel#

Kita mulai dengan membuat array yang menyimpan data artikel.

1
let artikel = [
2
  {
3
    id: 1,
4
    judul: "Belajar HTML",
5
    kategori: "HTML"
6
  },
7
  {
8
    id: 2,
9
    judul: "Belajar CSS",
10
    kategori: "CSS"
11
  },
12
  {
13
    id: 3,
14
    judul: "Belajar JavaScript",
15
    kategori: "JavaScript"
16
  }
17
];
18

19
let idBerikutnya = 4;

Variabel artikel menyimpan daftar artikel.

Sedangkan idBerikutnya digunakan untuk menghasilkan ID baru ketika kita menambahkan artikel.

Kita menggunakan let karena nilai variabel dapat berubah.

Misalnya, ketika artikel dihapus, kita akan memperbarui isi array.

4. Membuat Function untuk Mengirim JSON#

Ketika membuat API, kita akan sering mengirim respons JSON.

Daripada menulis header berulang kali, kita buat function pembantu.

1
function kirimJSON(res, statusCode, data) {
2
  res.writeHead(statusCode, {
3
    "Content-Type": "application/json; charset=utf-8"
4
  });
5

6
  res.end(JSON.stringify(data));
7
}

Function ini menerima tiga parameter:

• res: objek response.
• statusCode: status HTTP.
• data: data yang akan dikirim.

Contoh penggunaannya:

1
kirimJSON(res, 200, {
2
  pesan: "Request berhasil."
3
});

Function tersebut mengubah object menjadi string JSON dan mengirimkannya sebagai response.

Dengan begitu, kode routing menjadi lebih ringkas.

5. Membaca Request Body Tanpa Express#

Ini salah satu bagian paling menarik.

Ketika client mengirim request POST atau PUT, data biasanya dikirim melalui request body.

Pada Express, kita mungkin mengenal middleware untuk membaca JSON.

Namun, karena kita menggunakan Node.js native, kita akan membaca body sendiri.

Objek req merupakan readable stream.

Artinya, data request dapat diterima dalam beberapa bagian atau chunk.

Kita perlu mengumpulkan bagian-bagian tersebut sebelum memprosesnya.

Buat function berikut:

1
async function bacaJSON(req) {
2
  const chunks = [];
3

4
  for await (const chunk of req) {
5
    chunks.push(chunk);
6
  }
7

8
  const body = Buffer.concat(chunks).toString("utf8");
9

10
  return JSON.parse(body);
11
}

Mari kita pahami.

1
for await (const chunk of req)

1
Buffer.concat(chunks)

1
.toString("utf8")

1
JSON.parse(body)

6. Mengenal Validasi Data#

Sebelum membuat atau mengubah artikel, kita perlu memeriksa data yang diterima.

Untuk latihan ini, sebuah artikel harus memiliki:

• judul berupa string yang tidak kosong.
• kategori berupa string yang tidak kosong.

Contoh data valid:

1
{
2
  "judul": "Belajar Backend",
3
  "kategori": "Programming"
4
}

Contoh data tidak valid:

1
{
2
  "judul": "",
3
  "kategori": "Programming"
4
}

Kita buat function validasi:

1
function validasiArtikel(data) {
2
  if (
3
    !data ||
4
    typeof data !== "object" ||
5
    Array.isArray(data)
6
  ) {
7
    return false;
8
  }
9

10
  return (
11
    typeof data.judul === "string" &&
12
    data.judul.trim() !== "" &&
13
    typeof data.kategori === "string" &&
14
    data.kategori.trim() !== ""
15
  );
16
}

Function ini mengembalikan boolean.

true jika data memenuhi aturan.

false jika tidak.

Kita juga memastikan bahwa data merupakan object biasa untuk kebutuhan contoh, bukan null atau array.

Dalam aplikasi nyata, validasi dapat mencakup panjang string, format, karakter yang diperbolehkan, dan aturan bisnis lainnya.

7. Membuat Endpoint GET Semua Artikel#

Sekarang kita mulai membuat routing.

Endpoint pertama:

1
GET /api/artikel

Tujuannya mengambil seluruh artikel.

Kode routing-nya:

1
if (req.method === "GET" && pathname === "/api/artikel") {
2
  kirimJSON(res, 200, artikel);
3
  return;
4
}

Ketika client mengirim request GET, server mengembalikan seluruh isi array.

Contoh response:

1
[
2
  {
3
    "id": 1,
4
    "judul": "Belajar HTML",
5
    "kategori": "HTML"
6
  },
7
  {
8
    "id": 2,
9
    "judul": "Belajar CSS",
10
    "kategori": "CSS"
11
  },
12
  {
13
    "id": 3,
14
    "judul": "Belajar JavaScript",
15
    "kategori": "JavaScript"
16
  }
17
]

Status code yang digunakan adalah 200 OK.

8. Membuat Endpoint GET Detail Artikel#

Sekarang kita ingin mengambil satu artikel berdasarkan ID.

Contohnya:

1
GET /api/artikel/2

Kita perlu membaca angka 2 dari URL.

Salah satu cara sederhana adalah menggunakan regular expression.

1
const cocok = pathname.match(/^\/api\/artikel\/([1-9]\d*)$/);

Jika URL sesuai pola, variabel cocok berisi hasil pencocokan.

Bagian:

1
cocok[1]

Berisi nilai ID dalam bentuk string.

Kita ubah menjadi number:

1
const id = Number(cocok[1]);

Kemudian cari artikel:

1
const data = artikel.find((item) => item.id === id);

Jika ditemukan, kirim status 200.

Jika tidak ditemukan, kirim status 404.

Contoh routing:

1
if (req.method === "GET" && cocok) {
2
  const id = Number(cocok[1]);
3

4
  const data = artikel.find((item) => item.id === id);
5

6
  if (!data) {
7
    kirimJSON(res, 404, {
8
      pesan: "Artikel tidak ditemukan."
9
    });
10
    return;
11
  }
12

13
  kirimJSON(res, 200, data);
14
  return;
15
}

Dengan demikian, endpoint dapat mengambil artikel tertentu berdasarkan ID.

9. Membuat Endpoint POST untuk Menambah Artikel#

Sekarang kita masuk ke operasi Create.

Endpoint:

1
POST /api/artikel

Client akan mengirim data JSON seperti:

1
{
2
  "judul": "Belajar Backend",
3
  "kategori": "Programming"
4
}

Server perlu:

1. Membaca request body.
2. Memastikan JSON valid.
3. Memvalidasi data.
4. Membuat ID baru.
5. Menambahkan artikel ke array.
6. Mengirim response 201 Created.

Contoh logika utamanya:

1
const dataBaru = await bacaJSON(req);
2

3
if (!validasiArtikel(dataBaru)) {
4
  kirimJSON(res, 400, {
5
    pesan: "Judul dan kategori wajib diisi."
6
  });
7
  return;
8
}
9

10
const artikelBaru = {
11
  id: idBerikutnya++,
12
  judul: dataBaru.judul.trim(),
13
  kategori: dataBaru.kategori.trim()
14
};
15

16
artikel.push(artikelBaru);
17

18
res.setHeader("Location", `/api/artikel/${artikelBaru.id}`);
19

20
kirimJSON(res, 201, artikelBaru);

1
Location: /api/artikel/4

10. Membuat Endpoint PUT untuk Mengubah Artikel#

Sekarang kita ingin memperbarui artikel berdasarkan ID.

Endpoint:

1
PUT /api/artikel/2

Client mengirim data pengganti:

1
{
2
  "judul": "Belajar CSS Modern",
3
  "kategori": "CSS"
4
}

Untuk latihan ini, PUT akan mengganti field judul dan kategori pada artikel yang sudah ada.

Jika ID tidak ditemukan, API mengembalikan 404.

Contoh logikanya:

1
const id = Number(cocok[1]);
2

3
const index = artikel.findIndex((item) => item.id === id);
4

5
if (index === -1) {
6
  kirimJSON(res, 404, {
7
    pesan: "Artikel tidak ditemukan."
8
  });
9
  return;
10
}
11

12
const dataBaru = await bacaJSON(req);
13

14
if (!validasiArtikel(dataBaru)) {
15
  kirimJSON(res, 400, {
16
    pesan: "Judul dan kategori wajib diisi."
17
  });
18
  return;
19
}
20

21
artikel[index] = {
22
  id,
23
  judul: dataBaru.judul.trim(),
24
  kategori: dataBaru.kategori.trim()
25
};
26

27
kirimJSON(res, 200, artikel[index]);

Perhatikan bahwa kita menggunakan findIndex() untuk mencari posisi artikel di dalam array.

Kemudian kita mengganti data pada posisi tersebut.

Pada implementasi ini, PUT hanya mendukung pembaruan artikel yang sudah ada.

Walaupun secara semantik HTTP PUT juga dapat digunakan untuk membuat resource pada URI tertentu, perilaku tersebut tidak kita terapkan pada latihan ini.

11. Membuat Endpoint DELETE untuk Menghapus Artikel#

Sekarang kita masuk ke operasi Delete.

Endpoint:

1
DELETE /api/artikel/2

Server perlu mencari artikel berdasarkan ID.

Jika ditemukan, hapus dari array.

Kita dapat menggunakan:

1
artikel = artikel.filter((item) => item.id !== id);

Method filter() membuat array baru yang hanya berisi artikel dengan ID berbeda.

Contoh routing:

1
const id = Number(cocok[1]);
2

3
const data = artikel.find((item) => item.id === id);
4

5
if (!data) {
6
  kirimJSON(res, 404, {
7
    pesan: "Artikel tidak ditemukan."
8
  });
9
  return;
10
}
11

12
artikel = artikel.filter((item) => item.id !== id);
13

14
res.writeHead(204);
15
res.end();

Status 204 No Content menunjukkan operasi berhasil tanpa body response.

Karena itu, kita tidak mengirim JSON setelah status 204.

12. Menangani JSON Tidak Valid#

Bagaimana jika client mengirim body seperti ini?

1
{"judul": "Belajar Backend",}

Format tersebut bukan JSON yang valid.

Jika langsung diproses menggunakan JSON.parse(), akan muncul SyntaxError.

Untuk menangani kondisi tersebut, kita bisa menggunakan try...catch.

Contohnya:

1
try {
2
  const data = await bacaJSON(req);
3

4
  // Proses data
5
} catch (error) {
6
  if (error instanceof SyntaxError) {
7
    kirimJSON(res, 400, {
8
      pesan: "Format JSON tidak valid."
9
    });
10
    return;
11
  }
12

13
  throw error;
14
}

Dengan demikian, request yang mengandung JSON tidak valid akan mendapatkan status 400 Bad Request.

Namun, kita juga perlu membedakan kesalahan format request dengan error internal server.

Pada versi lengkap nanti, kita akan membuat penanganan error yang lebih terstruktur.

13. Membatasi Ukuran Request Body#

Membaca seluruh request body tanpa batas ukuran dapat menimbulkan masalah.

Misalnya, client mengirim body berukuran sangat besar.

Jika server terus mengumpulkan data ke memori, penggunaan memori dapat meningkat.

Untuk latihan ini, kita akan membatasi body JSON maksimal 10 KB.

Buat function:

1
async function bacaJSON(req) {
2
  const batasUkuran = 10 * 1024;
3
  const chunks = [];
4
  let totalUkuran = 0;
5

6
  for await (const chunk of req) {
7
    totalUkuran += chunk.length;
8

9
    if (totalUkuran > batasUkuran) {
10
      const error = new Error("Ukuran request terlalu besar.");
11
      error.statusCode = 413;
12
      throw error;
13
    }
14

15
    chunks.push(chunk);
16
  }
17

18
  const body = Buffer.concat(chunks).toString("utf8");
19

20
  try {
21
    return JSON.parse(body);
22
  } catch {
23
    const error = new Error("Format JSON tidak valid.");
24
    error.statusCode = 400;
25
    throw error;
26
  }
27
}

Di sini kita memperkenalkan dua status code:

• 400 Bad Request: body bukan JSON yang valid.
• 413 Content Too Large: body melebihi batas yang diizinkan.

Batas 10 KB hanya untuk latihan.

Pada aplikasi nyata, batas ukuran perlu disesuaikan dengan jenis data dan kebutuhan aplikasi.

Penting juga untuk memahami bahwa ketika stream request dihentikan lebih awal akibat batas ukuran, koneksi dan respons harus ditangani dengan benar.

Karena itu, implementasi produksi membutuhkan pengelolaan stream, timeout, dan koneksi yang lebih matang.

14. Membuat REST API Lengkap Tanpa Express#

Sekarang kita gabungkan seluruh bagian menjadi satu file server.js.

Kode berikut menggunakan:

• Modul node:http.
• Array sebagai penyimpanan sementara.
• Routing berdasarkan method dan pathname.
• Pembacaan body JSON.
• Validasi data.
• Penanganan error.
• Batas ukuran body.

Ganti seluruh isi server.js dengan kode berikut:

1
const http = require("node:http");
2

3
const HOST = "127.0.0.1";
4
const PORT = 3000;
5
const BATAS_BODY = 10 * 1024;
6

7
let artikel = [
8
  { id: 1, judul: "Belajar HTML", kategori: "HTML" },
9
  { id: 2, judul: "Belajar CSS", kategori: "CSS" },
10
  { id: 3, judul: "Belajar JavaScript", kategori: "JavaScript" }
11
];
12

13
let idBerikutnya = 4;
14

15
function kirimJSON(res, statusCode, data) {
16
  res.writeHead(statusCode, {
17
    "Content-Type": "application/json; charset=utf-8"
18
  });
19

20
  res.end(JSON.stringify(data));
21
}
22

23
function buatError(statusCode, pesan) {
24
  const error = new Error(pesan);
25
  error.statusCode = statusCode;
26
  return error;
27
}
28

29
async function bacaJSON(req) {
30
  const tipeKonten = req.headers["content-type"] || "";
31

32
  if (!/^application\/json(?:\s*;|$)/i.test(tipeKonten)) {
33
    throw buatError(
34
      415,
35
      "Gunakan Content-Type: application/json."
36
    );
37
  }
38

39
  const chunks = [];
40
  let totalUkuran = 0;
41
  let terlaluBesar = false;
42

43
  for await (const chunk of req) {
44
    totalUkuran += chunk.length;
45

46
    if (totalUkuran > BATAS_BODY) {
47
      terlaluBesar = true;
48
    }
49

50
    if (!terlaluBesar) {
51
      chunks.push(chunk);
52
    }
53
  }
54

55
  if (terlaluBesar) {
56
    throw buatError(413, "Ukuran request terlalu besar.");
57
  }
58

59
  const body = Buffer.concat(chunks).toString("utf8");
60

61
  try {
62
    return JSON.parse(body);
63
  } catch {
64
    throw buatError(400, "Format JSON tidak valid.");
65
  }
66
}
67

68
function validasiArtikel(data) {
69
  if (
70
    !data ||
71
    typeof data !== "object" ||
72
    Array.isArray(data)
73
  ) {
74
    return false;
75
  }
76

77
  return (
78
    typeof data.judul === "string" &&
79
    data.judul.trim() !== "" &&
80
    typeof data.kategori === "string" &&
81
    data.kategori.trim() !== ""
82
  );
83
}
84

85
async function tanganiRequest(req, res) {
86
  const url = new URL(req.url, "http://localhost");
87
  const pathname = url.pathname;
88
  const method = req.method;
89

90
  const cocok = pathname.match(/^\/api\/artikel\/([1-9]\d*)$/);
91

92
  if (method === "GET" && pathname === "/api/artikel") {
93
    kirimJSON(res, 200, artikel);
94
    return;
95
  }
96

97
  if (method === "GET" && cocok) {
98
    const id = Number(cocok[1]);
99
    const data = artikel.find((item) => item.id === id);
100

101
    if (!data) {
102
      kirimJSON(res, 404, {
103
        pesan: "Artikel tidak ditemukan."
104
      });
105
      return;
106
    }
107

108
    kirimJSON(res, 200, data);
109
    return;
110
  }
111

112
  if (method === "POST" && pathname === "/api/artikel") {
113
    const dataBaru = await bacaJSON(req);
114

115
    if (!validasiArtikel(dataBaru)) {
116
      kirimJSON(res, 400, {
117
        pesan: "Judul dan kategori wajib diisi."
118
      });
119
      return;
120
    }
121

122
    const artikelBaru = {
123
      id: idBerikutnya++,
124
      judul: dataBaru.judul.trim(),
125
      kategori: dataBaru.kategori.trim()
126
    };
127

128
    artikel.push(artikelBaru);
129

130
    res.setHeader(
131
      "Location",
132
      `/api/artikel/${artikelBaru.id}`
133
    );
134

135
    kirimJSON(res, 201, artikelBaru);
136
    return;
137
  }
138

139
  if (method === "PUT" && cocok) {
140
    const id = Number(cocok[1]);
141

142
    const index = artikel.findIndex((item) => item.id === id);
143

144
    if (index === -1) {
145
      kirimJSON(res, 404, {
146
        pesan: "Artikel tidak ditemukan."
147
      });
148
      return;
149
    }
150

151
    const dataBaru = await bacaJSON(req);
152

153
    if (!validasiArtikel(dataBaru)) {
154
      kirimJSON(res, 400, {
155
        pesan: "Judul dan kategori wajib diisi."
156
      });
157
      return;
158
    }
159

160
    artikel[index] = {
161
      id,
162
      judul: dataBaru.judul.trim(),
163
      kategori: dataBaru.kategori.trim()
164
    };
165

166
    kirimJSON(res, 200, artikel[index]);
167
    return;
168
  }
169

170
  if (method === "DELETE" && cocok) {
171
    const id = Number(cocok[1]);
172

173
    const data = artikel.find((item) => item.id === id);
174

175
    if (!data) {
176
      kirimJSON(res, 404, {
177
        pesan: "Artikel tidak ditemukan."
178
      });
179
      return;
180
    }
181

182
    artikel = artikel.filter((item) => item.id !== id);
183

184
    res.writeHead(204);
185
    res.end();
186
    return;
187
  }
188

189
  const pathArtikel =
190
    pathname === "/api/artikel" ||
191
    /^\/api\/artikel\/[^/]+$/.test(pathname);
192

193
  if (pathArtikel) {
194
    res.setHeader("Allow", "GET, POST, PUT, DELETE");
195

196
    kirimJSON(res, 405, {
197
      pesan: "Method tidak diizinkan untuk endpoint ini."
198
    });
199
    return;
200
  }
201

202
  kirimJSON(res, 404, {
203
    pesan: "Endpoint tidak ditemukan."
204
  });
205
}
206

207
const server = http.createServer((req, res) => {
208
  tanganiRequest(req, res).catch((error) => {
209
    console.error("Error:", error.message);
210

211
    if (res.headersSent) {
212
      res.destroy();
213
      return;
214
    }
215

216
    const statusCode =
217
      Number.isInteger(error.statusCode) &&
218
      error.statusCode >= 400 &&
219
      error.statusCode < 500
220
        ? error.statusCode
221
        : 500;
222

223
    const pesan =
224
      statusCode === 500
225
        ? "Terjadi kesalahan pada server."
226
        : error.message;
227

228
    kirimJSON(res, statusCode, { pesan });
229
  });
230
});
231

232
server.on("error", (error) => {
233
  console.error("Server error:", error.message);
234
});
235

236
server.listen(PORT, HOST, () => {
237
  console.log(`REST API berjalan di http://localhost:${PORT}`);
238
});

Sekarang kita mempunyai API CRUD sederhana tanpa framework.

15. Menjalankan REST API#

Simpan file server.js.

Kemudian buka terminal pada folder proyek.

Jalankan:

1
node server.js

Jika berhasil, akan muncul:

1
REST API berjalan di http://localhost:3000

Sekarang server siap menerima request.

Karena kita menggunakan beberapa HTTP method, pengujian tidak cukup hanya melalui address bar browser.

Kita akan menggunakan curl.

16. Menguji GET Semua Artikel#

Jalankan:

1
curl -i http://localhost:3000/api/artikel

Jika berhasil, status response adalah:

1
200 OK

Body berisi daftar artikel.

Kita juga bisa membuka endpoint tersebut langsung melalui browser karena menggunakan method GET.

17. Menguji GET Detail Artikel#

Jalankan:

1
curl -i http://localhost:3000/api/artikel/2

Jika artikel tersedia, server mengembalikan data artikel dengan ID 2.

Coba juga:

1
curl -i http://localhost:3000/api/artikel/999

Karena artikel dengan ID tersebut tidak tersedia, server mengembalikan:

1
404 Not Found

Dengan body:

1
{
2
  "pesan": "Artikel tidak ditemukan."
3
}

18. Menguji POST untuk Menambah Artikel#

Sekarang kita coba menambahkan artikel baru.

Pada terminal yang mendukung sintaks curl berikut, jalankan:

1
curl -i -X POST http://localhost:3000/api/artikel \
2
  -H "Content-Type: application/json" \
3
  -d '{"judul":"Belajar Backend","kategori":"Programming"}'

Pada Windows PowerShell, contoh yang lebih mudah digunakan adalah:

1
curl.exe -i -X POST http://localhost:3000/api/artikel -H "Content-Type: application/json" -d '{\"judul\":\"Belajar Backend\",\"kategori\":\"Programming\"}'

Catatan: perilaku escaping tanda kutip dapat berbeda antara versi PowerShell dan cara curl menerima argumen. Jika contoh PowerShell mengalami masalah quoting, gunakan file JSON sebagai alternatif yang lebih konsisten.

Buat file artikel-baru.json berisi:

1
{
2
  "judul": "Belajar Backend",
3
  "kategori": "Programming"
4
}

Kemudian jalankan:

1
curl.exe -i -X POST http://localhost:3000/api/artikel -H "Content-Type: application/json" --data-binary "@artikel-baru.json"

Jika berhasil, server mengembalikan status:

1
201 Created

Dengan data artikel baru.

Misalnya:

1
{
2
  "id": 4,
3
  "judul": "Belajar Backend",
4
  "kategori": "Programming"
5
}

Nilai ID dapat berbeda jika kita sudah menambahkan artikel sebelumnya.

19. Menguji PUT untuk Mengubah Artikel#

Sekarang kita ubah artikel dengan ID 2.

Contoh request:

1
curl -i -X PUT http://localhost:3000/api/artikel/2 \
2
  -H "Content-Type: application/json" \
3
  -d '{"judul":"Belajar CSS Modern","kategori":"CSS"}'

Untuk PowerShell, kita juga bisa menggunakan file JSON.

Buat file artikel-update.json:

1
{
2
  "judul": "Belajar CSS Modern",
3
  "kategori": "CSS"
4
}

Kemudian jalankan:

1
curl.exe -i -X PUT http://localhost:3000/api/artikel/2 -H "Content-Type: application/json" --data-binary "@artikel-update.json"

Jika berhasil, server mengembalikan data artikel yang sudah diperbarui.

Coba ambil kembali:

1
curl http://localhost:3000/api/artikel/2

Judul artikel seharusnya sudah berubah.

20. Menguji DELETE untuk Menghapus Artikel#

Sekarang kita hapus artikel dengan ID 2.

Jalankan:

1
curl -i -X DELETE http://localhost:3000/api/artikel/2

Jika berhasil, server mengembalikan:

1
204 No Content

Kemudian coba:

1
curl -i http://localhost:3000/api/artikel/2

Server akan mengembalikan:

1
404 Not Found

Karena artikel tersebut sudah dihapus dari array.

21. Menguji Validasi dan Error#

API yang baik tidak hanya menangani request yang benar.

Kita juga perlu memeriksa perilakunya ketika menerima request yang tidak sesuai.

1
{
2
  "judul": "",
3
  "kategori": "Programming"
4
}

1
400 Bad Request

1
{"judul":"Belajar Backend",}

1
400 Bad Request

1
Content-Type: text/plain

1
415 Unsupported Media Type

1
GET /api/artikel/999

1
404 Not Found

1
413 Content Too Large

22. Mengapa Data Hilang Ketika Server Restart?#

Karena kita menyimpan data menggunakan array:

1
let artikel = [];

Array tersebut berada di memori proses Node.js.

Ketika proses dihentikan, data yang hanya berada di memori tidak dipertahankan secara otomatis.

Ketika server dijalankan kembali, kode inisialisasi akan membuat array dari data awal.

Untuk aplikasi sungguhan, kita biasanya membutuhkan penyimpanan yang lebih permanen.

Contohnya database.

Namun, sebelum masuk ke database, kita perlu memahami bagaimana frontend berkomunikasi dengan API yang sudah dibuat.

Itulah materi pada artikel berikutnya.

23. Kesalahan yang Sering Terjadi#

1
const data = bacaJSON(req);

1
const data = await bacaJSON(req);

24. Latihan Mandiri#

Sekarang coba kembangkan API yang sudah dibuat.

1
{
2
  "id": 1,
3
  "judul": "Belajar HTML",
4
  "kategori": "HTML",
5
  "penulis": "BapakGabut"
6
}

1
GET /api/artikel?kategori=HTML

1
url.searchParams.get("kategori")

1
/api/game

1
{
2
  "id": 1,
3
  "judul": "Game Favorit",
4
  "platform": "Nintendo Switch"
5
}

1
GET /api/artikel/abc

25. Penutup#

Selamat, Gabuters!

Kita berhasil membuat REST API sederhana menggunakan JavaScript dan Node.js native tanpa framework.

API kita sudah mendukung operasi CRUD:

• GET untuk membaca data.
• POST untuk menambahkan data.
• PUT untuk memperbarui data.
• DELETE untuk menghapus data.

Kita juga mempelajari cara membaca request body, menggunakan async/await, memvalidasi data, membatasi ukuran request, dan mengirim status code yang sesuai.

Walaupun data masih disimpan di memori, kita sudah mempunyai fondasi backend yang dapat mengelola resource.

Sekarang muncul pertanyaan berikutnya.

Bagaimana cara menghubungkan halaman HTML dan JavaScript di browser dengan API yang baru kita buat?

Bagaimana cara mengirim request tanpa menggunakan terminal?

Bagaimana cara menampilkan hasil response langsung di halaman?

Pada artikel berikutnya, kita akan belajar Menghubungkan Frontend ke Backend dengan Fetch API.

Kita juga akan membahas Promise, async/await, loading state, dan penanganan error ketika frontend berkomunikasi dengan backend.

Sampai jumpa di artikel berikutnya, Gabuters!