এই পৃষ্ঠায় একটি কার্ডের উপাদান ও কাঠামো কীভাবে তৈরি করতে হয় তা বর্ণনা করা হয়েছে। কার্ড হলো এমন ইউজার ইন্টারফেস যা গুগল চ্যাট অ্যাপগুলো চ্যাট ব্যবহারকারীদের কাছ থেকে তথ্য উপস্থাপন ও সংগ্রহ করতে ব্যবহার করতে পারে। চ্যাট অ্যাপগুলো নিম্নলিখিত ইন্টারফেসগুলোতে কার্ড তৈরি ও প্রদর্শন করতে পারে:
- যেসব বার্তায় এক বা একাধিক কার্ড থাকে।
- হোমপেজ , যা চ্যাট অ্যাপের ডিরেক্ট মেসেজের হোম ট্যাব থেকে প্রদর্শিত একটি কার্ড।
- ডায়ালগ হলো এমন কার্ড যা মেসেজ এবং হোমপেজ থেকে একটি নতুন উইন্ডোতে খোলে।
এই পৃষ্ঠায় আপনি একটি কার্ডের নিম্নলিখিত উপাদানগুলো সম্পর্কে জানতে পারবেন:
- হেডার , যেটিতে সাধারণত কোনো কার্ড বা কার্ডের অংশের শিরোনাম থাকে।
- সেকশনগুলো কার্ডের মূল অংশ গঠন করে, যার মধ্যে উইজেট এবং অন্যান্য ইন্টারেক্টিভ উপাদান অন্তর্ভুক্ত থাকে। একটি কার্ড সেকশনের মধ্যে আপনি কলাম এবং গ্রিডের মতো উপাদান যোগ করে কার্ডটিকে আরও সুসংগঠিত করতে পারেন।
- ফিক্সড ফুটার , যা ডায়ালগের নীচে বাটন-এর মতো স্থায়ী UI উপাদান প্রদর্শন করতে ব্যবহৃত হয়।
পূর্বশর্ত
একটি গুগল চ্যাট অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ ও তার উত্তর দেওয়ার জন্য কনফিগার করা হয়েছে। একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, আপনার পছন্দের অ্যাপ আর্কিটেকচারের উপর ভিত্তি করে নিম্নলিখিত কুইকস্টার্টগুলোর মধ্যে একটি সম্পূর্ণ করুন:
- গুগল ক্লাউড ফাংশন সহ HTTP পরিষেবা
- গুগল অ্যাপস স্ক্রিপ্ট
- গুগল ক্লাউড ডায়ালগফ্লো সিএক্স
- গুগল ক্লাউড পাব/সাব
চ্যাট অ্যাপের জন্য মেসেজিং ও ইউজার ইন্টারফেস ডিজাইন এবং প্রিভিউ করতে কার্ড বিল্ডার ব্যবহার করুন:
কার্ড বিল্ডারটি খুলুনহেডার যোগ করুন
CardHeader উইজেটটি একটি কার্ডের হেডার উপস্থাপন করে। হেডারে আপনার কার্ডের জন্য একটি শিরোনাম, উপ-শিরোনাম এবং একটি অ্যাভাটার ছবি অন্তর্ভুক্ত থাকতে পারে।
নিম্নলিখিতটি একটি CardHeader উদাহরণ:
এক বা একাধিক কার্ড বিভাগ যোগ করুন
CardSection উইজেটটি একটি কার্ডের ভেতরের একটি উচ্চ-স্তরের কন্টেইনার। একটি কার্ডের মধ্যে উইজেটগুলোকে একত্রিত করতে আপনি কার্ড সেকশন ব্যবহার করেন। প্রতিটি কার্ড সেকশনে আপনি একটি হেডার এবং এক বা একাধিক উইজেট অন্তর্ভুক্ত করতে পারেন।
নিম্নলিখিতটি একটি CardSection এর উদাহরণ, যেটিতে দুটি textParagraph উইজেট রয়েছে:
উইজেটগুলির মধ্যে একটি অনুভূমিক বিভাজক যোগ করুন
divider উইজেটটি উল্লম্বভাবে সাজানো উইজেটগুলোর মাঝে একটি কার্ডের প্রস্থ বরাবর একটি অনুভূমিক রেখা প্রদর্শন করে। এই রেখাটি একটি দৃশ্যমান বিভাজক, যা ব্যবহারকারীদের একটি উইজেট থেকে অন্যটিকে আলাদা করতে সাহায্য করে, ফলে কার্ডগুলো দ্রুত দেখে নেওয়া ও বোঝা সহজ হয়।
নিম্নলিখিতটি হলো একটি কার্ড, যা অন্যান্য ধরনের উইজেটের মধ্যে একটি divider উইজেট নিয়ে গঠিত:
কলাম যোগ করুন
columns উইজেটটি একটি কার্ডে সর্বোচ্চ ২টি কলাম প্রদর্শন করে। আপনি প্রতিটি কলামে উইজেট যোগ করতে পারেন; উইজেটগুলো নির্দিষ্ট করার ক্রমানুসারে প্রদর্শিত হয়। ২টির বেশি কলাম অন্তর্ভুক্ত করতে বা সারি ব্যবহার করতে, grid উইজেটটি ব্যবহার করুন।
প্রতিটি কলামের উচ্চতা অপেক্ষাকৃত লম্বা কলামটির দ্বারা নির্ধারিত হয়। উদাহরণস্বরূপ, যদি প্রথম কলামটি দ্বিতীয় কলামের চেয়ে লম্বা হয়, তবে উভয় কলামের উচ্চতাই হবে প্রথম কলামের সমান। যেহেতু প্রতিটি কলামে ভিন্ন ভিন্ন সংখ্যক উইজেট থাকতে পারে, তাই আপনি সারি নির্ধারণ করতে বা কলামগুলোর মধ্যে উইজেট সারিবদ্ধ করতে পারবেন না।
নিম্নলিখিত উদাহরণটি একটি কার্ড প্রদর্শন করে যেখানে একটি columns উইজেট রয়েছে এবং এতে দুটি টেক্সট কলাম আছে। শুধুমাত্র কলাম লেআউটটি দেখতে এবং কোড স্যাম্পলটি সংকুচিত করতে, Collapse-এ ক্লিক করুন। যখন জায়গার সীমাবদ্ধতা থাকে, যেমন নিম্নলিখিত উদাহরণে, তখন দ্বিতীয় কলামটি প্রথম কলামের নিচে চলে আসে।
কলামের প্রস্থ নির্ধারণ করুন
কলামগুলো পাশাপাশি প্রদর্শিত হয়। আপনি ` horizontalSizeStyle ফিল্ডটি ব্যবহার করে প্রতিটি কলামের প্রস্থ নিজের মতো করে সাজিয়ে নিতে পারেন। যদি ব্যবহারকারীর স্ক্রিনের প্রস্থ খুব কম হয়, তাহলে দ্বিতীয় কলামটি প্রথমটির নিচে চলে আসে।
- ওয়েবে, স্ক্রিনের প্রস্থ ৪৮০ পিক্সেল বা তার কম হলে দ্বিতীয় কলামটি র্যাপ হয়।
- iOS ডিভাইসগুলিতে, স্ক্রিনের প্রস্থ ৩০০ পয়েন্ট বা তার কম হলে দ্বিতীয় কলামটি র্যাপ হয়।
- অ্যান্ড্রয়েড ডিভাইসগুলিতে, স্ক্রিনের প্রস্থ ৩২০ ডিপি-র সমান বা তার কম হলে দ্বিতীয় কলামটি র্যাপ হয়।
নিম্নলিখিত উদাহরণটিতে একটি কার্ড দেখানো হয়েছে, যেটিতে একটি columns উইজেট রয়েছে এবং এতে দুটি টেক্সট কলামে চারটি করে আইটেম আছে। প্রতিটি কলামে টেক্সট কতটা জায়গা জুড়ে থাকবে তা নিয়ন্ত্রণ করার জন্য, কলামের প্রতিটি আইটেমে horizontalSizeStyle প্রয়োগ করা হয়েছে।
- প্রথম টেক্সট প্যারাগ্রাফটি কার্ডের প্রস্থের ৩০%-এর বেশি জায়গা পূরণ না করার জন্য
FILL_MINIMUM_SPACEব্যবহার করে। - দ্বিতীয় টেক্সট প্যারাগ্রাফটি কার্ডের প্রস্থের মধ্যে থাকা উপলব্ধ স্থান পূরণ করার জন্য
FILL_AVAILABLE_SPACEব্যবহার করে। এই উদাহরণে, এটি কার্ডের প্রস্থের ৭০% পূরণ করে। - তৃতীয় টেক্সট প্যারাগ্রাফটিতে
horizontalSizeStyleনির্ধারণ করা না থাকায়, এটি ডিফল্টভাবে কার্ডের উপলব্ধ স্থান পূরণ করে। - চতুর্থ টেক্সট প্যারাগ্রাফটি কার্ডের প্রস্থের ৩০%-এর বেশি জায়গা পূরণ না করার জন্য
FILL_MINIMUM_SPACEব্যবহার করে।
একটি কলামের অনুভূমিক সারিবদ্ধতা নির্ধারণ করুন।
আপনি horizontalAligment ফিল্ডটি নির্ধারণ করে উইজেটগুলিকে একটি কলামের বামে, ডানে বা কেন্দ্রে আনুভূমিকভাবে সারিবদ্ধ করতে পারেন। যদি horizontalAlignment ফিল্ডটি অনির্ধারিত থাকে, তাহলে উইজেটগুলি একটি কলামে বাম দিকে সারিবদ্ধ হয়।
নিম্নলিখিত উদাহরণটি একটি কলামের মধ্যে থাকা টেক্সটকে আনুভূমিকভাবে বাম দিকে সারিবদ্ধ করে:
নিম্নলিখিত উদাহরণটি একটি কলামের মধ্যে থাকা টেক্সটকে আনুভূমিকভাবে কেন্দ্রে সারিবদ্ধ করে:
নিম্নলিখিত উদাহরণটি একটি কলামের মধ্যে থাকা টেক্সটকে আনুভূমিকভাবে ডানদিকে সারিবদ্ধ করে:
একটি কলামের উল্লম্ব সারিবদ্ধতা নির্ধারণ করুন।
আপনি verticalAlignment ফিল্ডটি নির্ধারণ করে উইজেটগুলিকে একটি কলামের উপরে, নীচে বা কেন্দ্রে উল্লম্বভাবে সারিবদ্ধ করতে পারেন। যদি verticalAlignment ফিল্ডটি অনির্ধারিত থাকে, তাহলে একটি কলামের উইজেটগুলি উপরে সারিবদ্ধ থাকে।
নিম্নলিখিত উদাহরণটি একটি কলামের মধ্যে থাকা টেক্সটকে উল্লম্বভাবে উপরে সারিবদ্ধ করে:
নিম্নলিখিত উদাহরণটি একটি কলামের মধ্যে থাকা টেক্সটকে উল্লম্বভাবে মাঝখানে সারিবদ্ধ করে:
নিচের উদাহরণটি একটি কলামের নীচে থাকা টেক্সটকে উল্লম্বভাবে সারিবদ্ধ করে:
আইটেমের সংগ্রহ প্রদর্শন করতে একটি গ্রিড যোগ করুন।
grid উইজেটটি আইটেমের একটি সংগ্রহ সহ একটি গ্রিড প্রদর্শন করে। একটি গ্রিড যেকোনো সংখ্যক কলাম এবং আইটেম সমর্থন করে। সারির সংখ্যা আইটেমের সংখ্যাকে কলাম দ্বারা ভাগ করে নির্ধারণ করা হয়। ১০টি আইটেম এবং ২টি কলামের একটি গ্রিডে ৫টি সারি থাকে। ১১টি আইটেম এবং ২টি কলামের একটি গ্রিডে ৬টি সারি থাকে।
উইজেটটি সাজেশন সমর্থন করে, যা ব্যবহারকারীদের অভিন্ন ডেটা প্রবেশ করাতে সাহায্য করে, এবং অন-চেঞ্জ অ্যাকশনও সমর্থন করে, যা টেক্সট ইনপুট ফিল্ডে কোনো পরিবর্তন ঘটলে (যেমন ব্যবহারকারী টেক্সট যোগ বা মুছে ফেললে) Actions হয়।
নিচের উদাহরণটি একটি ২-কলামের গ্রিড, যেখানে একটিমাত্র আইটেম রয়েছে:
গ্রিডে কোনো ছবির সাথে লেখা কোথায় প্রদর্শিত হবে তা নির্ধারণ করতে, আপনি gridItemLayout ফিল্ডটি নির্দিষ্ট করে দিতে পারেন। এই ফিল্ডটি আপনাকে নির্ধারণ করতে দেয় যে লেখাটি গ্রিডের আইটেমের উপরে নাকি নিচে প্রদর্শিত হবে। যদি gridItemLayout অনির্ধারিত থাকে, তবে লেখাটি ডিফল্টরূপে গ্রিডের আইটেমের নিচে প্রদর্শিত হয়।
নিচের উদাহরণটি একটি তিন-কলামের গ্রিড, যার প্রতিটি গ্রিডে লেখা এবং একটি ছবি রয়েছে। প্রথম গ্রিডটিতে লেখাটি ছবির উপরে প্রদর্শিত হবে, দ্বিতীয় গ্রিডটিতে লেখাটি ছবির নিচে প্রদর্শিত হবে এবং তৃতীয় গ্রিডটিতে লেখার অবস্থান নির্ধারণ করা নেই।
একটি গ্রিড বা কলামে বর্ডার যোগ করুন
যে আইটেমগুলো column বা grid উইজেটে প্রদর্শিত হয়, সেগুলোতে আপনি একটি borderType ফিল্ড এবং একটি borderStyle ফিল্ড নির্ধারণ করে বর্ডার যোগ করতে পারেন। যদি কোনো borderStyle ফিল্ড নির্ধারণ করা না থাকে, তবে ডিফল্টরূপে কোনো বর্ডার দেখানো হয় না। আপনি একটি উইজেটের ভেতরের সমস্ত আইটেমের জন্য borderType নির্ধারণ করতে পারেন অথবা উইজেটের প্রতিটি স্বতন্ত্র আইটেমের জন্য আলাদাভাবে স্টাইলিং প্রয়োগ করতে পারেন।
নিচের উদাহরণটি একটি ২-কলামের গ্রিড, যার প্রতিটি গ্রিডে একটি করে ছবি রয়েছে এবং গ্রিডের ভেতরের সমস্ত আইটেমের জন্য বর্ডারের ধরন, স্টাইল ও রঙ নির্ধারণ করে দেওয়া হয়েছে।
নিচের উদাহরণটি একটি ৩-কলামের গ্রিড, যেখানে প্রতিটি গ্রিডে একটি করে ছবি রয়েছে এবং বর্ডারের স্টাইল ও ধরন আলাদাভাবে সংজ্ঞায়িত করা হয়েছে। প্রথম ছবিটির বর্ডার STROKE হিসেবে সংজ্ঞায়িত করা হয়েছে। দ্বিতীয় ছবিটির বর্ডার NO_BORDER হিসেবে সংজ্ঞায়িত করা হয়েছে। তৃতীয় ছবিটির কোনো বর্ডার সংজ্ঞায়িত করা নেই।
একটি ক্যারোসেল যোগ করুন
Carousel উইজেটটি CarouselCard অবজেক্টের একটি সংগ্রহ দেখায়, যেগুলোকে স্ক্রিনে স্ক্রল করে আনা-নেওয়া করা যায়। আপনি প্রতিটি CarouselCard এ একাধিক উইজেট যোগ করতে পারেন।
একটি স্থায়ী ফুটার যোগ করুন
CardFixedFooter উইজেটটি একটি চ্যাট অ্যাপ দ্বারা প্রেরিত ডায়ালগ বার্তার ফুটারকে উপস্থাপন করে। ফুটারে একটি প্রাইমারি বাটন এবং একটি সেকেন্ডারি বাটন থাকতে পারে।
CardFixedFooter উইজেটটি শুধুমাত্র ডায়ালগের জন্য উপলব্ধ।
নিচে দুটি বাটনসহ একটি CardFixedFooter উইজেটের উদাহরণ দেওয়া হলো:
সমস্যা সমাধান
যখন কোনো গুগল চ্যাট অ্যাপ বা কার্ডে ত্রুটি দেখা দেয়, তখন চ্যাট ইন্টারফেসে "কিছু একটা ভুল হয়েছে" বা "আপনার অনুরোধটি প্রক্রিয়া করা সম্ভব হয়নি" লেখা একটি বার্তা প্রদর্শিত হয়। কখনও কখনও চ্যাট UI কোনো ত্রুটির বার্তা প্রদর্শন করে না, কিন্তু চ্যাট অ্যাপ বা কার্ডটি একটি অপ্রত্যাশিত ফলাফল দেয়; উদাহরণস্বরূপ, কার্ডের বার্তাটি হয়তো দেখা যায় না।
যদিও চ্যাট UI-তে কোনো ত্রুটির বার্তা প্রদর্শিত নাও হতে পারে, চ্যাট অ্যাপের জন্য ত্রুটি লগিং চালু থাকলে, ত্রুটিগুলি সমাধান করতে সাহায্য করার জন্য বর্ণনামূলক ত্রুটির বার্তা এবং লগ ডেটা উপলব্ধ থাকে। ত্রুটি দেখা, ডিবাগ করা এবং সমাধান করার জন্য, "গুগল চ্যাটের ত্রুটি সমাধান ও প্রতিকার" দেখুন।