Sencha Touch সেটআপ এবং ইনস্টলেশন

Sencha Touch কি?

Sencha Touch একটি জনপ্রিয় JavaScript ফ্রেমওয়ার্ক যা মোবাইল অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। এটি বিশেষভাবে মোবাইল ডিভাইসের জন্য উপযোগী এবং টাচ ইনপুট সমর্থন করে এমন ইউজার ইন্টারফেস (UI) তৈরি করতে ডিজাইন করা হয়েছে। Sencha Touch-এর মাধ্যমে ডেভেলপাররা সুন্দর, প্রতিক্রিয়া যুক্ত এবং উন্নত ফিচারের মোবাইল ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন।

Sencha Touch মূলত এক্সটেন্ডেড Ext JS ফ্রেমওয়ার্কের উপর ভিত্তি করে তৈরি হয়েছে, তবে এটি শুধুমাত্র মোবাইল ডিভাইসের জন্য অপটিমাইজড এবং হালকা হতে ডিজাইন করা হয়েছে।

Sencha Touch ইনস্টলেশন এবং সেটআপ

Sencha Touch ব্যবহার করতে, প্রথমে এটি আপনার প্রোজেক্টে ইনস্টল এবং কনফিগার করতে হবে। এই ইনস্টলেশনটি NPM, Sencha Cmd, এবং Sencha Touch SDK ব্যবহার করে করা যায়।

১. Sencha Cmd ইনস্টলেশন

Sencha Touch প্রকল্প তৈরি করার জন্য Sencha Cmd একটি গুরুত্বপূর্ণ টুল। এটি আপনার প্রোজেক্ট ম্যানেজমেন্ট, অ্যাপ্লিকেশন নির্মাণ এবং কম্পাইল করার জন্য ব্যবহৃত হয়।

1. Sencha Cmd ইনস্টল করুন:
   • প্রথমে Sencha Cmd ডাউনলোড করতে হবে। অফিসিয়াল সাইট থেকে এটি ডাউনলোড করুন: Sencha Cmd Download
   • Windows/Mac/Linux-এর জন্য কম্প্যাটিবল ইনস্টলার রয়েছে। ডাউনলোড করা ফাইল রান করুন এবং নির্দেশনা অনুসরণ করুন।

2. Sencha Cmd ইনস্টলেশন যাচাই: ইনস্টলেশনের পর, Terminal/Command Prompt এ গিয়ে নিচের কমান্ডটি চালিয়ে নিশ্চিত করুন যে Sencha Cmd সঠিকভাবে ইনস্টল হয়েছে:

   sencha -v
   

   এটি ইনস্টল করা Sencha Cmd এর ভার্সন প্রদর্শন করবে।

২. Sencha Touch SDK ইনস্টলেশন

Sencha Touch SDK আপনার প্রোজেক্টে ফ্রেমওয়ার্কের সমস্ত ফাইল এবং কোড সাপোর্ট ফিচার সরবরাহ করে। Sencha Cmd দিয়ে আপনি এই SDK ইনস্টল এবং কনফিগার করতে পারেন।

1. Sencha Touch SDK ডাউনলোড করুন:
   • Sencha Touch SDK ডাউনলোড করতে এখানে যান: Sencha Touch SDK Download
   • SDK প্যাকেজটি ডাউনলোড করার পর এটি একটি নির্দিষ্ট ডিরেক্টরিতে আনজিপ (extract) করুন।

৩. নতুন Sencha Touch প্রোজেক্ট তৈরি করা

Sencha Cmd ব্যবহার করে আপনি খুব সহজেই একটি নতুন Sencha Touch অ্যাপ্লিকেশন তৈরি করতে পারেন।

1. নতুন অ্যাপ তৈরি করুন:

   • একটি নতুন Sencha Touch প্রোজেক্ট তৈরি করতে নিচের কমান্ডটি চালান:

   sencha generate app MyApp /path/to/project
   

   এখানে, MyApp আপনার অ্যাপের নাম এবং /path/to/project আপনি যেখানে প্রোজেক্টটি তৈরি করতে চান সেই ডিরেক্টরি পথ।

2. প্রোজেক্ট ডিরেক্টরিতে যান:

   cd /path/to/project
   

3. আপনার অ্যাপ রান করুন:

   • এবার আপনি আপনার নতুন তৈরি অ্যাপটি ডেভেলপমেন্ট মোডে রান করতে পারেন:

   sencha app watch
   

   এটি আপনার প্রোজেক্টে কোনো পরিবর্তন হলে স্বয়ংক্রিয়ভাবে আপনার অ্যাপটি রিলোড করবে।

৪. Sencha Touch অ্যাপ ডেভেলপমেন্ট

এখন আপনার Sencha Touch অ্যাপ ডেভেলপমেন্ট শুরু করতে প্রস্তুত। Sencha Touch এ অ্যাপ তৈরি করার জন্য আপনাকে Ext.Application ব্যবহার করতে হবে এবং View, Controller, Model ইত্যাদি উপাদানগুলি ব্যবহার করতে হবে।

অ্যাপ তৈরি করার একটি সাধারণ কাঠামো:

Ext.application({
    name: 'MyApp',
    
    launch: function () {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            html: 'Hello, Sencha Touch!'
        });
    }
});

এটি একটি খুবই সাধারণ অ্যাপ যা একটি Panel উপাদান তৈরি করে এবং এতে Hello, Sencha Touch! টেক্সট দেখায়।

৫. অ্যাপ বিল্ড করা

একবার আপনি আপনার অ্যাপ তৈরি করে ফেললে, আপনাকে এটি কম্পাইল ও বিল্ড করতে হবে যাতে এটি মোবাইল ডিভাইসে রান করা যায়।

1. প্রোজেক্ট বিল্ড করুন:

   sencha app build
   

2. অ্যাপ বিল্ডের ফাইলগুলি ডিস্ট্রিবিউশনের জন্য প্রস্তুত হবে: এটি build/ ফোল্ডারে সমস্ত প্রডাকশন ফাইল তৈরি করবে, যা আপনি মোবাইল বা ওয়েব সার্ভারে আপলোড করতে পারেন।

সারাংশ

Sencha Touch একটি শক্তিশালী ফ্রেমওয়ার্ক যা মোবাইল অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহৃত হয়। Sencha Cmd এবং Sencha Touch SDK ইনস্টল করে আপনি খুব সহজেই আপনার প্রোজেক্ট তৈরি করতে পারেন এবং সেই প্রোজেক্টটিকে মোবাইল ডিভাইসের জন্য প্রস্তুত করতে পারেন। ইনস্টলেশন এবং সেটআপ প্রক্রিয়া খুবই সহজ এবং এটি আপনাকে দ্রুত মোবাইল ফ্রেন্ডলি অ্যাপ তৈরি করতে সাহায্য করে।

Sencha Touch কি?

Sencha Touch হল একটি JavaScript ফ্রেমওয়ার্ক যা মোবাইল ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহৃত হয়। এটি HTML5 এবং CSS3 এর উপর ভিত্তি করে তৈরি, এবং স্পর্শ-ভিত্তিক মোবাইল ডিভাইসের জন্য ডিজাইন করা। Sencha Touch মোবাইলের বিভিন্ন প্ল্যাটফর্ম যেমন iOS, Android, এবং অন্যান্য HTML5 সমর্থিত ব্রাউজারে কাজ করে। এটি ডেভেলপারদের মোবাইল-ফ্রেন্ডলি অ্যাপ্লিকেশন তৈরি করতে সক্ষম করে।

Sencha Touch ইনস্টলেশন এবং SDK সেটআপ

Sencha Touch অ্যাপ্লিকেশন ডেভেলপ করতে হলে, প্রথমে আপনাকে Sencha SDK ইনস্টল করতে হবে। এর মাধ্যমে আপনি Sencha Touch এর সমস্ত টুলস এবং ফিচার ব্যবহার করতে পারবেন। এখানে আমরা Sencha SDK ডাউনলোড এবং সেটআপ করার প্রক্রিয়া দেখব।

১. Sencha SDK ডাউনলোড এবং ইনস্টলেশন

Sencha SDK ডাউনলোড করা:

1. Sencha এর অফিসিয়াল ওয়েবসাইটে যান:
   • Sencha Official Site
2. Sencha Cmd ডাউনলোড করুন:
   • Sencha Touch অ্যাপ্লিকেশন ডেভেলপ করার জন্য আপনাকে Sencha Cmd ইনস্টল করতে হবে। এটি Sencha Touch SDK এবং অন্যান্য টুলসের জন্য একটি কমান্ড লাইন টুল।
   • Sencha Cmd ডাউনলোড লিঙ্ক: Sencha Cmd Download

Sencha Cmd ইনস্টল করা:

1. Windows:
   • Sencha Cmd উইন্ডোজের জন্য .exe ইনস্টলেশন ফাইল প্রদান করে। এটি ডাউনলোড করে রান করুন এবং ইনস্টলেশনের নির্দেশাবলী অনুসরণ করুন।
2. Mac/Linux:
   • Mac এবং Linux এর জন্য .tar.gz ফাইল ডাউনলোড করতে হয়। এটি ডাউনলোড করে একটি নির্দিষ্ট ফোল্ডারে আনজিপ করুন এবং এরপর bin/sencha স্ক্রিপ্ট চালাতে হবে।

Sencha Cmd ইনস্টলেশন যাচাই:

1. ইনস্টলেশন সফলভাবে সম্পন্ন হলে, কমান্ড প্রম্পট বা টার্মিনালে নিচের কমান্ডটি ব্যবহার করে ইনস্টলেশন যাচাই করতে পারেন:

   sencha -version
   

2. এটি Sencha Cmd-এর ইনস্টলেশনের ভার্সন প্রদর্শন করবে, যা নিশ্চিত করবে যে ইনস্টলেশন সঠিকভাবে সম্পন্ন হয়েছে।

২. Sencha Touch অ্যাপ্লিকেশন তৈরি করা

Sencha Cmd ইনস্টল হয়ে গেলে, আপনি একটি নতুন Sencha Touch অ্যাপ্লিকেশন তৈরি করতে পারেন। এটি নতুন প্রোজেক্ট তৈরি করতে সাহায্য করে এবং আপনাকে সমস্ত প্রয়োজনীয় ফাইল এবং স্ট্রাকচার প্রদান করে।

নতুন অ্যাপ্লিকেশন তৈরি করা:

1. Sencha Cmd ব্যবহার করে অ্যাপ্লিকেশন তৈরি করা:

   sencha generate app MyApp /path/to/app
   

   • এখানে, MyApp আপনার অ্যাপ্লিকেশনের নাম এবং /path/to/app এর জায়গায় আপনার অ্যাপের ডিরেক্টরি পাথ থাকবে।

2. উদাহরণ:

   sencha generate app MyFirstApp ~/Projects/MyFirstApp
   

   এটি ~/Projects/MyFirstApp ডিরেক্টরিতে MyFirstApp নামে একটি নতুন Sencha Touch অ্যাপ্লিকেশন তৈরি করবে।

অ্যাপ্লিকেশন চালানো:

1. Dev Server চালানো:

   • অ্যাপ্লিকেশন তৈরি হওয়ার পর, Dev Server চালাতে হবে যাতে আপনি আপনার অ্যাপ্লিকেশনটি ব্রাউজারে দেখতে পারেন।

   cd ~/Projects/MyFirstApp
   sencha app watch
   

   • এটি আপনার অ্যাপ্লিকেশন ফোল্ডারটি মনিটর করবে এবং কোডের যেকোনো পরিবর্তনের পর তা স্বয়ংক্রিয়ভাবে ব্রাউজারে রিফ্রেশ করবে।

৩. Sencha Touch এর অন্যান্য সেটআপ এবং কনফিগারেশন

Sencha Touch অ্যাপ্লিকেশন তৈরি এবং চালানোর পর, আপনাকে কিছু অতিরিক্ত কনফিগারেশন করতে হতে পারে। এই কনফিগারেশনগুলো নিশ্চিত করবে যে অ্যাপ্লিকেশনটি সঠিকভাবে চলবে এবং পছন্দসই পারফরম্যান্স পাবে।

App.json কনফিগারেশন:

Sencha Touch অ্যাপ্লিকেশনের কনফিগারেশন ফাইল হলো app.json। এটি অ্যাপ্লিকেশনের জন্য গুরুত্বপূর্ণ সেটিংস, টেমপ্লেট এবং কনফিগারেশন ধারণ করে। এটি সরাসরি অ্যাপ্লিকেশনের রুট ফোল্ডারে অবস্থিত।

উদাহরণ:

{
  "name": "MyFirstApp",
  "appFolder": "app",
  "touch": {
    "theme": "Neptune",
    "icon": "resources/icons/icon.png",
    "launchPage": "index.html"
  }
}

এখানে, name আপনার অ্যাপ্লিকেশনের নাম, theme টাচ থিম এবং icon অ্যাপ্লিকেশনের আইকন সেট করতে ব্যবহৃত হয়।

Build এবং Deployment:

Sencha Touch অ্যাপ্লিকেশন ডেভেলপমেন্টের পর আপনাকে অ্যাপ্লিকেশনটি বিল্ড এবং ডিপ্লয় করতে হতে পারে। Sencha Cmd এর মাধ্যমে আপনি অ্যাপ্লিকেশনটি বিল্ড এবং মোবাইল ডিভাইসে বা সার্ভারে ডিপ্লয় করতে পারবেন।

Build কমান্ড:

sencha app build

এটি আপনার অ্যাপ্লিকেশনটি বিল্ড করে build/ ডিরেক্টরিতে রাখবে।

সারাংশ

Sencha Touch ইনস্টলেশন এবং সেটআপ প্রক্রিয়া খুবই সহজ এবং কার্যকরী। Sencha Cmd ব্যবহার করে আপনি একটি নতুন Sencha Touch অ্যাপ্লিকেশন তৈরি করতে পারেন, সেটি চালাতে পারেন এবং মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য প্রয়োজনীয় সমস্ত ফিচার ব্যবহার করতে পারেন। Dev server চালিয়ে আপনি অ্যাপ্লিকেশনটি অনলাইনে পরীক্ষা করতে পারবেন এবং app.json ফাইল দিয়ে কনফিগারেশন সম্পাদনা করতে পারবেন।

Sencha Cmd কি?

Sencha Cmd হল একটি কমান্ড লাইন টুল যা Sencha Touch বা Ext JS অ্যাপ্লিকেশন ডেভেলপমেন্টে সহায়তা করে। এটি ডেভেলপারদের জন্য অ্যাপ্লিকেশন তৈরি, টেস্টিং, ডিপ্লয়মেন্ট এবং অন্যান্য বিল্ড সম্পর্কিত কাজগুলো সহজ করে তোলে। Sencha Cmd এর মাধ্যমে আপনি অ্যাপ্লিকেশন দ্রুত এবং সহজে তৈরি করতে পারেন এবং তার সাথে কনফিগারেশন, স্কেলিং এবং কোড অপটিমাইজেশনের কাজগুলোও করতে পারেন।

Sencha Cmd আপনাকে project scaffolding, dependency management, minification, testing, builds ইত্যাদি কাজ করতে সাহায্য করে। এটি Sencha Touch অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য অত্যন্ত গুরুত্বপূর্ণ একটি টুল।

Sencha Cmd ইনস্টলেশন

Sencha Cmd ব্যবহার করতে প্রথমে আপনাকে এটি ইনস্টল করতে হবে। Sencha Cmd ইনস্টল করা খুবই সহজ এবং এটি Windows, Mac, এবং Linux প্ল্যাটফর্মে সমর্থিত।

Sencha Cmd ইনস্টল করার প্রক্রিয়া:

1. Sencha Cmd ডাউনলোড করুন:
   • Sencha Cmd Download Page
   • এখানে গিয়ে আপনার প্ল্যাটফর্মের জন্য ইনস্টলেশন ফাইল ডাউনলোড করুন।
2. ইনস্টলেশন:
   • ডাউনলোড করা ফাইলটি রান করুন এবং নির্দেশনা অনুসরণ করুন।
3. ইনস্টলেশন যাচাই:

   • ইনস্টলেশন সফলভাবে সম্পন্ন হলে, টার্মিনাল বা কমান্ড প্রম্পটে নিচের কমান্ডটি টাইপ করে Sencha Cmd ইনস্টলেশন যাচাই করুন:

     sencha -version
     

   • এটি Sencha Cmd এর ভার্সন দেখাবে, যা নিশ্চিত করবে যে ইনস্টলেশন সঠিকভাবে হয়েছে।

Sencha Cmd দিয়ে প্রজেক্ট তৈরি করা

Sencha Cmd এর মাধ্যমে Sencha Touch অ্যাপ্লিকেশন প্রজেক্ট তৈরি করা খুব সহজ। sencha কমান্ড ব্যবহার করে নতুন প্রজেক্ট স্ক্যাফোল্ড করা যায় এবং এর মাধ্যমে প্রয়োজনীয় ফাইল ও ডিরেক্টরি স্ট্রাকচার তৈরি করা হয়।

প্রজেক্ট তৈরি করার পদক্ষেপ:

1. নতুন প্রজেক্ট তৈরি:
   • প্রজেক্ট তৈরি করার জন্য sencha generate কমান্ড ব্যবহার করুন।

   • উদাহরণ:

     sencha generate app MyApp /path/to/myapp
     

     এখানে, MyApp হল আপনার অ্যাপ্লিকেশনের নাম এবং /path/to/myapp হল আপনার প্রজেক্টের লোকেশন।

2. প্রজেক্ট স্ট্রাকচার:

   • একটি নতুন Sencha Touch অ্যাপ্লিকেশন তৈরি হলে, এটি একটি ডিরেক্টরি স্ট্রাকচার তৈরি করবে যা নিম্নরূপ হবে:

     /MyApp
       /app
       /resources
       /sass
       /workspace
       index.html
       app.js
       ...
     

3. বিল্ড কমান্ড ব্যবহার করা:

   • আপনার অ্যাপ্লিকেশন তৈরি হওয়ার পর, এটি বিল্ড করতে হবে। Sencha Cmd বিল্ড করার জন্য sencha app build কমান্ড ব্যবহার করা হয়:

     sencha app build
     

   • এটি আপনার অ্যাপ্লিকেশনকে প্রোডাকশন ফরম্যাটে কম্পাইল করবে এবং .sencha ফোল্ডারে সংরক্ষণ করবে।
4. এপ্লিকেশন চালানো:

   • অ্যাপ্লিকেশন চালানোর জন্য sencha app watch কমান্ড ব্যবহার করুন:

     sencha app watch
     

   • এটি একটি লোকাল সার্ভার চালু করবে এবং আপনি আপনার ব্রাউজারে অ্যাপ্লিকেশনটি দেখতে পারবেন।

Sencha Cmd এর অন্যান্য কার্যকারিতা

1. প্রজেক্টের কনফিগারেশন ফাইল তৈরি:
   • Sencha Cmd ব্যবহার করে আপনি আপনার প্রজেক্টের জন্য কাস্টম কনফিগারেশন ফাইল তৈরি করতে পারেন যা অ্যাপ্লিকেশনের সেটিংস এবং প্লাগইন কনফিগারেশন অন্তর্ভুক্ত করবে।
2. বিল্ড অপটিমাইজেশন:
   • Sencha Cmd কোড মিনিফিকেশন, কোড স্প্লিটিং, CSS এবং JS ফাইলের অপটিমাইজেশনসহ বিভিন্ন বিল্ড অপটিমাইজেশন কার্যকলাপ সমর্থন করে।
3. কাস্টম টুলস এবং স্ক্রিপ্ট:
   • আপনি আপনার প্রজেক্টে কাস্টম টুলস এবং স্ক্রিপ্ট ব্যবহার করতে পারেন যা অ্যাপ্লিকেশনটির কার্যকারিতা বাড়াবে।
4. বিভিন্ন বিল্ড টার্গেট:
   • আপনি বিভিন্ন বিল্ড টার্গেট যেমন development, testing, এবং production এর জন্য আলাদা আলাদা বিল্ড তৈরি করতে পারেন।
5. স্কেনার এবং ডিবাগিং টুলস:
   • Sencha Cmd স্কেনার এবং ডিবাগিং টুলস সরবরাহ করে, যা ডেভেলপারদের জন্য প্রজেক্টে সমস্যা শনাক্ত করা সহজ করে তোলে।

সারাংশ

Sencha Cmd হল একটি অত্যন্ত শক্তিশালী টুল যা Sencha Touch বা Ext JS অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহৃত হয়। এটি প্রজেক্ট তৈরি, কনফিগারেশন, বিল্ড অপটিমাইজেশন এবং ডিপ্লয়মেন্টের জন্য সহায়ক। Sencha Cmd দিয়ে আপনি দ্রুত অ্যাপ্লিকেশন তৈরি করতে পারবেন এবং প্রোডাকশন ফরম্যাটে অ্যাপ্লিকেশন কম্পাইল করতে পারবেন। এটি ডেভেলপারদের জন্য একাধিক বিল্ড টার্গেট এবং স্ক্রিপ্টিং সুবিধা সরবরাহ করে যা ডেভেলপমেন্ট প্রক্রিয়াকে আরও উন্নত করে তোলে।

Sencha Touch কি?

Sencha Touch একটি JavaScript ফ্রেমওয়ার্ক যা মোবাইল ডিভাইসের জন্য স্পর্শ ভিত্তিক অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। এটি HTML5 এবং CSS3 ব্যবহার করে উন্নত ইন্টারফেস তৈরি করতে সহায়তা করে এবং মোবাইল ডিভাইসে পারফরম্যান্স অপটিমাইজেশন নিশ্চিত করে। Sencha Touch বিশেষভাবে Smartphones এবং Tablets এর জন্য ব্যবহৃত হয়, এবং এটি অত্যন্ত শক্তিশালী UI কম্পোনেন্ট সরবরাহ করে যা মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্টকে সহজ করে তোলে।

Sencha Touch-এ একটি নির্দিষ্ট ফোল্ডার স্ট্রাকচার রয়েছে, যা ডেভেলপারদের অ্যাপ্লিকেশন তৈরি করার সময় সিস্টেমেটিক এবং সংগঠিত কোড লেখার সুবিধা প্রদান করে।

Sencha Touch ফোল্ডার স্ট্রাকচার

Sencha Touch অ্যাপ্লিকেশন তৈরির সময় একটি নির্দিষ্ট ফোল্ডার স্ট্রাকচার অনুসরণ করা হয়। নিচে একটি সাধারণ Sencha Touch অ্যাপ্লিকেশনের ফোল্ডার স্ট্রাকচার দেওয়া হলো:

/my-app
├── app/                     # অ্যাপ্লিকেশনের মূল সোর্স কোড
│   ├── model/               # মডেল ফোল্ডার
│   ├── store/               # স্টোর ফোল্ডার
│   ├── view/                # ভিউ ফোল্ডার
│   ├── controller/          # কন্ট্রোলার ফোল্ডার
│   ├── component/           # কাস্টম কম্পোনেন্ট
│   └── main.js              # অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট (প্রধান স্ক্রিপ্ট)
├── resources/               # রিসোর্স ফোল্ডার (ইমেজ, আইকন, স্টাইলশিট)
│   ├── css/                 # স্টাইলশিট ফোল্ডার
│   ├── fonts/               # ফন্ট ফোল্ডার
│   └── images/              # ইমেজ ফোল্ডার
├── build/                   # বিল্ড ফোল্ডার (অ্যাপ্লিকেশন কম্পাইলড ফাইল)
├── sdk/                     # Sencha SDK ফোল্ডার
└── index.html               # অ্যাপ্লিকেশনের HTML ফাইল (এন্ট্রি পয়েন্ট)

এই ফোল্ডার স্ট্রাকচারটি আপনার অ্যাপ্লিকেশনকে সংগঠিত এবং রক্ষণাবেক্ষণযোগ্য রাখে, যাতে কোড সহজেই মডিফাই করা যায় এবং নতুন ফিচার অ্যাড করা সহজ হয়।

Sencha Touch এর মূল ফাইল সমূহ

এখন, Sencha Touch এর কিছু গুরুত্বপূর্ণ ফাইল সম্পর্কে বিস্তারিত আলোচনা করা যাক যা অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহৃত হয়।

১. index.html - অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট

এই ফাইলটি অ্যাপ্লিকেশনের শুরু। এটি ব্রাউজারের জন্য অ্যাপ্লিকেশন লোড করার মূল পয়েন্ট। এখানে, আপনি Sencha Touch এবং অ্যাপ্লিকেশনের স্ক্রিপ্ট ফাইলগুলিকে রেফারেন্স করেন।

উদাহরণ:

<!DOCTYPE html>
<html>
<head>
    <title>My Sencha Touch App</title>
    <link rel="stylesheet" type="text/css" href="resources/css/app.css">
    <script type="text/javascript" src="sdk/sencha-touch.js"></script>
    <script type="text/javascript" src="app/main.js"></script>
</head>
<body>
    <div id="viewport"></div>
</body>
</html>

২. main.js - অ্যাপ্লিকেশনের প্রধান স্ক্রিপ্ট

এটি অ্যাপ্লিকেশনের মূল স্ক্রিপ্ট যা Sencha Touch ফ্রেমওয়ার্ককে ইনিশিয়ালাইজ করে এবং অ্যাপ্লিকেশনের প্রাথমিক কনফিগারেশন সেটআপ করে। এখানে অ্যাপ্লিকেশন শুরু করার জন্য প্রয়োজনীয় কোড থাকে।

উদাহরণ:

Ext.application({
    name: 'MyApp',
    launch: function () {
        Ext.Viewport.add({
            xtype: 'panel',
            html: 'Hello, Sencha Touch!'
        });
    }
});

৩. app/model/ - মডেল ফোল্ডার

এখানে অ্যাপ্লিকেশনের ডেটা মডেল থাকে। প্রতিটি মডেল ডেটাবেস টেবিল বা অন্য কোন ডেটা স্টোরেজের সাথে সম্পর্কিত থাকে এবং ডেটা স্ট্রাকচার সংজ্ঞায়িত করে।

উদাহরণ:

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

৪. app/store/ - স্টোর ফোল্ডার

Store ডেটা ধরে রাখার জন্য ব্যবহৃত হয়। এটি ডেটা ফেচ এবং ক্যাশিংয়ের দায়িত্ব পালন করে। এখানে আপনি ডেটাবেস বা API থেকে ডেটা ফেচ করতে পারেন।

উদাহরণ:

Ext.define('MyApp.store.Users', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User',
    data: [
        { name: 'John', email: 'john@example.com' },
        { name: 'Jane', email: 'jane@example.com' }
    ]
});

৫. app/view/ - ভিউ ফোল্ডার

এখানে আপনি অ্যাপ্লিকেশনের ইউআই উপাদান তৈরি করেন। Ext.Component, Ext.Panel, Ext.List ইত্যাদি বিভিন্ন UI কম্পোনেন্ট তৈরি করার জন্য ব্যবহৃত হয়।

উদাহরণ:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Panel',
    config: {
        html: 'Welcome to my Sencha Touch app!'
    }
});

৬. app/controller/ - কন্ট্রোলার ফোল্ডার

এই ফোল্ডারে আপনার UI এবং Model এর মধ্যে লজিকাল কন্ট্রোলার থাকে। এটি ইউজারের ইন্টারঅ্যাকশন এবং ডেটা ম্যানিপুলেশন পরিচালনা করে।

উদাহরণ:

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',
    config: {
        control: {
            'button': {
                tap: 'onButtonTap'
            }
        }
    },

    onButtonTap: function() {
        Ext.Msg.alert('Button tapped!');
    }
});

৭. resources/css/ - সিএসএস ফোল্ডার

এখানে অ্যাপ্লিকেশনের স্টাইলশিট থাকে। Sencha Touch CSS ফাইলগুলি অ্যাপ্লিকেশনের থিমিং এবং লেআউট ডিজাইন করে।

উদাহরণ:

body {
    font-family: Arial, sans-serif;
    margin: 0;
}

সারাংশ

Sencha Touch একটি শক্তিশালী JavaScript ফ্রেমওয়ার্ক যা মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্টকে সহজ করে তোলে। এটি মোবাইল ডিভাইসে উন্নত ইউআই উপাদান এবং পারফরম্যান্সের জন্য ডিজাইন করা হয়েছে। Sencha Touch-এর ফোল্ডার স্ট্রাকচার অ্যাপ্লিকেশনকে সংগঠিত এবং মডুলার রাখতে সাহায্য করে, যাতে কোড সহজে রক্ষণাবেক্ষণ এবং প্রসারিত করা যায়। index.html, main.js, model, store, view, controller এবং css ফোল্ডারগুলি Sencha Touch অ্যাপ্লিকেশন তৈরির মৌলিক অংশ হিসেবে কাজ করে।

Sencha Touch এর পরিচিতি

Sencha Touch একটি HTML5 ভিত্তিক ফ্রেমওয়ার্ক যা মোবাইল ও ট্যাবলেট ডিভাইসের জন্য শক্তিশালী, রেসপনসিভ ও ইউজার ফ্রেন্ডলি ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। এটি জাভাস্ক্রিপ্ট, CSS3, এবং HTML5 এর সাহায্যে অত্যন্ত দ্রুত মোবাইল অ্যাপ্লিকেশন তৈরি করার সুযোগ দেয়। Sencha Touch একটি ক্রস-প্ল্যাটফর্ম ফ্রেমওয়ার্ক, যার মাধ্যমে আপনি একটি অ্যাপ্লিকেশন তৈরি করতে পারেন যা একাধিক মোবাইল অপারেটিং সিস্টেমে (যেমন iOS, Android) চলতে পারে।

Sencha Touch-এর সাথে মোবাইল অ্যাপ্লিকেশন তৈরি করা হয় একধরনের MVC (Model-View-Controller) আর্কিটেকচার ব্যবহার করে, যেখানে ডেটা মডেল, ইউজার ইন্টারফেস (View), এবং লজিকাল কন্ট্রোলার আলাদা আলাদা থাকে। এই ফ্রেমওয়ার্কটি প্রোফেশনাল ও স্মার্ট মোবাইল অ্যাপ্লিকেশন তৈরি করার জন্য অনেক ধরনের বিল্ট-ইন টুলস এবং লাইব্রেরি প্রদান করে।

প্রথম Sencha Touch অ্যাপ্লিকেশন তৈরি করা

এখানে একটি সাধারণ Sencha Touch অ্যাপ্লিকেশন তৈরি করার প্রক্রিয়া বর্ণনা করা হলো:

প্রাথমিক প্রস্তুতি:

1. Sencha Touch ইনস্টল করা:
   • প্রথমে, Sencha Cmd টুল ইনস্টল করতে হবে, যা Sencha Touch অ্যাপ্লিকেশন তৈরি এবং ম্যানেজ করতে সাহায্য করবে।

   • Sencha Cmd ইনস্টলেশন:

     npm install -g sencha
     

2. নতুন অ্যাপ্লিকেশন তৈরি করা:

   • নতুন অ্যাপ্লিকেশন তৈরি করতে, আপনি Sencha Cmd ব্যবহার করতে পারেন। একটি নতুন Sencha Touch অ্যাপ্লিকেশন তৈরি করতে নিচের কমান্ড ব্যবহার করুন:

     sencha generate app MyFirstApp ./MyFirstApp
     

   • এখানে, MyFirstApp হলো অ্যাপ্লিকেশন নাম এবং এটি একটি নতুন ডিরেক্টরি তৈরি করবে যেখানে অ্যাপ্লিকেশন ফাইল থাকবে।

অ্যাপ্লিকেশন ফোল্ডার স্ট্রাকচার:

এখন, আপনি MyFirstApp ডিরেক্টরিতে যাবেন। ফোল্ডার স্ট্রাকচারটি কিছুটা এরকম হবে:

MyFirstApp/
│
├── app/
│   ├── controller/
│   ├── model/
│   ├── view/
│   └── Main.js
├── resources/
│   ├── css/
│   ├── images/
│   └── js/
└── index.html

এখানে:

• app/: অ্যাপ্লিকেশনের কোড, কন্ট্রোলার, মডেল এবং ভিউ ফাইল থাকবে।
• resources/: CSS, JavaScript, ইমেজ এবং অন্যান্য রিসোর্স থাকবে।
• index.html: অ্যাপ্লিকেশন এর মূল HTML ফাইল।

অ্যাপ্লিকেশন কনফিগারেশন:

অ্যাপ্লিকেশন কনফিগার করার জন্য, app.js বা Main.js ফাইলের মধ্যে অ্যাপ্লিকেশন কনফিগারেশন এবং অন্যান্য সেটিংস দেওয়া থাকে। এখানে আমরা একটি সাধারণ Main.js ফাইলের কনফিগারেশন উদাহরণ দেব:

Ext.application({
    name: 'MyFirstApp',
    launch: function() {
        Ext.Viewport.add({
            xtype: 'panel',
            html: 'Hello, Sencha Touch!'
        });
    }
});

এখানে:

• Ext.application: অ্যাপ্লিকেশন শুরু করার জন্য ব্যবহার করা হয়।
• launch: অ্যাপ্লিকেশন লোড হওয়ার পর এই ফাংশনটি কল হবে।
• Ext.Viewport.add: এই কমান্ড দিয়ে অ্যাপ্লিকেশনটির UI উপাদান যোগ করা হয়। এখানে একটি সাধারণ panel যোগ করা হয়েছে যার মধ্যে একটি html কন্টেন্ট রয়েছে।

স্টাইল এবং ইউআই কাস্টমাইজেশন:

Sencha Touch-এর জন্য বিভিন্ন প্রি-ডিফাইন্ড থিম এবং স্টাইল রয়েছে, কিন্তু আপনি নিজে কাস্টম স্টাইলও অ্যাপ্লিকেশনে যোগ করতে পারেন। উদাহরণস্বরূপ, resources/css ফোল্ডারে CSS ফাইল তৈরি করে, অ্যাপ্লিকেশনের UI কাস্টমাইজ করা যাবে।

অ্যাপ্লিকেশন রানে পরীক্ষা করা:

অ্যাপ্লিকেশনটি রানে পরীক্ষার জন্য নিচের কমান্ডটি ব্যবহার করুন:

sencha web start

এটি একটি লোকাল সার্ভার শুরু করবে এবং আপনি localhost এ গিয়ে অ্যাপ্লিকেশন দেখতে পারবেন।

ফাইনাল আউটপুট:

এখন আপনি ব্রাউজারে গিয়ে localhost:1841 এ গিয়ে Sencha Touch অ্যাপ্লিকেশন দেখতে পারবেন, যা "Hello, Sencha Touch!" মেসেজটি শো করবে।

সারাংশ

Sencha Touch একটি শক্তিশালী HTML5 ফ্রেমওয়ার্ক যা মোবাইল ডিভাইসের জন্য সমৃদ্ধ এবং রেসপন্সিভ অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। Sencha Touch ব্যবহার করে প্রথম অ্যাপ্লিকেশন তৈরি করতে, আপনি Sencha Cmd টুল ইনস্টল করবেন, একটি নতুন অ্যাপ্লিকেশন জেনারেট করবেন, এবং অ্যাপ্লিকেশনের মধ্যে প্রয়োজনীয় কনফিগারেশন ও ইউআই উপাদান যুক্ত করবেন। এর মাধ্যমে আপনি দ্রুত মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্ট প্রক্রিয়া শুরু করতে পারেন এবং শক্তিশালী মোবাইল ফিচার সহ অ্যাপ্লিকেশন তৈরি করতে পারেন।