এই পৃষ্ঠাটি ব্যাখ্যা করে কিভাবে কার্ডে টেক্সট এবং ইমেজ যোগ এবং ফরম্যাট করা যায়।
কার্ড তৈরির বিষয়ে আরও জানতে, Google Chat অ্যাপের জন্য কার্ড তৈরি করুন দেখুন।
চ্যাট অ্যাপের জন্য মেসেজিং এবং ইউজার ইন্টারফেস ডিজাইন ও প্রিভিউ করতে কার্ড বিল্ডার ব্যবহার করুন:
কার্ড বিল্ডার খুলুনপূর্বশর্ত
একটি Google চ্যাট অ্যাপ যা ইন্টারেক্টিভ বৈশিষ্ট্যের জন্য সক্ষম। একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, আপনি যে অ্যাপ আর্কিটেকচার ব্যবহার করতে চান তার উপর ভিত্তি করে নিচের একটি দ্রুত শুরু করুন:
- গুগল ক্লাউড ফাংশন সহ HTTP পরিষেবা
- Google Apps স্ক্রিপ্ট
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
ছবি বা আইকন যোগ করুন
এই বিভাগে চিত্র, চিত্র উপাদান এবং আইকনের মতো কার্ডগুলিতে ভিজ্যুয়াল উপাদানগুলি কীভাবে যুক্ত করা যায় তা ব্যাখ্যা করে।
একটি ইমেজ যোগ করুন
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 ত্রুটিগুলি সমস্যা সমাধান এবং ঠিক করুন দেখুন৷
সম্পর্কিত বিষয়
- কার্ড ব্যবহার করে এমন চ্যাট অ্যাপের নমুনা দেখুন ।
-
Image
-
imageCompent
-
cropStyle
-
Icon
-
TextParagraph
-
DecoratedText