MekTek থেকে বিভিন্ন প্রোজেক্ট কম্পিটিশন গুলোতে যেসব আইওটি (Internet Of Things) প্রোজেক্ট পুরুষ্কারপ্রাপ্ত হয়েছে সেই সকল প্রোজেক্ট এর জন্য সম্মানিত বিচারক এবং দর্শকদের একটি কমন প্রশ্ন থাকে ফ্রন্টেন্ড ইন্টারফেস নিয়ে। বুয়েট এর ইইই ডে তে ও প্রায় সবার থেকেই শুনতে হয়েছে যে প্রোজেক্ট গুলোর ফ্রন্টেন্ড আসলে কিভাবে বানানো হয়েছে।

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

তাহলে আসলে আমরা কিভাবে ফ্রন্টেন্ড ডিজাইন করি?

আমাদের সব আইওটির অ্যাপ গুলো হল ক্রস প্লাটফর্ম বেসড। তাই ক্রস প্লাটফর্ম এর ফ্রন্টেড স্ট্যাক দিয়ে ডিজাইন করা হয়। স্ট্যাক টি এইরকম

1. Angular 2
2. JavaScript FrameWorks (Raphael, Hammer.js, D3 etc)
2. BootStrap
3. CSS
4. HTML

এখন এই স্ট্যাক ব্যবহার করে বেসিক একটি প্রোজেক্ট এর লিংক দেয়া হল সোর্স কোড সহ 🙂 🙂। এখানে Angular 2 এর 2 way data binding দেখানো হয়েছে। অর্থাৎ আউটপুট চেঞ্জ হলে ইনপুট চেঞ্জ হবে, ইনপুট চেঞ্জ হলে আউটপুট চেঞ্জ হবে এবং কি বোর্ড এ ইনপুট দেয়ার সাথে সাথে তাৎক্ষনিক আউটপুট পাওয়া যাবে 🙂 🙂।

Demo Link : https://shawon100.github.io/angularmaterial/

Latest অপারেটিং সিস্টেম এর Angular 2 supported browser (Google Chrome, Firefox) এ চলবে।

Source Code :

https://github.com/shawon100/angular-2-way-data-binding

Official Facebook Page Link : https://www.facebook.com/MekTekBD