কার্ড ভিত্তিক ইন্টারফেস

অ্যাড-অন কার্ডের উদাহরণ

গুগল ওয়ার্কস্পেস অ্যাড-অনগুলি হোস্ট অ্যাপ্লিকেশন UI এর সাইডবারে তথ্য এবং ব্যবহারকারীর নিয়ন্ত্রণ উপস্থাপন করে। একটি অ্যাড-অনে এক বা একাধিক কার্ড সহ একটি প্রধান শনাক্তকারী টুলবার থাকে।

প্রতিটি কার্ড আপনার অ্যাড-অনের UI এর একটি নির্দিষ্ট 'পৃষ্ঠা' উপস্থাপন করে এবং একটি নতুন কার্ডে নেভিগেট করা সাধারণত সেই কার্ডটি তৈরি করে একটি অভ্যন্তরীণ কার্ড স্ট্যাকের উপর ঠেলে দেওয়ার ব্যাপার। একটি সমৃদ্ধ ইন্টারঅ্যাকশন অভিজ্ঞতার জন্য আপনি কার্ডগুলির মধ্যে নেভিগেশন প্রবাহ সংজ্ঞায়িত করতে পারেন।

কার্ডগুলি অ-প্রসঙ্গিক বা প্রাসঙ্গিক হতে পারে। হোস্ট অ্যাপ্লিকেশনটি যখন একটি নির্দিষ্ট প্রসঙ্গে থাকে তখন ব্যবহারকারীর কাছে প্রাসঙ্গিক কার্ডগুলি উপস্থাপন করা হয়। উদাহরণস্বরূপ, একটি Gmail বার্তা বা ক্যালেন্ডার ইভেন্ট খোলার সময়। অ-প্রসঙ্গিক কার্ডগুলি (যেমন হোমপেজ ) হোস্টের একটি নির্দিষ্ট প্রসঙ্গের বাইরে ব্যবহারকারীর কাছে উপস্থাপন করা হয়। উদাহরণস্বরূপ, যখন ব্যবহারকারী তাদের Gmail ইনবক্স, প্রধান ড্রাইভ ফোল্ডার, বা ক্যালেন্ডার দেখছেন।

অ্যাপস স্ক্রিপ্টে তৈরি গুগল ওয়ার্কস্পেস অ্যাড-অনগুলি কার্ড পরিষেবা ব্যবহার করে কার্ড থেকে ইউজার ইন্টারফেস তৈরি করে। ইন্টারফেসটি কার্ড হিসাবে রেন্ডার করার জন্য অন্যান্য ভাষায় তৈরি অ্যাড-অনগুলিকে সঠিকভাবে ফর্ম্যাট করা JSON ফেরত দিতে হবে।

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

কার্ড-ভিত্তিক ইন্টারফেসের নিম্নলিখিত সুবিধা রয়েছে:

  • কার্ড-ভিত্তিক ইন্টারফেস তৈরি করতে HTML বা CSS এর কোন জ্ঞানের প্রয়োজন নেই।
  • কার্ড এবং উইজেটগুলি স্বয়ংক্রিয়ভাবে এমনভাবে স্টাইল করা হয় যাতে তারা যে Google Workspace অ্যাপ্লিকেশনগুলি প্রসারিত করে তার সাথে ভালভাবে কাজ করে।
  • কার্ড-ভিত্তিক ইন্টারফেসগুলি ডেস্কটপ এবং মোবাইল উভয় ডিভাইসেই কাজ করে, তবে আপনাকে কেবল একবার ইন্টারফেসটি সংজ্ঞায়িত করতে হবে।

কার্ড-ভিত্তিক ইন্টারফেস তৈরি করা

কার্ড-ভিত্তিক অ্যাড-অন তৈরি করার সময়, কিছু ধারণা এবং নকশার ধরণ বোঝা গুরুত্বপূর্ণ। কার্যকর কার্ড-ভিত্তিক অ্যাড-অন তৈরি করার জন্য নিম্নলিখিত নির্দেশিকাগুলি আপনার প্রয়োজনীয় তথ্য প্রদান করে:

কার্ড তৈরি এবং UI আচরণ বাস্তবায়নের সময় এই পৃষ্ঠাগুলি উল্লেখ করুন। আপনার অ্যাড-অন বাস্তবায়নের সময় নিম্নলিখিত অতিরিক্ত নমুনাগুলিও উল্লেখ করার জন্য দরকারী হতে পারে: