توضّح هذه الصفحة كيفية إضافة النصوص والصور إلى البطاقات وتنسيقها.
لمزيد من المعلومات حول إنشاء البطاقات، راجِع مقالة إنشاء بطاقات لتطبيقات Google Chat.
استخدِم "أداة إنشاء البطاقات" لتصميم واجهات المستخدم والمراسلة لتطبيقات Chat ومعاينتها:
افتح "أداة إنشاء البطاقات"المتطلبات الأساسية
تطبيق Google Chat تم إعداده لتلقّي أحداث التفاعل والردّ عليها لإنشاء تطبيق تفاعلي في Chat، أكمل أحد أدلة البدء السريع التالية استنادًا إلى بنية التطبيق التي تريد استخدامها:
- خدمة HTTP باستخدام Google Cloud Functions
- برمجة تطبيقات Google
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
إضافة صور أو رموز
يوضّح هذا القسم كيفية إضافة عناصر مرئية إلى البطاقات، مثل الصور ومكوّنات الصور والرموز.
إضافة صورة
تعرض 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 | وضع إشارة | ||
BUS | CAR | ||
الساعة | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | 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 وحلّها.
مواضيع ذات صلة
- عرض عيّنات لتطبيق Chat تستخدم البطاقات
Image
imageCompent
cropStyle
Icon
TextParagraph
DecoratedText