Framework7 ব্যবহার করে সহজেই REST API এর সাথে ইন্টিগ্রেশন করা যায় এবং ফেচ করা ডেটা ম্যানিপুলেট (Manipulate) করা সম্ভব। JavaScript এর Fetch API, Axios অথবা অন্য কোনো HTTP লাইব্রেরি ব্যবহার করে সার্ভার থেকে ডেটা নিয়ে আসা যায়। এরপর সেই ডেটা Framework7 এর উপাদানগুলোর মাধ্যমে UI তে উপস্থাপন করা, ফিল্টার করা, বা পরিবর্ধন করা সহজ হয়।
REST API থেকে ডেটা ফেচ করা
REST API থেকে ডেটা ফেচ করতে Fetch API ব্যবহার করা সবচেয়ে সহজ উপায়। আপনি একটি এন্ডপয়েন্ট (endpoint) এ HTTP GET রিকোয়েস্ট পাঠিয়ে JSON ডেটা রিসিভ করতে পারেন।
উদাহরণ: ডেটা ফেচ করা
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log('Received Data:', data);
// এখানে ডেটা ম্যানিপুলেট করে UI তে প্রদর্শন করুন
})
.catch(error => {
console.error('Error fetching data:', error);
});
উপরের কোডে একটি GET রিকোয়েস্ট https://api.example.com/data এ পাঠানো হয়েছে। রেসপন্স JSON এ রূপান্তর করে data প্রাপ্ত হচ্ছে, যা কনসোলে দেখা যাবে।
Data Manipulation (ডেটা ম্যানিপুলেশন)
API থেকে প্রাপ্ত ডেটা সরাসরি UI তে প্রদর্শন করার আগে প্রায়ই তা ম্যানিপুলেট করতে হয়। যেমন:
- ফিল্টারিং: প্রাপ্ত ডেটার মধ্যে কিছু নির্দিষ্ট মান বা অবজেক্ট খুঁজে বের করা।
- ম্যাপিং: প্রতিটি অবজেক্টের উপর লুপ চালিয়ে প্রয়োজন অনুযায়ী ডেটা রূপান্তর করা।
- সর্টিং: ডেটাকে ক্রমানুসারে সাজানো (অ্যালফাবেটিক, সংখ্যাগত, বা সময়ানুসারে)।
উদাহরণ: ডেটা ফিল্টারিং এবং ম্যাপিং
fetch('https://api.example.com/users')
.then(res => res.json())
.then(users => {
// ধরুন আমরা শুধু সক্রিয় (active) ব্যবহারকারীদের খুঁজে বের করবো
const activeUsers = users.filter(user => user.active);
// প্রতিটি activeUsers অবজেক্টের নাম বড় হাতের অক্ষরে রূপান্তর
const transformedUsers = activeUsers.map(user => {
return {
...user,
name: user.name.toUpperCase()
};
});
console.log('Transformed Users:', transformedUsers);
// transformedUsers এখন UI তে প্রদর্শনের জন্য প্রস্তুত
})
.catch(err => console.error(err));
উপরের কোডে প্রথমে সক্রিয় ব্যবহারকারীদের ফিল্টার করে নেওয়া হয়েছে, তারপর তাদের নামকে বড় হাতের অক্ষরে রূপান্তর করা হয়েছে।
Framework7 UI তে ডেটা প্রদর্শন করা
Framework7 এর বিভিন্ন UI কম্পোনেন্ট যেমন List, Card, বা টেমপ্লেট ব্যবহার করে আপনি ফেচ করা ডেটা দেখাতে পারেন।
উদাহরণ: লিস্টে ডেটা প্রদর্শন
<div class="list simple-list">
<ul id="user-list"></ul>
</div>
fetch('https://api.example.com/users')
.then(res => res.json())
.then(users => {
const userList = document.getElementById('user-list');
users.forEach(user => {
const li = document.createElement('li');
li.textContent = user.name;
userList.appendChild(li);
});
});
উপরের কোডে users ডেটার প্রতিটি user অবজেক্ট লিস্টে যোগ করা হয়েছে। যদি আপনি এর আগে ডেটা ম্যানিপুলেট করে থাকেন, তবে এখানে কেবলপরিবর্তিত ডেটা ব্যবহার করতে পারেন।
ডেটা আপডেট, ক্রিয়েট এবং ডিলিট করা (POST, PUT, DELETE)
REST API সাধারণত শুধু ডেটা ফেচ নয়, বরং ডেটা তৈরি (POST), আপডেট (PUT/PATCH) এবং ডিলিট (DELETE) করতেও ব্যবহার করা যায়।
উদাহরণ: নতুন ডেটা যুক্ত করা (POST)
const newUser = {
name: 'John Doe',
email: 'john@example.com'
};
fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newUser)
})
.then(res => res.json())
.then(createdUser => {
console.log('User Created:', createdUser);
// তৈরি হওয়া ব্যবহারকারীর ডেটা UI তে যোগ করুন
});
সারাংশ
Framework7 ব্যবহার করে REST API এর সাথে ইন্টিগ্রেশন করে অ্যাপ্লিকেশনকে ডায়নামিক করা সহজ। Fetch API বা Axios এর মতো লাইব্রেরি ব্যবহার করে ডেটা ফেচ, ফিল্টার, ম্যাপ বা সর্ট করে UI তে দেখানো যায়। এছাড়াও, API ব্যবহার করে ডেটা তৈরি, আপডেট এবং ডিলিট করার মাধ্যমে অ্যাপকে সম্পূর্ণ CRUD ফাংশনালিটি দেওয়া যায়।
Read more
