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