Routes এবং API তৈরি করা

MeanJS স্ট্যাকের মাধ্যমে Express.js ব্যবহার করে সহজেই Routes এবং API তৈরি করা যায়। API (Application Programming Interface) হল একটি সিস্টেমের বিভিন্ন অংশের মধ্যে যোগাযোগ স্থাপন করার মাধ্যম, এবং Routes হল সেই API-র URL পাথ যেখানে ডাটা প্রক্রিয়াকরণ বা রিটার্ন করা হয়।

এখানে, আমরা MeanJS স্ট্যাক ব্যবহার করে Routes এবং API তৈরির প্রক্রিয়া দেখবো।

Routes এবং API তৈরির জন্য প্রয়োজনীয় উপাদান

• Node.js: সার্ভার সাইডের জন্য JavaScript রানটাইম।
• Express.js: ওয়েব অ্যাপ্লিকেশন এবং API তৈরি করার জন্য ফ্রেমওয়ার্ক।
• Mongoose: MongoDB এর সাথে সংযোগ স্থাপন এবং ডেটাবেস পরিচালনার জন্য ODM (Object Data Modeling) লাইব্রেরি।
• MongoDB: ডেটাবেস ব্যবহৃত হবে ডেটা সংরক্ষণ এবং পুনরুদ্ধারের জন্য।

Routes এবং API তৈরি করার প্রক্রিয়া

১. Express.js সার্ভার সেটআপ করা

প্রথমে, Express.js সার্ভার সেটআপ করতে হবে। Express.js হল Node.js-এর জন্য একটি লাইটওয়েট ওয়েব ফ্রেমওয়ার্ক যা API এবং Routes পরিচালনার জন্য ব্যবহৃত হয়।

1. Express.js ইনস্টল করতে:

npm install express --save

2. server.js ফাইল তৈরি করুন এবং Express.js সার্ভার সেটআপ করুন:

const express = require('express');
const mongoose = require('mongoose');
const app = express();
const port = 3000;

// MongoDB URI
const dbURI = 'mongodb://localhost:27017/meanjs_project';

// MongoDB সংযোগ
mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB সংযোগ সফল'))
  .catch((err) => console.log('MongoDB সংযোগ ব্যর্থ:', err));

// Middleware: JSON পার্সিং
app.use(express.json());

// সার্ভার চালু করা
app.listen(port, () => {
  console.log(`Server চালু হয়েছে: http://localhost:${port}`);
});

এখন আমাদের একটি Express.js সার্ভার রয়েছে যা MongoDB এর সাথে সংযুক্ত।

২. Routes তৈরি করা

এখন, আমরা API রাউট তৈরি করবো যা ক্লায়েন্ট থেকে HTTP রিকুয়েস্ট গ্রহণ করবে এবং MongoDB থেকে ডেটা পরিচালনা করবে।

routes/api.js ফাইল তৈরি করে Routes সেটআপ করা হবে।

const express = require('express');
const router = express.Router();

// মডেল ইম্পোর্ট করা (যেমন User মডেল)
const User = require('../models/user.model');

// GET রুট (সকল ইউজার ডেটা রিট্রিভ করা)
router.get('/users', (req, res) => {
  User.find()
    .then((users) => {
      res.json(users);
    })
    .catch((err) => {
      res.status(500).json({ message: 'ডেটা রিট্রিভ করা ব্যর্থ', error: err });
    });
});

// POST রুট (নতুন ইউজার তৈরি করা)
router.post('/users', (req, res) => {
  const newUser = new User(req.body);
  newUser.save()
    .then((user) => {
      res.status(201).json(user);
    })
    .catch((err) => {
      res.status(400).json({ message: 'ইউজার সংরক্ষণ ব্যর্থ', error: err });
    });
});

module.exports = router;

এখানে, দুটি API Route তৈরি করা হয়েছে:

• GET /users: MongoDB থেকে সকল ইউজারের ডেটা রিট্রিভ করবে।
• POST /users: নতুন ইউজার ডেটা MongoDB তে সংরক্ষণ করবে।

৩. Routes অ্যাপ্লিকেশনে যোগ করা

server.js ফাইলে আমরা api.js রুটটি অন্তর্ভুক্ত (import) করবো:

const express = require('express');
const mongoose = require('mongoose');
const app = express();
const port = 3000;

// MongoDB URI
const dbURI = 'mongodb://localhost:27017/meanjs_project';

// MongoDB সংযোগ
mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB সংযোগ সফল'))
  .catch((err) => console.log('MongoDB সংযোগ ব্যর্থ:', err));

// Middleware: JSON পার্সিং
app.use(express.json());

// Routes অন্তর্ভুক্ত করা
const apiRoutes = require('./routes/api');
app.use('/api', apiRoutes);

// সার্ভার চালু করা
app.listen(port, () => {
  console.log(`Server চালু হয়েছে: http://localhost:${port}`);
});

এখানে, /api পাথের মাধ্যমে API রাউটগুলো অ্যাক্সেস করা যাবে।

৪. MongoDB মডেল তৈরি করা

User মডেল তৈরি করতে হবে, যা MongoDB তে ইউজার ডেটা সংরক্ষণ করবে।

models/user.model.js ফাইল তৈরি করুন:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// ইউজার স্কিমা তৈরি
const userSchema = new Schema({
  name: {
    type: String,
    required: true
  },
  email: {
    type: String,
    required: true,
    unique: true
  },
  password: {
    type: String,
    required: true
  }
});

// মডেল তৈরি
const User = mongoose.model('User', userSchema);

module.exports = User;

এখানে, User মডেলটি MongoDB তে users collection তৈরি করবে, যেখানে ইউজারের নাম, ইমেইল এবং পাসওয়ার্ড তথ্য সংরক্ষণ হবে।

৫. API কল করা

এখন, আপনার অ্যাপ্লিকেশনটি প্রস্তুত, এবং আপনি API রাউটগুলো ব্যবহার করতে পারেন। GET /api/users এবং POST /api/users রাউটগুলো HTTP ক্লায়েন্ট থেকে কল করা যাবে।

যেমন, Postman বা অন্য কোনো HTTP ক্লায়েন্ট ব্যবহার করে আপনি POST রিকুয়েস্ট পাঠাতে পারেন:

• POST /api/users (নতুন ইউজার তৈরি করতে)

  • Body:

    {
      "name": "John Doe",
      "email": "johndoe@example.com",
      "password": "password123"
    }
    

• GET /api/users (সব ইউজারের ডেটা রিট্রিভ করতে)

সারাংশ

MeanJS স্ট্যাক ব্যবহার করে Routes এবং API তৈরি করা অত্যন্ত সহজ। Express.js এর মাধ্যমে API রাউট তৈরি করা, এবং MongoDB এর সাথে সংযোগ স্থাপন করে ডেটা পরিচালনা করা সম্ভব। এই পদ্ধতি আপনি ডাইনামিক ওয়েব অ্যাপ্লিকেশন এবং API তৈরি করার জন্য ব্যবহার করতে পারেন, যেখানে MongoDB ডেটাবেসে ডেটা সংরক্ষণ এবং রিট্রিভ করা হয়।

Express.js হল একটি লাইটওয়েট এবং শক্তিশালী Node.js ফ্রেমওয়ার্ক (Node.js Framework) যা ওয়েব অ্যাপ্লিকেশন এবং API তৈরি করার জন্য ব্যবহৃত হয়। MeanJS স্ট্যাকের অংশ হিসেবে, Express.js রাউটিং সিস্টেম ব্যবহার করে ওয়েব অ্যাপ্লিকেশন বা API এর জন্য বিভিন্ন রাউট (Routes) তৈরি করা যায়। Express.js রাউটগুলি HTTP রিকুয়েস্ট (যেমন GET, POST, PUT, DELETE) হ্যান্ডল করতে সহায়ক, এবং এটি ডাইনামিক রিকুয়েস্ট এবং রেসপন্স পরিচালনা করতে পারে।

চলুন, Express.js এর মাধ্যমে Routes তৈরি করার প্রক্রিয়া দেখে নেব।

১. Express.js অ্যাপ্লিকেশন তৈরি করা

প্রথমে, একটি নতুন Node.js প্রজেক্ট তৈরি করতে হবে এবং Express.js ইনস্টল করতে হবে।

Step 1: Node.js প্রজেক্ট শুরু করা

mkdir meanjs-express-app
cd meanjs-express-app
npm init -y

Step 2: Express.js ইনস্টল করা

npm install express

এটি Express.js প্যাকেজ ইনস্টল করবে।

Step 3: অ্যাপ্লিকেশন সেটআপ করা

এখন, একটি app.js নামের ফাইল তৈরি করুন এবং নিচের কোড লিখুন:

// app.js

// Express মডিউলটি রিকোয়ার করা
const express = require('express');
const app = express();

// পোর্ট নং সেট করা
const port = 3000;

// রুট তৈরি করা (GET রিকুয়েস্ট)
app.get('/', (req, res) => {
  res.send('Welcome to the Express.js app!');
});

// রাউট তৈরি করা (POST রিকুয়েস্ট)
app.post('/submit', (req, res) => {
  res.send('Data submitted successfully!');
});

// রাউট তৈরি করা (PUT রিকুয়েস্ট)
app.put('/update', (req, res) => {
  res.send('Data updated successfully!');
});

// রাউট তৈরি করা (DELETE রিকুয়েস্ট)
app.delete('/delete', (req, res) => {
  res.send('Data deleted successfully!');
});

// অ্যাপ্লিকেশন শুরু করা
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

এখানে, আমরা GET, POST, PUT, এবং DELETE রিকুয়েস্ট হ্যান্ডল করার জন্য চারটি রাউট তৈরি করেছি। এই রাউটগুলোর মাধ্যমে Express.js HTTP রিকুয়েস্টের প্রতিটির জন্য একটি প্রতিক্রিয়া (response) প্রদান করবে।

২. Dynamic Routes (Dynamic Parameters)

আপনি ডাইনামিক রাউটও তৈরি করতে পারেন, যেখানে রাউটের অংশ হিসেবে প্যারামিটার পাস করা যায়। Express.js এর মাধ্যমে Dynamic Routing সম্ভব, যা রাউটের URL এর মধ্যে ডাইনামিক প্যারামিটার গ্রহণ করে।

// ডাইনামিক রাউট (যেমন: /user/:id)
app.get('/user/:id', (req, res) => {
  const userId = req.params.id; // URL থেকে প্যারামিটার অ্যাক্সেস করা
  res.send(`User ID is: ${userId}`);
});

এখানে, :id হল একটি প্যারামিটার যা URL এর অংশ হিসেবে ব্যবহৃত হয়। আপনি এই প্যারামিটারকে req.params এর মাধ্যমে অ্যাক্সেস করতে পারবেন।

উদাহরণ:

• GET /user/123 - আউটপুট: User ID is: 123
• GET /user/456 - আউটপুট: User ID is: 456

৩. Query Parameters

এছাড়া, Query Parameters ব্যবহার করেও রাউট তৈরি করা যায়, যা URL এর পরে ? চিহ্ন দিয়ে ব্যবহৃত হয়।

// Query parameter ব্যবহার করে রাউট
app.get('/search', (req, res) => {
  const query = req.query.q;  // Query parameter থেকে ডেটা গ্রহণ করা
  res.send(`You searched for: ${query}`);
});

এখানে, req.query.q এর মাধ্যমে q নামক query parameter এর মান অ্যাক্সেস করা হচ্ছে।

উদাহরণ:

• GET /search?q=MeanJS - আউটপুট: You searched for: MeanJS
• GET /search?q=Express - আউটপুট: You searched for: Express

৪. Middleware ব্যবহার করা

Express.js এ Middleware ব্যবহৃত হয় রিকুয়েস্ট প্রসেসিংয়ের আগে কিছু কাজ করার জন্য। উদাহরণস্বরূপ, আপনি একটি logging middleware তৈরি করতে পারেন যা প্রতিটি রিকুয়েস্ট লগ করবে।

// Middleware তৈরি করা
app.use((req, res, next) => {
  console.log(`${req.method} request received at ${req.url}`);
  next();  // পরবর্তী middleware বা রাউট হ্যান্ডলার চালাবে
});

এটি সমস্ত HTTP রিকুয়েস্টের আগে কার্যকর হবে এবং রিকুয়েস্টের method এবং URL কনসোলে লগ করবে।

৫. Router ব্যবহার করা

একাধিক রাউট কনফিগার করার জন্য, Router ব্যবহার করা যেতে পারে। এটি রাউটগুলোকে মডুলার করে রাখে, এবং অ্যাপ্লিকেশনে কোডের পুনঃব্যবহারযোগ্যতা বাড়ায়।

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

// একটি রাউট তৈরি করা
router.get('/home', (req, res) => {
  res.send('Welcome to the Home Page!');
});

// আরও রাউট যোগ করা
router.get('/about', (req, res) => {
  res.send('About Us');
});

// router এক্সপোর্ট করা
module.exports = router;

এখন, মূল অ্যাপ্লিকেশনে এই রাউটারটি ব্যবহার করতে হবে।

// app.js

const express = require('express');
const app = express();
const router = require('./router'); // রাউটার ইম্পোর্ট করা

// রাউট হ্যান্ডলার ব্যবহার করা
app.use('/page', router);  // /page/home এবং /page/about রাউট চালু হবে

// অ্যাপ্লিকেশন শুরু করা
const port = 3000;
app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

এখন, /page/home এবং /page/about রাউটগুলো আপনার অ্যাপ্লিকেশন থেকে পাওয়া যাবে।

সারাংশ

এখন পর্যন্ত, আমরা Express.js এর মাধ্যমে বিভিন্ন ধরনের routes তৈরি করার প্রক্রিয়া শিখেছি। Express.js রাউটিং সিস্টেম ব্যবহার করে, আপনি ডাইনামিক রাউট, query parameters, middleware, এবং রাউটারে বিভিন্ন কাস্টম ফাংশন যুক্ত করতে পারেন। এই স্ট্রাকচারটি MeanJS স্ট্যাকের অংশ হিসেবে একটি শক্তিশালী API এবং ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।

MeanJS স্ট্যাকের সাহায্যে RESTful API তৈরি করা এবং CRUD (Create, Read, Update, Delete) অপারেশন পরিচালনা করা একটি সাধারণ কিন্তু গুরুত্বপূর্ণ কাজ। এখানে আমরা দেখব কীভাবে Express.js ব্যবহার করে MongoDB ডেটাবেসের সাথে RESTful API তৈরি করা যায় এবং CRUD অপারেশন করা যায়।

RESTful API এবং CRUD অপারেশন সম্পর্কে পরিচিতি

RESTful API হলো একটি সিস্টেম বা সার্ভিস যা HTTP পদ্ধতিতে নির্দিষ্ট CRUD অপারেশন (Create, Read, Update, Delete) পরিচালনা করতে সাহায্য করে। এতে বিভিন্ন HTTP মেথড (যেমন GET, POST, PUT, DELETE) ব্যবহৃত হয় ডেটাবেসের রেকর্ড তৈরি, পড়া, আপডেট এবং মুছে ফেলার জন্য।

Express.js এবং MongoDB দিয়ে RESTful API তৈরি করা

এখন, আমরা একটি সিম্পল Express.js সার্ভার তৈরি করব, যা MongoDB ডেটাবেসের সাথে যুক্ত থাকবে এবং আমাদের CRUD অপারেশন পরিচালনা করবে।

প্রাথমিক সেটআপ

প্রথমে একটি নতুন ডিরেক্টরি তৈরি করুন এবং প্রজেক্ট ইনিশিয়ালাইজ করুন:

mkdir meanjs-crud-api
cd meanjs-crud-api
npm init -y

এরপর, প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করুন:

npm install express mongoose body-parser

• express: ওয়েব সার্ভার তৈরি করতে ব্যবহৃত।
• mongoose: MongoDB ডেটাবেসের সাথে সংযোগ এবং মডেল ব্যবহারের জন্য।
• body-parser: HTTP রিকোয়েস্টের বডি পার্স করার জন্য।

MongoDB মডেল তৈরি করা

প্রথমে একটি User মডেল তৈরি করি, যা আমাদের ডেটাবেসে ব্যবহারকারীর তথ্য সংরক্ষণ করবে। models ফোল্ডারে user.model.js ফাইল তৈরি করুন:

// models/user.model.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// User schema তৈরি
const UserSchema = new Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  age: { type: Number, required: true }
});

// মডেল তৈরি করা
const User = mongoose.model('User', UserSchema);

module.exports = User;

এখানে, আমরা name, email, এবং age ফিল্ড নিয়ে একটি সিম্পল User মডেল তৈরি করেছি।

Express.js সার্ভার সেটআপ

এখন, app.js ফাইল তৈরি করুন এবং নিচের কোডটি লিখুন:

// app.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const User = require('./models/user.model'); // User মডেলটি ইম্পোর্ট

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

// MongoDB এর সাথে সংযোগ
mongoose.connect('mongodb://localhost/meanjs-crud-api', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

// Middleware
app.use(bodyParser.json());

// POST: Create নতুন User
app.post('/api/users', async (req, res) => {
  const { name, email, age } = req.body;
  const newUser = new User({ name, email, age });

  try {
    const user = await newUser.save();
    res.status(201).json(user);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

// GET: Read সমস্ত User
app.get('/api/users', async (req, res) => {
  try {
    const users = await User.find();
    res.status(200).json(users);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// GET: Read নির্দিষ্ট User by ID
app.get('/api/users/:id', async (req, res) => {
  try {
    const user = await User.findById(req.params.id);
    if (!user) return res.status(404).json({ message: 'User not found' });
    res.status(200).json(user);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// PUT: Update একটি User
app.put('/api/users/:id', async (req, res) => {
  try {
    const user = await User.findByIdAndUpdate(req.params.id, req.body, { new: true });
    if (!user) return res.status(404).json({ message: 'User not found' });
    res.status(200).json(user);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// DELETE: Delete একটি User
app.delete('/api/users/:id', async (req, res) => {
  try {
    const user = await User.findByIdAndDelete(req.params.id);
    if (!user) return res.status(404).json({ message: 'User not found' });
    res.status(200).json({ message: 'User deleted' });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// সার্ভার চালু করা
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

কোড ব্যাখ্যা:

• POST /api/users: নতুন User তৈরি করে ডেটাবেসে সংরক্ষণ করে।
• GET /api/users: সমস্ত User ডেটা রিটার্ন করে।
• GET /api/users/:id: নির্দিষ্ট User তথ্য আইডি অনুসারে রিটার্ন করে।
• PUT /api/users/:id: একটি নির্দিষ্ট User আপডেট করে।
• DELETE /api/users/:id: একটি নির্দিষ্ট User ডিলিট করে।

MongoDB এর সাথে সংযোগ এবং অ্যাপ্লিকেশন রান করা

MongoDB চালু না থাকলে, প্রথমে MongoDB সার্ভার চালু করতে হবে। আপনার সিস্টেমে MongoDB ইনস্টল করা না থাকলে, MongoDB এর অফিসিয়াল সাইট থেকে ডাউনলোড এবং ইনস্টল করুন।

একবার MongoDB চালু হলে, কমান্ড লাইন থেকে অ্যাপ্লিকেশন রান করতে হবে:

node app.js

এটি সার্ভার চালু করবে এবং আপনাকে http://localhost:3000 এ আপনার CRUD API রিকোয়েস্ট পাঠানোর সুযোগ দেবে।

Postman এর মাধ্যমে API টেস্ট করা

আপনি Postman ব্যবহার করে এই RESTful API এর সমস্ত CRUD অপারেশন টেস্ট করতে পারবেন।

1. POST /api/users: নতুন ব্যবহারকারী তৈরি করুন।
2. GET /api/users: সমস্ত ব্যবহারকারী দেখুন।
3. GET /api/users/{id}: নির্দিষ্ট ব্যবহারকারী দেখুন।
4. PUT /api/users/{id}: একটি ব্যবহারকারী আপডেট করুন।
5. DELETE /api/users/{id}: একটি ব্যবহারকারী মুছুন।

সারাংশ

এখানে আমরা Express.js এবং MongoDB এর মাধ্যমে একটি সিম্পল RESTful API তৈরি করেছি, যা CRUD অপারেশন পরিচালনা করতে সক্ষম। এই API-টি আপনাকে Create, Read, Update, Delete অপারেশন পরিচালনা করার জন্য প্রয়োজনীয় সব ফিচার প্রদান করে এবং MeanJS স্ট্যাকের মাধ্যমে সম্পূর্ণ ওয়েব অ্যাপ্লিকেশন নির্মাণের জন্য একটি শক্তিশালী ভিত্তি তৈরি করে।

MeanJS স্ট্যাকের সাথে Angular অ্যাপ্লিকেশন থেকে HTTP রিকোয়েস্ট পাঠানো খুবই সহজ এবং এটি সাধারণত Angular HTTPClient ব্যবহার করে করা হয়। এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশন থেকে HTTP GET, POST, PUT, এবং DELETE রিকোয়েস্ট পাঠানো যায় এবং Express.js সার্ভার থেকে ডেটা প্রাপ্তি বা পরিবর্তন করা যায়।

১. Angular HTTPClient মডিউল ব্যবহার করা

Angular অ্যাপ্লিকেশনে HTTP রিকোয়েস্ট পাঠানোর জন্য প্রথমে HttpClientModule ইনপোর্ট করতে হবে।

HttpClientModule ইনস্টল ও ইনপোর্ট করা:

প্রথমে, app.module.ts ফাইলটি খুলুন এবং HttpClientModule ইম্পোর্ট করুন।

// src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http'; // HTTPClientModule ইম্পোর্ট করা

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule], // এখানে HTTPClientModule যোগ করা হয়েছে
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

এখন HttpClientModule অ্যাঙ্গুলার অ্যাপ্লিকেশনকে HTTP রিকোয়েস্ট পাঠানোর সক্ষমতা প্রদান করবে।

২. HTTP GET রিকোয়েস্ট পাঠানো

এখন, GET রিকোয়েস্ট পাঠানোর জন্য একটি সার্ভিস তৈরি করা হবে। এটি সার্ভার থেকে ডেটা নিয়ে আসবে।

API সার্ভিস তৈরি করা:

ng generate service api

এটি একটি নতুন api.service.ts ফাইল তৈরি করবে। এখানে আমরা GET রিকোয়েস্ট পাঠানোর কোডটি যুক্ত করব।

// src/app/api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'http://localhost:3000/api'; // Express API এর URL

  constructor(private http: HttpClient) {}

  // GET রিকোয়েস্ট ফাংশন
  getData(): Observable<any> {
    return this.http.get<any>(`${this.apiUrl}`);
  }
}

এখানে, getData ফাংশনটি GET রিকোয়েস্ট পাঠায় এবং সার্ভার থেকে ডেটা রিটার্ন করে।

Component এ API ডেটা ব্যবহার করা:

এখন, AppComponent-এ এই সার্ভিস ব্যবহার করে ডেটা ফেচ করা হবে।

// src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ message }}</h1>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  message: string;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    // HTTP GET রিকোয়েস্ট পাঠানো
    this.apiService.getData().subscribe(data => {
      this.message = data.message; // সার্ভার থেকে প্রাপ্ত ডেটা
    });
  }
}

এখন, Angular অ্যাপ্লিকেশনটি যখন লোড হবে, এটি GET রিকোয়েস্ট পাঠাবে এবং Express API থেকে ডেটা গ্রহণ করবে।

৩. HTTP POST রিকোয়েস্ট পাঠানো

ধরা যাক, আপনি একটি নতুন ডেটা সার্ভারে পাঠাতে চান। এর জন্য POST রিকোয়েস্ট ব্যবহার করতে হবে।

POST রিকোয়েস্ট ফাংশন তৈরি করা:

// src/app/api.service.ts

postData(data: any): Observable<any> {
  return this.http.post<any>(`${this.apiUrl}/create`, data);
}

এটি সার্ভারে POST রিকোয়েস্ট পাঠাবে এবং সেগুলিকে /create এন্ডপয়েন্টে পাঠাবে।

POST রিকোয়েস্ট কম্পোনেন্টে ব্যবহার করা:

// src/app/app.component.ts

postMessage() {
  const data = { message: 'Hello from Angular!' };
  
  this.apiService.postData(data).subscribe(response => {
    console.log('Response from server:', response);
  });
}

এখন, একটি POST রিকোয়েস্ট Angular অ্যাপ্লিকেশন থেকে পাঠানো হবে এবং সার্ভার থেকে প্রতিক্রিয়া পাওয়া যাবে।

৪. HTTP PUT রিকোয়েস্ট পাঠানো

যদি আপনি কোনো বিদ্যমান ডেটা আপডেট করতে চান, তবে PUT রিকোয়েস্ট পাঠানো হবে।

PUT রিকোয়েস্ট ফাংশন তৈরি করা:

// src/app/api.service.ts

updateData(id: string, data: any): Observable<any> {
  return this.http.put<any>(`${this.apiUrl}/update/${id}`, data);
}

PUT রিকোয়েস্ট কম্পোনেন্টে ব্যবহার করা:

// src/app/app.component.ts

updateMessage() {
  const updatedData = { message: 'Updated message from Angular' };
  
  this.apiService.updateData('123', updatedData).subscribe(response => {
    console.log('Updated data:', response);
  });
}

এটি নির্দিষ্ট ID এর জন্য একটি PUT রিকোয়েস্ট পাঠাবে এবং ডেটা আপডেট করবে।

৫. HTTP DELETE রিকোয়েস্ট পাঠানো

যদি আপনি কোনো ডেটা মুছে ফেলতে চান, তবে DELETE রিকোয়েস্ট ব্যবহার করা হবে।

DELETE রিকোয়েস্ট ফাংশন তৈরি করা:

// src/app/api.service.ts

deleteData(id: string): Observable<any> {
  return this.http.delete<any>(`${this.apiUrl}/delete/${id}`);
}

DELETE রিকোয়েস্ট কম্পোনেন্টে ব্যবহার করা:

// src/app/app.component.ts

deleteMessage() {
  this.apiService.deleteData('123').subscribe(response => {
    console.log('Deleted data:', response);
  });
}

এটি নির্দিষ্ট ID অনুযায়ী ডেটা মুছে ফেলবে।

সার্ভার সাইড (Express) এ API হ্যান্ডলিং

Express.js সার্ভারে প্রতিটি HTTP রিকোয়েস্টের জন্য রাউট সেট করতে হবে। উদাহরণস্বরূপ:

// app.js (Express)

const express = require('express');
const app = express();
const cors = require('cors');

app.use(cors());
app.use(express.json()); // POST, PUT রিকোয়েস্টের জন্য JSON পার্সিং

// GET API
app.get('/api', (req, res) => {
  res.json({ message: 'Hello from Express API' });
});

// POST API
app.post('/api/create', (req, res) => {
  const data = req.body;
  res.json({ message: 'Data received', data });
});

// PUT API
app.put('/api/update/:id', (req, res) => {
  const { id } = req.params;
  const updatedData = req.body;
  res.json({ message: 'Data updated', id, updatedData });
});

// DELETE API
app.delete('/api/delete/:id', (req, res) => {
  const { id } = req.params;
  res.json({ message: 'Data deleted', id });
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

এখানে, প্রতিটি রিকোয়েস্ট হ্যান্ডলার সার্ভার থেকে সঠিক প্রতিক্রিয়া প্রদান করবে।

সারাংশ

এখন পর্যন্ত আমরা দেখেছি কিভাবে Angular অ্যাপ্লিকেশন থেকে GET, POST, PUT, এবং DELETE HTTP রিকোয়েস্ট পাঠানো যায় এবং Express.js সার্ভার থেকে ডেটা রিটার্ন বা পরিবর্তন করা যায়। এর মাধ্যমে আপনি MeanJS স্ট্যাক ব্যবহার করে ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।

MeanJS স্ট্যাক ব্যবহার করে JSON ডেটা হ্যান্ডলিং এবং API থেকে রেসপন্স নেওয়া একটি গুরুত্বপূর্ণ প্রক্রিয়া। এর মাধ্যমে আপনি Express.js সার্ভার থেকে API কল করে ডেটা নিয়ে AngularJS অ্যাপ্লিকেশনে তা প্রদর্শন করতে পারবেন। চলুন, এই প্রক্রিয়াটি কিভাবে কাজ করে তা বিস্তারিতভাবে দেখি।

JSON ডেটা হ্যান্ডলিং

JSON (JavaScript Object Notation) হল একটি জনপ্রিয় ডেটা বিনিময় ফরম্যাট, যা সাধারণত সার্ভার এবং ক্লায়েন্টের মধ্যে ডেটা আদান-প্রদান করার জন্য ব্যবহৃত হয়। MeanJS স্ট্যাকের মাধ্যমে API থেকে JSON ডেটা সংগ্রহ করা এবং তা ডাইনামিকভাবে প্রদর্শন করা সম্ভব।

API থেকে JSON রেসপন্স নেওয়া

এখানে আমরা একটি Express.js API তৈরি করব যা JSON ডেটা রিটার্ন করবে এবং সেই ডেটা AngularJS অ্যাপ্লিকেশনে প্রদর্শন করা হবে।

১. Express.js API তৈরি করা

প্রথমে, একটি GET API তৈরি করা হবে যা JSON ডেটা রিটার্ন করবে। Express.js এর মাধ্যমে আপনি সহজেই API রাউট তৈরি করতে পারবেন।

1. Express.js API সেটআপ

// app.js (Express.js API)

const express = require('express');
const app = express();

// API রাউট তৈরি করা
app.get('/api/data', (req, res) => {
    const data = {
        message: "Hello, this is a response from the API!",
        user: {
            name: "John Doe",
            age: 30
        }
    };
    res.json(data);  // JSON ডেটা রিটার্ন
});

// পোর্ট সেট করা
const port = 3000;
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

এখানে, /api/data রাউটে একটি JSON অবজেক্ট রিটার্ন করা হয়েছে, যার মধ্যে message এবং user নামে দুটি প্রপার্টি রয়েছে।

২. AngularJS থেকে API কল করা

এখন, AngularJS অ্যাপ্লিকেশন থেকে আমাদের এই Express.js API কল করে JSON ডেটা সংগ্রহ করতে হবে।

1. AngularJS Service তৈরি করা

AngularJS তে API কল করার জন্য আমরা $http সেবাটি ব্যবহার করব। প্রথমে, একটি service তৈরি করা হবে যা API থেকে ডেটা সংগ্রহ করবে।

// app.js (AngularJS Service)

var app = angular.module('meanApp', []);

app.service('ApiService', function($http) {
    // API থেকে ডেটা কল করা
    this.getData = function() {
        return $http.get('http://localhost:3000/api/data'); // API URL
    };
});

এখানে, ApiService একটি সেবার মাধ্যমে GET রিকোয়েস্ট পাঠাবে /api/data রাউটে এবং API থেকে পাওয়া রেসপন্স ডেটা রিটার্ন করবে।

৩. AngularJS Controller এ API রেসপন্স হ্যান্ডলিং

এখন, Controller তৈরি করতে হবে, যেখানে আমরা ApiService ব্যবহার করে API থেকে ডেটা আনব এবং তা $scope এর মাধ্যমে ভিউতে পাঠাবো।

// app.js (AngularJS Controller)

app.controller('MainController', function($scope, ApiService) {
    // API থেকে ডেটা নিয়ে আসা
    ApiService.getData().then(function(response) {
        $scope.message = response.data.message; // API রেসপন্সের message ফিল্ড
        $scope.user = response.data.user;     // user অবজেক্ট
    }, function(error) {
        console.log("Error fetching data: ", error);
    });
});

এখানে, getData() ফাংশনটি API কল করে এবং রেসপন্সের message এবং user ফিল্ডগুলি $scope তে সেভ করা হয়।

৪. AngularJS ভিউতে ডেটা প্রদর্শন

এখন, ভিউ তৈরি করা হবে যেখানে $scope.message এবং $scope.user এর মান দেখানো হবে।

<!-- index.html (AngularJS View) -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MeanJS API Example</title>
</head>
<body ng-app="meanApp" ng-controller="MainController">
    <h1>{{ message }}</h1> <!-- message প্রদর্শন করা -->
    <p>Name: {{ user.name }}</p> <!-- user.name প্রদর্শন করা -->
    <p>Age: {{ user.age }}</p> <!-- user.age প্রদর্শন করা -->
</body>
</html>

এখানে, আমরা {{ message }} এবং {{ user.name }} এর মাধ্যমে API থেকে পাওয়া ডেটা ভিউতে রেন্ডার করছি।

৫. সার্ভার এবং AngularJS অ্যাপ্লিকেশন রান করা

1. Express.js সার্ভার চালানো:

   node app.js
   

   এটি Express.js সার্ভারকে চালু করবে এবং এটি localhost:3000 এ অ্যাক্সেসযোগ্য হবে।

2. AngularJS অ্যাপ্লিকেশন চালানো: AngularJS অ্যাপ্লিকেশনটি localhost:4200 এ রান হবে যদি আপনি ng serve কমান্ড ব্যবহার করেন।

এখন, ব্রাউজারে localhost:4200 গিয়ে আপনি AngularJS অ্যাপ্লিকেশনে Express.js API থেকে প্রাপ্ত JSON ডেটা দেখতে পারবেন।

সারাংশ

এই প্রক্রিয়াতে, আমরা দেখলাম কিভাবে MeanJS স্ট্যাকের মাধ্যমে Express.js API তৈরি করতে হয় এবং তা থেকে AngularJS অ্যাপ্লিকেশনে JSON ডেটা সংগ্রহ করে প্রদর্শন করা হয়। Express.js JSON ডেটা রিটার্ন করে এবং AngularJS সেবার মাধ্যমে সেই ডেটা গ্রহণ করে ইউজারের সামনে দেখায়। এভাবে, একটি সম্পূর্ণ ফ্রন্টএন্ড এবং ব্যাকএন্ড সিস্টেম তৈরি করা সম্ভব যা MeanJS স্ট্যাকের সাহায্যে দ্রুত এবং দক্ষভাবে কাজ করে।