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

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

لمزيد من المعلومات حول إنشاء البطاقات، يُرجى الاطّلاع على مقالة إنشاء بطاقات لتطبيقات 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 المصغّر هو صورة ذات نمط محدود. يتيح لك تطبيق ImageComponent المصغّر تطبيق cropStyle وborderStyle على صورة.

يعرض المثال التالي صورتَين في شبكة، حيث تم اقتصاص إحدى الصورتَين:

يمكنك تعديل شكل مكوّن الصورة من خلال تطبيق cropStyle. هناك عدة أشكال يمكن تطبيقها على الصورة:

  • استخدِم SQUARE لتطبيق اقتصاص مربّع.
  • استخدِم CIRCLE لتطبيق اقتصاص دائري.
  • استخدِم RECTANGLE_CUSTOM لتطبيق اقتصاص مستطيل بنسبة عرض إلى ارتفاع مخصّصة. على سبيل المثال، يمكنك استخدام RECTANGLE_4_3 لتطبيق اقتصاص مستطيل بنسبة عرض إلى ارتفاع 4:3.

يعرض المثال التالي خمس صور في شبكة مع تطبيق cropStyle مختلف على كل صورة:

إضافة رمز

يمثّل عنصر واجهة المستخدم Icon إما رمزًا مدمجًا أو رمزًا مخصّصًا. يمكنك إضافة رموز إلى البطاقات لتنفيذ أيّ ممّا يلي:

  • عرض رمز مستقل
  • عرض رمز أمام النص ذي الصلة، كجزء من تطبيق مصغّر DecoratedText
  • عرض رمز كزر تفاعلي، كجزء من تطبيق مصغّر ButtonList

في ما يلي بطاقة تتألف من مكوّن Icon مع رمز مدمج:

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

AIRPLANE BOOKMARK
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
الوصف DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
العضوية MULTIPLE_PEOPLE
PERSON 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 وحلّها.