Framework7 দিয়ে অ্যাপ্লিকেশন তৈরি করার সময় অনেক ক্ষেত্রে সার্ভার থেকে ডেটা ফেচ করা বা REST API এর সঙ্গে যোগাযোগ করা প্রয়োজন হয়। এই কাজটি AJAX (Asynchronous JavaScript And XML) ব্যবহার করে সহজেই করা যায়। Framework7 মূলত HTTP রিকোয়েস্ট করার জন্য JavaScript এর বিল্ট-ইন fetch() API বা Axios ইত্যাদি ব্যবহার করতে পারে।
AJAX কী এবং কেন ব্যবহার করবেন
AJAX (Asynchronous JavaScript and XML) হলো ক্লায়েন্ট-সাইড থেকে সার্ভারে ডেটা অনুরোধ (Request) এবং সার্ভার থেকে রেসপন্স পাওয়ার একটি পদ্ধতি। এটি পেজ রিলোড না করেই ডেটা লোড করতে পারে। API Integration এর মাধ্যমে আপনি Backend সার্ভার থেকে ডেটা নিয়ে আপনার অ্যাপটিকে আরও ডাইনামিক এবং ইন্টারেক্টিভ করতে পারেন।
Framework7 এ AJAX রিকোয়েস্ট করার পদ্ধতি
Framework7 নিজে AJAX করার জন্য কোনও বিল্ট-ইন ফাংশন না দিলেও আপনি সহজেই fetch() ব্যবহার করতে পারেন। fetch() হল একটি আধুনিক ব্রাউজার API যা AJAX রিকোয়েস্ট করার জন্য ব্যবহার করা হয়।
উদাহরণ (fetch API ব্যবহার করে):
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
// এখানে data দিয়ে UI আপডেট করুন
})
.catch(error => {
console.error('Error:', error);
});
উপরের কোড ব্লকে fetch() API ব্যবহার করে https://api.example.com/data URL থেকে ডেটা ফেচ করা হয়েছে। এরপর response.json() ব্যবহার করে JSON ডেটা প্রসেস করা হয়েছে। সফল হলে data এর মাধ্যমে আপনি UI আপডেট করতে পারেন, আর এরর হলে catch() ব্লকে হ্যান্ডেল করতে পারেন।
Framework7 এর সাথে Axios ব্যবহার
AJAX রিকোয়েস্টের জন্য Axios একটি জনপ্রিয় লাইব্রেরি। এটি Promises-ভিত্তিক এবং ব্যবহার করা সহজ।
Axios ইনস্টল:
npm install axios
Axios ব্যবহার করে রিকোয়েস্ট:
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
// response.data ব্যবহার করে UI আপডেট করুন
})
.catch(error => {
console.error('Error:', error);
});
Framework7 এবং API থেকে ডেটা লোড করে UI আপডেট করা
API ডেটা পাওয়ার পর আপনি Framework7 এর UI কম্পোনেন্ট, যেমন List, Cards, বা Dynamically Created Elements ব্যবহার করে ডেটা প্রদর্শন করতে পারেন।
উদাহরণ (List আপডেট):
fetch('https://api.example.com/items')
.then(res => res.json())
.then(data => {
const listEl = document.querySelector('.list ul');
data.forEach(item => {
const li = document.createElement('li');
li.innerHTML = `<a href="#" class="item-link">${item.name}</a>`;
listEl.appendChild(li);
});
})
.catch(err => console.log(err));
উপরের কোডে অ্যাসিঙ্ক্রোনাসলি ডেটা ফেচ করে list এ নতুন আইটেম যোগ করা হয়েছে।
API Integration বেস্ট প্র্যাকটিস
- Error Handling: সবসময়
.catch()বাtry...catchব্যবহার করে এরর হ্যান্ডেল করুন। - Loading Indicators: ডেটা ফেচ করার সময় লোডার বা স্পিনার দেখান, যাতে ব্যবহারকারী বুঝতে পারে ডেটা লোড হচ্ছে।
- Caching: প্রয়োজন অনুযায়ী ডেটা ক্যাশ করতে পারেন, যাতে বারবার রিকোয়েস্ট করা না লাগে।
- Authentication: API প্রোটেক্টেড থাকলে Access Token বা JWT ব্যবহার করে অথেনটিকেশন নিশ্চিত করুন।
Framework7 অ্যাপ্লিকেশনে AJAX এবং API Integration ব্যবহার করে আপনি ডায়নামিক কন্টেন্ট লোড করতে, ইউজার ইন্টারেকশন উন্নত করতে এবং রিয়েল-টাইম ডেটা উপস্থাপন করতে পারবেন। এটি আপনার অ্যাপকে আরও ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব করে তুলবে।
Framework7 ব্যবহার করে AJAX রিকোয়েস্ট খুব সহজেই করা যায়। এটি জাভাস্ক্রিপ্টের fetch(), XMLHttpRequest(), অথবা অ্যাক্সিওসের মতো থার্ড-পার্টি লাইব্রেরি ছাড়াই ডেটা ফেচ করতে পারে। Framework7 এর অন্তর্নির্মিত app.request API ব্যবহার করে আপনি সার্ভার থেকে ডেটা রিট্রিভ করতে পারেন।
AJAX রিকোয়েস্ট শুরু করা
Framework7 এ AJAX রিকোয়েস্ট করার জন্য app.request ব্যবহার করা হয়। এটি GET, POST, PUT, DELETE সহ বিভিন্ন HTTP মেথড সমর্থন করে। সাধারণত GET রিকোয়েস্ট ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করা হয়।
সাধারণ উদাহরণ
নিচে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে সার্ভার থেকে JSON ডেটা ফেচ করে পৃষ্ঠায় দেখানো হবে। ধরুন আমাদের একটি এন্ডপয়েন্ট আছে: https://api.example.com/data যা JSON ফরম্যাটে ডেটা রিটার্ন করে।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Framework7 AJAX Example</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.css"> </head> <body> <div id="app"> <div class="view view-main"> <div class="page" data-name="home"> <div class="navbar"> <div class="navbar-inner"> <div class="title">AJAX Data Fetch</div> </div> </div> <div class="page-content"> <div class="block"> <button id="fetchDataBtn" class="button button-fill">Fetch Data</button> </div> <div class="block"> <div id="dataContainer"></div> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.js"></script> <script> var app = new Framework7({ root: '#app', }); var ('#fetchDataBtn').on('click', function() { // AJAX রিকোয়েস্ট শুরু app.request.get('https://api.example.com/data', function (response) { // response একটি স্ট্রিং, এটিকে JSON এ কনভার্ট করা var data = JSON.parse(response); // ডেটা পেয়ে পৃষ্ঠায় দেখানো var html = ''; data.forEach(function(item){ html += '<p>'+ item.name +'</p>'; }); $$('#dataContainer').html(html); }, function (error) { // ত্রুটি হ্যান্ডলিং app.dialog.alert('Error fetching data'); }); });) সিলেক্টর ব্যবহার করে HTML এলিমেন্টে ডেটা যুক্ত বা সংশোধন করা যায়। অতিরিক্তভাবে, লোডার বা স্পিনার ব্যবহার করে AJAX কলের সময় লোডিং স্টেট দেখাতে পারেন।উপরের উদাহরণে
#fetchDataBtnক্লিক করলেapp.request.get()ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করা হয়। সফলভাবে ডেটা পাওয়া গেলে JSON ডেটা প্যার্স করে পৃষ্ঠায় প্রদর্শন করা হয়। ত্রুটি ঘটলে অ্যালার্টের মাধ্যমে তা দেখানো হয়।অন্যান্য় কনফিগারেশন এবং অপশন
app.request.get()ছাড়াওapp.request.post(),app.request.put(),app.request.delete()ইত্যাদি ব্যবহার করে সার্ভারে ডেটা পাঠানো বা আপডেট করা যায়। এছাড়া হেডার, টাইমআউট, এবং কুকিজ ম্যানেজমেন্টের জন্য অতিরিক্ত অপশনও দেওয়া যায়।উদাহরণ: কাস্টম হেডার পাঠানো
app.request({ url: 'https://api.example.com/data', method: 'GET', headers: { 'Authorization': 'Bearer your_token_here' }, success: function (response) { var data = JSON.parse(response); console.log(data); }, error: function (error) { console.error('Error:', error); } });উপরের উদাহরণে কাস্টম হেডার (
Authorization) পাঠিয়ে সার্ভার থেকে ডেটা ফেচ করা হয়েছে।সার্ভার থেকে ডেটা ফেচের পর UI আপডেট
সার্ভার থেকে ডেটা পাওয়ার পর সাধারণত UI আপডেট বা DOM ম্যানিপুলেশন করা হয়। এর জন্য Dom7 (
$$Framework7 এর AJAX সুবিধা ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করা সহজ এবং কার্যকর। এটি ডেভেলপারদের কম কোডে দ্রুত ইমপ্লিমেন্টেশন নিশ্চিত করে এবং অ্যাপ্লিকেশনকে আরো ডায়নামিক করে তোলে।
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 ফাংশনালিটি দেওয়া যায়।
Fetch API (ফেচ এপিআই) হল নেটিভ ব্রাউজার ফাংশনালিটি যা JavaScript এর মাধ্যমে সহজে HTTP অনুরোধ (request) পাঠাতে এবং রেসপন্স (response) গ্রহণ করতে সাহায্য করে। এটি Asynchronous (অ্যাসিঙ্ক্রোনাস) ভাবে কাজ করে, যার ফলে পৃষ্ঠা রিলোড না করেই ডেটা লোড করা সহজ হয়।
Fetch API এর মৌলিক ধারণা
Fetch API সাধারণত fetch() ফাংশন ব্যবহার করে HTTP অনুরোধ পাঠায়। এই ফাংশন একটি Promise রিটার্ন করে, যা রেসপন্স পাওয়ার পর .then() ব্লকে এক্সিকিউট হয়। কোন সমস্যা হলে .catch() ব্লকে ধরা যায়।
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
উপরের কোডে fetch() একটি GET অনুরোধ পাঠায় https://api.example.com/data এই URL এ। রেসপন্স পাওয়ার পর .json() মেথড ব্যবহার করে JSON ডেটা অবজেক্টে রূপান্তর করা হয়।
বিভিন্ন HTTP অনুরোধ (GET, POST)
GET অনুরোধ
GET অনুরোধ ডেটা সংগ্রহ করতে ব্যবহৃত হয়। উপরোক্ত উদাহরণটি একটি GET অনুরোধেরই উদাহরণ।
fetch('https://api.example.com/users')
.then(response => response.json())
.then(users => {
console.log(users);
})
.catch(err => console.error(err));
POST অনুরোধ
POST অনুরোধ সার্ভারে নতুন ডেটা পাঠাতে ব্যবহৃত হয়। এই ক্ষেত্রে fetch() ফাংশনে দ্বিতীয় আর্গুমেন্ট হিসেবে একটি কনফিগ অবজেক্ট পাস করতে হয়, যেখানে method: 'POST' এবং body নির্দিষ্ট করতে হয়।
fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: 'John Doe', email: 'john@example.com' })
})
.then(response => response.json())
.then(data => {
console.log('User created:', data);
})
.catch(error => console.error('Error:', error));
Fetch API এর Response হ্যান্ডলিং
Fetch API এর রেসপন্সে সাধারণত .json(), .text(), .blob(), .arrayBuffer() এর মতো মেথড থাকে। আপনার ডেটা ফরম্যাট অনুযায়ী পছন্দের মেথড ব্যবহার করতে পারেন। সাধারণত .json() সবচেয়ে বেশি ব্যবহৃত হয় JSON ডেটা রিড করতে।
fetch('https://api.example.com/products')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(products => {
console.log(products);
})
.catch(error => console.error('Error:', error));
উপরের কোডে response.ok চেক করা হয়েছে, যাতে ৪০৪ বা ৫০০ এর মতো কোনো HTTP এরর থাকলে তা ধরা যায়।
Async/Await ব্যবহার করে Fetch
Async/Await ব্যবহার করলে Fetch API এর কোড আরও সহজ এবং পরিষ্কার হয়। Async ফাংশনের ভিতরে আপনি await ব্যবহার করতে পারেন, যা Promise রেজল্ভ হওয়া পর্যন্ত অপেক্ষা করে।
async function loadData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network Error');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
loadData();
Fetch API ব্যবহারের সুবিধা
- ব্রাউজার নেটিভ সাপোর্ট: Fetch API আধুনিক ব্রাউজারে বিল্ট-ইন সাপোর্ট পায়, কোন থার্ড-পার্টি লাইব্রেরি প্রয়োজন হয় না।
- Promises ভিত্তিক: ফেচ অ্যাপিআই Promise ব্যবহার করে, যা Callback Hell এড়াতে সাহায্য করে।
- সহজ সিনট্যাক্স: গতানুগতিক XMLHttpRequest এর থেকে Fetch API এর সিনট্যাক্স অনেক সহজ।
- Async/Await সাপোর্ট: Async/Await ব্যবহার করে কোড আরও পরিষ্কার করা যায়।
Fetch API ব্যবহার করে ডেটা লোড করা একটি আধুনিক এবং কার্যকর পদ্ধতি। এটি অ্যাপ্লিকেশনকে আরও গতিশীল এবং ইন্টারেক্টিভ করে তোলে।
Loading Indicator ব্যবহার
অ্যাপ্লিকেশনে ডায়নামিক কন্টেন্ট লোড করার সময় ব্যবহারকারীদের অপেক্ষা করাতে হয়। এই অপেক্ষার সময় তাদের একটি ভিজ্যুয়াল ইঙ্গিত দেওয়া জরুরি। Framework7 এ Loading Indicator (লোডিং ইন্ডিকেটর) ব্যবহার করে এ কাজ সহজে করা যায়। এটি ব্যবহারকারীদের জানায় যে নতুন কন্টেন্ট লোড হচ্ছে।
Loading Indicator কনফিগারেশন
// লোডিং ইন্ডিকেটর শো করা
app.preloader.show();
// কন্টেন্ট লোড সম্পন্ন হলে লোডিং ইন্ডিকেটর হাইড করা
app.preloader.hide();
এই কোডটি ব্যবহার করে অ্যাসিঙ্ক্রোনাস অপারেশন চলাকালীন ব্যবহারকারীকে একটি স্পিনার বা লোডিং গ্রাফিক দেখাতে পারবেন।
Pull-to-Refresh ব্যবহার
Framework7 এর Pull-to-Refresh (পুল-টু-রিফ্রেশ) ফিচার ব্যবহার করে ব্যবহারকারীরা স্ক্রিনটিকে টানলে (pull) নতুন কন্টেন্ট রিফ্রেশ করতে পারেন। এটি মোবাইল অ্যাপের ক্ষেত্রে খুবই জনপ্রিয় একটি প্যাটার্ন, যা ব্যবহারকারীদের হাতে কন্টেন্ট আপডেটের নিয়ন্ত্রণ দেয়।
Pull-to-Refresh সেটআপ
HTML কোডে ptr-content ক্লাস যোগ করে Pull-to-Refresh সক্রিয় করা যায়:
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Pull to Refresh</div>
</div>
</div>
<div class="page-content ptr-content">
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
<div id="items-container">
<!-- ডায়নামিক কন্টেন্ট এখানে লোড হবে -->
</div>
</div>
</div>
JavaScript ইভেন্ট হ্যান্ডলার
var $ptrContent = app.$('.ptr-content');
$ptrContent.on('ptr:refresh', function (e) {
// নতুন ডেটা ফেচ করুন (Ajax বা Fetch API ব্যবহার করতে পারেন)
fetch('/api/get-new-items')
.then(response => response.json())
.then(data => {
// প্রাপ্ত ডেটা UI তে যুক্ত করুন
var itemsContainer = app.$('#items-container');
itemsContainer.html(''); // পুরনো কন্টেন্ট মুছে ফেলুন বা ম্যানেজ করুন
data.forEach(item => {
itemsContainer.append('<div class="item">' + item.title + '</div>');
});
// রিফ্রেশ সম্পন্ন হলে Pull-to-Refresh বন্ধ করুন
app.ptr.done();
})
.catch(error => {
console.error(error);
// কোনো ত্রুটি হলে লোডিং শেষ করেও Pull-to-Refresh বন্ধ করুন
app.ptr.done();
});
});
উপরের উদাহরণে ptr:refresh ইভেন্ট ট্রিগার হলে নতুন কন্টেন্ট Ajax বা Fetch API এর মাধ্যমে আনা হয়। ডেটা লোড সম্পন্ন হওয়ার পর UI আপডেট করা হয় এবং শেষমেশ app.ptr.done(); ব্যবহার করে রিফ্রেশ ইন্ডিকেটর বন্ধ করা হয়।
Dynamic Content প্রদর্শন
লোডিং এবং Pull-to-Refresh ব্যবহার করে আপনার অ্যাপ্লিকেশনে ডায়নামিক কন্টেন্ট যুক্ত করা সহজ হয়। যখন ব্যবহারকারী অ্যাপ ওপেন করে বা কোনো নির্দিষ্ট অ্যাকশন নেয়, তখন লোডিং ইন্ডিকেটর শো করে নতুন কন্টেন্ট লোড করতে পারেন। আবার ব্যবহারকারী নিজেই Pull-to-Refresh করে নতুন কন্টেন্ট রিফ্রেশ করতে পারবেন।
প্রধান পদক্ষেপ
- ডেটা লোড হওয়ার সময় লোডার শো করুন।
- ডেটা লোড সম্পন্ন হলে লোডার হাইড করুন।
- Pull-to-Refresh ব্যবহারের মাধ্যমে ব্যবহারকারীদের হাতে কন্টেন্ট আপডেটের ক্ষমতা দিন।
- কন্টেন্ট ডেটা ফেচ করতে Ajax বা Fetch API ব্যবহার করুন।
- পাওয়া ডেটা UI তে যুক্ত করে অ্যাপকে জীবন্ত করুন।
ডার্ক মোড, থিম, রাউটিং সহ Framework7 এর অন্যান্য ফিচারের সাথে লোডিং ও Pull-to-Refresh ব্যবহারে আপনার অ্যাপলিকেশন হয়ে উঠবে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব।
Read more
