টুলস সেটআপ এবং একটি সাধারণ হ্যালো ওয়ার্ল্ড অ্যাপ তৈরি

ভূমিকাঃ স্বাগত জানাচ্ছি আপনার iOS এপ্লিকেশন নিয়ে আগ্রহের জন্য। এটি আমাদের উপরে উল্লেখিত সিরিজের দ্বিতীয় সেকশনের প্রথম চ্যাপ্টার। প্রথম সেকশনের ১০টি চ্যাপ্টারের মাধ্যমে সহজ বাংলায় অবজেক্টিভ-সি এর ব্যাসিক লার্নিং কোর্স সম্পন্ন হয়েছে। আপনি যদি ওই সেকশনের কোর্স গুলো ফলো করে না থাকেন তাহলে উপরের সূচি ঘুরে আসতে পারেন। আজকে আমরা শেয়ার করব কিভাবে আপনি Xcode 5 এ অবেজক্টিভ-সি দিয়ে iOS7 এর জন্য সহজ একটি হ্যালো ওয়ার্ল্ড এপ্লিকেশন তৈরি করতে পারেন।

কি কি জিনিস অবশ্যই লাগবেঃ ১. Mac OS X চালিত ম্যাক কম্পিউটার সিস্টেম - এটাই প্রথম ও প্রধান দরকারী জিনিস। আপনি একটি ম্যাক বুক, ম্যাক বুক প্রো, আই ম্যাক অথবা ম্যাক মিনি ব্যবহার করতে পারেন এবং সেটাতে সর্বশেষ হালনাগাদ করা (OS X 10.8.5 Mountain Lion) অপারেটিং সিস্টেম ব্যবহার করতে পারেন। ২. একটি ফ্রি Apple ডেভেলপার একাউন্ট - নতুন একাউন্ট খুলতে পারেন এখান থেকে। ৩. Xcode 5 - আমি আগেই বলেছি এখানে আলোচিত সব গুলো পোস্ট লেখা হবে Xcode 5 এ কোড করে ও এর অন্যান্য সুবিধা গুলো ব্যবহার করে। আপনার যদি ম্যাক থাকে এবং সেটার অপারেটিং সিস্টেম 10.8.4 এর পরের যেকোনো ভার্সন হয় তাহলে আপনি সেটাতে Xcode 5 ইনস্টল/আপডেট করতে পারবেন। Xcode প্রথমত একটি ইন্টিগ্রেটেড ডেভেলপমেন্ট এনভায়রনমেন্ট বা আই, ডি, ই। এটার সাথে iOS এবং OSX এর জন্য সফ্টওয়্যার ডেভেলপমেন্ট কিট বা এস, ডি, কে টিও থাকে। উপরন্তু এটি একটি একটি সোর্স কোড এডিটর যার সাথে ডিবাগিং টুল এবং সুন্দর একটি ইউজার ইন্টারফেস (ইউ, আই ) বিল্ডার এবং একটি এপ্লিকেশন সিমুলেটরও আছে। আপাতত আর কিছু না।

শুরু করি হ্যালো ওয়ার্ল্ডঃ Xcode চালু করুন এবং File মেনু থেকে New অপশন এর Project মেনু সিলেক্ট করুন। নিচের মত একটি স্ক্রিন আসবে।

খেয়াল করুন বাম পাশে যাতে iOS এর নিচে Application সিলেক্ট থাকে এবং ডান পাশ থেকে Single View Application সিলেক্ট করে Next বাটনে ক্লিক করুন। এবার নিচের মত আরেকটি স্ক্রিন আসবে।

এটার অপশন গুলো নিজের মত করে পূরণ করতে পারেন। Product Name দিন খুসি মত যেটা আসলে এপ্লিকেশন এর নাম। Organization Name ও দিন আপনার পছন্দ মত। Company Identifier ফিল্ডে মূলত একটি ডোমেইন উল্টো ভাবে লিখতে হয়। আপনার যেকোনো একটি ডোমেইন থাকলে সেটা এই ভাবে লিখতে পারেন অথবা না থাকলে এই ফিল্ডে edu.self লিখতে পারেন। Class Prefix ঘর খালি রাখতে পারেন অথবা যেকোনো কিছু লিখতে পারেন যেটা এই এপ্লিকেশন এর জন্য প্রয়োজনীয় ক্লাস গুলোর নামের আগে সয়ংক্রিয় ভাবে যুক্ত হয়ে যাবে। আমি খালি রাখছি। Devices হিসেবে সিলেক্ট করুন iphone । এরপর Next বাটনে ক্লিক করুন। এখন নিচের মত যে স্ক্রিন আসবে সেখানে;

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

তিন কলাম বিশিষ্ট এই উইনডো এর বাম পাশে আপনি এই প্রজেক্ট এর জন্য প্রয়োজনীয় ক্লাস ফাইল, ফ্রেমওয়ার্ক, সাপোর্টিং ফাইল ইত্যাদি দেখতে পারবেন। এটাকে প্রজেক্ট ন্যাভিগেটর বলে। মাঝের অংশটিকে বলা হয় এডিটিং এরিয়া যেখানে একদিকে যেমন কোড লিখতে পারবেন তেমনি প্রজেক্ট এর বিভিন্ন সেটিংস পরিবর্তন করার সময়ও এখানে সেই প্যানেলটি চলে আসবে। আর ডানের অংশকে বলা হয় ইউটিলিটি এরিয়া যেখান থেকে আপনি কোনো ইউজার ইন্টারফেস ফাইল এর ক্লাস এসাইন করে দিতে পারেন এবং ইউজার ইন্টারফেস এর বিভিন্ন কিট যেমন বাটন, লেবেল, নতুন একটি ভিউ এসব মাঝখানের এডিটর-এ নিয়ে এসে কাজ করতে পারেন অথবা এগুলোর সাইজ ও অন্যান্য প্রপার্টি ঠিক ঠাক করতে পারেন। এই তিন কলাম এর উপর দিয়ে যে একটি রো সেটাকে টুলবার বলা হয় যেখানকার টুল গুলোর ব্যবহার আপনি নিজেই একটু খেয়াল করে ঘেটে দেখলেই বুঝে যাবেন। হাজার হলেও আপনি একজন iOS ডেভেলপার :P

ইউজার ইন্টারফেস তৈরিঃ আসুন আমাদের ছোটো এপ্লিকেশনটির জন্য গ্রাফিকাল ইউজার ইন্টারফেস ডিজাইন করি। প্রজেক্ট ন্যাভিগেটর থেকে Main.storyboard ফাইলটি সিলেক্ট করুন। সাথে সাথে ডান পাশে একটি সাদা এপ্লিকেশন স্ক্রিন চলে আসবে।

Main.storyboard মূলত একটি ইউজার ইন্টারফেস ফাইল যা কিনা Xcode আমাদেরকে গ্রাফিক্যালি দেখাচ্ছে এবং এই স্টোরিবোর্ড-এ আমরা ইচ্ছা মত নতুন নতুন এপ্লিকেশন স্ক্রিন নিয়ে সেই স্ক্রিন বা সিন (Scene) গুলোর মধ্যে বিভিন্ন ধরনের রিলেশন বা কানেকশন তৈরী করতে পারি এবং প্রত্যেকটি স্ক্রিন এর মধ্যে অন্যান্য ইউ, আই কিট এলিমেন্ট যেমন বাটন, লেবেল, টেক্সট ফিল্ড ইত্যাদি যুক্তও করতে পারি। যাই হোক আপাতত ধরে নিন আমাদের এপ্লিকেশন এর একটাই স্ক্রিন/সিন যেটা আমরা ইতোমধ্যে দেখতে পাচ্ছি। এবার ডান পাশের ইউটিলিটি এরিয়ার নিচের দিক থেকে একটি বাটন এলিমেন্ট টেনে ধরে এনে আমাদের একমাত্র স্ক্রিন এর উপর ছেড়ে দিন। নিচের ছবির মত।

খুব খেয়াল রাখবেন যেন স্ক্রিন/সিন-টি পর্যাপ্ত জুম ইন অবস্থায় থাকে অর্থাত নিচের ছবির মত। স্ক্রিনটি যদি স্টোরি বোর্ডে জুম আউট অবস্থায় থাকে তাহলে আপনি বাটন এলিমেন্ট টেনে এনে স্ক্রিন/সিন এর উপর ছেড়ে দিলেও সেটা সেখানে বসতে চাইবে না। বাটন এলিমেন্টটি সিলেক্ট থাকা অবস্থায় ডান পাশের এট্রিবিউট ইন্সপেক্টর এবং সাইজ ইন্সপেক্টর ব্যবহার করে সেটার সাইজ, টাইটেল, টেক্সট ইত্যাদি পরিবর্তন করতে পারবেন। আপাতত বাটনটির টাইটেল দিন Hello World Button নিচের ছবির মত।

পরীক্ষামূলক ও প্রথম রানঃ এই অবস্থায় Xcode এর বাম পাশে উপরের দিকে প্লে বাটন এর মত একটি বাটন আছে সেটি ক্লিক করুন।

এটা একইসাথে এই প্রজেক্টকে বিল্ড (কম্পাইল ও প্যাকেজিং) করবে এবং রান করবে এবং সব কিছু ঠিক থাক থাকলে Xcode এই এপ্লিকেশন কে iOS বা iphone সিমুলেটর-এ চালিয়ে দেখাবে নিচের ছবির মত।

এবার এর টুলবারে প্লে বাটনের পাশে থাকা স্টপ বাটনে ক্লিক করে সিমুলেটরটি এবং রানিং এপ্লিকেশন বন্ধ করুন

অল্প কিছু কোডিংঃ এতক্ষণ পর্যন্ত আমরা এক লাইনও objective-c ল্যাংগুয়েজ দিয়ে কোড লিখি নাই। তারপরেও একটা হ্যালো ওয়ার্ল্ড এপ্লিকেশন তৈরী করা গেছে। এবার আমরা অল্প কিছু কোড লিখব যাতে করে আমরা Hello World Button বাটনটিকে ট্যাপ (সিমুলেটর এর হিসেবে ক্লিক) করলে iphone এর ডিফল্ট একটি এলার্ট ম্যাসেজ দেখতে পাই। এখন প্রজেক্ট ন্যাভিগেটর থেকে ViewController.h ফাইলটি সিলেক্ট করুন। মাঝখানের এডিটর এরিয়াতে এটির মধ্যে থাকা টেম্পলেট (সর্বনিম্ন প্রয়োজনীয়) কোড টুকু দেখতে পারবেন। এটির @end এর আগে নিচের কোডটি লিখুন এবং Command+s চেপে ফাইলটি সেভ করুন,

objective-c -(IBAction)showAlert;

এবার প্রজেক্ট ন্যাভিগেটর থেকে ViewController.m ফাইলটি সিলেক্ট করুন। মাঝখানের এডিটর এরিয়াতে এটির মধ্যে থাকা টেম্পলেট (সর্বনিম্ন প্রয়োজনীয়) কোড টুকু দেখতে পারবেন। এটির @implementation এর @end এর আগে নিচের কোডটি লিখুন এবং Command+s চেপে ফাইলটি সেভ করুন,

- (IBAction)showAlert
{
    UIAlertView *helloWorldAlert = [[UIAlertView alloc]
                                    initWithTitle:@"First Hello World App"
                                    message:@"Hello World!"
                                    delegate:nil
                                    cancelButtonTitle:@"OK"
                                    otherButtonTitles:nil];

    [helloWorldAlert show];
}

objective-c তে একটি ক্লাসের ইন্টারফেস সাধারণত .h ফাইল-এ লেখা হয়। অন্যদিকে .m ফাইল এর টেম্পলেট কোডেও ইন্টারফেস দেখা যায় যেটিকে মূলত বলা হয় ক্লাস এক্সটেনশন। .h ফাইলের এর ইন্টারফেসে সেই সব প্রপার্টি, মেথড ডিক্লেয়ার করা হয় যেগুলো হয়তবা অন্য ফাইল থেকেও ব্যবহার করা হতে পারে এবং যদি এমন কিছু প্রপার্টি, মেথড প্রয়োজন হয় যেগুলো শুধুই একটি .m ফাইলে ব্যবহৃত হবে সেগুলোকে ক্লাস এক্সটেনশন এর মধ্যেই ডিক্লেয়ার করা ভালো অর্থাত ওই .m ফাইলের ইন্টারফেসের মধ্যে। একটি ক্লাসের নামের পূর্বে @interface সিনট্যাক্স ব্যবহার করে সেই ক্লাসের ইন্টারফেস ডিক্লেয়ার করা হয়।

ViewController.h ফাইলের @interface ও @end এর মধ্যে আমরাও showAlert মেথড ডিক্লেয়ার করেছি যেটাকে ফাংশন কলও বলা হয়। আর এই মেথড আসলে কি কাজ করবে সেটা আমরা লিখেছি ViewController.m ফাইলে যেখানে মূলত একটি UIAlertView তৈরী (ইনিশিয়ালাইজ) করা হয়েছে টাইটেল, ম্যাসেজ, ক্যানসেল বাটনের টেক্সট ইত্যাদি ঠিক করে দিয়ে। তারপর সেই অবজেক্ট এর show মেথড কল করে সেই এলার্ট কে দেখানোর ব্যবস্থা করা হয়েছে।

বাটনের কাজ ঠিক করে দেয়াঃ এখন পর্যন্ত আমাদের একমাত্র ইউজার ইন্টারফেস ফাইলে (সিনে) একটি বাটন আছে যার কোনো কাজ ঠিক করে দেয়া হয় নাই। বাম পাশের প্রজেক্ট ন্যাভিগেটর থেকে Main.storyboard সিলেক্ট করুন। আবার আমরা আমাদের ইউজার ইন্টারফেস ফাইলটি দেখতে পাচ্ছি যেখানে একটি বাটন আছে। এবার বাটনটি সিলেক্ট করে এবং কিবোর্ড এর control কি চেপে ধরে টেনে ওই সিনটির নিচে থাকা হলুদ রঙের View Controller নামের আইকনটির উপর ছেড়ে দিন। নিচের ছবির মত।

ছেড়ে দেবার পর ওখানেই ছোটো একটি পপ আপ আসবে যেখান থেকে আমাদের ফাংশন showAlert সিলেক্ট করুন। নিচের ছবির মত।

সাধারণ ভাবে, এভাবে একটি বাটনের জন্য ফাংশন ঠিক করে দিলে বাটনটির TouchUpInside ইভেন্টটির সাথে ওই ফাংশনটি জড়িয়ে যায়। অর্থাত যখন বাটনটি চেপে ছেড়ে দেয়া হবে তখনি ওই ফাংশনটিকে ডাকা হবে।

আমাদের কাজ শেষ। এবার আগের মত রান বাটন এ ক্লিক করুন অথবা কিবোর্ডের Command+r প্রেস করুন এপ্লিকেশনটিকে রান করার জন্য। এপ্লিকেশনটি সিমুলেটর-এ চালু হলে Hello World Button এ ক্লিক করুন। নিচের ছবির মত এলার্ট ম্যাসেজ আসলে আমরা ধরে নিচ্ছি আমাদের হ্যালো ওয়ার্ল্ড এপ্লিকেশন বানানো শেষ।

সামনে পূর্ণাঙ্গ ডাটা, এপিআই সেন্ট্রিক, সিঙ্গেল ভিউ, টেবিল ভিউ, ম্যাপ ভিউ, স্ক্রল ভিউ, মাল্টিমিডিয়া ও গেম টাইপ এপ্লিকেশন এর পুরো টিউটোরিয়াল ধাপে ধাপে প্রকাশ করা হবে। আর সেটার জন্য সংক্রিয় আপডেট পেতে হলে ইমেইল সাবস্ক্রাইব করুন এই সাইটে অথবা এ সম্পর্কিত পূর্ণাঙ্গ বই এর আপডেট লাইক দিয়ে রাখতে পারেন এখানে

Originally Posted Here