Framework7 দিয়ে প্রথম অ্যাপ তৈরি করা খুবই সহজ। Framework7 CLI (Command Line Interface) এবং প্রাথমিক কনফিগারেশন ব্যবহার করে কয়েকটি ধাপেই একটি মোবাইল বা ওয়েব অ্যাপ্লিকেশন তৈরি করা সম্ভব।
Framework7 দিয়ে প্রথম অ্যাপ তৈরি করার ধাপসমূহ
১. Framework7 CLI ইনস্টল করা
Framework7 CLI ইনস্টল করার জন্য Node.js এবং NPM ইনস্টল করা থাকতে হবে। Framework7 CLI গ্লোবালি ইনস্টল করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন:
npm install framework7-cli -g
২. নতুন Framework7 প্রজেক্ট তৈরি করা
Framework7 CLI দিয়ে নতুন অ্যাপ তৈরি করতে:
framework7 create
এটি চালানোর পরে CLI আপনাকে কিছু প্রম্পট দেবে। সেখানে আপনার অ্যাপের জন্য উপযুক্ত অপশন নির্বাচন করুন। উদাহরণস্বরূপ:
- Framework Version: Framework7 Core, Vue.js, বা React।
- Target App Type: Single View App, Web App, বা PWA।
- Theme: iOS বা Material Design থিম।
- CSS Preprocessor: CSS, LESS, বা SASS।
- Build Tool: Webpack বা Vite।
- Cordova Integration: মোবাইল অ্যাপ তৈরির জন্য Cordova ব্যবহার করতে চাইলে
Yes।
নির্বাচনের পরে Framework7 একটি নতুন প্রজেক্ট তৈরি করবে।
৩. প্রজেক্ট ডিরেক্টরিতে প্রবেশ করা
প্রজেক্ট তৈরি হলে সেই ডিরেক্টরিতে যান:
cd <project-name>
৪. ডিপেনডেন্সি ইনস্টল করা
Framework7 অ্যাপ চালানোর জন্য প্রয়োজনীয় সমস্ত প্যাকেজ ইনস্টল করতে:
npm install
৫. Framework7 অ্যাপ চালু করা
অ্যাপ রান করতে ডেভেলপমেন্ট সার্ভার চালু করুন:
npm start
এরপর ব্রাউজারে http://localhost:8080 এ আপনার অ্যাপ দেখা যাবে।
Framework7 অ্যাপের ফোল্ডার স্ট্রাকচার
Framework7 প্রজেক্টের সাধারণ স্ট্রাকচার নিম্নরূপ:
/src
/assets # ইমেজ, ফন্ট এবং অন্যান্য স্ট্যাটিক ফাইল
/css # কাস্টম স্টাইলশিট
/js # কাস্টম জাভাস্ক্রিপ্ট ফাইল
/pages # পৃষ্ঠার জন্য HTML ফাইল
app.js # Framework7 অ্যাপের মেইন জাভাস্ক্রিপ্ট ফাইল
index.html # অ্যাপের মূল HTML ফাইল
Framework7 অ্যাপ কনফিগার করা
রাউটিং সেটআপ
/src/js/routes.js ফাইলে নতুন পৃষ্ঠার জন্য রাউট যুক্ত করুন। উদাহরণ:
routes = [
{
path: '/about/',
url: './pages/about.html',
},
];
একটি পৃষ্ঠা তৈরি
/src/pages/about.html ফাইলে নতুন পৃষ্ঠার HTML যুক্ত করুন:
<div class="page" data-name="about">
<div class="navbar">
<div class="navbar-inner">
<div class="title">About</div>
</div>
</div>
<div class="page-content">
<p>This is the About Page.</p>
</div>
</div>
Framework7 অ্যাপ কাস্টমাইজ করা
থিম নির্বাচন
Framework7 অ্যাপ iOS এবং Material Design থিম সমর্থন করে। থিম নির্বাচন করতে app.js ফাইল পরিবর্তন করুন:
var app = new Framework7({
root: '#app',
theme: 'auto', // iOS, md, বা auto
});
স্টাইল পরিবর্তন
কাস্টম CSS যুক্ত করতে /src/css/app.css ফাইলটি ব্যবহার করুন। উদাহরণ:
body {
background-color: #f4f4f4;
}
প্রোডাকশন বিল্ড তৈরি
ডেভেলপমেন্ট শেষ হলে প্রোডাকশন বিল্ড তৈরি করুন:
npm run build
এটি dist ফোল্ডারে প্রোডাকশন-রেডি ফাইল তৈরি করবে, যা মোবাইল বা ওয়েব প্ল্যাটফর্মে ডিপ্লয় করা যাবে।
মোবাইল অ্যাপ তৈরি এবং ডিপ্লয়
Cordova ব্যবহার করে মোবাইল অ্যাপ তৈরি করতে:
cordova platform add android
cordova build android
Android অ্যাপের জন্য .apk ফাইল তৈরি হবে, যা মোবাইল ডিভাইসে ডিপ্লয় করা যাবে।
সারাংশ
Framework7 দিয়ে প্রথম অ্যাপ তৈরি করা অত্যন্ত সহজ এবং দ্রুত। CLI ব্যবহার করে নতুন প্রজেক্ট তৈরি, পৃষ্ঠার রাউটিং সেটআপ এবং থিম কাস্টমাইজেশন সহ সবকিছুই স্বয়ংক্রিয় এবং কার্যকরভাবে করা যায়। এটি মোবাইল এবং ওয়েব উভয় প্ল্যাটফর্মের জন্যই একটি শক্তিশালী ফ্রেমওয়ার্ক।
Read more
