বৃহস্পতিবার, ২০ সেপ্টেম্বর, ২০১২

0 চলুন প্রথম অ্যাপ Hello Purr সম্পাদনা করি | Lets design the first app Hello Purr

আপনি কি পূর্বের পোস্ট গুলো পরেছেন এবং ধাপগুলো সম্পন্ন করেছেন? যদি না করে থাকেন তাহলে আগে পরে আসুনঃ
          ১. কিভাবে শুরু করবেন এন্ড্রয়েড অ্যাপ্লিকেশান ডেভেলপমেন্ট। 
          ২. অ্যাপ ইনভেন্টর কি
          ৩. অ্যাপ ইনভেন্টর ব্যাবহার করতে কী কী লাগবে
          ৪. অ্যাপ ইনভেন্টর কিভাবে সেট আপ করবেন
          ৫. অ্যাপ ইনভেন্টর এর সাথে ব্যাবহারের জন্য ফোন সেট আপ এবং অ্যাপ ইনভেন্টর ব্যাবহার শুরু করা
              অথবা,
              ইমুলেটর দিয়েই অ্যাপ ইনভেন্টর ব্যাবহার শুরু করা

এটি টিউটোরিয়াল সাইত তো তাই যদি আগের পোস্ট গুলো না পরেন তাহলে কিছুই বুজবেন না।

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

এই অ্যাপ টি তৈরি করতে আমাদের দুটি জিনিস লাগবে। একটা বিড়ালের ছবি এবং একটা মিয়াও সাউন্ড। এগুলো নিচের লিঙ্ক থেকে ডাউনলোড করে নিন-

অ্যাপ ডিজাইন করার জন্য কম্পনেন্ট সিলেক্ট করাঃ

 আপনি এবার Design উইন্ডো এর বামে দেখুন Palette এর নিচে আপনার অ্যাপ এর ডিজাইন এর জন্য প্রয়োজনীয় সব কম্পনেন্টস আছে। Components হচ্ছে আপনার অ্যাপ ডিজাইন এর জন্য ব্যাবহার করার মৌলিক উপাদান। যেমনঃ Level component হচ্ছে স্ক্রীন এ কোন লেখা দেখানোর জন্য। আবার Button(1) হচ্ছে এমন কম্পনেন্ট যাতে ক্লিক করলে কোন অ্যাপ কোন বিশেষ কাজ করবে।

আরও component গুলো বিশেষ বিশেষ কাজ সম্পাদন করে। যেমনঃ Canvas(2) নামের Component টি ইমেজ বা এনিমেশন ধারন করতে পারে।

Accelerometer (motion) sensor হচ্ছে এমন যা আপনার ফোনের নাড়াচাড়া অনুভব করতে পারে এবং তা থেকে সিস্টেম এ ইনপুট পাঠাতে পারে। 

একটি কম্পনেন্ট ব্যাবহার করতে চাইলে আপনাকে এটি টেনে এনে Viewer(1) অংশের ভেতর ফেলতে হবে ( যেই অংশটি Design উইন্ডো এর মাঝে অবস্থিত )।

আপনি যেই Component গুলো নিয়েছেন এবং কাজ করছেন সেই কম্পনেন্ট গুলো দেখুন ডানপাশে Components(2) Palette এ শো করছে।

একেবারে ডানে দেখুন প্রত্যেক Components এর আউটপুট কেমন হবে অর্থাৎ এটি দেখতে কেমন হবে বা এর ইনিসিয়াল মান কি হবে তা ঠিক করে দেওয়ার জন্য Properties(3) Palette আছে। আপনি একটা কম্পনেন্ট এর Properties পরিবর্তন করার জন্য প্রথমে Components Palette থেকে তা সিলেক্ট করতে হবে।



চলুন এবার Components সিলেক্ট করি এবং Properties সেট করিঃ

 এবার আমরা চাই আমাদের HelloPurr অ্যাপ টিতে এমন একটা বাটন থাকবে যার Component হিসেবে থাকবে একটু আগে ডাউনলোড করা ইমেজ টি। 
*** ধাপ ১:  Basic Palette থেকে Button কম্পনেন্ট টি টেনে এনে Screen1 এর উপর ফেলুন(1)। এবার Properties pane এ Image এর নিচের "none..." এ ক্লিক করে "Add..." এ ক্লিক করুন(2)। এবার একটু আগে ডাউনলোড করা বিড়ালের ছবিটির লোকেশান দেখিয়ে দেন(3)।


***ধাপ ২: Text Property তে থাকা 'Text for Button1' লেখাগুলো ডিলিট করে দিন। আপনার ডিজাইন টি দেখতে নিচের মত হয়েছে কি-


***ধাপ ৩: এবার Basic Palette থেকে Level Component টি ড্রাগ এন্ড ড্রপ করে এনে Viewer(1). এটাকে ছবিটির নিচে স্থাপন করুন। এটা আপনার কম্পোনেন্ট এ Level1 হিসেবে দেখা যাবে। 

এবার Properties Pane এ যান এবং Level1 এর Text কে 'pet the kitty' করে দিন(2)। দেখবেন, ডিজাইনার এবং আপনার ডিভাইস (ফোনে বা ইমুলেটরে) এ লেখা গুলো পরিবর্তন হয়ে যাবে। Level1 এর FontSize কে 30 করে দিন(3)। বক্সে ক্লিক করে Level1 এর BackgroundColor পরিবর্তন করে দিন(4)। আপনার মনের মত একটা রঙ দিন। এবার আপনার Level1 এর TextColor পরিবর্তন করে দিন(5)। আমি BackgroundColor নীল এবং TextCoror হলুদ করেছি-


***ধাপ ৪: এবার Palette এর নিচে থাকা Media drawer খুলুন এবং Sound component টেনে Screen1এ এনে ছেড়ে দিন(1)। যখনি আপনি এটিকে ড্রপ করবেন আপনি এটিকে Non-visible components হিসেবে Viewer এর নিচের দিকে দেখতে পাবেন। এবার Components pane এর নিচে Media pane এ 'Add...' এ ক্লিক করুন(2) এবং একটু আগে ডাউনলোড করে meow.mp3 ফাইলটি প্রোজেক্ট-এ আপলোড করুন(3)। Properties pane থেকে Source এর 'None...' এ ক্লিক করুন Sound1 component এর সাউন্ড হিসেবে meow.mp3 ফাইলটি দিন(4)।


এর সাথে সাথে আমাদের Design উইন্ডো এর কাজ শেষ। পরবর্তী ধাপে আমরা Block Editor দিয়ে HelloPurr অ্যাপ টির প্রোগ্রামিং এর কাজ করবো। 

0 মন্তব্য(গুলি):

একটি মন্তব্য পোস্ট করুন

 

Android Application Development with App Inventor Copyright © 2011 - |- Template created by Tech Help - |- Powered by Tech Help