Membuat TODO App RESTful Expressjs Sederhana (Tutorial Cepat)

Kali ini gw berbagi tentang pembuatan aplikasi web REST dengan menggunakan expressjs untuk membuat Todo App Sederhana.

Pada story ini gw cuma pake expressjs aja, tanpa menggunakan koneksi ke database. Serta gw gak jelasin secara detil setiap syntax.

Yang perlu disiapkan sebelum memulai yaitu :
1. Install nodemon di global dengan menjalankan npm install nodemon -g pada cmd/terminal.
2. Buat Project Expressjs menggunakan express generator. (Tutorial Membuat Project Expressjs)
3. Pastikan project sudah dapat dijalankan
4. POSTMAN, INSOMNIA, atau sejenisnya

Oke, sekarang saatnya mulai!

Gambar 1: Struktur Project

• Tambahkan file baru todos.js dan todosRepo.json seperti pada gambar 1.
• Pada file todos.js masukan kode berikut :

var express = require('express');
var router = express.Router();
var fs = require('fs');
var repo = require('../models/todosRepo.json');
router.get('/', function (req, res, next) {
res.json(repo);
});
router.post('/add', function (req, res, next) {
repo.push({
"name": req.body.name,
"isDone": req.body.isDone,
"createdAt": new Date()
});
fs.writeFile('./models/todosRepo.json', JSON.stringify(repo), 'utf8', (err) => {
if (err) throw err;
});
res.json(repo);
});
router.get('/setDone/:name', function (req, res, next) {
var index = getIndexTodo(req.params);
if (index != -1)
repo = Object.assign([], repo, {
[index]: {
"name": req.params.name,
"isDone": true,
"createdAt": repo[index].createdAt
}
});
fs.writeFile('./models/todosRepo.json', JSON.stringify(repo), 'utf8', (err) => {
if (err) throw err;
});
res.json(repo);
});
function getIndexTodo(params) {
return repo.indexOf(repo.find(function (element) {
return params.name === element.name;
}));
}
module.exports = router;

Gambar 2

Pada Gambar 2 kita menambahkan fs yang digunakan untuk menuliskan file. Kemudian repo akan menampung nilai json pada todosRepo.json.

Gambar 3

Gambar 3 merupakan fungsi yang mengembalikan response repo dalam bentuk JSON pada path “ / ” dengan menggunakan method request GET.

Gambar 4

Gambar 4 merupakan fungsi untuk menambahkan Todo baru pada file todosRepo.json pada path “ /add ” dengan menggunakan method request POST.

Gambar 5

Gambar 5 merupakan fungsi untuk mengubah status isDone pada Todo menjadi true (yang artinya sudah selesai) pada path “ /setDone/:name ” dengan menggunakan method request GET.

• Kemudian pada todosRepo.json tuliskan :

[{"name": "Makan","isDone": false,"createdAt": ""}]

• Pada app.js tambahkan kode berikut :

Gambar 6

Gambar 7

• Ubahlah script pada package.json menjadi seperti berikut :

{
...
"scripts": {
"start": "nodemon ./bin/www",
"dev": "SET DEBUG=todo-app:* & npm start"
},
...
}

• Jalankan pada cmd / terminal dengan menggunakan perintah :

npm run dev

• Bukalah POSTMAN/INSOMNIA/lainnya kemudian lakukan request :

GET ALL TODOS

ADD TODOS

SET TODOS IS DONE

YEAYY!! Sudah selesai! Semoga dengan tutorial cepat ini bisa membantu dan bermanfaat! Terima Kasih!