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

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

للاطّلاع على مزيد من المعلومات عن إنشاء البطاقات، راجِع مقالة إنشاء بطاقات لتطبيقات 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 وحلّها.