ফ্রন্টএন্ড এবং ব্যাকএন্ড এর মধ্যে যোগাযোগ

MeanJS স্ট্যাকটি MongoDB, Express.js, AngularJS, এবং Node.js এর সমন্বয়ে গঠিত। এর মধ্যে AngularJS হল ফ্রন্টএন্ড এবং Node.js + Express.js হল ব্যাকএন্ড। ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে যোগাযোগ তৈরি করা খুবই গুরুত্বপূর্ণ এবং MeanJS স্ট্যাক এটি খুবই কার্যকরভাবে পরিচালনা করে। সাধারণত, ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে যোগাযোগ HTTP API বা RESTful API এর মাধ্যমে ঘটে।

এখানে আমরা AngularJS (ফ্রন্টএন্ড) এবং Node.js + Express.js (ব্যাকএন্ড) এর মধ্যে যোগাযোগের প্রক্রিয়া দেখব।

ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে যোগাযোগের পদ্ধতি

ফ্রন্টএন্ড (AngularJS) এবং ব্যাকএন্ড (Express.js) এর মধ্যে যোগাযোগ করতে সাধারণত AJAX বা HTTP requests ব্যবহার করা হয়। AngularJS এর মাধ্যমে HTTP requests করা এবং API থেকে ডেটা গ্রহণ করা যায়, যা ব্যাকএন্ড (Express.js) এর মাধ্যমে ডাটাবেস থেকে প্রাপ্ত হয়। এই প্রক্রিয়ায় JSON ফরম্যাটে ডেটা এক্সচেঞ্জ হয়।

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

প্রথমে, Express.js এর মাধ্যমে একটি API তৈরি করতে হবে, যা ফ্রন্টএন্ডের অনুরোধ গ্রহণ করবে এবং ডেটা প্রদান করবে।

উদাহরণস্বরূপ, একটি GET API তৈরি করা যেটি ইউজারের তথ্য ফেরত দেবে:

// server/routes/user.routes.js

var express = require('express');
var router = express.Router();
var User = require('../models/user.model');

// GET: ইউজার তথ্য পাওয়া
router.get('/users/:id', function(req, res) {
  User.findById(req.params.id, function(err, user) {
    if (err) {
      return res.status(400).send({
        message: 'Error retrieving user'
      });
    } else {
      res.json(user);  // ডেটা JSON ফরম্যাটে পাঠানো
    }
  });
});

module.exports = router;

এখানে GET API ব্যবহার করে ইউজার ID অনুযায়ী MongoDB ডেটাবেস থেকে ইউজারের তথ্য পাওয়া যাচ্ছে।

২. Express.js API কে AngularJS ফ্রন্টএন্ডের সাথে সংযোগ করা

AngularJS ফ্রন্টএন্ড থেকে HTTP অনুরোধ (request) পাঠানোর জন্য $http সার্ভিস ব্যবহার করা হয়। $http সার্ভিস HTTP GET, POST, PUT, DELETE ইত্যাদি রিকোয়েস্ট পাঠাতে সহায়ক।

এখন, AngularJS এর মাধ্যমে ব্যাকএন্ডে তৈরি করা API তে রিকোয়েস্ট পাঠানোর উদাহরণ দেখি:

// public/js/controllers/user.controller.js

angular.module('meanApp')
  .controller('UserController', function($scope, $http) {
    var userId = '12345';  // যেকোনো ইউজারের ID

    // GET রিকোয়েস্ট ব্যাকএন্ড API এ পাঠানো
    $http.get('/api/users/' + userId)
      .then(function(response) {
        // API থেকে ডেটা পাওয়া গেলে তা স্কোপে সেট করা
        $scope.user = response.data;
      })
      .catch(function(error) {
        console.log('Error:', error);
      });
  });

এখানে, $http.get() মেথডের মাধ্যমে GET রিকোয়েস্ট পাঠানো হয়েছে এবং তারপরে যে ডেটা ফিরে এসেছে তা $scope.user তে সেট করা হয়েছে।

৩. Express.js API থেকে JSON ডেটা রেসপন্স পাওয়া

ফ্রন্টএন্ডে GET রিকোয়েস্ট সফল হলে, ব্যাকএন্ড (Express.js) থেকে JSON ফরম্যাটে ডেটা রেসপন্স হিসেবে পাঠানো হবে। আগের /users/:id API উদাহরণে, ব্যাকএন্ড ইউজারের তথ্যকে JSON ফরম্যাটে ফেরত পাঠাচ্ছে।

{
  "name": "John Doe",
  "email": "john@example.com",
  "password": "encryptedPassword"
}

এই JSON ডেটা AngularJS এর $http সার্ভিস দ্বারা রিসিভ হবে এবং তা ভিউতে প্রদর্শিত হবে।

ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে POST, PUT, DELETE রিকোয়েস্ট

এছাড়া, POST, PUT, এবং DELETE রিকোয়েস্টের মাধ্যমে ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে আরও উন্নত ডেটা এক্সচেঞ্জ করা সম্ভব। উদাহরণস্বরূপ, নতুন ইউজার তৈরি (POST), ইউজার তথ্য আপডেট (PUT), এবং ইউজার মুছে ফেলা (DELETE) করা যেতে পারে।

POST রিকোয়েস্ট (নতুন ইউজার তৈরি):

// server/routes/user.routes.js

router.post('/users', function(req, res) {
  var user = new User(req.body);  // নতুন ইউজার তৈরি
  user.save(function(err, newUser) {
    if (err) {
      return res.status(400).send({
        message: 'Error creating user'
      });
    } else {
      res.status(201).json(newUser);  // সফল হলে নতুন ইউজার রিটার্ন
    }
  });
});

এটি ফ্রন্টএন্ড থেকে নতুন ইউজার তৈরি করার জন্য POST রিকোয়েস্টের মাধ্যমে ব্যাকএন্ডে পাঠানো হবে।

PUT রিকোয়েস্ট (ইউজার আপডেট):

// server/routes/user.routes.js

router.put('/users/:id', function(req, res) {
  User.findByIdAndUpdate(req.params.id, req.body, { new: true }, function(err, updatedUser) {
    if (err) {
      return res.status(400).send({
        message: 'Error updating user'
      });
    } else {
      res.json(updatedUser);  // আপডেট হওয়া ইউজার রিটার্ন
    }
  });
});

DELETE রিকোয়েস্ট (ইউজার মুছে ফেলা):

// server/routes/user.routes.js

router.delete('/users/:id', function(req, res) {
  User.findByIdAndDelete(req.params.id, function(err) {
    if (err) {
      return res.status(400).send({
        message: 'Error deleting user'
      });
    } else {
      res.status(204).send();  // সফল হলে কোন কন্টেন্ট রিটার্ন না করে 204 স্ট্যাটাস কোড পাঠানো
    }
  });
});

সারাংশ

MeanJS স্ট্যাকের ফ্রন্টএন্ড (AngularJS) এবং ব্যাকএন্ড (Node.js + Express.js) এর মধ্যে যোগাযোগ HTTP API এর মাধ্যমে হয়। ফ্রন্টএন্ড থেকে $http সার্ভিস ব্যবহার করে GET, POST, PUT, এবং DELETE রিকোয়েস্ট পাঠানো হয়, এবং ব্যাকএন্ড থেকে MongoDB ডেটাবেসের ডেটা JSON ফরম্যাটে রেসপন্স হিসেবে প্রদান করা হয়। এই পদ্ধতির মাধ্যমে ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে ডেটা এক্সচেঞ্জ করা হয়, যার ফলে একটি সুশৃঙ্খল এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করা সম্ভব।

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

AngularJS দিয়ে API রিকোয়েস্ট করার প্রক্রিয়া

১. HttpClientModule ইনস্টল করা

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

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

// app.module.ts

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule  // HttpClientModule ইনক্লুড করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এটি HttpClient সেবা ব্যবহারের জন্য প্রস্তুত করবে।

২. API সার্ভিস তৈরি করা

এখন, আমরা একটি API সার্ভিস তৈরি করবো যা HTTP রিকোয়েস্ট পাঠাবে। উদাহরণস্বরূপ, ইউজার ডেটা ফেচ করার জন্য একটি GET রিকোয়েস্ট তৈরি করা হবে।

ng generate service api

এটি একটি api.service.ts ফাইল তৈরি করবে, যেখানে আপনি API কল করার লজিক যোগ করবেন।

// 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 রিকোয়েস্ট ফাংশন
  getUsers(): Observable<any> {
    return this.http.get<any>(`${this.apiUrl}/users`);
  }

  // POST রিকোয়েস্ট ফাংশন
  createUser(user: any): Observable<any> {
    return this.http.post<any>(`${this.apiUrl}/users`, user);
  }
}

এখানে, getUsers() ফাংশনটি GET রিকোয়েস্ট পাঠাবে এবং সার্ভার থেকে ইউজার ডেটা ফেচ করবে, আর createUser() ফাংশনটি একটি নতুন ইউজার তৈরি করতে POST রিকোয়েস্ট পাঠাবে।

৩. কম্পোনেন্টে API সার্ভিস ব্যবহার করা

এখন, AppComponent-এ এই ApiService ব্যবহার করে API থেকে ডেটা ফেচ করা হবে। প্রথমে AppComponent খুলুন এবং API কল করার জন্য এই কোডটি ব্যবহার করুন।

// app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <h1>User List</h1>
    <ul>
      <li *ngFor="let user of users">{{ user.name }} - {{ user.email }}</li>
    </ul>

    <h2>Create New User</h2>
    <form (ngSubmit)="addUser()">
      <input [(ngModel)]="newUser.name" name="name" placeholder="Name" required>
      <input [(ngModel)]="newUser.email" name="email" placeholder="Email" required>
      <button type="submit">Create User</button>
    </form>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  users = [];
  newUser = { name: '', email: '' };

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.fetchUsers();
  }

  // GET রিকোয়েস্ট API কল
  fetchUsers() {
    this.apiService.getUsers().subscribe(data => {
      this.users = data;
    }, error => {
      console.error('Error fetching users:', error);
    });
  }

  // POST রিকোয়েস্ট API কল
  addUser() {
    this.apiService.createUser(this.newUser).subscribe(response => {
      console.log('User created:', response);
      this.fetchUsers();  // নতুন ইউজার যোগ হওয়ার পর লিস্ট আপডেট করা
    }, error => {
      console.error('Error creating user:', error);
    });
  }
}

এখানে:

• fetchUsers() ফাংশনটি GET রিকোয়েস্ট পাঠিয়ে ইউজারের তালিকা ফেচ করবে।
• addUser() ফাংশনটি POST রিকোয়েস্ট পাঠিয়ে একটি নতুন ইউজার তৈরি করবে এবং ডেটা ফেরত পাওয়ার পর fetchUsers() ফাংশনটি কল করবে যেন নতুন ইউজার লিস্টে যোগ হয়।

৪. API রাউট Express.js সার্ভারে

এখন, Express.js সার্ভারে GET এবং POST রাউট তৈরি করা যাক। Express.js সার্ভারের সাথে MongoDB সংযুক্ত করতে Mongoose ব্যবহার করা হবে। এখানে GET /api/users এবং POST /api/users API তৈরি করা হয়েছে।

// server/routes/user.routes.js

const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');
const User = mongoose.model('User');

// GET রাউট - ইউজারের তালিকা পাওয়া
router.get('/users', (req, res) => {
  User.find().exec(function(err, users) {
    if (err) {
      return res.status(500).send({ message: 'Error retrieving users' });
    }
    res.json(users);
  });
});

// POST রাউট - নতুন ইউজার তৈরি করা
router.post('/users', (req, res) => {
  const newUser = new User(req.body);
  newUser.save(function(err, user) {
    if (err) {
      return res.status(400).send({ message: 'Error saving user' });
    }
    res.status(201).json(user);
  });
});

module.exports = router;

এখানে:

• GET /users রিকোয়েস্ট MongoDB থেকে সব ইউজার ডেটা রিটার্ন করবে।
• POST /users রিকোয়েস্ট নতুন ইউজারের ডেটা গ্রহণ করে MongoDB তে সংরক্ষণ করবে।

৫. CORS কনফিগারেশন

যেহেতু আপনার Angular অ্যাপ্লিকেশন এবং Express.js সার্ভার আলাদা সার্ভারে চলতে পারে, তাই CORS (Cross-Origin Resource Sharing) কনফিগার করা প্রয়োজন।

1. প্রথমে cors প্যাকেজ ইনস্টল করুন:

npm install cors --save

2. তারপর, Express.js সার্ভারে CORS কনফিগার করুন:

// server/app.js

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

// CORS সেটআপ
app.use(cors());

// অন্যান্য রাউট এবং কনফিগারেশন

এটি সমস্ত ক্রস-অরিজিন রিকোয়েস্টকে অনুমোদন করবে, যা আপনার Angular অ্যাপ্লিকেশন থেকে Express.js API এর সাথে যোগাযোগ করতে সহায়ক।

সারাংশ

এখন আপনি দেখেছেন কিভাবে AngularJS দিয়ে Express.js API তে GET এবং POST রিকোয়েস্ট পাঠানো যায়। HttpClientModule ব্যবহার করে Angular অ্যাপ্লিকেশন API এর সাথে ডেটা আদান-প্রদান করতে সক্ষম হয়। Express.js API রাউট দ্বারা ডেটা সংগ্রহ এবং প্রেরণ সহজ করা হয়েছে, এবং CORS কনফিগারেশনের মাধ্যমে ক্লায়েন্ট এবং সার্ভারের মধ্যে নিরাপদ যোগাযোগ স্থাপন করা হয়েছে।

MeanJS স্ট্যাকের মাধ্যমে Services এবং HTTP মডিউল ব্যবহার করে ডেটা ফেচ করা একটি গুরুত্বপূর্ণ কাজ। AngularJS-এ HTTP সার্ভিস ব্যবহারের মাধ্যমে আপনি GET, POST, PUT, এবং DELETE রিকোয়েস্ট পাঠাতে পারেন, যা সার্ভার থেকে ডেটা ফেচ করার জন্য ব্যবহৃত হয়।

এখানে, আমরা MeanJS স্ট্যাকে Services এবং HTTP মডিউল ব্যবহার করে ডেটা ফেচ করার একটি প্রক্রিয়া আলোচনা করব।

১. HTTP মডিউল এবং Services ব্যবহারের মাধ্যমে ডেটা ফেচ করা

AngularJS-এ HTTP মডিউল ব্যবহার করে API থেকে ডেটা ফেচ করার জন্য প্রথমে $http সার্ভিস ব্যবহার করতে হয়, যা HTTP রিকুয়েস্ট করার জন্য ব্যবহৃত হয়। আমরা একটি সার্ভিস তৈরি করব যা API থেকে ডেটা ফেচ করবে এবং AngularJS কম্পোনেন্টে তা প্রদর্শন করবে।

Step 1: HTTP সার্ভিস তৈরি করা

প্রথমে একটি সার্ভিস তৈরি করুন যা API থেকে ডেটা ফেচ করবে।

ng generate service api

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

// 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/users'; // Express API URL

  constructor(private http: HttpClient) { }

  // GET রিকোয়েস্ট ফাংশন: ইউজার ডেটা ফেচ করার জন্য
  getUsers(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }

  // POST রিকোয়েস্ট ফাংশন: নতুন ইউজার তৈরি করার জন্য
  createUser(user: any): Observable<any> {
    return this.http.post<any>(this.apiUrl, user);
  }
}

এখানে, getUsers ফাংশনটি GET রিকোয়েস্ট পাঠাবে এবং ইউজার ডেটা ফিরিয়ে দেবে।

Step 2: API সার্ভিস Angular কম্পোনেন্টে ব্যবহার করা

এখন, আমরা AppComponent (বা অন্য যেকোনো কম্পোনেন্ট) এ এই সার্ভিসটি ব্যবহার করব এবং ইউজার ডেটা প্রদর্শন করব।

// src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <h1>User List</h1>
    <ul>
      <li *ngFor="let user of users">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  users: any[] = [];

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    // API সার্ভিস থেকে ডেটা ফেচ করা
    this.apiService.getUsers().subscribe(data => {
      this.users = data;
    });
  }
}

এখানে, ngOnInit লাইফ সাইকেল হুক ব্যবহার করে getUsers ফাংশন কল করা হয়েছে এবং প্রাপ্ত ডেটা users অ্যারে তে সংরক্ষিত হচ্ছে। পরে, ngFor ডিরেকটিভ দিয়ে ইউজারদের তালিকা ভিউতে প্রদর্শিত হচ্ছে।

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

এখন, Express.js API তৈরি করি যা AngularJS অ্যাপ্লিকেশন থেকে ডেটা গ্রহণ করবে। প্রথমে MongoDB এর সাথে সংযোগ স্থাপন এবং ডেটা পরিচালনার জন্য Mongoose ব্যবহার করতে হবে।

Step 1: MongoDB মডেল তৈরি করা

MongoDB তে ইউজার ডেটা স্টোর করার জন্য একটি মডেল তৈরি করি।

// models/user.model.js

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

// User স্কিমা তৈরি করা
const userSchema = new Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  created: { type: Date, default: Date.now }
});

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

Step 2: Express API রাউট তৈরি করা

এখন Express.js API রাউট তৈরি করব যাতে AngularJS থেকে ডেটা ফেচ করা যাবে।

// routes/user.routes.js

const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');
const User = mongoose.model('User');

// GET রাউট: সকল ইউজার ফেচ করা
router.get('/users', (req, res) => {
  User.find()
    .then(users => res.json(users))
    .catch(err => res.status(500).send({ message: 'Error fetching users' }));
});

module.exports = router;

এখানে, /api/users রাউটটি GET রিকোয়েস্ট গ্রহণ করবে এবং MongoDB থেকে ইউজার ডেটা রিটার্ন করবে।

Step 3: Express অ্যাপ্লিকেশন চালু করা

এখন, আমরা Express সার্ভার চালু করব এবং আমাদের রাউট যোগ করব।

// server.js

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
const userRoutes = require('./routes/user.routes'); // রাউট ফাইল

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

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

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

// রাউট যুক্ত করা
app.use('/api', userRoutes);

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

এখানে, Express.js অ্যাপ্লিকেশনটি চালু করা হয়েছে এবং /api/users রাউটটি GET রিকোয়েস্ট গ্রহণ করবে।

৩. CORS (Cross-Origin Resource Sharing) কনফিগারেশন

যেহেতু AngularJS এবং Express.js আলাদা সার্ভারে চলতে পারে, তাই CORS কনফিগারেশন করা প্রয়োজন।

CORS কনফিগার করার জন্য, cors প্যাকেজ ইনস্টল করুন:

npm install cors

এরপর server.js ফাইলে cors প্যাকেজটি অন্তর্ভুক্ত করুন:

const cors = require('cors');
app.use(cors());  // CORS সক্রিয় করা

এটি নিশ্চিত করবে যে AngularJS ক্লায়েন্ট সাইড থেকে Express.js API সার্ভারে রিকুয়েস্ট পাঠানো সম্ভব হবে।

৪. Postman বা AngularJS দিয়ে API টেস্ট করা

এখন, Postman অথবা AngularJS ব্যবহার করে API টেস্ট করতে পারবেন।

1. GET /api/users রিকোয়েস্টে সমস্ত ইউজারের ডেটা পাবেন।
2. POST /api/users রিকোয়েস্টে নতুন ইউজার তৈরি করতে পারবেন।

সারাংশ

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

Express.js এর মাধ্যমে API রেসপন্স হ্যান্ডল করা একটি গুরুত্বপূর্ণ প্রক্রিয়া, যা MeanJS স্ট্যাক ব্যবহার করে ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহৃত হয়। Express.js সহজ এবং কার্যকরভাবে HTTP রিকোয়েস্টের রেসপন্স হ্যান্ডল করতে সহায়ক, এবং এটি সাধারণত JSON ফর্ম্যাটে ডেটা রিটার্ন করে।

এখানে Express.js ব্যবহার করে API রেসপন্স হ্যান্ডল করার প্রক্রিয়া বিস্তারিতভাবে ব্যাখ্যা করা হলো।

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

প্রথমে, Express.js অ্যাপ্লিকেশন সেটআপ করতে হবে। নিচের ধাপগুলো অনুসরণ করুন:

প্রজেক্ট তৈরি করা

mkdir meanjs-api
cd meanjs-api
npm init -y
npm install express body-parser mongoose

এটি একটি নতুন Node.js প্রজেক্ট তৈরি করবে এবং Express.js, body-parser এবং Mongoose (MongoDB এর জন্য) ইনস্টল করবে।

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

এখন, app.js ফাইল তৈরি করুন এবং নিম্নলিখিত কোড যোগ করুন:

'use strict';

var express = require('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

var app = express();

// Body parser middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// MongoDB কানেকশন
mongoose.connect('mongodb://localhost:27017/meanjs', { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => {
        console.log('MongoDB connected');
    })
    .catch(err => {
        console.log('MongoDB connection error:', err);
    });

// Port সেট করা
var port = 3000;
app.listen(port, () => {
    console.log('Server running on port ' + port);
});

এখানে আমরা Express.js অ্যাপ্লিকেশন তৈরি করেছি, body-parser মডিউল ব্যবহার করে JSON ডেটা রিকোয়েস্ট বডি থেকে নিয়ে আছি এবং MongoDB কানেক্ট করেছি।

২. API রাউট তৈরি করা

এখন, API রাউট তৈরি করবো এবং Express.js এর মাধ্যমে HTTP রিকোয়েস্টের রেসপন্স হ্যান্ডল করবো।

API রাউট কনফিগারেশন

ধরা যাক, আমরা একটি User মডেল তৈরি করতে চাই এবং এর মাধ্যমে ইউজারের তথ্য GET ও POST করতে চাই। প্রথমে, User মডেল তৈরি করা যাক।

user.model.js

'use strict';

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

// User Schema তৈরি করা
var UserSchema = new Schema({
    name: {
        type: String,
        required: true
    },
    email: {
        type: String,
        unique: true,
        required: true
    },
    password: {
        type: String,
        required: true
    }
});

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

module.exports = User;

user.routes.js

এখন, Express.js রাউট কনফিগারেশনে এই মডেলকে ব্যবহার করে GET এবং POST রিকোয়েস্ট হ্যান্ডল করা যাক।

'use strict';

var express = require('express');
var router = express.Router();
var User = require('../models/user.model');

// GET: সব ইউজারের তথ্য পাওয়ার রাউট
router.get('/users', function(req, res) {
    User.find()
        .then(users => {
            res.status(200).json(users);  // JSON রেসপন্স রিটার্ন করা
        })
        .catch(err => {
            res.status(500).json({ message: 'Error retrieving users', error: err });
        });
});

// POST: নতুন ইউজার তৈরি করার রাউট
router.post('/users', function(req, res) {
    var newUser = new User(req.body);  // রিকোয়েস্ট বডি থেকে নতুন ইউজার তৈরি

    newUser.save()
        .then(user => {
            res.status(201).json(user);  // নতুন ইউজার রেসপন্সে রিটার্ন করা
        })
        .catch(err => {
            res.status(400).json({ message: 'Error creating user', error: err });
        });
});

module.exports = router;

এখানে, GET /users রাউটটি সমস্ত ইউজারের তথ্য রিটার্ন করবে এবং POST /users রাউটটি নতুন ইউজার তৈরি করবে।

app.js তে রাউট যোগ করা

'use strict';

var express = require('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var userRoutes = require('./routes/user.routes');  // রাউট ফাইল ইমপোর্ট করা

var app = express();

// Body parser middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// MongoDB কানেকশন
mongoose.connect('mongodb://localhost:27017/meanjs', { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => {
        console.log('MongoDB connected');
    })
    .catch(err => {
        console.log('MongoDB connection error:', err);
    });

// রাউট ব্যবহার করা
app.use('/api', userRoutes);

// Port সেট করা
var port = 3000;
app.listen(port, () => {
    console.log('Server running on port ' + port);
});

এখানে, আমরা /api/users রাউটটি user.routes.js ফাইল থেকে ইমপোর্ট করেছি এবং Express.js অ্যাপ্লিকেশনে যুক্ত করেছি।

৩. API রেসপন্স হ্যান্ডল করা

এখন আমরা Express.js এর মাধ্যমে API রেসপন্স হ্যান্ডল করব। API রেসপন্স হ্যান্ডল করার জন্য, আমরা HTTP স্ট্যাটাস কোড ব্যবহার করি যেমন:

• 200 OK: রিকোয়েস্ট সফল হয়েছে।
• 201 Created: নতুন রিসোর্স সফলভাবে তৈরি হয়েছে।
• 400 Bad Request: রিকোয়েস্টে কিছু ভুল রয়েছে (যেমন, ইনপুট ভ্যালিডেশন বা ডেটা মিসিং)।
• 500 Internal Server Error: সার্ভারে কিছু ত্রুটি হয়েছে।

এগুলো হ্যান্ডল করতে, আমরা res.status(code).json() পদ্ধতি ব্যবহার করি।

GET রেসপন্স উদাহরণ

res.status(200).json(users);  // 200 OK স্ট্যাটাস সহ ইউজার ডেটা রিটার্ন করা

POST রেসপন্স উদাহরণ

res.status(201).json(user);  // 201 Created স্ট্যাটাস সহ নতুন ইউজার রিটার্ন করা

Error রেসপন্স উদাহরণ

res.status(500).json({ message: 'Error retrieving users', error: err });  // 500 Internal Server Error

৪. Frontend থেকে API কল করা

এখন, Frontend (যেমন, AngularJS) থেকে এই API কল করা যাবে। AngularJS এর মাধ্যমে GET এবং POST রিকোয়েস্ট পাঠানোর জন্য $http সার্ভিস ব্যবহার করা যেতে পারে।

$http.get('/api/users')
    .then(function(response) {
        console.log('Users:', response.data);  // API থেকে রিটার্ন হওয়া ডেটা
    })
    .catch(function(error) {
        console.error('Error:', error);
    });

$http.post('/api/users', newUser)
    .then(function(response) {
        console.log('User created:', response.data);  // নতুন ইউজার তৈরি হওয়ার পর রিটার্ন হওয়া ডেটা
    })
    .catch(function(error) {
        console.error('Error:', error);
    });

সারাংশ

Express.js এর মাধ্যমে API রেসপন্স হ্যান্ডল করা খুবই সহজ এবং কার্যকরী। আপনি HTTP Status Codes ব্যবহার করে বিভিন্ন ধরনের রেসপন্স হ্যান্ডল করতে পারেন, যেমন ডেটা সফলভাবে প্রাপ্ত হলে 200 OK, নতুন রিসোর্স তৈরি হলে 201 Created, এবং ভুল হলে 400 Bad Request বা 500 Internal Server Error। এর মাধ্যমে আপনি API কল করার সময় ব্যবহারকারীদের উপযুক্ত রেসপন্স দিতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

MeanJS স্ট্যাকের মধ্যে AngularJS এবং Node.js এর মধ্যে ডেটা এক্সচেঞ্জ একটি গুরুত্বপূর্ণ অংশ, যেখানে AngularJS ক্লায়েন্ট সাইডের অ্যাপ্লিকেশন তৈরি করে এবং Node.js সার্ভার সাইডের জন্য কাজ করে। এই দুটি প্রযুক্তির মধ্যে ডেটা এক্সচেঞ্জ সাধারণত HTTP রিকুয়েস্ট ও JSON ফরম্যাটে ঘটে। AngularJS সাধারণত HTTPClient ব্যবহার করে Node.js সার্ভারে API রিকুয়েস্ট পাঠায় এবং JSON ডেটা রিটার্ন করে।

এখানে, আমরা AngularJS এবং Node.js এর মধ্যে ডেটা এক্সচেঞ্জ করার প্রক্রিয়া এবং কিভাবে সেগুলো একে অপরের সাথে যোগাযোগ করতে পারে তা দেখবো।

AngularJS এবং Node.js এর মধ্যে ডেটা এক্সচেঞ্জ

১. Node.js (Express.js) API তৈরি করা

প্রথমে, আমাদের Node.js (Express.js) সার্ভারে একটি API তৈরি করতে হবে যা AngularJS থেকে আসা HTTP রিকুয়েস্ট গ্রহণ করবে এবং JSON ফরম্যাটে ডেটা রিটার্ন করবে। এখানে একটি সিম্পল GET এবং POST API উদাহরণ দেওয়া হলো।

// server/app.js

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

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

// GET API: ডেটা রিটার্ন করা
app.get('/api/data', (req, res) => {
  const data = { message: 'Hello from Node.js server!' };
  res.json(data);  // JSON রেসপন্স পাঠানো
});

// POST API: ডেটা গ্রহণ করা
app.post('/api/data', (req, res) => {
  const receivedData = req.body;
  console.log('Received data:', receivedData);  // কনসোলে ডেটা লগ করা
  res.json({ message: 'Data received successfully', data: receivedData });
});

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

এখানে, আমাদের /api/data রাউটে দুটি API আছে:

1. GET /api/data: সার্ভার থেকে ডেটা পাঠানোর জন্য।
2. POST /api/data: AngularJS থেকে আসা ডেটা গ্রহণ এবং প্রক্রিয়া করার জন্য।

২. AngularJS অ্যাপ্লিকেশন থেকে API কল করা

এখন, AngularJS অ্যাপ্লিকেশন তৈরি করতে হবে, যা Node.js সার্ভারের API কল করবে এবং ডেটা এক্সচেঞ্জ করবে।

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

// 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 {}

এখন, HttpClient ব্যবহার করে GET এবং POST রিকুয়েস্ট পাঠানো যাবে।

৩. AngularJS Service তৈরি করা

এখন, একটি ApiService তৈরি করতে হবে যা Node.js API কল করবে।

ng generate service api

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

// 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/data';  // Node.js API URL

  constructor(private http: HttpClient) {}

  // GET রিকোয়েস্ট: Node.js সার্ভার থেকে ডেটা ফেচ করা
  getData(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }

  // POST রিকোয়েস্ট: Node.js সার্ভারে ডেটা পাঠানো
  postData(data: any): Observable<any> {
    return this.http.post<any>(this.apiUrl, data);
  }
}

এখানে, getData() ফাংশনটি GET রিকুয়েস্ট পাঠাবে এবং postData() ফাংশনটি POST রিকুয়েস্ট পাঠাবে।

৪. AngularJS Component এ API ব্যবহার করা

এখন, AppComponent তৈরি করে ApiService ব্যবহার করা হবে।

// src/app/app.component.ts

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

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

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    // GET রিকুয়েস্ট পাঠানো: Node.js থেকে ডেটা ফেচ করা
    this.apiService.getData().subscribe(data => {
      this.message = data.message;
    });
  }

  sendData() {
    // POST রিকুয়েস্ট পাঠানো: Node.js সার্ভারে ডেটা পাঠানো
    const data = { name: 'John', age: 30 };
    this.apiService.postData(data).subscribe(response => {
      console.log('Server Response:', response);
    });
  }
}

এখানে:

• ngOnInit(): GET রিকুয়েস্ট পাঠায় এবং সার্ভার থেকে ডেটা নেয়।
• sendData(): একটি POST রিকুয়েস্ট পাঠায় এবং সার্ভারে ডেটা প্রেরণ করে।

CORS (Cross-Origin Resource Sharing) সেটআপ

যেহেতু AngularJS এবং Node.js সাধারণত আলাদা ডোমেইনে বা পোর্টে চলে, সেজন্য CORS (Cross-Origin Resource Sharing) কনফিগারেশন করা প্রয়োজন যাতে এই দুই সিস্টেমের মধ্যে রিকুয়েস্ট বিনিময় সম্ভব হয়।

Express.js এ CORS কনফিগার করতে:

1. প্রথমে cors প্যাকেজ ইনস্টল করুন:

   npm install cors
   

2. এরপর, app.js ফাইলে CORS প্যাকেজটি ইম্পোর্ট এবং ব্যবহার করুন:

// server/app.js

const cors = require('cors');

// CORS কনফিগারেশন
app.use(cors());  // সমস্ত রিকুয়েস্টের জন্য CORS অনুমোদন করা

Angular এবং Node.js এর মধ্যে ডেটা এক্সচেঞ্জের সারাংশ

এখন পর্যন্ত, আমরা দেখেছি কিভাবে AngularJS অ্যাপ্লিকেশন Node.js API এর সাথে GET এবং POST রিকুয়েস্টের মাধ্যমে ডেটা এক্সচেঞ্জ করতে পারে। HttpClientModule এবং HttpClient ব্যবহার করে আমরা সহজে API কল করতে পারি এবং সার্ভার থেকে ডেটা নিয়ে AngularJS এর UI তে প্রদর্শন করতে পারি। একইভাবে, POST রিকুয়েস্ট ব্যবহার করে ডেটা সার্ভারে পাঠানো হয় এবং Node.js সেই ডেটা গ্রহণ করে প্রক্রিয়া করে রেসপন্স দেয়। CORS কনফিগারেশন দুটি সিস্টেমের মধ্যে রিকুয়েস্ট আদান প্রদানকে সুরক্ষিত এবং সহজ করে।