Google Chat অ্যাপের জন্য কার্ড তৈরি করুন

এই পৃষ্ঠায় একটি কার্ডের উপাদান এবং কাঠামো কীভাবে তৈরি করতে হয় তা বর্ণনা করা হয়েছে। কার্ড হল এমন একটি ইউজার ইন্টারফেস যা Google Chat অ্যাপগুলি চ্যাট ব্যবহারকারীদের কাছ থেকে তথ্য উপস্থাপন এবং সংগ্রহ করতে ব্যবহার করতে পারে। চ্যাট অ্যাপগুলি নিম্নলিখিত ইন্টারফেসে কার্ড তৈরি এবং প্রদর্শন করতে পারে:

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

এই পৃষ্ঠায়, আপনি একটি কার্ডের নিম্নলিখিত উপাদানগুলি সম্পর্কে জানতে পারবেন:

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

পূর্বশর্ত

একটি Google Chat অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ এবং প্রতিক্রিয়া জানাতে কনফিগার করা হয়েছে। একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, আপনি যে অ্যাপ আর্কিটেকচারটি ব্যবহার করতে চান তার উপর ভিত্তি করে নিম্নলিখিত কুইকস্টার্টগুলির মধ্যে একটি সম্পূর্ণ করুন:

চ্যাট অ্যাপের জন্য মেসেজিং এবং ইউজার ইন্টারফেস ডিজাইন এবং প্রিভিউ করতে কার্ড বিল্ডার ব্যবহার করুন:

কার্ড বিল্ডার খুলুন

একটি হেডার যোগ করুন

CardHeader উইজেটটি একটি কার্ডের হেডারকে প্রতিনিধিত্ব করে। হেডারগুলিতে আপনার কার্ডের জন্য একটি শিরোনাম, সাবটাইটেল এবং একটি অবতার চিত্র অন্তর্ভুক্ত থাকতে পারে।

নিচে একটি CardHeader উদাহরণ দেওয়া হল:

এক বা একাধিক কার্ড বিভাগ যোগ করুন

CardSection উইজেট হল একটি কার্ডের মধ্যে একটি উচ্চ-স্তরের ধারক। আপনি একটি কার্ডের মধ্যে উইজেটগুলিকে গোষ্ঠীভুক্ত করতে কার্ড বিভাগগুলি ব্যবহার করেন। প্রতিটি কার্ড বিভাগের জন্য, আপনি একটি হেডার এবং এক বা একাধিক উইজেট অন্তর্ভুক্ত করতে পারেন।

নিচে দুটি textParagraph উইজেট সম্বলিত একটি CardSection এর উদাহরণ দেওয়া হল:

উইজেটগুলির মধ্যে একটি অনুভূমিক বিভাজক যোগ করুন

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

নিম্নলিখিতটি অন্যান্য ধরণের উইজেটের মধ্যে divider উইজেট সমন্বিত একটি কার্ড:

কলাম যোগ করুন

columns উইজেটটি একটি কার্ডে সর্বাধিক ২টি কলাম প্রদর্শন করে। আপনি প্রতিটি কলামে উইজেট যোগ করতে পারেন; উইজেটগুলি নির্দিষ্ট ক্রমে প্রদর্শিত হয়। ২টির বেশি কলাম অন্তর্ভুক্ত করতে, অথবা সারি ব্যবহার করতে, grid উইজেট ব্যবহার করুন।

প্রতিটি কলামের উচ্চতা লম্বা কলামের উপর নির্ভর করে নির্ধারিত হয়। উদাহরণস্বরূপ, যদি প্রথম কলামটি দ্বিতীয় কলামের চেয়ে লম্বা হয়, তাহলে উভয় কলামেরই প্রথম কলামের উচ্চতা থাকবে। যেহেতু প্রতিটি কলামে আলাদা সংখ্যক উইজেট থাকতে পারে, তাই আপনি সারি নির্ধারণ করতে পারবেন না বা কলামের মধ্যে উইজেট সারিবদ্ধ করতে পারবেন না।

নিচের উদাহরণে একটি কার্ড দেখানো হয়েছে যেখানে একটি columns উইজেট রয়েছে যার মধ্যে ২টি কলাম লেখা রয়েছে। শুধুমাত্র কলাম লেআউট দেখতে এবং কোড নমুনাটি আড়াল করতে, Collapse এ ক্লিক করুন। যখন স্থান সীমিত থাকে, যেমন নিম্নলিখিত উদাহরণে, দ্বিতীয় কলামটি প্রথম কলামের নীচে মোড়ানো হয়।

কলামের প্রস্থ নির্ধারণ করুন

কলামগুলি পাশাপাশি প্রদর্শিত হয়। আপনি horizontalSizeStyle ক্ষেত্র ব্যবহার করে প্রতিটি কলামের প্রস্থ কাস্টমাইজ করতে পারেন। যদি ব্যবহারকারীর স্ক্রিনের প্রস্থ খুব সংকীর্ণ হয়, তাহলে দ্বিতীয় কলামটি প্রথমটির নীচে মোড়ানো হবে:

  • ওয়েবে, স্ক্রিনের প্রস্থ 480 পিক্সেলের কম বা সমান হলে দ্বিতীয় কলামটি মোড়ানো হয়।
  • iOS ডিভাইসে, স্ক্রিনের প্রস্থ 300 পয়েন্টের কম বা সমান হলে দ্বিতীয় কলামটি মোড়ানো হয়।
  • অ্যান্ড্রয়েড ডিভাইসে, স্ক্রিনের প্রস্থ 320 dp এর কম বা সমান হলে দ্বিতীয় কলামটি মোড়ানো হয়।

নিচের উদাহরণে একটি কার্ড দেখানো হয়েছে যেখানে একটি columns উইজেট রয়েছে যার মধ্যে ২টি কলাম লেখা আছে এবং কলামে ৪টি আইটেম আছে। কলামের প্রতিটি আইটেমে horizontalSizeStyle প্রয়োগ করা হয়েছে যাতে প্রতিটি কলামে টেক্সট কতটা জায়গা পূরণ করবে তা নিয়ন্ত্রণ করা যায়:

  • প্রথম টেক্সট অনুচ্ছেদে FILL_MINIMUM_SPACE ব্যবহার করা হয়েছে যাতে কার্ডের প্রস্থের 30% এর বেশি না থাকে।
  • দ্বিতীয় টেক্সট অনুচ্ছেদটি কার্ডের প্রস্থের উপলব্ধ স্থান পূরণ করতে FILL_AVAILABLE_SPACE ব্যবহার করে। এই উদাহরণে, এটি কার্ডের প্রস্থের ৭০% পূরণ করে।
  • তৃতীয় টেক্সট অনুচ্ছেদটি horizontalSizeStyle সংজ্ঞায়িত করে না তাই এটি কার্ডের স্থানের উপলব্ধ স্থান পূরণ করার জন্য ডিফল্টভাবে ব্যবহৃত হয়।
  • চতুর্থ টেক্সট অনুচ্ছেদটি কার্ডের প্রস্থের 30% এর বেশি পূরণ না করার জন্য FILL_MINIMUM_SPACE ব্যবহার করে।

একটি কলামের অনুভূমিক সারিবদ্ধতা নির্ধারণ করুন

আপনি horizontalAligment " ক্ষেত্রটি সংজ্ঞায়িত করে একটি কলামের বাম, ডান বা কেন্দ্রে উইজেটগুলিকে অনুভূমিকভাবে সারিবদ্ধ করতে পারেন। যদি horizontalAlignment " ক্ষেত্রটি অনির্ধারিত থাকে, তাহলে উইজেটগুলি একটি কলামে বাম দিকে সারিবদ্ধ থাকে।

নিচের উদাহরণটি বাম দিকে একটি কলামের মধ্যে অনুভূমিকভাবে টেক্সট সারিবদ্ধ করে:

নিচের উদাহরণটি কেন্দ্রে একটি কলামের মধ্যে অনুভূমিকভাবে টেক্সট সারিবদ্ধ করে:

নিচের উদাহরণটি ডানদিকে একটি কলামের মধ্যে অনুভূমিকভাবে টেক্সট সারিবদ্ধ করে:

একটি কলামের উল্লম্ব সারিবদ্ধকরণ সংজ্ঞায়িত করুন

আপনি verticalAlignment ক্ষেত্রটি সংজ্ঞায়িত করে একটি কলামের উপরে, নীচে বা কেন্দ্রে উইজেটগুলিকে উল্লম্বভাবে সারিবদ্ধ করতে পারেন। যদি verticalAlignment ক্ষেত্রটি অনির্ধারিত থাকে, তাহলে একটি কলামের উইজেটগুলি শীর্ষে সারিবদ্ধ থাকে।

নিচের উদাহরণটি একটি কলামের মধ্যে লেখাটিকে উল্লম্বভাবে উপরে সারিবদ্ধ করে:

নিচের উদাহরণটি কেন্দ্রে একটি কলামের মধ্যে উল্লম্বভাবে টেক্সট সারিবদ্ধ করে:

নিচের উদাহরণটি নীচের কলামের মধ্যে উল্লম্বভাবে টেক্সট সারিবদ্ধ করে:

আইটেমের সংগ্রহ প্রদর্শনের জন্য একটি গ্রিড যোগ করুন

grid উইজেটটি আইটেমের একটি সংগ্রহ সহ একটি গ্রিড প্রদর্শন করে। একটি গ্রিড যেকোনো সংখ্যক কলাম এবং আইটেম সমর্থন করে। সারির সংখ্যা কলাম দ্বারা বিভক্ত আইটেম দ্বারা নির্ধারিত হয়। ১০টি আইটেম এবং ২টি কলাম বিশিষ্ট একটি গ্রিডে ৫টি সারি থাকে। ১১টি আইটেম এবং ২টি কলাম বিশিষ্ট একটি গ্রিডে ৬টি সারি থাকে।

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

নিচের উদাহরণটি হল একটি একক আইটেম সহ একটি 2 কলামের গ্রিড:

গ্রিডে ছবির সাথে টেক্সট কোথায় প্রদর্শিত হবে তা নির্ধারণ করতে, আপনি gridItemLayout ক্ষেত্রটি নির্দিষ্ট করতে পারেন। এই ক্ষেত্রটি আপনাকে গ্রিডের আইটেমের উপরে বা নীচে টেক্সট প্রদর্শিত হবে কিনা তা নির্ধারণ করতে দেয়। যদি gridItemLayout অনির্ধারিত থাকে, তাহলে টেক্সটটি গ্রিডের আইটেমের নীচে প্রদর্শিত হবে বলে ডিফল্টভাবে নির্ধারিত হয়।

নিচের উদাহরণটি হল তিন-কলামের একটি গ্রিড যার প্রতিটি গ্রিডে একটি করে টেক্সট এবং একটি ছবি রয়েছে। প্রথম গ্রিডটি ছবির উপরে টেক্সট দেখানোর জন্য সংজ্ঞায়িত করে, দ্বিতীয় গ্রিডটি ছবির নীচে টেক্সট দেখানোর জন্য সংজ্ঞায়িত করে এবং তৃতীয় গ্রিডটি টেক্সটের অবস্থান নির্ধারণ করে না।

একটি গ্রিড বা কলামে একটি বর্ডার যোগ করুন

column বা grid উইজেটে প্রদর্শিত আইটেমগুলির জন্য, আপনি একটি borderType ক্ষেত্র এবং একটি borderStyle ক্ষেত্র সংজ্ঞায়িত করে এই UI উপাদানগুলিতে একটি বর্ডার যুক্ত করতে পারেন। যদি কোনও borderStyle ক্ষেত্র সংজ্ঞায়িত না থাকে, তবে এটি ডিফল্টভাবে কোনও বর্ডার দেখায় না। আপনি একটি উইজেটের মধ্যে সমস্ত আইটেমে প্রয়োগ করার জন্য একটি borderType সংজ্ঞায়িত করতে পারেন অথবা একটি উইজেটের মধ্যে প্রতিটি আইটেমে স্টাইলিং প্রয়োগ করতে পারেন।

নিচের উদাহরণটি হল একটি ২ কলামের গ্রিড যার প্রতিটি গ্রিডে একটি ছবি রয়েছে যেখানে গ্রিডের মধ্যে সমস্ত আইটেমের জন্য বর্ডারের ধরণ, স্টাইল এবং রঙ প্রয়োগ করার জন্য সংজ্ঞায়িত করা হয়েছে।

নিচের উদাহরণটি হল একটি ৩ কলামের গ্রিড যার প্রতিটি গ্রিডে একটি ছবি এবং বর্ডার স্টাইল এবং টাইপ পৃথকভাবে সংজ্ঞায়িত করা হয়েছে। প্রথম ছবিতে STROKE নামে একটি বর্ডার সংজ্ঞায়িত করা হয়েছে। দ্বিতীয় ছবিতে NO_BORDER নামে একটি বর্ডার সংজ্ঞায়িত করা হয়েছে। তৃতীয় ছবিতে কোনও বর্ডার সংজ্ঞায়িত করা হয়নি।

একটি ক্যারোজেল যোগ করুন

Carousel উইজেটটি CarouselCard অবজেক্টের একটি সংগ্রহ দেখায় যা স্ক্রিনে এবং বাইরে স্ক্রোল করা যায়। আপনি প্রতিটি CarouselCard একাধিক উইজেট যোগ করতে পারেন।

CardFixedFooter উইজেটটি একটি চ্যাট অ্যাপ দ্বারা প্রেরিত একটি ডায়ালগ বার্তার পাদলেখ উপস্থাপন করে। পাদলেখগুলিতে একটি প্রাথমিক বোতাম এবং একটি মাধ্যমিক বোতাম অন্তর্ভুক্ত থাকতে পারে।

CardFixedFooter উইজেটটি শুধুমাত্র ডায়ালগের জন্য উপলব্ধ।

দুটি বোতাম সহ একটি CardFixedFooter উইজেটের উদাহরণ নিচে দেওয়া হল:

সমস্যা সমাধান

যখন কোনও Google Chat অ্যাপ বা কার্ড কোনও ত্রুটি ফেরত দেয়, তখন Chat ইন্টারফেসটি "কিছু ভুল হয়েছে" বা "আপনার অনুরোধ প্রক্রিয়া করতে অক্ষম" বলে একটি বার্তা প্রকাশ করে। কখনও কখনও Chat UI কোনও ত্রুটির বার্তা প্রদর্শন করে না, তবে Chat অ্যাপ বা কার্ড একটি অপ্রত্যাশিত ফলাফল তৈরি করে; উদাহরণস্বরূপ, একটি কার্ড বার্তা প্রদর্শিত নাও হতে পারে।

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