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

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

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

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

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

পূর্বশর্ত

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

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

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

একটি ছবি যোগ করুন

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

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

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

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

The following is a card consisting of an Image widget. It displays the Google Chat developer documentation landing page image. When users click the image, the Google Chat developer documentation opens in a new tab.

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

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

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

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

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

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

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

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

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

নিম্নলিখিতটি একটি কার্ড, যা একটি Icon কম্পোনেন্ট এবং এতে একটি অন্তর্নির্মিত আইকন রয়েছে:

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

বিমান বুকমার্ক
বাস গাড়ি
ঘড়ি নিশ্চিতকরণ_নম্বর_আইকন
বর্ণনা ডলার
ইমেইল ইভেন্ট_সিট
ফ্লাইট_আগমন ফ্লাইট_প্রস্থান
হোটেল হোটেল_রুম_টাইপ
আমন্ত্রণ ম্যাপ_পিন
সদস্যপদ একাধিক ব্যক্তি
ব্যক্তি ফোন
রেস্টুরেন্ট_আইকন শপিং কার্ট
তারকা দোকান
টিকিট ট্রেন
ভিডিও_ক্যামেরা ভিডিও_প্লে

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

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

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

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

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

  • HTML <b> , <u> , <i> ট্যাগ ব্যবহার করে টেক্সটকে বোল্ড, আন্ডারলাইন বা ইটালিক করুন।
  • এইচটিএমএল <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 উইজেট রয়েছে, যা ইমেল ঠিকানা, অনলাইন স্ট্যাটাস, ফোন নম্বর এবং ওয়েবসাইটের মতো যোগাযোগের বিবরণ প্রদর্শন করতে ব্যবহৃত হয়:

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

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

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