কার্ডে পাঠ্য এবং ছবি যোগ করুন

এই পৃষ্ঠাটি ব্যাখ্যা করে কিভাবে কার্ডে টেক্সট এবং ইমেজ যোগ এবং ফরম্যাট করা যায়।

কার্ড তৈরির বিষয়ে আরও জানতে, Google Chat অ্যাপের জন্য কার্ড তৈরি করুন দেখুন।

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

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

পূর্বশর্ত

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

ছবি বা আইকন যোগ করুন

এই বিভাগে চিত্র, চিত্র উপাদান এবং আইকনের মতো কার্ডগুলিতে ভিজ্যুয়াল উপাদানগুলি কীভাবে যুক্ত করা যায় তা ব্যাখ্যা করে।

একটি ইমেজ যোগ করুন

Image উইজেট একটি HTTPS URL-এ হোস্ট করা একটি PNG বা JPG ছবি প্রদর্শন করে। প্রদর্শিত চিত্রের প্রস্থটি প্রদর্শিত কার্ডের সম্পূর্ণ প্রস্থকে পূরণ করে এবং এর উচ্চতা চিত্রটির আকৃতির অনুপাত বজায় রাখতে সামঞ্জস্য করে। Image উইজেট onclick ক্রিয়াগুলিকে সমর্থন করে যা ব্যবহারকারীরা ছবিটি ক্লিক করার সময় ঘটে। onclick ক্রিয়াগুলির উদাহরণ অন্তর্ভুক্ত:

  • OpenLink এর সাথে একটি হাইপারলিঙ্ক খুলুন, যেমন Google Chat ডেভেলপার ডকুমেন্টেশনের হাইপারলিঙ্ক, https://developers.google.com/chat ।
  • একটি ক্রিয়া চালান যা একটি কাস্টম ফাংশন চালায়, যেমন একটি API কল করা।

Image উইজেটের নিম্নলিখিত সীমাবদ্ধতা রয়েছে:

  • শুধুমাত্র PNG এবং JPG ছবি সমর্থিত।
  • হোস্ট URL অবশ্যই HTTPS হতে হবে।
  • পারফরম্যান্স কার্ড নিশ্চিত করতে, সর্বাধিক প্রস্তাবিত ছবির আকার 2MB।

নিচেরটি একটি Image উইজেট সমন্বিত একটি কার্ড। এটি Google Chat ডেভেলপার ডকুমেন্টেশন ল্যান্ডিং পৃষ্ঠার ছবি প্রদর্শন করে। ব্যবহারকারীরা ছবিটিতে ক্লিক করলে, Google Chat বিকাশকারী ডকুমেন্টেশন একটি নতুন ট্যাবে খোলে।

একটি ইমেজ উপাদান যোগ করুন

Image উইজেট হল সীমিত স্টাইলিং সহ একটি ছবি। একটি imageCompent উইজেট আপনাকে একটি ছবিতে cropStyle এবং borderStyle প্রয়োগ করতে দেয়।

নিম্নলিখিত উদাহরণটি একটি গ্রিডে দুটি চিত্র দেখায় যেখানে একটি চিত্র ক্রপ করা হয়েছে:

আপনি একটি cropStyle প্রয়োগ করে একটি চিত্র উপাদানের আকার সামঞ্জস্য করতে পারেন। একটি ছবিতে প্রয়োগ করার জন্য বিভিন্ন আকার রয়েছে:

  • একটি বর্গক্ষেত্র ফসল প্রয়োগ করতে SQUARE ব্যবহার করুন।
  • একটি বৃত্তাকার ফসল প্রয়োগ করতে CIRCLE ব্যবহার করুন।
  • একটি কাস্টম আকৃতির অনুপাত সহ একটি আয়তক্ষেত্রাকার ক্রপ প্রয়োগ করতে RECTANGLE_CUSTOM ব্যবহার করুন৷ উদাহরণস্বরূপ, আপনি 4:3 আকৃতির অনুপাত সহ একটি আয়তক্ষেত্রাকার ফসল প্রয়োগ করতে RECTANGLE_4_3 ব্যবহার করতে পারেন৷

নিম্নলিখিত উদাহরণটি প্রতিটি ছবিতে প্রয়োগ করা একটি ভিন্ন cropStyle সহ একটি গ্রিডে পাঁচটি চিত্র দেখায়:

একটি আইকন যোগ করুন

Icon উইজেট হয় একটি অন্তর্নির্মিত আইকন বা কাস্টম আইকন উপস্থাপন করে। আপনি নিম্নলিখিত যেকোনো একটি করতে কার্ডগুলিতে আইকন যোগ করুন:

  • একটি স্বতন্ত্র আইকন প্রদর্শন করুন।
  • একটি DecoratedText উইজেটের অংশ হিসাবে সম্পর্কিত পাঠ্যের সামনে একটি আইকন প্রদর্শন করুন৷
  • একটি ButtonList উইজেটের অংশ হিসাবে একটি ইন্টারেক্টিভ বোতাম হিসাবে একটি আইকন প্রদর্শন করুন৷

নিম্নলিখিত একটি কার্ড যা একটি বিল্ট-ইন আইকন সহ একটি Icon উপাদান নিয়ে গঠিত:

নিম্নলিখিত টেবিলটি কার্ড বার্তাগুলির জন্য উপলব্ধ অন্তর্নির্মিত আইকনগুলির তালিকা করে:

এয়ারপ্লেন বুকমার্ক
বাস CAR
ঘড়ি CONFIRMATION_NUMBER_ICON
বর্ণনা ডলার
ইমেইল EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
হোটেল HOTEL_ROOM_TYPE
আমন্ত্রণ জানান MAP_PIN
সদস্যপদ MULTIPLE_PEOPLE
ব্যক্তি ফোন
RESTAURANT_ICON শপিং_কার্ট
স্টার দোকান
টিকেট ট্রেন
VIDEO_CAMERA ভিডিও_প্লে

একটি কার্ডে পাঠ্য যোগ করুন

এই বিভাগে ব্যাখ্যা করা হয়েছে কিভাবে একটি কার্ডে পাঠ্য যোগ এবং বিন্যাস করা যায়।

বিন্যাসিত পাঠ্যের একটি অনুচ্ছেদ যোগ করুন

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

উদাহরণস্বরূপ, অনুচ্ছেদ পাঠ্যের জন্য নিম্নলিখিত বিন্যাস উপলব্ধ:

  • HTML <b> , <u> , <i> ট্যাগ সহ বোল্ড, আন্ডারলাইন বা তির্যক লেখা প্রদর্শন করুন।
  • HTML <a href="https://www.google.com">hyperlinks</a> সহ ওয়েবসাইটগুলির লিঙ্ক করুন৷
  • HTML <font color="#ea9999">font tags</font> দিয়ে কিছু রঙ যোগ করুন।

প্রতিটি TextParagraph উইজেট একটি নতুন অনুচ্ছেদ হিসাবে রেন্ডার করে এবং এটিকে HTML <p> ট্যাগের মতো মনে করা যেতে পারে।

নিম্নলিখিত দুটি TextParagraph উইজেট সমন্বিত একটি কার্ড যা সাধারণ HTML বিন্যাস সহ দুটি অনুচ্ছেদ প্রদর্শন করতে ব্যবহৃত হয়:

একটি সঙ্কুচিত পাঠ্য অনুচ্ছেদ যোগ করুন

সংকোচনযোগ্য পাঠ্য অনুচ্ছেদ ব্যবহারকারীদের চাহিদার উপর আরও তথ্য প্রকাশ করতে দেয়। এই উইজেটটি দীর্ঘ বিষয়বস্তু বা অতিরিক্ত বিবরণ উপস্থাপনের জন্য নিখুঁত যা নির্বাচন করার সময় অন্বেষণ করা যেতে পারে, একটি গতিশীল এবং ইন্টারেক্টিভ ব্যবহারকারীর অভিজ্ঞতা তৈরি করে৷

আলংকারিক উপাদান সহ পাঠ্য প্রদর্শন করুন

DecoratedText উইজেট ঐচ্ছিক লেআউট এবং ক্ষমতা সহ পাঠ্য প্রদর্শন করে। যেমন:

  • startIcon সহ পাঠ্যের সামনে একটি icon প্রদর্শন করুন।
  • topLabel সহ পাঠ্যের আগে একটি শিরোনাম দেখান।
  • button সহ একটি ক্লিকযোগ্য বোতাম যোগ করুন বা switchControl সাথে পরিবর্তনযোগ্য টগল করুন।

আপনার যখন সহজে ব্যবহারযোগ্য এবং ইন্টারেক্টিভ উপায়ে তথ্য উপস্থাপন করার প্রয়োজন হয় তখন DecoratedText উইজেটটি ব্যবহার করুন। উইজেটটি যোগাযোগের কার্ড, অর্ডার স্ট্যাটাস আপডেট এবং কাজের টিকিটের বিজ্ঞপ্তির মতো ব্যবহারের ক্ষেত্রে উপযুক্ত।

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

নিচের একটি কার্ড যা একটি DecoratedText উইজেট সম্বলিত যা যোগাযোগের বিশদ বিবরণ প্রদর্শন করতে ব্যবহৃত হয়, যেমন ইমেল ঠিকানা, অনলাইন স্থিতি, ফোন নম্বর এবং ওয়েবসাইট:

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

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

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