متن و تصاویر را به کارت اضافه کنید

این صفحه نحوه افزودن و قالب بندی متن و تصاویر را به کارت ها توضیح می دهد.

برای کسب اطلاعات بیشتر درباره ساخت کارت‌ها، به ساخت کارت‌ها برای برنامه‌های گپ Google مراجعه کنید.

از Card Builder برای طراحی و پیش‌نمایش پیام‌ها و رابط‌های کاربری برای برنامه‌های چت استفاده کنید:

کارت ساز را باز کنید

پیش نیازها

یک برنامه Google Chat که برای ویژگی‌های تعاملی فعال است. برای ایجاد یک برنامه چت تعاملی، یکی از شروع سریع زیر را بر اساس معماری برنامه ای که می خواهید استفاده کنید، انجام دهید:

تصاویر یا نمادها را اضافه کنید

این بخش نحوه افزودن عناصر بصری به کارت ها مانند تصاویر، اجزای تصویر و آیکون ها را توضیح می دهد.

یک تصویر اضافه کنید

ویجت Image یک تصویر PNG یا JPG را نشان می دهد که روی یک URL HTTPS میزبانی شده است. عرض تصویر نمایش داده شده تمام عرض کارت نمایش داده شده را پر می کند و ارتفاع آن برای حفظ نسبت تصویر تنظیم می شود. ویجت Image از اقدامات onclick که هنگام کلیک کاربران روی تصویر رخ می دهد پشتیبانی می کند. نمونه ای از اقدامات onclick عبارتند از:

  • یک پیوند با OpenLink باز کنید، مانند یک پیوند به اسناد برنامه‌نویس Google Chat، https://developers.google.com/chat .
  • عملی را اجرا کنید که یک تابع سفارشی را اجرا می کند، مانند فراخوانی یک API.

ویجت Image دارای محدودیت های زیر است:

  • فقط تصاویر PNG و JPG پشتیبانی می شوند.
  • URL میزبان باید HTTPS باشد.
  • برای اطمینان از عملکرد کارت، حداکثر اندازه تصویر توصیه شده 2 مگابایت است.

کارت زیر شامل یک ویجت Image است. تصویر صفحه فرود مستندات برنامه‌نویس Google Chat را نمایش می‌دهد. هنگامی که کاربران روی تصویر کلیک می کنند، اسناد توسعه دهنده Google Chat در یک برگه جدید باز می شود.

یک جزء تصویر اضافه کنید

ویجت Image یک تصویر با یک ظاهر طراحی محدود است. ویجت imageCompent به شما امکان می دهد cropStyle و borderStyle را روی یک تصویر اعمال کنید.

مثال زیر دو تصویر را در یک شبکه نشان می دهد که در آن یکی از تصاویر برش داده شده است:

شما می توانید شکل یک جزء تصویر را با اعمال cropStyle تنظیم کنید. چندین شکل برای اعمال روی یک تصویر وجود دارد:

  • از SQUARE برای اعمال برش مربع استفاده کنید.
  • از CIRCLE برای اعمال یک برش دایره ای استفاده کنید.
  • از RECTANGLE_CUSTOM برای اعمال برش مستطیلی با نسبت ابعاد سفارشی استفاده کنید. برای مثال، می‌توانید از RECTANGLE_4_3 برای اعمال برش مستطیلی با نسبت تصویر 4:3 استفاده کنید.

مثال زیر پنج تصویر را در یک شبکه با cropStyle متفاوت به هر تصویر نشان می دهد:

یک نماد اضافه کنید

ویجت Icon یک نماد داخلی یا نماد سفارشی را نشان می دهد. برای انجام هر یک از موارد زیر، نمادهایی را به کارت ها اضافه می کنید:

  • نمایش یک نماد مستقل
  • یک نماد در مقابل متن مرتبط، به عنوان بخشی از ویجت DecoratedText نمایش دهید.
  • یک نماد را به عنوان یک دکمه تعاملی، به عنوان بخشی از ویجت ButtonList نمایش دهید.

کارت زیر شامل یک جزء Icon با یک نماد داخلی است:

جدول زیر نمادهای داخلی موجود برای پیام های کارت را فهرست می کند:

هواپیما نشانک
اتوبوس ماشین
ساعت CONFIRMATION_NUMBER_ICON
توضیحات دلار
ایمیل EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
هتل HOTEL_ROOM_TYPE
دعوت کنید MAP_PIN
عضویت MULTIPLE_PEOPLE
PERSON تلفن
RESTAURANT_ICON SHOPPING_CART
ستاره فروشگاه
بلیط قطار
VIDEO_CAMERA VIDEO_PLAY

متن را به کارت اضافه کنید

این بخش نحوه افزودن و قالب بندی متن در کارت را توضیح می دهد.

یک پاراگراف از متن قالب بندی شده اضافه کنید

ویجت TextParagraph یک پاراگراف از متن را با قالب بندی اختیاری HTML نمایش می دهد. هنگام تنظیم محتوای متنی این ویجت ها، فقط تگ های HTML مربوطه را اضافه کنید. برای اطلاعات بیشتر در مورد اینکه کدام برچسب‌های HTML پشتیبانی می‌شوند، به قالب‌بندی متنی که در کارت‌ها نشان داده می‌شود مراجعه کنید.

به عنوان مثال، قالب بندی زیر برای متن پاراگراف موجود است:

  • با تگ های HTML <b> , <u> , <i> متن پررنگ، زیرخط دار یا مورب را نمایش دهید.
  • پیوند به وب‌سایت‌ها با <a href="https://www.google.com">hyperlinks</a> HTML.
  • مقداری رنگ با <font color="#ea9999">font tags</font> HTML اضافه کنید.

هر ویجت TextParagraph به عنوان یک پاراگراف جدید ارائه می شود و می توان آن را شبیه به یک تگ HTML <p> در نظر گرفت.

کارت زیر شامل دو ویجت TextParagraph است که برای نمایش دو پاراگراف با قالب بندی ساده HTML استفاده می شود:

یک پاراگراف متنی جمع شونده اضافه کنید

پاراگراف‌های متنی جمع‌شونده به کاربران اجازه می‌دهند اطلاعات بیشتری را در صورت تقاضا نشان دهند. این ویجت برای ارائه محتوای طولانی یا جزئیات اضافی که هنگام انتخاب قابل بررسی است، عالی است و یک تجربه کاربری پویا و تعاملی ایجاد می کند.

نمایش متن با عناصر تزئینی

ویجت DecoratedText متنی را با چیدمان و قابلیت های اختیاری نمایش می دهد. به عنوان مثال:

  • یک icon در مقابل متن با startIcon نمایش دهید.
  • عنوانی را قبل از متن با topLabel نشان دهید.
  • یک دکمه قابل کلیک با button یا کلید قابل تعویض با switchControl اضافه کنید.

هنگامی که نیاز به ارائه اطلاعات به روشی آسان و تعاملی دارید، از ویجت DecoratedText استفاده کنید. ویجت برای موارد استفاده مانند کارت‌های تماس، به‌روزرسانی وضعیت سفارش و اعلان‌های بلیت کاری عالی است.

ویجت DecoratedText از قالب بندی متن ساده HTML پشتیبانی می کند. هنگام تنظیم محتوای متنی این ویجت ها، فقط تگ های HTML مربوطه را اضافه کنید. برای اطلاعات بیشتر در مورد اینکه کدام برچسب‌های HTML پشتیبانی می‌شوند، به قالب‌بندی متن کارت مراجعه کنید.

کارت زیر شامل یک ویجت DecoratedText است که برای نمایش اطلاعات تماس مانند آدرس ایمیل، وضعیت آنلاین، شماره تلفن و وب سایت استفاده می شود:

عیب یابی

وقتی یک برنامه یا کارت Google Chat خطایی را برمی‌گرداند، رابط Chat پیامی را نشان می‌دهد که می‌گوید «مشکلی پیش آمده است». یا "نمی توان به درخواست شما رسیدگی کرد." گاهی اوقات Chat UI هیچ پیام خطایی را نمایش نمی دهد، اما برنامه یا کارت Chat نتیجه غیرمنتظره ای ایجاد می کند. برای مثال، ممکن است پیام کارت ظاهر نشود.

اگرچه ممکن است پیام خطا در رابط کاربری گپ نمایش داده نشود، پیام‌های خطای توصیفی و داده‌های گزارش در دسترس هستند تا به شما کمک کنند هنگام فعال بودن ثبت خطا برای برنامه‌های گپ، خطاها را برطرف کنید. برای راهنمایی برای مشاهده، اشکال‌زدایی و رفع خطاها، به عیب‌یابی و رفع خطاهای Google Chat مراجعه کنید.