কার্ডে টেক্সট ও ছবি যোগ করা

কার্ডে কীভাবে টেক্সট ও ছবি যোগ ও ফর্ম্যাট করতে হয় তা এই পৃষ্ঠায় ব্যাখ্যা করা হয়েছে।

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

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

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

পূর্বশর্ত

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

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

এই বিভাগে কার্ডে কীভাবে ছবি, ছবির কম্পোনেন্ট ও আইকনের মতো ভিজ্যুয়াল এলিমেন্ট যোগ করতে হয় তা ব্যাখ্যা করা হয়েছে।

ছবি যোগ করা

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

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

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

  • শুধু PNG এবং JPG ফর্ম্যাটের ছবি কাজ করে।
  • হোস্ট URL অবশ্যই HTTPS হতে হবে।
  • কার্ডের পারফর্ম্যান্স ভালো রাখতে, সাজেস্ট করা ছবির সাইজ সর্বাধিক ২ এমবি।

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

ছবির কম্পোনেন্ট যোগ করুন

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

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

আপনি cropStyle প্রয়োগ করে কোনও ইমেজ কম্পোনেন্টের শেপ অ্যাডজাস্ট করতে পারবেন। ছবিতে প্রয়োগ করার জন্য বিভিন্ন আকৃতি আছে:

  • বর্গাকার ক্রপ প্রয়োগ করতে SQUARE ব্যবহার করুন।
  • বৃত্তাকার ক্রপ প্রয়োগ করতে CIRCLE ব্যবহার করুন।
  • কাস্টম অ্যাস্পেক্ট রেশিও সহ আয়তাকার ক্রপ প্রয়োগ করতে RECTANGLE_CUSTOM ব্যবহার করুন। যেমন, আপনি RECTANGLE_4_3 ব্যবহার করে ৪:৩ অ্যাস্পেক্ট রেশিওতে আয়তাকার ক্রপ প্রয়োগ করতে পারবেন।

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

একটি আইকন যুক্ত করুন

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

  • স্ট্যান্ডঅ্যালোন আইকন দেখান।
  • DecoratedText উইজেটের অংশ হিসেবে, সম্পর্কিত টেক্সটের সামনে একটি আইকন দেখান।
  • ButtonList উইজেটের অংশ হিসেবে, ইন্টার‍্যাক্টিভ বোতাম হিসেবে একটি আইকন দেখান।

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

কার্ড মেসেজের জন্য উপলভ্য বিল্ট-ইন আইকনগুলি নিম্নলিখিত টেবিলে তালিকাভুক্ত করা হয়েছে:

AIRPLANE BOOKMARK
BUS গাড়ি
CLOCK CONFIRMATION_NUMBER_ICON
বিবরণ DOLLAR
ইমেল EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
আমন্ত্রণ জানান MAP_PIN
মেম্বারশিপ MULTIPLE_PEOPLE
ব্যক্তি ফোন
RESTAURANT_ICON SHOPPING_CART
STAR STORE
টিকিট ট্রেন
VIDEO_CAMERA VIDEO_PLAY

কার্ডে টেক্সট যোগ করা

এই বিভাগে কার্ডে কীভাবে টেক্সট যোগ ও ফর্ম্যাট করতে হয় তা ব্যাখ্যা করা হয়েছে।

ফর্ম্যাট করা টেক্সটের একটি অনুচ্ছেদ যোগ করুন

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 Chat অ্যাপ বা কার্ড কোনও সমস্যার মেসেজ দেখালে, Chat ইন্টারফেস "কোনও সমস্যা হয়েছে" মেসেজ দেখায়। অথবা "আপনার অনুরোধ প্রসেস করা যায়নি।" কখনও কখনও Chat UI কোনও ত্রুটি মেসেজ দেখায় না, কিন্তু Chat অ্যাপ বা কার্ড অপ্রত্যাশিত ফলাফল দেখায়; যেমন, কার্ড মেসেজ হয়ত দেখা যায় না।

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