CSE Lab-এর সিলেবাস শেষ হয়েছিলো আগের ক্লাসেই, একারণে স্যার শেষ ক্লাসে একটু অন্যরকম কিছু শেখাতে চাইছিলেন, যেকারণে MIT App Inventor-এর সাথে আবারও দেখা হলো। আবারও বলছি কারণ আমার অ্যাকাউন্টে প্রজেক্টের তালিকায় ২০১৪ সালের একটা প্রজেক্ট খুঁজে পেলাম, এবং তখন প্রজেক্ট তৈরি পর্যন্ত গেলেও আদতে এর ব্যবহারের কিছুই বুঝিনি এবং সময়ের আবর্তে এর কথাও একদমই মনে ছিলো না।
Android Studio-সহ এধরণের প্লাটফর্মগুলোর মত তত এডভান্সড এটি নয়, তবে যদি ওভাবে সিরিয়াস ডেভেলোপার হওয়ার চিন্তা কিংবা তত সময় নিয়ে শেখার ইচ্ছে না থাকে, তাহলে MIT App Inventor আসলে যথেষ্ট শক্তিশালী একটি প্লাটফর্ম। এটা ব্যবহার করা ও শেখা সহজ, তবে ভালো কিছু তৈরি করতে অবশ্যই আপনার কাছে সুন্দর আইডিয়া, প্রচেষ্টা ও ধৈর্য্য থাকতে হবে, এটা ঠিক কিছু সিলেকশন/চেকবক্স ধরে এগিয়ে গেলেই অ্যাপ তৈরি হয়ে যাবে, এরকম কোন প্লাটফর্ম নয়।
টাইটেলে যেমনটা লিখেছি, MIT App Inventor ব্যবহার করতে কোড লেখার দরকার হয় না। তবে এটা মানে কিন্তু এই না যে এখানে প্রোগ্রামিং বা কোডিংয়ের কোন ব্যাপার নেই। বরং এখানে ড্রাগ এন্ড ড্রপ করে প্রোগ্রামিংয়ের লজিকগুলো সেট করতে হয়, যেটা বোঝা বেশ সহজ, এমনকি ওভাবে মনেও হয় না এটা এক ধরণের প্রোগ্রামিং ভাষার মধ্যেই পড়ে।
একটা সময়ে Scratch আমার প্রিয় একটি সফটওয়্যার ছিলো, আরো অনেকের হয়ত এটা পরিচিত হয়ে থাকবে। Scratch ছোটদের কথা ভেবে বিশেষায়িত একটা প্রোগ্রামিং ভাষা, যেখানে ড্রাগ এন্ড ড্রপ করে ইন্টারএক্টিভ অ্যাপ, এনিমেশন প্রভৃতি তৈরি করা যায়। মজার ব্যাপার হলো Scratch-ও MIT-র একটি প্রকল্প এবং MIT App Inventor-এর ব্যাকএন্ড প্রোগ্রামিং অনেকটা Scratch-এর মতই কাজ করে, যদিও দুটোর ব্যবহার ক্ষেত্রে তফাৎ রয়েছে অবশ্যই।
MIT App Inventor কীভাবে ব্যবহার করতে হয় তার উদাহরণ হিসেবে একটি বেসিক ক্যালকুলেটর অ্যাপ আমরা তৈরি করতে পারি, যেটা দিয়ে দুটি সংখ্যার মধ্যে যোগ, বিয়োগ, গুণ বা ভাগ করা যাবে। অ্যাপ তৈরির জন্য Create Apps! থেকে Google অ্যাকাউন্টের মাধ্যমে লগইন করে এরপর Start New Project নির্বাচন করে নাম দিয়ে প্রজেক্ট তৈরি করতে হবে।
এরপরের স্ক্রিনটি নিচের ছবির মত। সিম্পল ও সহজবোধ্য একটি ইন্টারফেস। মেনুর নিচের সবুজ বারে ডানদিকে ডিজাইন ও ব্লকস দুটি অপশন আছে। এখানে বামদিকে প্যালেট বক্সে ব্যবহারযোগ্য বিভিন্ন কম্পোনেন্ট রয়েছে। যে কম্পোনেন্টগুলো ব্যবহার হবে সেগুলো ডানদিকে কম্পোনেন্ট বক্সে লেয়ারের মত দেখা যাবে। তার নিচে ব্যবহৃত মিডিয়াগুলোর জন্য একটি সেকশন আছে। সবার ডানে আছে প্রোপার্টিস সেকশন, যেখান থেকে নির্বাচিত কম্পোনেন্টের বিভিন্ন বৈশিষ্ট্য এডিট করা যায়।
App Icon, Title, Theme, Background, Colors, About, Alignment প্রভৃতি পরিবর্তনের অপশন Screen1 এর Properties হিসেবে রয়েছে। আরো স্ক্রিন প্রয়োজনবোধে ব্যবহার করা যাবে।
এখন আমরা Palette > User Interface থেকে দুটি টেক্সটবক্স ও তাদের জন্য লেবেল যুক্ত করে নিলাম। ছবির মত সেন্টার অ্যালাইনমেন্ট পেতে তা Screen1 এর Properties থেকে নির্বাচন করে নিতে হবে।
এখন +, -, ×, ÷ বাটন পাশাপাশি রাখার জন্য আগে Palette > Layout থেকে TableArrangement নির্বাচন করে সঠিক স্থানে ড্রাগ এন্ড ড্রপ করে এর Properties থেকে Rows 1 ও Columns 4 নির্বাচন করে নিচ্ছি। এরপর এখানে চারটি বাটন ড্র্যাগ এন্ড ড্রপ করে Column-গুলোতে রেখে Text-এ +, -, ×, ÷ সেট করে নিচ্ছি। সবশেষে = বাটন ও Result এর জন্য বক্স যুক্ত করে নিলাম। ফন্ট কালার বা সাইজ, হিন্ট প্রভৃতি কাস্টমাইজ করে নেয়া যেতে পারে। ফ্রন্টএন্ডের কাজ আপাতত এটুকুই!
এবার ব্যাকএন্ড, মানে প্রোগ্রামটা কীভাবে কাজ করবে সে লজিক নিয়ে কাজ করার পালা। MIT App Inventor-এ এটা অনেকটা পাজল পিস মেলানোর মত করতে হয়। যাদের প্রোগ্রামিংয়ের ধারণা একদমই নেই, তাদের বলে রাখি, সি বা পাইথন বা এরকম প্রচলিত প্রোগ্রামিং ভাষাগুলোতে বেসিক লেভেল প্রোগ্রামিং কিন্তু এর থেকে খুব বেশি ভিন্ন না, তবে ওখানে আপনাকে Syntax গুলো যথাযথভাবে মনে রাখতে ও ব্যবহার করতে হবে, যে কাজটা এখানে ড্রাগ এন্ড ড্রপ পদ্ধতির কারণে একদমই সহজ। তবে লজিক চিন্তা করাটা মোটামুটি একইরকম সবক্ষেত্রেই, এমনকি এখানেও!
প্রথমে চিন্তা করি আমরা কী করতে চাই। এখানে আমরা চারটা অপারেটর (+,-,*,/) নিয়ে কাজ করছি। দুটি সংখ্যা লিখে +,-,* বা / বাটনে প্রেস করে = বাটনে প্রেস করে এর আগে যে বাটনটি চাপা হয়েছিলো দুটি সংখ্যার মধ্যে সে অপারেশনটি হবে। তো = চাপার আগে কোন বাটনে প্রেস করেছিলাম এটা মনে রাখার জন্য আমরা একটা ভ্যারিয়েবল ব্যবহার করতে পারি। ভ্যারিয়েবল বা বাংলাতে চলক হলো এমন কিছু যেটার মান পরিবর্তন করা যায়। অর্থাৎ, +,-,*,/ যে বাটনে চাপবো সে অনুযায়ী ভ্যারিয়েবল একটা মান গ্রহণ করবে, এবং তারপর = চাপলে ভ্যারিয়েবলের মান অনুযায়ী দুটি সংখ্যার ওপর অপারেশন করে তা রেজাল্টের বক্সে প্রদর্শন করবে।
প্রথমে আমরা তাহলে একটা ভ্যারিয়েবল তৈরি Blocks > Built-in > Variables থেকে Initialize Global <> to এবং Blocks > Text > “<>” ব্লক দুটি নিয়ে এভাবে সেট করলাম: 
। এখানে operation হলো ভ্যারিয়েবলের নাম, পরবর্তীতে ভ্যারিয়েবলটি নির্দেশ করতে এই নামটি ব্যবহার হবে। নাম হিসেবে যেকোন কিছু দেয়া যেতে পারে, তবে প্রাসঙ্গিক কিছু নাম দিলে বোঝার জন্য সুবিধাজনক হয়। আমি operation ভ্যারিয়েবলটিকে none হিসেবে initialize করেছি, এখানেও অন্য কোন নাম দিলে অসুবিধা ছিলো না।
এখন আমি চাইছি +, -, ×, ÷ যে বাটন প্রেস করা হবে operation নামের ভ্যারিয়েবলটির মান সে অনুযায়ী পরিবর্তন হবে। এজন্য লজিকটা একদমই সহজ, এটা নিচের ছবির মত করে করতে হবে। এখানে When <button> .Click do বক্সটি কিন্তু Controls ব্লক সেকশনে পাওয়া যাবে না, বরং ছবির মত বাটনগুলোর সেকশনে আছে।
এরপরের কাজ হলো = বাটন প্রেস করলে operator এর যে মান আছে, তা অনুযায়ী প্রথম ও দ্বিতীয় টেক্সট বক্সের টেক্সট +, -, * বা / হয়ে তা তৃতীয় টেক্সট বক্সে প্রদর্শিত হবে। নিচের ছবির মত করে আমরা এটা সেট করতে পারি। When <button> .Click do বক্সের মত set <TextBox>.<text> to ও <TextBox>.<text> বক্স টেক্সটবক্সগুলোর সেকশন থেকে নিতে হবে।
সবশেষে আমাদের লজিকগুলো হলো এরকম:
তো এখন আমাদের ফ্রন্টএন্ড, ব্যাকএন্ড সব কাজই শেষ। মানে এখন অ্যাপটা পরখ করে দেখার সময়। কিন্তু তা করতে হলে অ্যাপ হিসেবে বিল্ড করে কোন অ্যান্ড্রয়েড ফোনে ইন্সটল করে নিতে হবে। এজন্য ওপরের মেনু থেকে Build > Android App (.apk) নির্বাচন করতে হবে। কিছুটা সময় লাগতে পারে বিল্ড করতে। এরপর একটি QR Code ও ডাউনলোড লিঙ্ক দেয়া হবে, যা ২ ঘন্টার জন্য কার্যকর থাকবে। অবশ্য এসময়ের মধ্যে ডাউনলোড না করলে অ্যাপটা হারিয়ে যাবে এমন না, জাস্ট .apk ফাইল পেতে পুনরায় বিল্ড করতে হবে।
তো যাইহোক, অ্যাপটা আমার ফোনে ইন্সটল করে নিয়েছি, এবং হ্যা, এটা কাজ করছে (যদিও প্রথমবারে না, কিছু ভুল করেছিলাম, যা পোস্টে লিখিনি 😅)। যদি কেউ টেস্ট করে দেখতে চান, টেলিগ্রামে এটা আপলোড করে দিয়েছি। আর নিয়নবাতি রমাদান কনটেস্ট-২ কিন্তু শুরু হতে যাচ্ছে ১৪ রমাদান থেকে ইন শা আল্লাহ, অংশ নিতে হলে যুক্ত থাকতে হবে আমাদের টেলিগ্রাম গ্রুপে।
তো এখন আপনার পালা! মাথায় সুন্দর কোন আইডিয়া থাকলে চেষ্টা করে দেখতেই পারেন, ভালো কিছুর শুরু তো ইচ্ছা আর চেষ্টা থেকেই হয়, তাই না?
