Frontend এবং Backend এর মধ্যে যোগাযোগ

MeanJS স্ট্যাকের মাধ্যমে Frontend এবং Backend এর মধ্যে যোগাযোগ স্থাপন করা একটি সাধারণ প্রক্রিয়া। এখানে Frontend সাধারণত AngularJS দ্বারা পরিচালিত হয় এবং Backend Node.js ও Express.js দিয়ে পরিচালিত হয়। Frontend এবং Backend এর মধ্যে যোগাযোগ সাধারণত HTTP API এর মাধ্যমে করা হয়, যেখানে Express.js API তৈরি করে এবং AngularJS সেই API কে কল করে ডেটা পায় বা পাঠায়।

এখানে MeanJS এর মাধ্যমে Frontend এবং Backend এর মধ্যে যোগাযোগের প্রক্রিয়া তুলে ধরা হলো।

১. Backend: Express API তৈরি করা

প্রথমে, Express.js এর মাধ্যমে API তৈরি করতে হবে। API সাধারণত HTTP রিকোয়েস্ট (যেমন GET, POST, PUT, DELETE) গ্রহণ করে এবং রেসপন্স হিসেবে ডেটা ফেরত দেয়।

API রাউট তৈরি করা (Backend)

ধরা যাক, আপনি একটি User API তৈরি করতে চান, যেখানে আপনি ইউজারের তথ্য পাবেন এবং নতুন ইউজার তৈরি করতে পারবেন।

users.controller.js (Controller)

'use strict';

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

// GET: সব ইউজার পাওয়া
exports.getUsers = function(req, res) {
    User.find()
        .then(users => {
            res.json(users);  // ইউজারদের JSON ফর্ম্যাটে রিটার্ন করা
        })
        .catch(err => {
            res.status(500).send(err);
        });
};

// POST: নতুন ইউজার তৈরি করা
exports.createUser = function(req, res) {
    var newUser = new User(req.body);

    newUser.save()
        .then(user => {
            res.status(201).json(user);  // নতুন ইউজার রিটার্ন করা
        })
        .catch(err => {
            res.status(500).send(err);
        });
};

এখানে getUsers রাউটটি ইউজারের তালিকা রিটার্ন করবে এবং createUser রাউটটি নতুন ইউজার তৈরি করবে।

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

এখন, এই কনট্রোলারকে API রাউটে যুক্ত করতে হবে।

users.routes.js (Routes)

'use strict';

module.exports = function(app) {
    var usersController = require('../controllers/users.controller');
    
    // ইউজারদের তথ্য পেতে GET রাউট
    app.route('/api/users')
        .get(usersController.getUsers)
        .post(usersController.createUser);
};

এখানে /api/users পাথের মাধ্যমে আমরা GET এবং POST রিকুয়েস্ট হ্যান্ডেল করছি।

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

এখন, AngularJS এর মাধ্যমে আমরা এই API কল করে ডেটা প্রদর্শন করব বা পাঠাব।

AngularJS Service তৈরি করা

AngularJS এ সার্ভিস তৈরি করে আপনি API কল করতে পারেন। এই সার্ভিসটি HTTP রিকোয়েস্ট পাঠাবে এবং রেসপন্স গ্রহণ করবে।

user.service.js (Service)

'use strict';

angular.module('mean').factory('UserService', ['$http', function($http) {
    var apiUrl = '/api/users';  // API URL

    return {
        // ইউজারদের তথ্য নেওয়ার ফাংশন
        getUsers: function() {
            return $http.get(apiUrl);
        },
        
        // নতুন ইউজার তৈরি করার ফাংশন
        createUser: function(user) {
            return $http.post(apiUrl, user);
        }
    };
}]);

এখানে getUsers ফাংশন GET রিকুয়েস্ট পাঠাবে এবং createUser ফাংশন POST রিকুয়েস্ট পাঠাবে।

AngularJS Controller তৈরি করা

এখন, আমরা AngularJS Controller ব্যবহার করে ইউজারদের তথ্য প্রদর্শন করব এবং নতুন ইউজার তৈরি করব।

user.controller.js (Controller)

'use strict';

angular.module('mean').controller('UserController', ['$scope', 'UserService', function($scope, UserService) {

    // ইউজারদের তথ্য পাওয়ার ফাংশন
    $scope.getUsers = function() {
        UserService.getUsers().then(function(response) {
            $scope.users = response.data;  // রেসপন্স ডেটা গ্রহন করা
        }).catch(function(error) {
            console.log('Error:', error);
        });
    };

    // নতুন ইউজার তৈরি করার ফাংশন
    $scope.createUser = function() {
        var newUser = {
            name: $scope.name,
            email: $scope.email,
            password: $scope.password
        };

        UserService.createUser(newUser).then(function(response) {
            console.log('User created:', response.data);
            $scope.getUsers();  // নতুন ইউজার তৈরি হওয়ার পর ইউজারের তালিকা আপডেট করা
        }).catch(function(error) {
            console.log('Error:', error);
        });
    };

    // ইউজারদের তথ্য শুরুতেই লোড করা
    $scope.getUsers();
}]);

এখানে getUsers ফাংশনটি UserService এর মাধ্যমে API থেকে ইউজারদের তথ্য নিয়ে আসবে এবং $scope.users তে সেগুলো সেট করবে। আর createUser ফাংশনটি নতুন ইউজার তৈরি করবে।

৩. Frontend: HTML এ ডেটা দেখানো

এখন, AngularJS এর মাধ্যমে ইউজারের তথ্য দেখাতে হবে।

user.view.html (HTML View)

<div ng-controller="UserController">
    <h2>User List</h2>
    <ul>
        <li ng-repeat="user in users">
            {{ user.name }} - {{ user.email }}
        </li>
    </ul>

    <h3>Create New User</h3>
    <form ng-submit="createUser()">
        <input type="text" ng-model="name" placeholder="Name" required />
        <input type="email" ng-model="email" placeholder="Email" required />
        <input type="password" ng-model="password" placeholder="Password" required />
        <button type="submit">Create User</button>
    </form>
</div>

এখানে ng-repeat ব্যবহার করে ইউজারদের একটি তালিকা প্রদর্শন করা হয়েছে এবং ng-model দিয়ে নতুন ইউজারের ইনপুট ফিল্ড তৈরি করা হয়েছে।

৪. Backend এবং Frontend এর মধ্যে যোগাযোগ

এখন, যখন আপনি AngularJS এর getUsers() ফাংশনটি কল করবেন, এটি Backend এর /api/users রাউট থেকে ইউজারদের তথ্য নিয়ে আসবে এবং তা HTML পেজে দেখাবে। এছাড়া, যখন আপনি createUser() ফাংশনটি কল করবেন, নতুন ইউজারের তথ্য Backend এ পাঠানো হবে এবং সেখান থেকে একটি রেসপন্স পাবেন।

সারাংশ

MeanJS স্ট্যাক ব্যবহার করে Frontend এবং Backend এর মধ্যে যোগাযোগ HTTP API এর মাধ্যমে করা হয়। Express.js API তৈরি করে এবং AngularJS সেই API কল করে ডেটা পাঠায় বা নেয়। এটি একটি RESTful API ইন্টিগ্রেশন যা Frontend এবং Backend এর মধ্যে ডেটা আদান-প্রদান সহজ ও কার্যকরী করে।