این صفحه نحوه ساخت اجزا و ساختار یک کارت را شرح میدهد. کارتها رابطهای کاربری هستند که برنامههای Google Chat میتوانند از آنها برای ارائه و جمعآوری اطلاعات از کاربران Chat استفاده کنند. برنامههای Chat میتوانند کارتها را در رابطهای زیر بسازند و نمایش دهند:
- پیامهایی که حاوی یک یا چند کارت هستند.
- صفحات اصلی ، که کارتی است که از برگه «خانه» در پیامهای مستقیم با برنامه چت ظاهر میشود.
- دیالوگها ، که کارتهایی هستند که در یک پنجره جدید از پیامها و صفحات اصلی باز میشوند.
در این صفحه، با اجزای زیر از یک کارت آشنا میشوید:
- سربرگها ، که معمولاً شامل عنوان کارت یا بخش کارت هستند.
- بخشها ، که بدنه اصلی کارت را تشکیل میدهند، شامل ابزارکها و سایر عناصر تعاملی. در یک بخش کارت، میتوانید ساختار بیشتری به کارت اضافه کنید، از جمله ستونها و شبکهها.
- پاورقیهای ثابت ، که در پایین پنجرههای محاورهای ظاهر میشوند تا عناصر رابط کاربری ثابت، مانند دکمهها، را نمایش دهند.
پیشنیازها
یک برنامه گوگل چت که برای دریافت و پاسخ به رویدادهای تعاملی پیکربندی شده است. برای ایجاد یک برنامه چت تعاملی، بر اساس معماری برنامهای که میخواهید استفاده کنید، یکی از مراحل شروع سریع زیر را انجام دهید:
- سرویس HTTP با توابع Google Cloud
- اسکریپت برنامههای گوگل
- تجربه کاربری گوگل کلود دیالوگ فلو
- میخانه/زیرمجموعه گوگل کلود
از Card Builder برای طراحی و پیشنمایش پیامرسانی و رابطهای کاربری برای برنامههای چت استفاده کنید:
سازنده کارت را باز کنیداضافه کردن سربرگ
ویجت CardHeader نشاندهندهی سربرگ یک کارت است. سربرگها میتوانند شامل عنوان، زیرعنوان و تصویر آواتار برای کارت شما باشند.
مثال زیر یک CardHeader است:
یک یا چند بخش کارت اضافه کنید
ویجت CardSection یک ظرف سطح بالا درون یک کارت است. شما از بخشهای کارت برای گروهبندی ویجتها درون یک کارت استفاده میکنید. برای هر بخش کارت، میتوانید یک سربرگ و یک یا چند ویجت قرار دهید.
در ادامه مثالی از یک CardSection که شامل دو ویجت textParagraph است، آورده شده است:
یک جداکننده افقی بین ابزارکها اضافه کنید
ویجت divider ، خطی افقی را در عرض یک کارت، بین ویجتهای عمودی چیده شده، نمایش میدهد. این خط یک جداکننده بصری است که به کاربران کمک میکند تا بین یک ویجت و ویجت دیگر تمایز قائل شوند و اسکن و درک کارتها را آسانتر میکند.
در زیر کارتی متشکل از ویجت divider بین انواع دیگر ویجتها را مشاهده میکنید:
اضافه کردن ستونها
ویجت columns حداکثر ۲ ستون را در یک کارت نمایش میدهد. میتوانید به هر ستون ویجت اضافه کنید؛ ویجتها به ترتیبی که مشخص شدهاند ظاهر میشوند. برای اضافه کردن بیش از ۲ ستون یا استفاده از ردیفها، از ویجت grid استفاده کنید.
ارتفاع هر ستون توسط ستون بلندتر تعیین میشود. برای مثال، اگر ستون اول از ستون دوم بلندتر باشد، هر دو ستون ارتفاع ستون اول را دارند. از آنجا که هر ستون میتواند شامل تعداد متفاوتی از ویجتها باشد، نمیتوانید ردیف تعریف کنید یا ویجتها را بین ستونها تراز کنید.
مثال زیر یک کارت با ویجت columns را نمایش میدهد که دارای ۲ ستون متن است. برای مشاهده طرحبندی ستونها و جمع کردن نمونه کد، روی Collapse کلیک کنید. وقتی فضا محدود است، مانند مثال زیر، ستون دوم زیر ستون اول قرار میگیرد.
عرض ستون را تعریف کنید
ستونها در کنار هم نمایش داده میشوند. میتوانید عرض هر ستون را با استفاده از فیلد horizontalSizeStyle تنظیم کنید. اگر عرض صفحه نمایش کاربر خیلی باریک باشد، ستون دوم زیر ستون اول قرار میگیرد:
- در وب، ستون دوم در صورتی که عرض صفحه نمایش کمتر یا مساوی ۴۸۰ پیکسل باشد، جمع میشود.
- در دستگاههای iOS، اگر عرض صفحه نمایش کمتر یا مساوی ۳۰۰ pt باشد، ستون دوم جمع میشود.
- در دستگاههای اندروید، اگر عرض صفحه نمایش کمتر یا مساوی ۳۲۰ dp باشد، ستون دوم جمع میشود.
مثال زیر یک کارت با ویجت columns را نمایش میدهد که شامل ۲ ستون متن با ۴ آیتم در هر ستون است. هر آیتم در ستونها دارای horizontalSizeStyle است تا میزان فضای اشغال شده توسط متن در هر ستون را تغییر دهد:
- اولین پاراگراف متنی از
FILL_MINIMUM_SPACEبرای پر کردن حداکثر 30٪ از عرض کارت استفاده میکند. - پاراگراف متنی دوم از
FILL_AVAILABLE_SPACEبرای پر کردن فضای موجود در عرض کارت استفاده میکند. در این مثال، 70٪ از عرض کارت را پر میکند. - پاراگراف متنی سوم،
horizontalSizeStyleتعریف نمیکند، بنابراین به طور پیشفرض فضای موجود در فضای کارت را پر میکند. - پاراگراف متنی چهارم از
FILL_MINIMUM_SPACEبرای پر کردن حداکثر 30٪ از عرض کارت استفاده میکند.
تراز افقی یک ستون را تعریف کنید
شما میتوانید با تعریف فیلد horizontalAligment ویجتها را به صورت افقی در سمت چپ، راست یا مرکز یک ستون تراز کنید. اگر فیلد horizontalAlignment تعریف نشده باشد، ویجتها در یک ستون در سمت چپ تراز میشوند.
مثال زیر متن درون یک ستون را به صورت افقی در سمت چپ تراز میکند:
مثال زیر متن درون یک ستون را به صورت افقی در مرکز تراز میکند:
مثال زیر متن درون یک ستون را به صورت افقی در سمت راست تراز میکند:
تراز عمودی یک ستون را تعریف کنید
شما میتوانید با تعریف فیلد verticalAlignment ویجتها را به صورت عمودی در بالا، پایین یا مرکز یک ستون تراز کنید. اگر فیلد verticalAlignment تعریف نشده باشد، ویجتهای موجود در یک ستون در بالا تراز میشوند.
مثال زیر متن درون یک ستون را به صورت عمودی و در بالا تراز میکند:
مثال زیر متن درون یک ستون را به صورت عمودی در مرکز تراز میکند:
مثال زیر متن درون یک ستون را در پایین به صورت عمودی تراز میکند:
اضافه کردن یک شبکه برای نمایش مجموعهای از آیتمها
ویجت grid گریدی با مجموعهای از آیتمها را نمایش میدهد. یک گرید از هر تعداد ستون و آیتم پشتیبانی میکند. تعداد ردیفها با تقسیم آیتمها بر ستونها تعیین میشود. یک گرید با ۱۰ آیتم و ۲ ستون، ۵ ردیف دارد. یک گرید با ۱۱ آیتم و ۲ ستون، ۶ ردیف دارد.
این ویجت از پیشنهادها پشتیبانی میکند که به کاربران کمک میکند دادههای یکنواختی را وارد کنند، و از اقدامات هنگام تغییر پشتیبانی میکند، Actions که هنگام ایجاد تغییر در فیلد ورودی متن اجرا میشوند، مانند اضافه کردن یا حذف متن توسط کاربر.
مثال زیر یک جدول دو ستونی با یک آیتم است:
برای تعریف محل نمایش متن همراه با تصویر در یک شبکه، میتوانید فیلد gridItemLayout را مشخص کنید. این فیلد به شما امکان میدهد تعیین کنید که متن در بالا یا پایین آیتم در شبکه نمایش داده شود. اگر gridItemLayout تعریف نشده باشد، متن به طور پیشفرض در زیر آیتم در شبکه نمایش داده میشود.
مثال زیر یک جدول سه ستونی است که در هر جدول متن و تصویر قرار دارد. جدول اول متنی را تعریف میکند که بالای تصویر ظاهر میشود، جدول دوم متنی را تعریف میکند که زیر تصویر ظاهر میشود و جدول سوم موقعیت متن را تعریف نمیکند.
اضافه کردن حاشیه به یک جدول یا ستون
برای مواردی که در یک column یا یک ویجت grid ظاهر میشوند، میتوانید با تعریف یک فیلد borderType و یک فیلد borderStyle ، به این عناصر رابط کاربری حاشیه اضافه کنید. اگر هیچ فیلد borderStyle تعریف نشده باشد، به طور پیشفرض بدون حاشیه نمایش داده میشود. میتوانید یک borderType تعریف کنید تا روی همه موارد درون یک ویجت اعمال شود یا استایلبندی را روی هر مورد جداگانه درون یک ویجت اعمال کنید.
مثال زیر یک جدول دو ستونی است که در هر جدول یک تصویر وجود دارد و نوع، سبک و رنگ حاشیه برای اعمال به همه موارد درون جدول تعریف شده است.
مثال زیر یک جدول سه ستونی است که در هر جدول یک تصویر وجود دارد و سبک و نوع حاشیه به صورت جداگانه تعریف شده است. تصویر اول دارای حاشیهای به صورت STROKE است. تصویر دوم دارای حاشیهای به صورت NO_BORDER است. تصویر سوم هیچ حاشیهای ندارد.
یک چرخ فلک اضافه کنید
ویجت Carousel مجموعهای از اشیاء CarouselCard را نشان میدهد که میتوانند روی صفحه نمایش داده شوند و از آن خارج شوند. میتوانید چندین ویجت به هر CarouselCard اضافه کنید.
یک پاورقی دائمی اضافه کنید
ویجت CardFixedFooter نشاندهندهی پاورقی یک پیام محاورهای ارسال شده توسط یک برنامهی چت است. پاورقیها میتوانند شامل یک دکمهی اصلی و یک دکمهی فرعی باشند.
ویجت CardFixedFooter فقط برای پنجرههای محاورهای در دسترس است.
در زیر مثالی از ویجت CardFixedFooter با دو دکمه آمده است:
عیبیابی
وقتی یک برنامه یا کارت چت گوگل خطایی را برمیگرداند، رابط چت پیامی با عنوان «مشکلی پیش آمده است» یا «درخواست شما قابل پردازش نیست» نمایش میدهد. گاهی اوقات رابط کاربری چت هیچ پیام خطایی را نمایش نمیدهد، اما برنامه یا کارت چت نتیجه غیرمنتظرهای را ایجاد میکند؛ برای مثال، ممکن است پیام کارت ظاهر نشود.
اگرچه ممکن است پیام خطا در رابط کاربری چت نمایش داده نشود، پیامهای خطای توصیفی و دادههای گزارش برای کمک به شما در رفع خطاها هنگام فعال بودن ثبت خطا برای برنامههای چت در دسترس هستند. برای کمک به مشاهده، اشکالزدایی و رفع خطاها، به عیبیابی و رفع خطاهای گوگل چت مراجعه کنید.