ভূমিকা: Express কেন দরকার?

আগের পর্বে আমরা Node.js দিয়ে একটি সাধারণ স্ক্রিপ্ট চালিয়েছিলাম। কিন্তু বাস্তব জগতে ওয়েব সার্ভার বানাতে গেলে শুধু http মডিউল দিয়ে কাজ করা অনেক কষ্টের – বারবার একই কোড লিখতে হয়, রাউট হ্যান্ডেল করা ঝামেলা হয়। এই সমস্যা সমাধানের জন্যই তৈরি হয়েছে Express.js।

Express হলো Node.js-এর জন্য একটি মিনিমালিস্ট ওয়েব ফ্রেমওয়ার্ক। এর মানে, এটি আপনাকে অল্প কোডে অনেক শক্তিশালী সার্ভার বানানোর ক্ষমতা দেয়। আজ আমরা Express ইন্সটল করব, মুদি দোকানের জন্য একটি products.json ডেটা ফাইল বানাব, আর তৈরি করব আমাদের প্রথম API – GET /products, যা ব্রাউজার থেকে সব প্রোডাক্টের তালিকা JSON ফরম্যাটে দেখাবে।

ধাপ ১: Express ইন্সটল করা

প্রথমেই আমরা আমাদের প্রোজেক্ট ফোল্ডার তৈরি করি বা আগের shop-api ফোল্ডারে ঢুকি। তারপর npm দিয়ে Express ইন্সটল করি।

cd ~
mkdir -p shop-api
cd shop-api
npm init -y
npm install express

কী হলো এখানে?

  • npm init -y – এটি একটি package.json ফাইল তৈরি করে, যেখানে তোমার প্রোজেক্টের নাম, ভার্সন, এবং অন্যান্য তথ্য থাকে। -y ফ্ল্যাগ দিলে সব প্রশ্নের উত্তর "হ্যাঁ" দিয়ে দেয়, ফলে দ্রুত ফাইল তৈরি হয়।
  • npm install express – এই কমান্ডটি ইন্টারনেট থেকে Express ডাউনলোড করে node_modules নামের একটি ফোল্ডারে রাখে। এই ফোল্ডারেই Express-এর সকল কোড থাকে। সাথে package.json ফাইলে একটি এন্ট্রি যোগ হয়, যাতে বোঝা যায় Express এখন এই প্রোজেক্টের একটি নির্ভরতা (dependency)।

ধাপ ২: মুদি দোকানের প্রোডাক্ট ডেটা তৈরি (products.json)

এখন আমরা আমাদের মুদি দোকানের জন্য কিছু প্রোডাক্টের একটা তালিকা বানাব। এটি হবে একটি JSON ফাইল। JSON (JavaScript Object Notation) হলো ডেটা রাখার একটি জনপ্রিয় ফরম্যাট, যা মানুষও পড়তে পারে, মেশিনও পড়তে পারে।

micro products.json

নিচের সম্পূর্ণ JSON কোডটি হুবহু লিখে ফেলো। এখানে ৮টি মুদি পণ্য আছে – চাল, ডাল, তেল, চিনি, লবণ, আটা, সাবান, আর চা পাতা।

[
  {
    "id": 1,
    "name": "চাল (মোটা)",
    "price": 55,
    "stock": 100,
    "unit": "কেজি"
  },
  {
    "id": 2,
    "name": "মসুর ডাল",
    "price": 120,
    "stock": 40,
    "unit": "কেজি"
  },
  {
    "id": 3,
    "name": "সয়াবিন তেল (১ লিটার)",
    "price": 175,
    "stock": 25,
    "unit": "বোতল"
  },
  {
    "id": 4,
    "name": "চিনি",
    "price": 90,
    "stock": 60,
    "unit": "কেজি"
  },
  {
    "id": 5,
    "name": "লবণ (প্যাকেট)",
    "price": 25,
    "stock": 150,
    "unit": "প্যাকেট"
  },
  {
    "id": 6,
    "name": "আটা (২ কেজি)",
    "price": 85,
    "stock": 30,
    "unit": "প্যাকেট"
  },
  {
    "id": 7,
    "name": "সাবান (লাক্স)",
    "price": 35,
    "stock": 80,
    "unit": "পিস"
  },
  {
    "id": 8,
    "name": "চা পাতা (২৫০ গ্রাম)",
    "price": 95,
    "stock": 20,
    "unit": "প্যাকেট"
  }
]

প্রতিটি প্রোডাক্ট অবজেক্টে ৫টি জিনিস লক্ষ্য করো: id (প্রোডাক্টের ইউনিক নম্বর), name (নাম), price (দাম), stock (বর্তমানে কত আছে), আর unit (পরিমাপের একক – কেজি, বোতল, প্যাকেট ইত্যাদি)।

ধাপ ৩: Express সার্ভার তৈরি (server.js)

এবার আসল কাজ – সার্ভার ফাইল তৈরি করব।

micro server.js

নিচের কোডটি বুঝে বুঝে লিখো। প্রতিটি লাইনের পাশে কমেন্ট করে বোঝানো আছে।

// Express ফ্রেমওয়ার্ককে লোড করলাম
const express = require('express');

// ফাইল সিস্টেম (fs) ও পাথ (path) মডিউল – এগুলো Node.js-এরই অংশ
// fs দিয়ে ফাইল পড়া/লেখা হয়, path দিয়ে ফাইলের ঠিকানা তৈরি হয়
const fs = require('fs');
const path = require('path');

// express() কল করলেই একটা সার্ভার অ্যাপ তৈরি হয়ে যায়
const app = express();

// সার্ভার কোন পোর্টে চলবে?
const PORT = 3000;

// express.json() – এটি JSON বডি পার্স করার জন্য (পরবর্তী পর্বে কাজে লাগবে)
app.use(express.json());

// express.static('public') – public ফোল্ডারের ভেতরের ফাইলগুলো (HTML, CSS, JS)
// সরাসরি ব্রাউজার থেকে অ্যাক্সেস করা যাবে
app.use(express.static('public'));

// products.json ফাইলের সম্পূর্ণ পাথ বানানো
const dataFile = path.join(__dirname, 'products.json');

// JSON ফাইল পড়ার ফাংশন
function readProducts() {
  const raw = fs.readFileSync(dataFile, 'utf8');  // ফাইল পড়া
  return JSON.parse(raw);  // স্ট্রিং থেকে জাভাস্ক্রিপ্ট অ্যারেতে রূপান্তর
}

// JSON ফাইলে লেখার ফাংশন (পরবর্তী পর্বে কাজে লাগবে)
function writeProducts(products) {
  fs.writeFileSync(dataFile, JSON.stringify(products, null, 2), 'utf8');
}

// ===== API রাউট =====

// GET /products – সব প্রোডাক্টের তালিকা পাঠাবে
app.get('/products', (req, res) => {
  const products = readProducts();  // ফাইল থেকে ডেটা পড়া
  res.json(products);  // JSON হিসেবে রেসপন্স পাঠানো
});

// GET / – হোম পেজ
app.get('/', (req, res) => {
  res.send('<h1>🛒 মুদি দোকান ম্যানেজমেন্ট API</h1><p>/products এ যাও</p>');
});

// সার্ভার চালু করা
app.listen(PORT, () => {
  console.log(`✅ সার্ভার চালু হয়েছে: http://localhost:${PORT}`);
  console.log(`📦 প্রোডাক্ট দেখতে: http://localhost:${PORT}/products`);
});

ধাপ ৪: সার্ভার রান ও টেস্ট

টার্মিনালে সার্ভার চালু করো:

node server.js

তুমি দেখবে:

✅ সার্ভার চালু হয়েছে: http://localhost:3000
📦 প্রোডাক্ট দেখতে: http://localhost:3000/products

টেস্ট করার দুটি উপায়:

  1. curl দিয়ে (Termux-এর মধ্যেই): নতুন একটি টার্মিনাল সেশন খোলো (বাঁ দিক থেকে সোয়াইপ করে "New session") এবং রান করো: 
    curl http://localhost:3000/products
    তুমি সম্পূর্ণ JSON ডেটা টার্মিনালে দেখতে পাবে।
  2. ব্রাউজার দিয়ে: Termux-এই রান করো: 
    termux-open-url http://localhost:3000/products
    মোবাইলের ডিফল্ট ব্রাউজারে সুন্দর JSON দেখাবে।

ধাপ ৫: ফ্রন্টএন্ড – HTML টেবিলে ডেটা দেখানো

শুধু JSON দেখলে তো দোকানদার কিছু বুঝবে না! চলো, একটা সুন্দর HTML পেজ বানাই, যেখানে টেবিল আকারে সব প্রোডাক্ট দেখা যাবে।

প্রথমে public ফোল্ডার তৈরি করো (যদি না থাকে):

mkdir -p public
cd public
micro products.html

নিচের কোডটি লিখো। এটি একটি পূর্ণাঙ্গ HTML পেজ, যা fetch ব্যবহার করে আমাদের API থেকে ডেটা নিয়ে টেবিলে দেখাবে।

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>মুদি দোকানের প্রোডাক্ট</title>
  <style>
    body {
      font-family: 'Noto Sans Bengali', sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    h1 { text-align: center; }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    th {
      background: #059669;
      color: white;
      padding: 12px;
      text-align: center;
    }
    td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: center;
    }
    tr:nth-child(even) { background: #f3f4f6; }
    tr:hover { background: #e5e7eb; }
  </style>
</head>
<body>
  <h1>🛒 মুদি দোকানের প্রোডাক্ট তালিকা</h1>
  <table id="productTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>নাম</th>
        <th>মূল্য</th>
        <th>স্টক</th>
        <th>একক</th>
      </tr>
    </thead>
    <tbody>
      <tr><td colspan="5">⏳ লোড হচ্ছে...</td></tr>
    </tbody>
  </table>

  <script>
    // API থেকে ডেটা fetch করা
    fetch('/products')
      .then(function(response) {
        return response.json();  // JSON এ রূপান্তর
      })
      .then(function(products) {
        var tbody = document.querySelector('#productTable tbody');
        // প্রতিটি প্রোডাক্টের জন্য একটি টেবিল রো (tr) তৈরি
        var rows = products.map(function(p) {
          return '<tr>' +
            '<td>' + p.id + '</td>' +
            '<td>' + p.name + '</td>' +
            '<td>৳ ' + p.price + '</td>' +
            '<td>' + p.stock + '</td>' +
            '<td>' + p.unit + '</td>' +
            '</tr>';
        });
        tbody.innerHTML = rows.join('');  // সবগুলো রো একসাথে বসিয়ে দেওয়া
      })
      .catch(function() {
        document.querySelector('#productTable tbody').innerHTML =
          '<tr><td colspan="5">❌ ডেটা লোড করতে ব্যর্থ</td></tr>';
      });
  </script>
</body>
</html>

সেভ করে বেরিয়ে আসো। এখন টার্মিনালে যাও এবং এই পেজটি খোলো:

termux-open-url http://localhost:3000/products.html

ব্রাউজারে দেখবে – ৮টি মুদি প্রোডাক্ট সুন্দর একটি টেবিলে চলে এসেছে! 🎉

বোঝার জন্য গুরুত্বপূর্ণ: require বনাম import

তুমি দেখেছ আমরা লিখেছি const express = require('express') – এটি CommonJS স্টাইল। পুরোনো Node.js ভার্সনে এভাবেই মডিউল ইম্পোর্ট করা হয়। তবে আধুনিক Node.js (ভার্সন ১৪+) ESM (ECMAScript Modules) সাপোর্ট করে, যেখানে লেখা হয় import express from 'express'। আমরা এখানে CommonJS ব্যবহার করছি, কারণ এটি Termux-এ সবচেয়ে নির্ভরযোগ্যভাবে কাজ করে এবং বেশিরভাগ টিউটোরিয়াল এই স্টাইলেই লেখা।

package.json ফাইলের ভেতর কী কী আছে?

একটা সময় নিয়ে package.json ফাইলটি খুলে দেখো (micro package.json)। এখানে তুমি দেখবে:

  • "name": প্রোজেক্টের নাম
  • "version": ভার্সন নম্বর
  • "dependencies": এক্সপ্রেসের মতো প্যাকেজগুলোর তালিকা ও তাদের ভার্সন

এই ফাইলের কারণেই তুমি চাইলেই এই প্রোজেক্ট অন্য কাউকে শেয়ার করতে পারবে – সে শুধু npm install দিলেই সব প্যাকেজ ডাউনলোড হয়ে যাবে, সম্পূর্ণ ফোল্ডার কপি করতে হবে না!

🎯 আজকের সারাংশ

আজ আমরা অনেক কিছু শিখলাম:

  • Express.js কী এবং কেন দরকার
  • npm দিয়ে Express ইন্সটল করে package.json বোঝা
  • মুদি দোকানের জন্য ৮টি প্রোডাক্টের JSON ফাইল তৈরি
  • Express-এ GET /products API রাউট তৈরি
  • curl ও ব্রাউজার দিয়ে API টেস্ট করা
  • express.static দিয়ে HTML পেজ সার্ভ করা
  • ফ্রন্টএন্ডে fetch করে API থেকে ডেটা এনে টেবিলে দেখানো
  • CommonJS বনাম ESM মডিউল সিস্টেম

এখন তোমার মুদি দোকানের জন্য একটি লাইভ API আছে! 🚀

পরবর্তী পর্বে আমরা শিখব কীভাবে নতুন প্রোডাক্ট যোগ করতে হয় – POST API তৈরি করব। আর তখনই আমাদের দোকান সত্যিই "ম্যানেজমেন্ট সিস্টেম"-এর দিকে এগোবে। ততক্ষণ এই কোডগুলো বারবার প্র্যাকটিস করো। কোনো প্রশ্ন থাকলে কমেন্টে জানিও। শুভ কোডিং! 😊🛒✨

Introduction: Why Express?

In Part 1, we ran a simple Node.js script. But in the real world, building a web server using just the http module is painful – lots of repetitive code, messy route handling. That's why Express.js exists.

Express is a minimalist web framework for Node.js. It lets you build powerful servers with very little code. Today we'll install Express, create a products.json for a grocery shop, and build our very first API – GET /products, which will serve the full product list as JSON in the browser.

Step 1: Install Express

cd ~
mkdir -p shop-api
cd shop-api
npm init -y
npm install express

What happened?

  • npm init -y – creates package.json with your project's metadata. The -y flag answers "yes" to all prompts.
  • npm install express – downloads Express from the internet into the node_modules folder and lists it as a dependency in package.json.

Step 2: Grocery Product Data (products.json)

micro products.json
[
  { "id": 1, "name": "Rice (Coarse)", "price": 55, "stock": 100, "unit": "kg" },
  { "id": 2, "name": "Red Lentils", "price": 120, "stock": 40, "unit": "kg" },
  { "id": 3, "name": "Soybean Oil (1 L)", "price": 175, "stock": 25, "unit": "bottle" },
  { "id": 4, "name": "Sugar", "price": 90, "stock": 60, "unit": "kg" },
  { "id": 5, "name": "Salt (Packet)", "price": 25, "stock": 150, "unit": "pack" },
  { "id": 6, "name": "Flour (2 kg)", "price": 85, "stock": 30, "unit": "pack" },
  { "id": 7, "name": "Soap (Lux)", "price": 35, "stock": 80, "unit": "pcs" },
  { "id": 8, "name": "Tea Leaves (250 g)", "price": 95, "stock": 20, "unit": "pack" }
]

Step 3: Express Server (server.js)

micro server.js
const express = require('express');
const fs = require('fs');
const path = require('path');

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

app.use(express.json());
app.use(express.static('public'));

const dataFile = path.join(__dirname, 'products.json');

function readProducts() {
  return JSON.parse(fs.readFileSync(dataFile, 'utf8'));
}

function writeProducts(products) {
  fs.writeFileSync(dataFile, JSON.stringify(products, null, 2), 'utf8');
}

// GET /products
app.get('/products', (req, res) => {
  res.json(readProducts());
});

app.get('/', (req, res) => {
  res.send('<h1>🛒 Grocery Shop Management API</h1><p>Go to /products</p>');
});

app.listen(PORT, () => {
  console.log(`✅ Server running: http://localhost:${PORT}`);
  console.log(`📦 Products at: http://localhost:${PORT}/products`);
});

Step 4: Run & Test

node server.js

Test with curl (open a new Termux session):

curl http://localhost:3000/products

Or open in browser:

termux-open-url http://localhost:3000/products

Step 5: Frontend HTML Table

mkdir -p public
cd public
micro products.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Grocery Products</title>
  <style>
    body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
    h1 { text-align: center; }
    table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    th { background: #059669; color: white; padding: 12px; }
    td { border: 1px solid #ddd; padding: 10px; text-align: center; }
    tr:nth-child(even) { background: #f3f4f6; }
  </style>
</head>
<body>
  <h1>🛒 Grocery Product List</h1>
  <table id="productTable">
    <thead><tr><th>ID</th><th>Name</th><th>Price</th><th>Stock</th><th>Unit</th></tr></thead>
    <tbody><tr><td colspan="5">⏳ Loading...</td></tr></tbody>
  </table>
  <script>
    fetch('/products')
      .then(res => res.json())
      .then(products => {
        const tbody = document.querySelector('#productTable tbody');
        tbody.innerHTML = products.map(p =>
          `<tr><td>${p.id}</td><td>${p.name}</td><td>৳ ${p.price}</td><td>${p.stock}</td><td>${p.unit}</td></tr>`
        ).join('');
      });
  </script>
</body>
</html>

Open it:

termux-open-url http://localhost:3000/products.html

🎯 Summary

Today we covered:

  • What Express is and why it's needed
  • Installing Express with npm and understanding package.json
  • Creating grocery product data in JSON
  • Building a GET /products route
  • Testing with curl and browser
  • Serving static HTML files
  • Fetching API data into a styled HTML table

Your grocery shop now has a live API! In the next part, we'll build the POST API to add new products and take a big step toward a true management system. Practice well, and drop any questions in the comments. Happy coding! 😊🛒✨

← পূর্ববর্তী ← Previous
🏠 হোম 🏠 Home
পরবর্তী → Next →