কিভাবে করবেন ফায়ারফক্স ও এস এপ্লিকেশন ডেভেলপমেন্ট ?
Firefox OS is discontinued in most of the platforms. This article is not that useful anymore.
ফায়ারফক্স ও এস নিয়ে আমাদের আগ্রহের শেষ নাই। সবাই চাইছে কিছু না কিছু তৈরী করতে, তাই একটা টিউটোরিয়াল লিখছি, ভুল ত্রুটি মাফ করবেন।
লিনাক্স ও উইন্ডোজ(7,8) অপারেটিং সিস্টেমে কাজ করে এই পদ্ধতি, আশাকরি ম্যকেও করবে
যা যা লাগবে:
- git (git-scm.com)
- node.js (nodejs.org)
- একটা html/text ইডিটর (আমি আপটানা(aptana.org) অথবা নোটপ্যড প্লাস প্লাস(http://notepad-plus-plus.org/) প্রিফার করি)
- ইন্টারনেট কানেকশন (কিছুক্ষনের জন্য)
- HTML5, CSS3, JS সম্পর্কে ধারনা
প্রথমে গিট ইনস্টল করে নিন, তারপর নোড। এরপর উইন্ডোজের পাওয়ার শেল অন করেন, অথবা লিনাক্সে/ম্যকে টার্মিনাল অন করেন, আর এই কমান্ড টাইপ করেন(লিনাক্স অথবা ম্যকে রুট হিসেবে):
npm install -g volo
ভোলো নোড দিয়ে বানানো চমতকার একটা টুল, এটা আপনার এপ ডেভেলপমেন্ট অনেকগুনে সহজ করে দিবে।
এরপর একটা যায়গা ঠিক করেন, যেখানে আপনার ফাইলগুলা রাখবেন, আমি ডেস্কটপে রাখবো, তাই আমি এই কমান্ড লিখবো,
cd Desktop
এখন আমি ডেস্কটপে অবস্থান করছি, এবার ভোলোর কাজ শুরু, আমরা প্রথমে এপ্লিকেশনটার একটা টেম্প্লেট থেকে কাজ শুরু করবো, সেটা ডাউনলোড করতে আমরা লিখবো,
volo create আপনার_এপ্লিকেশনের_নাম mozilla/mortar-app-stub
যেমন আমার ক্ষেত্রে এটা হবে,
volo create helloworld mozilla/mortar-app-stub
ডেস্কটপে যান, দেখবেন একটা ফোল্ডার তৈরী হয়েছে আপনার প্রজেক্টের নামে। ফোল্ডারটায় প্রবেশ করুন node_modules,tools,www এমন অনেকগুলা ফাইল ও ফোল্ডার দেখতে পারবেন।
কনফিউজড লাগছে?
ভয় পাবার কিছু নাই, শুধু আমরা www ফোল্ডার নিয়ে কাজ করবো। www ফোল্ডারে যান, সেখানে index.html ফাইল দেখতে পাবেন। এছাড়া css, js,img ফোল্ডার দেখতে পাবেন,
এটা আপনার ইডিটর দিয়ে ওপেন করেন, পরিচিত লাগার কথা ভিতরের সবকিছু, <body> ট্যগ শেষ হবার আগে একটা <script> আছে ঐ ট্যগ এব্ং এর ভিতরের কন্টেন্ট ছাড়া <body></body> এর মধ্যকার সবকিছু ডিলিট করে দিয়ে নিজের মত করে html মার্কআপ লিখেন। যেহেতু খুব বেসিক একটা এপ বানাবো, তাই আমি লিখবো,
<p>Hello World</p>
এবার ফাইলটা সেভ করেন, আপনি চাইলে css ফোল্ডারে css ফাইল রাখতে পারেন, js ফোল্ডারে জাভাস্ক্রিপ্ট রাখতে পারেন আর img ফোল্ডারে ছবি :) ।
মনের মাধুরি মিশিয়ে www ফোল্ডারকে মোবাইল ওয়েবসাইট মনে করেন সমস্যা নাই।
এপ্লিকেশন টেস্ট করা:
এখন এপ্লিকেশন টেস্ট করার পালা, আপনার কাছে নিশ্চই আপডেটেড ফায়ারফক্স ব্রাউজার আছে। এটার জন্য একটা এড অন ডাউনলোড করতে হবে আপনার যার নাম [ফায়ারফক্স ও এস সিমুলেটর(https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/)
পাওয়ার শেল/টার্মিনাল টা কি বন্ধ করে ফেলেছেন? করলে আবার চালু করেন, আগের মত কমান্ড দিয়ে ডেস্কটপে যান, আর তারপর cd আপনার_এপ্লিকেশনের_নাম লিখেন, আমি লিখবো,
cd helloworld (যেহেতু আমাদের এপ্লিকেশনের নাম helloworld ছিল)
এখন লিখুন,
volo serve
পাওয়ার শেল, টার্মিনাল বন্ধ করবেন না, উইন্ডোজ হলে একটা উইন্ডো আসবে এখানে, allow access এ ক্লিক করেন।
আপনার ফায়ারফক্সের মেনু থেকে tools>web developer>firefox os simulator এখানে যান, এখানে একটা যায়গায় লেখা আছে, url for page or manifest.webapp
ঐখানে লিখেন,
localhost:8008
এবার বাম পাশে দেখেন stopped লেখা আছে, ঐখানে ক্লিক করেন, একটা ছোট উইন্ডোতে ফায়ারফক্স ও এস সিমুলেটর চালু হবে এবং আপনি অশ্চর্য হয়ে আবিস্কার করবেন, আপনার বানানো প্রথম ফায়ারফক্স ও এস এপ এটাতে চলছে!
আরো কাজ আছে, এবার আপনার www ফোল্ডারে manifest.webapp ফাইলটা খুলেন, নাম,ভার্শন,ভাষা, ডিসক্রিপশন বদলান, আরো কিছু ফিল্ড আছে দেখলেই বুঝবেন, সেগুলো বদলান, শুধু ফাইলটার স্ট্রাকচার ঠিক রাখবেন। ১৬,৪৮, এবং ১২৮ পিক্সেলের আইকন সরবরাহ করেন, ব্যস সব ঠিকঠাক মত হয়ে গেলে, শেলে/টার্মিনালে গিয়ে টাইপ করেন:
volo build
আপনার কোড পরিস্কার পরিচ্ছন্ন ও কম্প্রেস করে www-built নামে একটা ফোল্ডার তৈরী হবে। এবার শেষবারের মত এপ্লিকেশনটা টেস্ট করে নিন শেলে/টার্মিনালে লিখুন:
volo serve base=www-built
সিমুলেটর অন করে চেক করেন সব ঠিক আছে কিনা।
কাজ শেষ
আপনি অফলাইনে এপ্লিকেশন চালানোর অপশন রাখতে চাইলে টার্মিনালে লিখুন:
volo appcache
ব্যাস, শেষ, আপনি হোস্টেড এপ বানালে www-built ফোল্ডারটা সার্ভারে আপলোড করে দেন, আর মার্কেটপ্লেসে দিতে চাইলে, আপনার www-built ফোল্ডারের সব ফাইলগুলোকে জিপ করে সাবমিট করেন।
আরো বিস্তারিত জানতে পারবেন এখানে থেকে:
আর ওয়েবএপ দিয়ে কি কি করা যায় সেটা এখানে পাবেন:
https://developer.mozilla.org/en-US/docs/WebAPI
আর আমরা তো আছিই সাহায্য করার জন্য :)