তিন লেয়ারের JSON শাসন
আমাদের সবার হাতে একটা ম্যাজিক বাক্স আছে, যার জাদুমন্ত্রে আমরা দিনের 24 ঘণ্টার মধ্যে 48 ঘণ্টা ফিদা হয়ে থাকি। সেটা আর কিছু না, সেটা হলো– মোবাইল ফোন। এই মোবাইল ফোন দিয়ে আমরা কত কী করি। সময় নষ্ট করি, আবার ভালো কাজও করি। যেমন ধর, তোর বন্ধু তোর কাছ থেকে টাকা ধার নিয়ে বান্দরবান গিয়ে মাস্তি করতেছে। তোর টাকা ফেরত দেয়ার কোনো নাম-গন্ধ নাই। তুই প্রতিদিন সকাল-বিকাল না হলেও 100 বার কল দেস, তাও সে টাকা দেয় না। আবার তোর ফোন রিসিভও করে না।
এই করতে করতে একদিন তোর মনে প্রশ্ন আসলো, আচ্ছা– আমার এইখান থেকে বন্ধুর ( টাকা মেরে দেয়া বন্ধু ) ফোনে কল যায় কীভাবে? এমন না যে– আমার ফোনের সাথে তার ফোনের সাথে সরাসরি কোনো তার বা লাইন বা কিছু ডাইরেক্ট কানেক্ট করা আছে।
তোর ফোন প্রথমে নিকটবর্তী মোবাইল টাওয়ারের সাথে সংযুক্ত হয়। তারপর সেই টাওয়ার থেকে আরও বিভিন্ন টাওয়ারের মাধ্যমে তোর বন্ধুর নিকটবর্তী টাওয়ারে পৌঁছায়। পুরো প্রসেসটি এত দ্রুত ঘটে যে, মনে হয় সরাসরি কথা বলছি। ঠিক এই টাওয়ারগুলোর মাধ্যমেই ইন্টারনেটও কাজ করে।
ইন্টারনেটে শুধু তোর ফোনই নয়, তোর ল্যাপটপ, প্রিন্টারসহ সবকিছুতে যুক্ত থাকে। বর্তমানে ইন্টারনেট ছাড়া আমাদের দৈনন্দিন জীবন কল্পনাই করা যায় না। যেমন, তোর বন্ধুর একটি নাম্বার থাকে, ঠিক তেমনই প্রতিটি ওয়েবসাইটেরও একটি IP অ্যাড্রেস থাকে। এই IP অ্যাড্রেসগুলো DNS (Domain Name System)-এর মাধ্যমে পরিচালিত হয়, যা ওয়েবসাইটগুলোকে সহজে খুঁজে পেতে সাহায্য করে।
ধর, তুই কোনো ডাটা পাঠাচ্ছোস। সেই ডাটা অনেক ছোট প্যাকেটে বিভক্ত হয়ে ইন্টারনেটের মাধ্যমে তোর বন্ধুর কাছে পৌঁছে যায়। এই প্রসেসটি HTTP বা HTTPS-এর মাধ্যমে সম্পন্ন হয়। HTTPS আরও সুরক্ষিত। কারণ, এতে ডাটাগুলো এনক্রিপ্ট থাকে, যার ফলে কোনো তৃতীয় পক্ষ তা পড়তে পারে না।
তুই কম্পিউটার বা মোবাইল ডিভাইসে ওয়েবসাইট ইউজ করস। তুই ধর, ইউটিউবে ভিডিও দেখতেছস। তুই ইউটিউব অ্যাপ বা ব্রাউজার দিয়ে ভিডিও প্লে করার রিকোয়েস্ট পাঠাইলি (এটা হলো ক্লায়েন্ট সাইড)। ইউটিউবের সার্ভার সেই ভিডিওর লিংক আর লজিক প্রসেস করে ইন্টারনেটের মাধ্যমে তোর কাছে পাঠালো (এটা হলো সার্ভার সাইড)।
আর ভিডিও, ডেসক্রিপশন, লাইক, ভিউস— এইগুলা স্টোর করা থাকে ডাটাবেজে, যেখান থেকে সার্ভার সেই ডেটা রিকোয়েস্ট অনুযায়ী বের করে পাঠায় ডাটাবেজ থেকে। তিনটা জিনিস একসাথে মিলে কাজ করে বলে তুই ওয়েবসাইট বা অ্যাপ এত সহজে ব্যবহার করতে পারস। অর্থাৎ টোটাল তিনটা পার্ট থাকে।
১। ক্লায়েন্ট সাইড ( কম্পিউটার বা মোবাইল)
২। সার্ভার সাইড
৩। ডাটাবেজ
এখন প্রশ্ন করতে পারস, এই যে ডাটা, এইটা কী জিনিস। এইটা কি লাল শাক, ডাটা শাকের মতো রান্না করে খাওয়ার জিনিস?
উত্তর হচ্ছে, এই ডাটা মানে তথ্য বা ইনফরমেশন বা তুই বলতে পারস কোন ভেরিয়েবল, অ্যারে, অবজেক্ট ইত্যাদি। তবে উল্টাপাল্টাভাবে ডাটা সেন্ড না করে অর্গানাইজভাবে পাঠানোর অনেক সিস্টেম আছে। তাদের মধ্যে সবচেয়ে জনপ্রিয় জাভাস্ক্রিপ্ট অবজেক্ট নোটেশন JavaScript Object Notation (JSON)।
নিচে user নামে একটা জাভাস্ক্রিপ্টের অবজেক্ট আছে। এইটাকে যদি JSON.stringify(user) ব্যবহার করে, তাহলে অবজেক্টটি একটি JSON স্ট্রিংয়ে কনভার্ট করা হয়।
const user = {
id: 1,
name: 'Amir',
job: 'Actor'
};
const userJSON = JSON.stringify(user)
console.log(userJSON);
Output:
{
"id": 1,
"name": "Amir",
"job": "Actor"
}এখন, JSON স্ট্রিং এবং জাভাস্ক্রিপ্ট অবজেক্টের মধ্যে কিছু পার্থক্য দেখা যায়—
১) JSON স্ট্রিংয়ের প্রোপার্টি নামগুলো ডাবল কোটেশনে থাকে। জাভাস্ক্রিপ্টে থাকে না ।
২) জাভাস্ক্রিপ্টের অবজেক্টের মধ্যে কোনো প্রোপার্টির মান হিসেবে ফাংশন থাকতে পারে। যেটাকে আমরা মেথড বলে থাকি। তবে জেশনের মধ্যে ভ্যালু হিসেবে স্ট্রিং, সংখ্যা, বুলিয়ান, array, অবজেক্ট থাকতে পারে। তবে ফাংশন থাকে না।
৩) জাভাস্ক্রিপ্ট অবজেক্ট লেখার সময় স্ট্রিং মানের জন্য সিঙ্গেল কোটেশন ইউজ করতে পারি। তবে JSON-এর স্ট্রিং মানের জন্য ডাবল কোটেশন ইউজ করতে হয়।
এবার আরেকটা বড়সর ডাঙর সাইজের অবজেক্ট দেখ—
const shop = {
owner: 'Alia',
address: {
street: 'kochukhet voot er goli',
city: 'ranbir',
country: 'BD'
},
products: ['laptop', 'mic', 'monitor', 'keyboard'],
revenue: 45000,
isOpen: true,
isNew: false
};
const shopJSON = JSON.stringify(shop);
console.log(shopJSON);
Output:
{
"owner": "Alia",
"address": {
"street": "kochukhet voot er goli",
"city": "ranbir",
"country": "BD"
},
"products": ["laptop", "mic", "monitor", "keyboard"],
"revenue": 45000,
"isOpen": true,
"isNew": false
}জাভাস্ক্রিপ্ট অবজেক্টকে JSON-এ কনভার্ট করার জন্য JSON.stringify ব্যবহার করে এবং JSON স্ট্রিংকে পুনরায় অবজেক্টে কনভার্ট করার জন্য JSON.parse ব্যবহার করে।
const shopObj = JSON.parse(shopJSON);
console.log(shopObj);এভাবেই জাভাস্ক্রিপ্ট অবজেক্টকে JSON স্ট্রিংয়ে কনভার্ট করা হয়। আবার জেশন স্ট্রিংকে জাভাস্ক্রিপ্ট অবজেক্টে কনভার্ট করা যায়।
Practice:
- জাভাস্ক্রিপ্ট, অবজেক্ট ও JSON স্ট্রিংয়ের মধ্যে কী কী পার্থক্য?
- একটা অবজেক্ট বানা, যেখানে একটা user থাকবে। user-এর মধ্যে name, email, address, এবং একটা order history থাকবে। সেই order history-তে অন্তত তিনটা প্রোডাক্ট থাকবে। JSON.stringify দিয়ে পুরা অবজেক্টটাকে JSON স্ট্রিংয়ে কনভার্ট কর।
- shopping cart অবজেক্ট বানা, যার মধ্যে products (array of products), total price (সবগুলা প্রোডাক্টের টোটাল প্রাইস) এবং user details (name, id, contact) থাকবে। এরপর এটাকে JSON স্ট্রিংয়ে কনভার্ট কর।
- একটি weather অবজেক্ট বানা, যার মধ্যে city, temperature, humidity এবং forecast (array) থাকবে। forecast array-তে অন্তত 7 দিনের সম্ভাব্য টেম্পারেচার থাকবে। এটাকে জেশনে কনভার্ট কর।
- সিনেমার জন্য movie-এর ডিটেইল থাকবে। যেমন title, release year, actors এবং ratings। actors একটি array হবে (যেখানে actor দের নাম থাকবে) এবং ratings একটি number। তারপর JSON.stringify দিয়ে কনভার্ট কর। কনভার্ট করার পর সেটাকে আবার জাভাস্ক্রিপ্ট অবজেক্টে কনভার্ট কর।
- এইবার project management system বানা। যেখানে অনেকগুলা প্রজেক্ট থাকবে একটা অ্যারের মধ্যে। প্রত্যেকটা প্রজেক্টের মধ্যে প্রজেক্টে নাম, project description, team members (array), deadlines এবং tasks। প্রতিটি task-এ title, assignee এবং status থাকবে। JSON.stringify দিয়ে কনভার্ট কর।
- লার্নিং প্লাটফর্মের জন্য courses-এর কিছু ডাটা বানা। সেখানে মিনিমাম 3টা কোর্স থাকবে। প্রত্যেকটা কোর্সে course title, instructor name, duration এবং lessons (array)। lessons array-তে lesson name, duration এবং difficulty level থাকবে। ডিফিকাল্টি লেভেল বলতে beginner, intermediate, advanced যেকোনো একটা মান হবে। JSON.stringify দিয়ে কনভার্ট কর।
- ইকমার্স ওয়েবসাইটে product review-এর ডাটা বানিয়ে ফেল। যেখানে প্রত্যেকটা রিভিউ অবজেক্টে product name, reviewer details (name, email), rating, and review text থাকবে। এরপর সেই অবজেক্টটিকে JSON.stringify দিয়ে কনভার্ট কর। সেই json-কে আবার জাভাস্ক্রিপ্ট অ্যারেতে কনভার্ট কর।