Server kecil dengan Express

Tunjukkan pada saya: menyiapkan server

Express adalah paket paling populer untuk membangun server di Node.js – paket ini mengubah pekerjaan menjadi hanya beberapa baris. Server adalah proyek terpisah, selain dari aplikasi React (ingat: frontend dan backend adalah dua bagian). Di terminal:

cd Desktop
mkdir my-server
cd my-server
npm init -y
npm install express

• mkdir membuat folder (membuat direktori),
• npm init -y menyiapkan proyek Node.js baru (membuat package.json),
• npm install express mengunduh Ekspres.

Buka folder di VS Code dan buat file bernama server.js:

const express = require("express");
const app = express();

// When someone sends a GET to /api/hello, respond
app.get("/api/hello", (request, response) => {
  response.json({ message: "Hi! This is your own server. 🎉" });
});

app.listen(3900, () => {
  console.log("Server running at http://localhost:3900");
});

Jalankan:

node server.js

Dan buka http://localhost:3900/api/hello di browser kamu. Apakah kamu melihat respons JSON? kamu baru saja membuat server. Tidak ada keajaiban – 10 baris.

Apa yang terjadi dalam kode:

• require("express") – meminjam paket (versi sisi server dari import).
• app.get("/api/hello", ...) – “menanggapi permintaan GET di alamat ini.” Pasangan alamat + respons tersebut disebut titik akhir.
• response.json({...}) – mengirim kembali JSON.
• app.listen(3900) – mendengarkan pada port 3900. (Vite berjalan pada 3901, server pada 3900 – dua program tidak dapat mendengarkan pada port yang sama.)

kamu menghentikan server dengan Ctrl+C. Dan hati-hati: setelah setiap perubahan kode, kamu harus menghentikan dan memulai ulang – server bukan Vite, server tidak menyegarkan dirinya sendiri.

Tunjukkan pada saya: server dengan data

Server biasanya membagikan data. Tambahkan titik akhir kedua di atas dengarkan:

const results = [
  { opponent: "Lakeside", score: "3:1", home: true },
  { opponent: "Northgate", score: "2:2", home: false },
  { opponent: "Elmwood", score: "4:0", home: true },
];

app.get("/api/results", (request, response) => {
  response.json(results);
});

Mulai ulang server dan buka http://localhost:3900/api/results – data kamu, disajikan melalui API. Ini adalah cara kerja setiap situs web besar (hanya dengan database, bukan array).

Giliran kamu 💪

1. Jalankan server dengan mengikuti panduan ini.
2. Tambahkan titik akhir dengan data dari proyek kamu: 🏫 /api/menu (rangkaian makanan selama seminggu) · 🙋 /api/favorites (permainan/buku top kamu) · 🌍 /api/trips (daftar perjalanan) · ⚽ /api/results (hasil pertandingan).
3. Tambahkan endpoint lucu /api/random yang mengembalikan pesan berbeda setiap saat:

const messages = ["We're winning today!", "Practice at 5 PM!", "Let's go, Eagles!"];

app.get("/api/random", (request, response) => {
  const random = messages[Math.floor(Math.random() * messages.length)];
  response.json({ message: random });
});

4. Cobalah semua titik akhir di browser kamu – lalu coba panggil salah satu titik akhir dengan fetch() dari konsol, seperti yang kamu pelajari di pelajaran terakhir.

Apa yang bisa diambil dari pelajaran ini

• Server di Express: npm init -y, npm install express, node server.js, hentikan dengan Ctrl+C, mulai ulang setelah setiap perubahan.
• Titik akhir = alamat + respons: app.get("/api/something", (permintaan, respons) => respon.json(...)).
• Frontend (3901) dan backend (3900) adalah dua program pada dua port.

© 2026 Ing. Martin Polak / AlgoRhino · Ketentuan penggunaan konten