Bangun E-Commerce Canggih: Microservices dengan Node.js dan React
Daftar Isi
Pendahuluan
Dalam era digital saat ini, membangun platform e-commerce yang canggih dan scalable sangat penting untuk memenuhi kebutuhan bisnis yang terus berkembang. Pendekatan microservices memungkinkan pengembangan aplikasi yang modular, mudah dikelola, dan dapat diskalakan secara independen. Ebook ini akan membimbing Anda langkah demi langkah dalam membangun e-commerce menggunakan Node.js untuk backend microservices dan React untuk frontend.
Konsep Microservices
Microservices adalah pendekatan arsitektur perangkat lunak yang memecah aplikasi menjadi layanan-layanan kecil yang berdiri sendiri dan dapat berkomunikasi satu sama lain melalui API. Setiap layanan bertanggung jawab atas fungsi bisnis tertentu, sehingga memudahkan pengembangan, pengujian, dan deployment secara terpisah.
- Modularitas dan pemisahan tanggung jawab
- Skalabilitas independen tiap layanan
- Pemeliharaan dan pengembangan yang lebih mudah
- Penggunaan teknologi yang berbeda untuk tiap layanan
Persiapan Lingkungan Pengembangan
Sebelum memulai pengembangan, pastikan Anda sudah menyiapkan lingkungan pengembangan yang sesuai:
- Install Node.js versi terbaru dari nodejs.org
- Install package manager seperti npm atau yarn
- Install database seperti MongoDB atau PostgreSQL
- Siapkan editor kode seperti Visual Studio Code
-
Install React CLI dengan
npx create-react-appatau Vite
Membangun Microservice dengan Node.js
Kita mulai dengan membuat microservice backend menggunakan Node.js dan Express. Service ini akan menangani produk, termasuk CRUD (Create, Read, Update, Delete).
const express = require('express');
const app = express();
app.use(express.json());
let products = [];
app.get('/products', (req, res) => {
res.json(products);
});
app.post('/products', (req, res) => {
const product = req.body;
product.id = products.length + 1;
products.push(product);
res.status(201).json(product);
});
app.put('/products/:id', (req, res) => {
const id = parseInt(req.params.id);
const index = products.findIndex(p => p.id === id);
if (index >= 0) {
products[index] = { ...products[index], ...req.body };
res.json(products[index]);
} else {
res.status(404).json({ message: 'Product not found' });
}
});
app.delete('/products/:id', (req, res) => {
const id = parseInt(req.params.id);
products = products.filter(p => p.id !== id);
res.status(204).send();
});
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
console.log(`Product service running on port ${PORT}`);
});
Membangun Frontend dengan React
Selanjutnya, kita buat frontend menggunakan React untuk menampilkan daftar produk dan mengelola produk melalui API microservice yang sudah dibuat.
import React, { useEffect, useState } from 'react';
function App() {
const [products, setProducts] = useState([]);
const [name, setName] = useState('');
const [price, setPrice] = useState('');
useEffect(() => {
fetch('http://localhost:3001/products')
.then(res => res.json())
.then(data => setProducts(data));
}, []);
const addProduct = () => {
fetch('http://localhost:3001/products', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, price: parseFloat(price) }),
})
.then(res => res.json())
.then(product => setProducts([...products, product]));
};
return (
<div className="p-6 max-w-xl mx-auto">
<h1 className="text-2xl font-bold mb-4">Daftar Produk</h1>
<ul className="mb-6">
{products.map(product => (
<li key={product.id} className="border-b py-2">
{product.name} - Rp {product.price.toLocaleString()}
</li>
))}
</ul>
<div className="space-y-4">
<input
type="text"
placeholder="Nama Produk"
value={name}
onChange={e => setName(e.target.value)}
className="w-full border rounded px-3 py-2"
/>
<input
type="number"
placeholder="Harga"
value={price}
onChange={e => setPrice(e.target.value)}
className="w-full border rounded px-3 py-2"
/>
<button
onClick={addProduct}
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
>Tambah Produk</button>
</div>
</div>
);
}
export default App;
Komunikasi Antar Microservices
Microservices berkomunikasi menggunakan protokol HTTP REST atau message broker seperti RabbitMQ atau Kafka. Contoh komunikasi sederhana menggunakan REST API:
// Contoh pemanggilan service order ke service produk
fetch('http://localhost:3001/products/1')
.then(res => res.json())
.then(product => {
console.log('Produk:', product);
});
Untuk sistem yang lebih kompleks, gunakan message broker agar layanan dapat berkomunikasi secara asynchronous dan lebih scalable.
Manajemen Database dan Penyimpanan Data
Setiap microservice biasanya memiliki database sendiri untuk menghindari ketergantungan. Contoh menggunakan MongoDB untuk service produk:
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/productdb', {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const productSchema = new mongoose.Schema({
name: String,
price: Number,
});
const Product = mongoose.model('Product', productSchema);
Dengan pendekatan ini, setiap layanan dapat memilih jenis database yang paling sesuai dengan kebutuhan bisnisnya.
Autentikasi dan Otorisasi
Keamanan sangat penting dalam e-commerce. Gunakan JWT (JSON Web Token) untuk autentikasi dan otorisasi antar microservices.
const jwt = require('jsonwebtoken');
function authenticateToken(req, res, next) {
const authHeader = req.headers['authorization'];
const token = authHeader && authHeader.split(' ')[1];
if (!token) return res.sendStatus(401);
jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (err, user) => {
if (err) return res.sendStatus(403);
req.user = user;
next();
});
}
Terapkan middleware ini pada route yang membutuhkan proteksi agar hanya pengguna yang terautentikasi yang dapat mengaksesnya.
Deployment dan Skalabilitas
Untuk deployment, gunakan containerization dengan Docker agar microservices dapat dijalankan secara konsisten di berbagai lingkungan. Gunakan Kubernetes untuk orkestrasi dan skalabilitas otomatis.
- Buat Dockerfile untuk tiap microservice
- Gunakan Docker Compose untuk development lokal
- Deploy ke cloud provider seperti AWS, GCP, atau Azure
- Manfaatkan Kubernetes untuk manajemen container dan scaling
Kesimpulan
Dengan pendekatan microservices menggunakan Node.js dan React, Anda dapat membangun platform e-commerce yang modular, scalable, dan mudah dikembangkan. Setiap layanan dapat dikembangkan dan dideploy secara independen, memungkinkan tim bekerja secara paralel dan meningkatkan kecepatan pengembangan. Jangan lupa untuk memperhatikan aspek keamanan, komunikasi antar layanan, dan deployment agar aplikasi berjalan optimal.
