إضافة نصوص وصور إلى البطاقات

توضّح هذه الصفحة كيفية إضافة النصوص والصور إلى البطاقات وتنسيقها.

لمزيد من المعلومات حول إنشاء البطاقات، راجِع مقالة إنشاء بطاقات لتطبيقات Google Chat.

استخدِم "أداة إنشاء البطاقات" لتصميم واجهات المستخدم والمراسلة لتطبيقات Chat ومعاينتها:

افتح "أداة إنشاء البطاقات"

المتطلبات الأساسية

تطبيق Google Chat تم إعداده لتلقّي أحداث التفاعل والردّ عليها لإنشاء تطبيق تفاعلي في Chat، أكمل أحد أدلة البدء السريع التالية استنادًا إلى بنية التطبيق التي تريد استخدامها:

إضافة صور أو رموز

يوضّح هذا القسم كيفية إضافة عناصر مرئية إلى البطاقات، مثل الصور ومكوّنات الصور والرموز.

إضافة صورة

تعرض Image الأداة صورة بتنسيق PNG أو JPG مستضافة على عنوان URL يستخدم HTTPS. يملأ عرض الصورة المعروضة العرض الكامل للبطاقة المعروضة، ويتم ضبط ارتفاعها للحفاظ على نسبة العرض إلى الارتفاع الخاصة بالصورة. يتوافق عنصر واجهة المستخدم Image مع onclick إجراءات تحدث عندما ينقر المستخدمون على الصورة. تشمل أمثلة إجراءات onclick ما يلي:

  • افتح رابطًا تشعّبيًا باستخدام OpenLink، مثل رابط تشعّبي إلى مستندات المطوّرين في Google Chat، https://developers.google.com/chat.
  • تنفيذ إجراء يشغّل دالة مخصّصة، مثل طلب بيانات من واجهة برمجة تطبيقات

تخضع أداة 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 مع رمز مدمج:

يسرد الجدول التالي الرموز المضمّنة المتاحة لرسائل البطاقات:

AIRPLANE BOOKMARK
BUS CAR
الساعة CONFIRMATION_NUMBER_ICON
الوصف DOLLAR
البريد الإلكتروني EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
العضويات MULTIPLE_PEOPLE
الشخص PHONE
RESTAURANT_ICON SHOPPING_CART
STAR المتجر
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

إضافة نص إلى بطاقة

يوضّح هذا القسم كيفية إضافة نص وتنسيقه في بطاقة.

إضافة فقرة من النص المنسّق

تعرض أداة 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 كفقرة جديدة، ويمكن اعتبارها مشابهة لعلامة <p> في HTML.

في ما يلي بطاقة تتألف من عنصرَي TextParagraph واجهة مستخدم مستخدَمَين لعرض فقرتَين بتنسيق HTML بسيط:

إضافة فقرة نصية يمكن تصغيرها

تتيح فقرات النص القابلة للتصغير للمستخدمين عرض المزيد من المعلومات عند الطلب. هذه الأداة مثالية لعرض محتوى طويل أو تفاصيل إضافية يمكن استكشافها عند تحديدها، ما يؤدي إلى إنشاء تجربة ديناميكية وتفاعلية للمستخدم.

عرض نص يتضمّن عناصر زخرفية

تعرض الأداة DecoratedText نصًا مع تخطيط وإمكانات اختيارية. على سبيل المثال:

  • اعرض icon أمام النص مع startIcon.
  • عرض عنوان قبل النص باستخدام topLabel
  • أضِف زرًا قابلاً للنقر باستخدام button أو زر تبديل باستخدام switchControl.

استخدِم الأداة DecoratedText عندما تحتاج إلى عرض المعلومات بطريقة تفاعلية يسهل فهمها. تُعدّ الأداة مثالية لحالات الاستخدام، مثل بطاقات جهات الاتصال، وآخر المعلومات عن حالة الطلب، وإشعارات تذاكر العمل.

تتوافق أداة DecoratedText مع تنسيق HTML للنص البسيط. عند ضبط المحتوى النصي لهذه الأدوات، ما عليك سوى تضمين علامات HTML المناسبة. لمزيد من المعلومات حول علامات HTML المتوافقة، يُرجى الاطّلاع على تنسيق نص البطاقة.

في ما يلي بطاقة تتضمّن أداة DecoratedText مستخدَمة لعرض تفاصيل الاتصال، مثل عنوان البريد الإلكتروني وحالة الاتصال بالإنترنت ورقم الهاتف والموقع الإلكتروني:

تحديد المشاكل وحلّها

عندما يعرض تطبيق أو بطاقة في Google Chat خطأً، تعرض واجهة Chat رسالة تفيد بحدوث خطأ. أو "لم نتمكّن من معالجة طلبك". في بعض الأحيان، لا تعرض واجهة مستخدم Chat أي رسالة خطأ، ولكن ينتج تطبيق Chat أو البطاقة نتيجة غير متوقّعة، مثلاً، قد لا تظهر رسالة البطاقة.

على الرغم من أنّه قد لا تظهر رسالة خطأ في واجهة مستخدم Chat، تتوفّر رسائل خطأ وصفية وبيانات سجلّات لمساعدتك في إصلاح الأخطاء عند تفعيل تسجيل الأخطاء لتطبيقات Chat. للحصول على مساعدة في عرض الأخطاء وتصحيحها وتحديد المشاكل فيها، يُرجى الاطّلاع على تحديد مشاكل Google Chat وحلّها.