Bagian 3: Backend API dengan Node.js + Express

Halo sobat ruanginformatika! 👋

Kita udah selesai bikin tampilan depan aplikasi to-do list pakai React dan Tailwind. Sekarang saatnya kita ngebangun backend-nya menggunakan Node.js + Express, dan tentu aja kita juga bakal sambungin ke database MongoDB.

📦 Langkah 1: Inisialisasi Proyek Backend

Masuk ke direktori utama proyek dan buat folder baru untuk server:

mkdir server
cd server
npm init -y

Install dependensi utama:

npm install express mongoose dotenv cors

Tambahkan juga package untuk development:

npm install --save-dev nodemon

Edit file package.json dan tambahkan script:

"scripts": {
  "dev": "nodemon index.js"
}
  

🌐 Langkah 2: Setup Express Server

Buat file index.js di root folder server:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());

app.get('/', (req, res) => {
  res.send('API berjalan dengan baik 👍');
});

mongoose.connect(process.env.MONGO_URI)
  .then(() => {
    app.listen(PORT, () => {
      console.log(`Server jalan di http://localhost:${PORT}`);
    });
  })
  .catch((err) => console.log(err));
  

🔐 Langkah 3: Menyambungkan MongoDB

Daftar akun di MongoDB Atlas (kalau belum punya), lalu buat cluster gratis dan database baru.

Setelah itu, buat file .env:

MONGO_URI=isi_dengan_uri_mongodb_kamu

Pastikan file .env masuk ke .gitignore agar tidak ke-upload ke GitHub.

📄 Langkah 4: Membuat Model To-do

Buat folder models dan file Todo.js:

const mongoose = require('mongoose');

const todoSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true
  },
  completed: {
    type: Boolean,
    default: false
  }
}, { timestamps: true });

module.exports = mongoose.model('Todo', todoSchema);
  

🛠️ Langkah 5: Membuat API CRUD

Buat folder routes dan file todoRoutes.js:

const express = require('express');
const router = express.Router();
const Todo = require('../models/Todo');

// Ambil semua todo
router.get('/', async (req, res) => {
  const todos = await Todo.find();
  res.json(todos);
});

// Tambah todo baru
router.post('/', async (req, res) => {
  const newTodo = new Todo({ title: req.body.title });
  const saved = await newTodo.save();
  res.json(saved);
});

// Hapus todo
router.delete('/:id', async (req, res) => {
  await Todo.findByIdAndDelete(req.params.id);
  res.json({ message: 'Todo dihapus' });
});

// Toggle status selesai
router.put('/:id', async (req, res) => {
  const updated = await Todo.findByIdAndUpdate(
    req.params.id,
    { completed: req.body.completed },
    { new: true }
  );
  res.json(updated);
});

module.exports = router;
  

Lalu import route ini di index.js:

const todoRoutes = require('./routes/todoRoutes');
app.use('/api/todos', todoRoutes);
  

✅ Tes API

Gunakan Postman atau Thunder Client (VS Code extension) untuk mengetes endpoint:

• GET /api/todos
• POST /api/todos dengan body: { "title": "Belajar coding" }
• DELETE /api/todos/:id
• PUT /api/todos/:id dengan body: { "completed": true }

🚀 Kesimpulan

Sampai di sini, kita sudah:

• Setup server dengan Express
• Sambungkan ke database MongoDB
• Buat model dan endpoint API dasar

Di artikel berikutnya, kita akan belajar membuat fitur login & register user menggunakan JWT 🔐.

Jangan lupa push proyek kamu ke GitHub dan simpan baik-baik file .env-nya. Silahkan next page untuk ke Bagian 4!