ফ্রন্টেন্ড ডেভেলপারদের প্রতিনিয়ত ব্যাকেন্ডে করা REST API থেকে json ফরম্যাটের ডাটা নিয়ে কাজ করতে হয় এবং ফন্টেন্ড অ্যাপ্লিকেশন ঠিকঠাক কাজ করছে কিনা তা চেক হয় ।
আমরা সম্পূর্ণ ব্যাকেন্ড সার্ভার তৈরি করে ফেলতে পারি যেমনঃ Node.js, Express and MongoDB দিয়ে । সেটা বেশ সময় সাপেক্ষ । আমাদের এর থেকে সহজ একটা পদ্ধতি দরকার , বিশেষত যারা শুধুমাত্র ফন্টেন্ড নিয়ে কাজ করেন তাদের জন্য ।
JSON Server একটা সাধারণ প্রজেক্ট যা ব্যবহার করে খুব দ্রুত CRUD অপারেশনসহ রেস্ট এপিআই (REST API) তৈরি করে ফেলতে পারি ।
এই পোস্টের বাকি অংশে আমরা শিখব কিভাবে
JSON Server ইনস্টল করে REST API তৈরি করতে পারি । এর সাথে আরো শিখব কিভাবে
faker.js দিয়ে কিভাবে কৃত্তিম তথ্য REST API তে ব্যবহার করতে পারি ।
JSON Server ইনস্টল করা
নোড প্যাকেজ ম্যানেজার(NPM) দিয়ে আমরা JSON Server ইনস্টল করে ফেলতে পারি । এর জন্য টার্মিনালে নিচের কমান্ড চালাতে হবে ।
$ npm install -g json-server
এখানে -g অপশনটা ব্যবহার করা হয়েছে গ্লোবাল ইনস্টলের জন্য
JSON ফাইল তৈরি
db.json নামে একটা ফাইল তৈরি করা যাক যেটা আমরা রেস্ট এপিআই (REST API) এর জন্য ব্যবহার করব । JSON ফাইলে থাকা অবজেক্টগুলোর জন্য CRUD এন্ডপয়েন্ডগুলো সয়ংক্রিয়ভাবে তৈরি হয়ে যাবে । নিচে db.json ফাইলটা দেখুন ।
এই JSON স্ট্রাকচারে একটা users অবজেক্ট আছে যাতে তিনটা ডাটাসেট আছে । প্রতিটা users অবজেক্টে id, name , email এই তিনটা প্রোপার্টি আছে ।
সার্ভার চালু করা
db.json ফাইলটা দিয়ে এখন আমরা সার্ভার চালু করব । এজন্য নিচের কমান্ড লিখতে হবে ।
$ json-server --watch db.json
এখানে
--watch অপশন ব্যবহার করা হয়েছে যাতে
db.json ফাইলে কোনো পরিবর্তন হলে সার্ভারেও পরিবর্তন হয় ।
এখন আমরা
http://localhost:3000/ ওপেন করলে নিচের ছবির মত ফলাফল দেখাবে ।
আউটপুট থেকে আমরা দেখতে পারছি users রিসোর্স ঠিকমতো কাজ করছে । আমরা এখন users লিঙ্কে ক্লিক করে
http://localhost:3000/users এ HTTP GET রিকুয়েস্ট পাঠালে নিচের মত ফলাফল দেখাবে ব্রাউজারে ।
JSON Server সয়ংক্রিয়ভাবে নিচের HTTP এন্ডপয়েন্টগুলো তৈরি করবে ।
GET /users
GET /users/{id}
POST /users
PUT /users/{id}
PATCH /users/{id}
DELETE /users/{id}
আমরা যদি এতে POST, PUT, PATCH or DELETE রিকুয়েস্ট পাঠাই তাহলে তা
db.json ফাইলে সেইভ হয়ে থাকবে । POST, PUT বা PATCH রিকুয়েস্ট পাঠানোর সময় অবশ্যই রিকুয়েস্ট হেডারে
Content-Type: application/json দিতে হবে । তা না করলে রেসপন্স 200 OK আসবে , JSON ডাটা পরিবর্তন হবে না ।
পোস্টম্যান (POSTMAN) দিয়ে এপিআই এন্ডপয়েন্ট (API Endpoint) পরীক্ষা
ব্রাউজার দিয়ে GET রিকুয়েস্ট পাঠানো খুব সহজ । কিন্তু অন্যান্য রিকুয়েস্ট পাঠানোর জন্য আমাদের HTTP ক্লায়েন্ট টুল পোস্টম্যান (POSTMAN) ব্যবহার করতে হবে । পোস্টুম্যান (POSTMAN) সাইটের লিঙ্কঃ
https://www.getpostman.com/ । উইন্ডোজ , লিনাক্স , ম্যাক সব প্লাটফর্মেই ব্যবহার করতে পারবেন । উবুন্টুতে পোস্টম্যান (POSTMAN) ইনস্টলে নিয়ম দেখুন এখানেঃ
http://blog.monirulalom.com/2018/06/postman.html
GET রিকুয়েস্ট
পোস্টম্যান (POSTMAN) ইনটার্ফেস ব্যবহার করা খুবই সহজ । GET রিকুয়েস্ট পাঠাতে ফর্মে ইউয়ারএল (
http://localhost:3000/users ) লিখে SEND বাটনে ক্লিক করলে JSON ফরম্যাটে রেসপন্স আসবে , নিচের স্ক্রীনশট দেখুন ।
DELETE রিকুয়েস্ট
অপশন থেকে DELETE সিলেক্ট করে
http://localhost:3000/users/1 এ DELETE রিকুয়েস্ট পাঠানোর পর ফলাফল নিচের স্ক্রীনশটের মত হবে ।
POST রিকুয়েস্ট
নতুন JSON অবজেক্ট অ্যাড করার জন্য আমাদের POST রিকুয়েস্ট পাঠাতে হবে । এর জন্য অপশন থেকে POST সিলেক্ট করতে হবে এবং body তে JSON অবজেক্ট দিয়ে POST রিকুয়েস্ট পাঠাতে হবে । নিচের স্ক্রীনশট দেখুন ।
PUT রিকুয়েস্ট
কোনো users রেকর্ড আপডেট/পরিবর্তন করতে চাইলে HTTP PUT রিকুয়েস্ট পাঠাতে হবে । h
ttp://localhost:3000/users/3 এ PUT রিকুয়েস্ট পাঠানোর পর ফলাফল দেখুন স্ক্রীনশটে ।
faker.js দিয়ে কৃত্তিম তথ্য তৈরি
এতক্ষণ আমরা ম্যানুয়ালি তৈরি করা JSON ফাইল নিয়ে কাজ করলাম । মাঝেমধ্যেই আমাদের অনেক তথ্য নিয়ে কাজ করার প্রয়োজন হতে পারে যা ম্যানুয়ালি তৈরি করা ঝামেলার এবং অনেক সময়ের ব্যাপার । এর সহজ সমাধান হচ্ছে faker.js (
https://github.com/marak/Faker.js/) ব্যবহার করে কৃত্তিম তথ্য তৈরি করা । JSON Server এর সাথে faker.js ব্যবহার করা খুব সহজ ।
আপনার প্রজেক্ট ডিরেক্টরিতে faker.js ইনস্টল করতে টার্মিনালে নিচের কমান্ড লিখে এন্টার দিন ।
$ npm install faker --save-dev
node_modules ফোল্ডারে faker.js ইনস্টল হবে । এখন users.js নামে ফাইল তৈরি করে নিচের জাভাস্ক্রিপ্ট কোডগুলো লিখুন ।
এখানে একটা অ্যারো ফাংশন আছে যা ২০ টা user অবজেক্ট তৈরি করে এবং এই ফাংশনকে মডিউল হিসেবে এক্সপোর্ট করা হয়েছে ।
faker.js থেকে দুইটা মেথড ব্যবহার করা হয়েছে user অবজেক্ট এর প্রোপার্টগুলো ভ্যালু সেট করার জন্য ।
faker.name.findName() - কৃত্তিম নামের জন্য faker.internet.email() -কৃত্তিম ইমেইলের জন্য
এখন কৃত্তিম তথ্য দিয়ে JSON Server তৈরির জন্য নিচের কমান্ড লিখুন ।
$ json-server users.js
এভাবে আমরা খুব সহজেই 20 টা JSON অবজেক্ট দিয়ে REST API তৈরি করে ফেললাম । এখন আমরা প্রয়োজনমত অবজেক্ট বা কৃত্তিম তথ্য নিয়ে খুব সহজেই কাজ করতে পারবো।
