Bangun Aplikasi Todo List dengan Node.js dan Express

Membangun aplikasi Todo List adalah proyek ideal bagi pemula yang ingin belajar backend development. Dengan Node.js sebagai runtime dan Express sebagai framework, Anda dapat membuat aplikasi yang memungkinkan pengguna menambahkan, menampilkan, dan menghapus daftar tugas secara sederhana dan efisien. Artikel ini akan memandu Anda langkah demi langkah membuat aplikasi Todo List dari nol.

Todo List bukan hanya aplikasi sederhana, tetapi juga sarana belajar konsep dasar backend seperti routing, middleware, dan manajemen data. Express mempermudah penanganan request dan response, sehingga pengembangan aplikasi menjadi lebih cepat dan terstruktur. Dengan proyek ini, pemula bisa memahami alur kerja server, interaksi HTTP, serta manipulasi data sederhana.

Prasyarat

• 🖥️ Node.js dan NPM sudah terinstal di komputer.
• 📚 Pemahaman dasar JavaScript dan konsep Express.
• 📝 Text editor seperti Visual Studio Code atau Sublime Text.

Inisialisasi Proyek

Buka terminal dan buat folder proyek baru, lalu jalankan perintah berikut:

mkdir todo-app cd todo-app npm init -y npm install express body-parser

Membuat Server dengan Express

Buat file server.js dan tulis kode berikut:

const express = require('express'); const bodyParser = require('body-parser');

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

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

let todos = [];

// Route utama
app.get('/', (req, res) => {
res.send('Selamat datang di Todo List API 🚀');
});

// Menampilkan semua todo
app.get('/todos', (req, res) => {
res.json(todos);
});

// Menambahkan todo baru
app.post('/todos', (req, res) => {
const { task } = req.body;
todos.push({ id: todos.length + 1, task });
res.json({ message: 'Todo berhasil ditambahkan ✅', todos });
});

// Menghapus todo berdasarkan ID
app.delete('/todos/:id', (req, res) => {
const id = parseInt(req.params.id);
todos = todos.filter(todo => todo.id !== id);
res.json({ message: 'Todo berhasil dihapus 🗑️', todos });
});

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

Struktur Folder Proyek

File/Folder	Keterangan
server.js	File utama aplikasi Node.js + Express
package.json	Informasi proyek dan daftar dependensi
node_modules	Folder pustaka dari NPM

Menguji Aplikasi

Jalankan server dengan perintah:

node server.js

Gunakan Postman atau cURL untuk mengakses endpoint berikut:

• GET /todos → Menampilkan semua todo 📋
• POST /todos → Menambahkan todo baru ✍️
• DELETE /todos/:id → Menghapus todo tertentu 🗑️

Kelebihan Aplikasi Ini

• ⚡ Mudah dibuat dan dipahami bagi pemula.
• 📡 Cocok untuk belajar konsep server dan routing.
• 🛠️ Dapat dikembangkan lebih lanjut dengan database atau frontend.

Kesimpulan

Dengan Node.js dan Express, membangun aplikasi Todo List sederhana menjadi cepat dan efisien. Proyek ini membantu memahami konsep dasar backend, manipulasi data, dan pengelolaan endpoint. Selanjutnya, Anda dapat menambahkan database, autentikasi, dan antarmuka frontend untuk membuat aplikasi lebih lengkap dan fungsional.

Bagikan Artikel ini