ওয়েব ডেভলপিং জ্ঞান দিয়েই তৈরি করুন স্মার্টফোন এপলিকেশন – এন্ড্রোয়েড, আইফোন, উন্ডোজফোন ইত্যাদির জন্য

পোস্টটা অনেক আগে লিখছি। অর্ধেকের ও বেশি লিখে রাখছি 18 June, 2012 তারিখে। কিন্তু সম্পুর্ণ করব করব করে ও করা হয় নি। আজ অনেকটা জোর করেই শেষ করার চেষ্টা করছি। কিছু ভুল হলে আমি ক্ষমা পার্থী।  যারা স্মার্টফোন/মোবাইল এপলিকেশন ডেভলপমেন্ট শুরু করতে চান তাদেরকে প্রাথমিক ধারনা দেওয়ার জন্যই এ লেখা। সাথে রয়েছে পোস্ট বড় করার জন্য কিছু হাবিজাবি লেখা অনেক গুলো বানান ভুল, সব কিছুই ফ্রী।

কয়েকদিন আগে [ এখন হবে কয়েক মাস আগে] আমার মাথায় চিন্তা আসল কিভাবে আইফোনের জন্য এপপ্লিকেশন তৈরি করা যায়। এন্ড্রয়েডের জন্য কিভাবে তৈরি করে তা জানতাম। কিন্তু আইফোনের জন্য উইন্ডোজ থেকে কিভাবে তৈরি করব তা জানতাম না। iOS ডেভলপমেন্টের জন্য উইন্ডোজের জন্য কোন অফিশিয়াল SDK নেই। তাই আমার ধারনা ছিল আইওএস এর জন্য এপলিকেশন ডেভলপ করার জন্য একটা ম্যাক এবং অবজেক্টিভ সি ইত্যাদি জানা লাগে। কারন অফিশিয়াল ভাবে যে SDK/টুলস গুলো সাফোর্ট করে সে গুলো শুধু ম্যাকেই চলে। ম্যাক OS কিভাবে আমার পিসিতে ইন্সটল করা যায় তা সার্চ করে বের করার চেষ্টা করলাম। অনেক গুলো পদ্ধতিই রয়েছে। রয়েছে অনেক গুলো টুলস ও। যারা চেষ্টা করতে চান তাদের জন্য নিচের লিঙ্ক। তবে অপ্রাসঙ্গিকঃ

• iBoot + MultiBeast: Install Mac OS X on any Intel-based PC
• http://www.hackintosh.com/
• Install OS X on Your Hackintosh PC, No Hacking Required

আমার ধারনা ভুল ছিল iOS এর জন্য এপলিকেশন তৈরি করতে অবজেক্টিভ সি বা ম্যাক লাগে না। আর জানা লাগে না কঠিন কোন প্রোগ্রামিং ল্যাঙ্গুয়েজও। HTML, CSS আর JavaScript হলেই আপনি যে কোন স্মার্টফোনের জন্য এপলিকেশন ডেভলপ করতে পারবেন। এবং এটা অনেক সহজেই করতে পারবেন। আর একই কোড সব গুলো স্মার্টফোনেই সাফোর্ট করবে। বানাতে পারবেন 2D/3D গেমসও। আর এ গুলো এপস্টোরে বিক্রির জন্য রেখে দিতে পারবেন, সুন্দর এপলিকেশন বা গেমস হলে ভাগ্য খুলে যেতে পারে।   কি দারুন তাই না? মজার ব্যপার হচ্ছে HTML, CSS আর JavaScript দিয়ে এপলিকেশন তৈরি করার জন্য অনেক গুলো প্রযুক্তি রয়েছে। একটু সার্চ করলেই আপনি ক্লিয়ার হয়ে নিতে পারেন যদি আপনার আগ্রহ থাকে। আমার মূল আকর্ষন ছিল iOS, উইন্ডোজে iOS ডেভলপমেন্টের জন্য নিচের যে কোন একটা বেচে নিতে পারেন যদিও সব গুলো ক্রস প্লাটফরম।

• Flash iPhone Packager এর সাহায্যে iOS এর জন্য এপলিকেশন ডেভলপের জন্য ভালো একটা মাধ্যম।
• Airplay SDK – যারা C++ জানেন তাদের জন্য গ্রেট টুলস। এন্ড্রোয়েড এবং আইফোন দুইটার জন্যই। 2D/3D গেমস এবং এপলিকেশন তৈরি করতে পারবেন। শিখতে চাইলে এখানে ঢু মারতে পারেন।
•  Unity 3D – গেমস তৈরি করার ইঞ্জিন।  সব প্লাটফরমেই সাফোর্ট করবে। ওদের সাইটে চলে যান। টিউটোরিয়াল সহ সব ডিরেকশন পাবেন।
• Stonetrip S3D – গ্রাফিক্যাল এডিটর সহ 3D গেম ইঞ্জিন। Windows, MacOS, Linux, iPhone, iPad, Android, Palm WebOS  সহ সকল প্লাটফরমের জন্য  applications এবং গেমস তৈরি করার SDK.
•  Appcelerator Titanium  – ক্রস প্লাটফরম এপলিকেশন তৈরি করার জন্য একটি জনপ্রিয় SDK.
•  Dragonfire SDK – C এবং C++ দিয়ে iPhone Development এর জন্য SDK. এরকম আরো অনেক গুলো রয়েছে।

 এখানে ভিজিট করুন। আরো এমন আরো ১৩টি প্লাটফরমের সাথে পরিচিত হতে পারবেনঃ  

•   13 Tools for Building Your Own iPhone App

এখানে রয়েছে ৯টি জাভাস্কিপ্ট লাইব্রেরী সম্পর্কে। যে গুলো দিয়ে আপনি মোবাইল এপলিকেশন ডেভলপমেন্ট শুরু করতে পারবেন।

• 9 Mobile Framework to Kick Start Your Mobile Development Career

আমি আজ ফোনগ্যাফ এর সাথে পরিচয় করিয়ে দেব।

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

ফোনগ্যাপ জানা থাকলে ডেভলপারদের জন্য কাজের ভালো সুযোগ রয়েছে। কিছু না হোক, নিজের এপলিকেশন নিজেই বিক্রি করতে পারবেন 🙂 তাই চেষ্টা করলে ভালো কিছু বের হবার সম্ভাবনা রয়েছে। আরো মজার ব্যপার হচ্ছে একই এপলিকেশন আপনি পিসি, ম্যাক বা লিনাক্সেও চালাতে পারবেন। মনে হয় এবার একটু এক্সাইটেড, তাই না? ক্রস প্লাটফরম এপলিকেশন।

আপনি যদি একটু আধটু ওয়েব পেইজ তৈরি করতে পারেন [ আপাতত জাভাস্ক্রিট না জানলে ও চলবে] তাহলেই শুরু করতে পারেন।

ওয়েব ডেভলপিং জ্ঞান দিয়ে এন্ড্রোয়েডের জন্য কিভাবে একটি এপলিকেশন তৈরি করবেন আমি তা দেখাচ্ছি। কিন্তু আপনার পছন্দ যদি অন্য মোবাইল প্লাটফরম হয় তাহলে নিচের লিঙ্ক থেকে বেচে নিনঃ

• Blackberry এর জন্য কিভাবে তৈরি করবে দেখতে হলে এখানে দেখুন। 
• iOS এর জন্য কিভাবে তৈরি করবে দেখতে হলে এখানে দেখুন।
• Symbian এর জন্য কিভাবে তৈরি করবে দেখতে হলে এখানে দেখুন।
• WebOS এর জন্য কিভাবে তৈরি করবে দেখতে হলে এখানে দেখুন।
•  Windows Phone
•  Bada এর জন্য কিভাবে তৈরি করবে দেখতে হলে এখানে দেখুন।

আপনি আবার একই কোড সব গুলোতে রান করাতে পারবেন। কোন প্লাটফরমে রান করাবেন তার SDK টুলস ইমিউলেটর বা হাবিজাবি থাকতে হবে। আর সেরকম কষ্ট না করতে পারলেও সমস্যা নেই। আরো সহজ ভাবে phonegap build এর সাহায্যে একই কোড আপলোড করলে সব গুলো প্ল্যাটফরমে চালানোর মত প্যাকেজ আপনাকে তৈরি করে দিবে। নিচের ছবিটি দেখুনঃ

জিনিসটা আরো দারুন আমি হয়তো ঠিক মত বুঝাতে পারি নি। আপনি দয়াকরে লিঙ্কে গিয়ে দেখে নিন।

এন্ড্রোয়েডের জন্য এপ তৈরি করা দেখাবো বলছিলাম। শুরুতে আপনি হয়তো ভয় পেয়ে যেতে পারেন যে অনেক গুলো ধাপ পার  করতে হবে। তবে প্রথম বারই কষ্ট [ ঠিক মত করতে না পারলে দুই একবার ভুল ও হতে পারে] কিন্তু পরের বার দেখবেন অনেক সহজ যাকে বলে পানির মত সহজ [ আচ্ছা পানি কি সহজ? ]।

ফোনগ্যাপ নতুন ভার্সনটি কমান্ডলাইন বেইজড। এখান থেকে ফোনগ্যাপ/crodova ২.৯ ভার্সনটি ডাউনলোড করতে পারেন। এটা শুধু এন্ড্রয়েডের জন্য। এখানে crodova.jar ফাইলটি আর crodova.js ফাইলটি রয়েছে। এন্ড্রয়েড অ্যাপ ফোনগ্যাফ দিয়ে তৈরি করার জন্য এ দুটি ফাইলই লাগে। ডাউনলোড লিঙ্ক।   ফোনগ্যাফ এর নতুন ভার্সন নিয়ে শীগ্রয়ই একটি পোস্ট লেখার চেষ্টা করব।

 আপনার যদি Android ADT Bundle ডাউনলোড করা না থাকে, তাহলে ডাউনলোড করে নিন।

আপনি যদি সাধারন একটি এন্ড্রোয়েড প্রজেক্ট তৈরি করে তা রান করাতে পারেন তাহলে আপনি নিচের অংশ ট্রাই করার জন্য প্রস্তুত। এ অংশ অনেক সহজ। লেখা গুলো বুঝতে অসুবিধে হলে ফোনগ্যাফের সাইটে ইংরেজিতে দেখতে পারেন।

Eclipse এ একটি নতুন এন্ড্রোয়েড প্রজেক্ট খুলুন। প্রজেক্টের একটি নাম দিন। আমি দিলামঃ HelloPhoneGap

Application Name,  Project Name এবং Package Name দিন। কিছু না দিতে চাইলে ডিফল্ট ভেলু রাখুন।
graphic সিলেক্ট করে নেক্সটে ক্লিক করুন এবং Blank Activity তৈরি করে ফিনিস করুন।   ডিফল্ট ভেলু রাখলেই হবে আপাতত।

• Project Explorer দেখুন। Project   root Folder/Directory তে libs নামে Folder/Directory না থাকলে তৈরি করে নিন।
• Project root ফোল্ডারে assets নামে যদি ফোল্ডার না থাকে তাহলে assets  ফোল্ডার তৈরি করুন।  এবং  assets এর ভেতর  www নামে আরেকটি ফোল্ডার তৈরি করুন।
•  ফোনগ্যাপ ডাউনলোড না করলে এবার ডাউনলোড করে নিন। আনজিফ করার পর অনেক গুলো ফাইল পাবেন। এন্ড্রোয়েড ফোল্ডারে প্রবেশ করুন।
•  cordova-2.9.0.js ফাইলটি assets এর ভেতর থাকা www ফোল্ডারে কপি করে পেস্ট করুন করুন। বা টেনে এনে এখানে  www ফোল্ডারের উপর ছেড়ে দিলেও কপি করে নিতে পারেন।
• cordova-2.9.0.jar ফাইলটি libs ফোল্ডারে কপি করুন। 
• প্রজেক্টের root ফোল্ডারে res নামে আরেকটা ফোল্ডার পাবেন। xml ফোল্ডারটি res ফোল্ডারে কপি করুন। সব কিছু ঠিকঠাক মত করতে পারলে Project Explorar নিচের মত দেখাবেঃ

আমরা প্রায় কাজ করে ফেলছি।

• F5 কী চেপে Eclipse refresh করে নিন।
• এবার প্রজেক্টের root ফোল্ডারের ভেতরে থাকা src  ফোল্ডার থেকে main Java ফাইলটি এডিট করুন।
• import org.apache.cordova.*; যুক্ত করুন।
• class এর extend Activity কে  DroidGap এ রুপান্তরিত করুন।
• যেমন public class MainActivity extends Activity এর পরিবর্তে public class MainActivity extends DroidGap লিখুন।
• setContentView() এর জাগায় super.loadUrl(Config.getStartUrl()); লিখুন।

নিচের ছবিটি দেখুনঃ

• এবার  AndroidManifest.xml টেক্সট মুডে এডিট করুন। <uses-sdk…/> এবং <application…/> tags এর ভিতরে নিচের কোড গুলো যুক্ত করুনঃ

<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

বুঝতে অসুবিধে হলে নিচের ছবিটি দেখুনঃ 

এবার  assets/www এর ভেতর index.html  নামে নতুন একটি ফাইল তৈরি করুন। এখানে আপনার HTML কোড গুলো লিখুন, শুরু করার জন্যঃ

<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
</head>
<body>
<h1>Hello Phonegap</h1>
</body>
</html>

সব কাজ শেষ। এবার রান করার সময় হয়েছে।
Run As > Android Application ক্লিক করুন।
আপনার যদি ইমিউলেটর এড করা থাকে তাহলে আপনি এবার আপনার এপলিকেশন দেখতে পাবেন।

এখানে index.html ফাইলের ভেতর যা থাকবে তাই দেখাবে। সাধারনত একটা html ফাইল ব্রাউজারে দেখায়। কিন্তু এখন এটা একটা এপলিকেশনের মত দেখাচ্ছে। এবার আপনি এ HTML ফাইলে নতুন কিছু এড করুন। আরেকটি HTML ফাইল তৈরি করুন www ফোল্ডারের ভেতর। প্রথমটি থেকে দ্বিতীয়টিতে লিঙ্ক তৈরি করে দিন। দেখবেন একটা সাধারন এপলিকেশনের মত কাজ করে। আপনার যদি HTML5 সম্পর্কে ধারনা থাকে তাহলে সুন্দর সুন্দর কিছু গেমস বা এপলিকেশন তৈরি করতে পারবেন।

সুন্দর ইন্টারফেস এবং ইন্টারেক্টিভিটির জন্য JQUERY MOBILE  বা উপরে দেওয়া লিঙ্ক থেকে যে কোন জাভাস্কিপ্ট লাইব্রেরী ব্যবহার করতে পারেন। ফোনগ্যাফে শেখার কিছু নেই। যা দরকার তা হচ্ছে HTML/CSS and JavaScript. ফোনগ্যাপ এর কিছু API রয়েছে। সে গুলো সম্পর্কে একটু জানতে পারেন। তার জন্য ফোনগ্যাফের ওয়েব সাইটে অনেক ডকুমেন্টেশন পাবেন। আর গুগল তো আছেই। আপনি যদি ফ্রীল্যান্সার হয়ে থাকেন বা ভবিশ্যতে হতে ইচ্ছুক তাহলে এসব নিয়ে একটু ঘাটাঘাটি করতে পারেন। এখন সবাই ওয়েব ডিজাইনার[!], তাই কাজের মান অনেক কমে গেছে। কিন্তু এসব বিষয় নিয়ে মাথা ঘামায়না অনেকেই। এসবের মার্কেটপ্লেস এখনো ভালোই রয়েছে। আর কোন বড় প্রতিষ্ঠানের সাথে যোগ দিতে পারলে তো আর চিন্তা করতে হবে না।

পড়ার জন্য আপনাকে ধন্যবাদ।