این صفحه نحوه ساخت اجزا و ساختار یک کارت را شرح می دهد. کارت‌ها رابط‌های کاربری هستند که برنامه‌های چت Google می‌توانند از آنها برای ارائه و جمع‌آوری اطلاعات از کاربران چت استفاده کنند. برنامه‌های چت می‌توانند کارت‌هایی را در رابط‌های زیر بسازند و نمایش دهند:
- پیام هایی که حاوی یک یا چند کارت هستند.
- صفحات اصلی ، کارتی است که از برگه صفحه اصلی در پیام های مستقیم با برنامه چت ظاهر می شود.
- دیالوگ ها ، کارت هایی هستند که در یک پنجره جدید از پیام ها و صفحات اصلی باز می شوند.
در این صفحه با اجزای زیر یک کارت آشنا می شوید:
- سرصفحه ها ، که معمولاً حاوی عنوان یک کارت یا بخش کارت هستند.
- بخش هایی که بدنه اصلی کارت شامل ویجت ها و سایر عناصر تعاملی را تشکیل می دهند. در بخش کارت، می توانید ساختار بیشتری از جمله ستون ها و شبکه ها را به کارت اضافه کنید.
- پاورقی های ثابت ، که در پایین دیالوگ ها ظاهر می شوند تا عناصر رابط کاربری دائمی مانند دکمه ها را نمایش دهند.
پیش نیازها
یک برنامه Google Chat که برای ویژگی‌های تعاملی فعال است. برای ایجاد یک برنامه چت تعاملی، یکی از شروع سریع زیر را بر اساس معماری برنامه ای که می خواهید استفاده کنید، انجام دهید:
- سرویس HTTP با توابع Google Cloud
- اسکریپت Google Apps
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
از Card Builder برای طراحی و پیش‌نمایش پیام‌ها و رابط‌های کاربری برای برنامه‌های چت استفاده کنید:
کارت ساز را باز کنیدیک هدر اضافه کنید
ویجت CardHeader نشان دهنده هدر یک کارت است. هدرها می توانند شامل عنوان، زیرنویس و تصویر آواتار برای کارت شما باشند.
نمونه زیر یک نمونه از CardHeader است:
یک یا چند بخش کارت اضافه کنید
ویجت CardSection یک ظرف سطح بالا در کارت است. شما از بخش های کارت برای گروه بندی ویجت ها در کارت استفاده می کنید. برای هر بخش کارت، می توانید یک هدر و یک یا چند ویجت اضافه کنید.
نمونه زیر نمونه ای از CardSection است که شامل دو ویجت textParagraph است:
یک تقسیم کننده افقی بین ویجت ها اضافه کنید
ویجت divider یک خط افقی را نشان می‌دهد که عرض یک کارت را بین ویجت‌هایی که به صورت عمودی روی هم چیده شده‌اند، نشان می‌دهد. این خط یک تقسیم‌کننده بصری است که به کاربران کمک می‌کند بین یک ویجت و ویجت دیگر تمایز قائل شوند و اسکن و درک کارت‌ها را آسان‌تر کند.
کارت زیر شامل ویجت divider بین انواع دیگر ویجت‌ها است:
ستون ها را اضافه کنید
ویجت columns حداکثر ۲ ستون را در یک کارت نشان می‌دهد. شما می توانید ویجت ها را به هر ستون اضافه کنید. ویجت ها به ترتیبی که مشخص شده اند ظاهر می شوند. برای گنجاندن بیش از 2 ستون یا استفاده از سطرها، از ویجت grid استفاده کنید.
ارتفاع هر ستون توسط ستون بلندتر تعیین می شود. به عنوان مثال، اگر ستون اول از ستون دوم بلندتر باشد، هر دو ستون ارتفاع ستون اول را دارند. از آنجایی که هر ستون می تواند دارای تعداد متفاوتی از ویجت ها باشد، نمی توانید ردیف ها را تعریف کنید یا ویجت ها را بین ستون ها تراز کنید.
مثال زیر یک کارت با ویجت columns را نشان می دهد که دارای 2 ستون متن است. برای مشاهده فقط طرح بندی ستون ها و جمع کردن نمونه کد، روی Collapse کلیک کنید. هنگامی که فضا محدود است، مانند مثال زیر، ستون دوم زیر ستون اول قرار می گیرد.
عرض ستون را تعریف کنید
ستون ها در کنار هم نمایش داده می شوند. می توانید عرض هر ستون را با استفاده از فیلد horizontalSizeStyle سفارشی کنید. اگر عرض صفحه کاربر خیلی باریک باشد، ستون دوم زیر ستون اول قرار می گیرد:
- در وب، اگر عرض صفحه کمتر یا مساوی 480 پیکسل باشد، ستون دوم بسته می شود.
- در دستگاه‌های iOS، اگر عرض صفحه کمتر یا مساوی 300 pt باشد، ستون دوم بسته می‌شود.
- در دستگاه‌های Android، اگر عرض صفحه کمتر یا مساوی 320 dp باشد، ستون دوم بسته می‌شود.
مثال زیر کارتی را با ویجت columns نشان می‌دهد که دارای 2 ستون متن با 4 مورد در ستون‌ها است. هر آیتم در ستون ها دارای horizontalSizeStyle است که به منظور دستکاری فضایی که متن هر ستون را پر می کند، اعمال می شود:
- اولین پاراگراف متنی از
FILL_MINIMUM_SPACEاستفاده می کند تا بیش از 30٪ از عرض کارت را پر کند. - پاراگراف متن دوم از
FILL_AVAILABLE_SPACEبرای پر کردن فضای موجود در عرض کارت استفاده می کند. در این مثال 70 درصد از عرض کارت را پر می کند. - سومین پاراگراف متنی
horizontalSizeStyleتعریف نمی کند، بنابراین به طور پیش فرض فضای موجود فضای کارت را پر می کند. - چهارمین پاراگراف متنی
FILL_MINIMUM_SPACEبرای پر کردن بیش از 30٪ از عرض کارت استفاده می کند.
تراز افقی یک ستون را تعریف کنید
می‌توانید با تعریف فیلد horizontalAligment ، ویجت‌ها را به صورت افقی در سمت چپ، راست یا مرکز یک ستون تراز کنید. اگر فیلد horizontalAlignment تعریف نشده باشد، ویجت ها در یک ستون به سمت چپ تراز می شوند.
مثال زیر به صورت افقی متن را در یک ستون در سمت چپ تراز می کند:
مثال زیر متن را در یک ستون در مرکز به صورت افقی تراز می کند:
مثال زیر به صورت افقی متن را در یک ستون به سمت راست تراز می کند:
تراز عمودی یک ستون را تعریف کنید
می‌توانید با تعریف فیلد verticalAlignment ، ویجت‌ها را به صورت عمودی در بالا، پایین یا مرکز یک ستون تراز کنید. اگر قسمت verticalAlignment تعریف نشده باشد، ویجت‌های یک ستون در بالا تراز می‌شوند.
مثال زیر متن را در یک ستون به صورت عمودی به سمت بالا تراز می کند:
مثال زیر متن را در یک ستون در مرکز به صورت عمودی تراز می کند:
مثال زیر متن را به صورت عمودی در یک ستون در پایین تراز می کند:
برای نمایش مجموعه ای از موارد، یک شبکه اضافه کنید
ویجت grid یک شبکه با مجموعه ای از آیتم ها را نمایش می دهد. یک شبکه از هر تعداد ستون و آیتم پشتیبانی می کند. تعداد سطرها بر اساس موارد تقسیم بر ستون تعیین می شود. یک شبکه با 10 مورد و 2 ستون دارای 5 ردیف است. یک شبکه با 11 مورد و 2 ستون دارای 6 ردیف است.
ویجت از پیشنهادهایی پشتیبانی می‌کند که به کاربران کمک می‌کند داده‌های یکنواخت را وارد کنند، و اقدامات در حال تغییر، که Actions هستند که هنگام ایجاد تغییر در قسمت ورودی متن اجرا می‌شوند، مانند افزودن یا حذف متن توسط کاربر.
مثال زیر یک شبکه 2 ستونی با یک مورد است:
برای تعیین محل نمایش متن با یک تصویر در یک شبکه، می توانید فیلد gridItemLayout را مشخص کنید. این فیلد به شما امکان می دهد تعیین کنید که آیا متن در بالا یا زیر آیتم در شبکه نمایش داده می شود. اگر gridItemLayout تعریف نشده باشد، متن به طور پیش فرض در زیر آیتم در شبکه نمایش داده می شود.
مثال زیر یک شبکه سه ستونی با متن و یک تصویر در هر شبکه است. شبکه اول متن را برای نمایش در بالای تصویر تعریف می کند، شبکه دوم متن را برای نمایش در زیر تصویر تعریف می کند، و شبکه سوم موقعیت متن را مشخص نمی کند.
یک حاشیه به یک شبکه یا ستون اضافه کنید
برای مواردی که در یک column یا ویجت grid ظاهر می‌شوند، می‌توانید با تعریف یک فیلد borderType و یک فیلد borderStyle ، یک حاشیه به این عناصر رابط کاربری اضافه کنید. اگر فیلد borderStyle تعریف نشده باشد، به طور پیش‌فرض بدون حاشیه نشان داده می‌شود. شما می توانید یک borderType برای اعمال به همه موارد داخل یک ویجت یا اعمال یک ظاهر طراحی برای هر آیتم جداگانه در یک ویجت تعریف کنید.
مثال زیر یک شبکه 2 ستونی با یک تصویر در هر شبکه است که در آن نوع حاشیه، سبک و رنگ برای اعمال همه موارد داخل شبکه تعریف شده است.
مثال زیر یک شبکه 3 ستونی با یک تصویر در هر شبکه است و سبک و نوع حاشیه به صورت جداگانه تعریف شده است. تصویر اول دارای یک حاشیه است که به عنوان STROKE تعریف شده است. تصویر دوم دارای حاشیه ای است که به عنوان NO_BORDER تعریف شده است. تصویر سوم هیچ حاشیه ای تعریف نشده است.
یک چرخ فلک اضافه کنید
ویجت Carousel مجموعه ای از اشیاء CarouselCard را نشان می دهد که می توانند روی صفحه و خارج از صفحه اسکرول شوند. می توانید چندین ویجت را به هر CarouselCard اضافه کنید.
یک پاورقی ماندگار اضافه کنید
ویجت CardFixedFooter نشان دهنده پاورقی یک پیام محاوره ای است که توسط یک برنامه چت ارسال می شود. پاورقی ها می توانند شامل یک دکمه اصلی و یک دکمه ثانویه باشند.
ویجت CardFixedFooter فقط برای گفتگوها در دسترس است.
نمونه زیر یک ویجت CardFixedFooter با دو دکمه است:
عیب یابی
وقتی یک برنامه یا کارت Google Chat خطایی را برمی‌گرداند، رابط Chat پیامی را نشان می‌دهد که می‌گوید «مشکلی پیش آمده است». یا "نمی توان به درخواست شما رسیدگی کرد." گاهی اوقات Chat UI هیچ پیام خطایی را نمایش نمی دهد، اما برنامه یا کارت Chat نتیجه غیرمنتظره ای ایجاد می کند. برای مثال، ممکن است پیام کارت ظاهر نشود.
اگرچه ممکن است پیام خطا در رابط کاربری گپ نمایش داده نشود، پیام‌های خطای توصیفی و داده‌های گزارش در دسترس هستند تا به شما کمک کنند هنگام فعال بودن ثبت خطا برای برنامه‌های گپ، خطاها را برطرف کنید. برای راهنمایی برای مشاهده، اشکال‌زدایی و رفع خطاها، به عیب‌یابی و رفع خطاهای Google Chat مراجعه کنید.