توضّح هذه الصفحة كيفية إنشاء مكونات البطاقة وتنظيمها. البطاقات هي واجهة مستخدم يمكن لتطبيقات Google Chat استخدامها لعرض معلومات من مستخدمي Chat وجمعها. يمكن لتطبيقات Chat إنشاء وعرض البطاقات في الواجهات التالية:
- الرسائل التي تحتوي على بطاقة واحدة أو أكثر
- الصفحات الرئيسية: وهي بطاقة تظهر من علامة التبويب الصفحة الرئيسية في الرسائل المباشرة باستخدام تطبيق Chat.
- المحادثات، وهي بطاقات يتم فتحها في نافذة جديدة من الرسائل والصفحات الرئيسية
في هذه الصفحة، ستتعرّف على المكوّنات التالية للبطاقة:
- العناوين، التي تحتوي عادةً على عنوان بطاقة أو قسم بطاقة
- الأقسام التي تشكّل النص الرئيسي للبطاقة، بما في ذلك التطبيقات المصغّرة والعناصر التفاعلية الأخرى في أحد أقسام البطاقة، يمكنك إضافة المزيد من البنية إلى البطاقة، بما في ذلك الأعمدة والشبكات.
- التذييلات الثابتة التي تظهر في أسفل المربّعات الحوارية لعرض عناصر واجهة مستخدِم دائمة، مثل الأزرار
المتطلبات الأساسية
تطبيق Google Chat مفعَّل فيه الميزات التفاعلية لإنشاء تطبيق Chat تفاعلي، أكمِل أحد عمليات البدء السريع التالية استنادًا إلى بنية التطبيق التي تريد استخدامها:
- خدمة HTTP باستخدام Google Cloud Functions
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
استخدِم "أداة إنشاء البطاقات" لتصميم واجهتَي المستخدم والرسائل ومعاينتهما في تطبيقات Chat:
افتح "أداة إنشاء البطاقات".إضافة عنوان
تمثل الأداة CardHeader
عنوان البطاقة. يمكن أن تتضمّن العناوين
عنوانًا وعنوانًا فرعيًا وصورة رمزية لبطاقتك.
في ما يلي مثال على CardHeader:
إضافة قسم واحد أو أكثر من أقسام البطاقة
أداة CardSection هي حاوية عالية المستوى ضمن بطاقة. يمكنك استخدام
أقسام البطاقة لتجميع التطبيقات المصغّرة داخل البطاقة. في كل قسم من أقسام البطاقة، يمكنك تضمين عنوان وأداة واحدة أو أكثر.
في ما يلي مثال على CardSection يحتوي على عنصرَي textParagraph
صغيرَين:
إضافة فاصل أفقي بين التطبيقات المصغّرة
تعرِض أداة
divider
خطًا أفقيًا على مستوى عرض البطاقة
بين التطبيقات المصغّرة المكدسة عموديًا. يُعدّ الخط مقسمًا مرئيًا يساعد
المستخدمين في التمييز بين التطبيق المصغّر وآخر، ما يسهّل فحص البطاقة
وفهمها.
في ما يلي بطاقة تتألف من تطبيق مصغّر divider بين أنواع أخرى من التطبيقات المصغّرة:
إضافة أعمدة
تعرِض شاشة التطبيقات المصغّرة
columns
ما يصل إلى عمودَين في البطاقة. يمكنك إضافة
تطبيقات مصغّرة إلى كل عمود، وستظهر التطبيقات المصغّرة بالترتيب المحدّد.
لتضمين أكثر من عمودَين أو لاستخدام الصفوف، استخدِم التطبيق المصغّر grid.
يتم تحديد ارتفاع كل عمود حسب العمود الأطول. على سبيل المثال، إذا كان عمود الأول أطول من العمود الثاني، يكون لكلا العمودين الارتفاع نفسه الذي يخصّ العمود الأول. وبما أنّ كل عمود يمكن أن يحتوي على عدد مختلف من التطبيقات المصغّرة، لا يمكنك تحديد الصفوف أو محاذاة التطبيقات المصغّرة بين الأعمدة.
يعرض المثال التالي بطاقة تتضمّن تطبيقًا مصغّرًا columns يعرض
عمودَين من النص. لعرض تنسيق الأعمدة فقط وتصغير رمز
عيّنة، انقر على تصغير.
عندما تكون المساحة محدودة، كما هو موضّح في المثال التالي، يتم عرض
العمود الثاني أسفل العمود الأول.
تحديد عرض العمود
يتم عرض الأعمدة جنبًا إلى جنب. يمكنك تخصيص عرض كل عمود
باستخدام
حقل horizontalSizeStyle.
إذا كان عرض شاشة المستخدم ضيقًا جدًا، يتمّ عرض العمود الثاني أسفل
الأول:
- على الويب، يتمّ عرض العمود الثاني بشكل مُعدَّل إذا كان عرض الشاشة أقلّ من أو يساوي 480 بكسل.
- على أجهزة iOS، يتمّ عرض بيانات العمود الثاني على عدة أسطر إذا كان عرض الشاشة أقل من 300 نقطة أو يساويها.
- على أجهزة Android، يتمّ عرض العمود الثاني على عدة أسطر إذا كان عرض الشاشة أقل من أو يساوي 320 وحدة بكسل مستقلة الكثافة.
يعرض المثال التالي بطاقة تتضمّن تطبيقًا مصغّرًا columns يعرض
عمودَين من النص يتضمّنان 4 عناصر في الأعمدة. تم تطبيق horizontalSizeStyle على كل عنصر في الأعمدة من أجل التحكّم في المساحة التي يملؤها النص في كل عمود:
- تستخدِم الفقرة النصية الأولى
FILL_MINIMUM_SPACEلملء ما لا يزيد عن 30% من عرض البطاقة. - تستخدِم الفقرة النصية الثانية الرمز
FILL_AVAILABLE_SPACEلملء المساحة المتاحة في عرض البطاقة. في هذا المثال، تم ملء 70% من عرض البطاقة. - لا تحدّد الفقرة النصية الثالثة
horizontalSizeStyle، لذا يتم تلقائيًا ملء المساحة المتوفّرة في البطاقة. - تستخدِم الفقرة النصية الرابعة
FILL_MINIMUM_SPACEلملء ما لا يزيد عن 30% من عرض البطاقة.
تحديد المحاذاة الأفقية لعمود
يمكنك محاذاة التطبيقات المصغّرة أفقيًا على يمين أو يسار أو وسط عمود من خلال
تحديد
حقلhorizontalAligment.
إذا لم يكن الحقل horizontalAlignment محدّدًا، يتم محاذاة التطبيقات المصغّرة على سمته
اليسار في عمود.
في المثال التالي، يتمّ محاذاة النص أفقيًا داخل عمود على يمين الصفحة:
في المثال التالي، يتمّ محاذاة النص أفقيًا داخل عمود في الوسط:
في المثال التالي، يتمّ محاذاة النص أفقيًا داخل عمود على اليمين:
تحديد المحاذاة العمودية لعمود
يمكنك محاذاة التطبيقات المصغّرة عموديًا في أعلى العمود أو أسفله أو في وسطه من خلال تحديد
حقلverticalAlignment.
إذا لم يكن حقل verticalAlignment محدّدًا، يتم محاذاة التطبيقات المصغّرة في أحد الأعمدة
في أعلى الصفحة.
يوضّح المثال التالي محاذاة النص عموديًا في أعلى عمود:
في المثال التالي، تتم محاذاة النص عموديًا في وسط عمود:
في المثال التالي، يتمّ محاذاة النص عموديًا داخل عمود في أسفل الصفحة:
إضافة شبكة لعرض مجموعة من العناصر
تعرِض شاشة التطبيقات المصغّرة
grid
شبكة تتضمّن مجموعة من العناصر. تتيح الشبكة استخدام أي عدد من
الأعمدة والعناصر. يتم تحديد عدد الصفوف حسب العناصر مقسومة على الأعمدة.
تحتوي الشبكة التي تتضمّن 10 عناصر وعمودَين على 5 صفوف. تحتوي الشبكة التي تتضمّن 11 عنصرًا و عمودَين على 6 صفوف.
تتيح الأداة المصغّرة الاقتراحات التي تساعد المستخدمين في إدخال بيانات متسقة، وActions
الإجراءات التي يتم تنفيذها عند حدوث تغيير في حقل إدخال النص، مثل إضافة مستخدم لنص أو
حذفه.
المثال التالي هو شبكة من عمودَين تحتوي على عنصر واحد:
لتحديد موضع ظهور النص مع صورة في شبكة، يمكنك تحديد
حقل gridItemLayout.
يتيح لك هذا الحقل تحديد ما إذا كان النص يظهر أعلى العنصر في الشبكة أو أسفله. إذا لم يتم تحديد قيمة لسمة gridItemLayout، يتم ضبط النص تلقائيًا على
الظهور أسفل العنصر في الشبكة.
المثال التالي هو شبكة من ثلاثة أعمدة تحتوي على نص وصورة في كل شبكة. تحدّد الشبكة الأولى النص الذي يظهر أعلى الصورة، وتحدّد الشبكة الثانية النص الذي يظهر أسفل الصورة، ولا تحدّد الشبكة الثالثة موضع النص.
إضافة حدود إلى شبكة أو عمود
بالنسبة إلى العناصر التي تظهر في تطبيق مصغّر column أو grid، يمكنك إضافة حدود إلى
عناصر واجهة المستخدم هذه من خلال تحديد
حقل borderType
وحقل borderStyle.
إذا لم يتم تحديد حقل borderStyle، يتم عرض الإطار تلقائيًا بدون حدود. يمكنك
تحديد borderType لتطبيقه على جميع العناصر ضمن التطبيق المصغّر أو تطبيق التنسيق
على كل عنصر فردي ضمن التطبيق المصغّر.
المثال التالي هو شبكة من عمودَين تحتوي على صورة في كل شبكة تم فيها تحديد نوع حدودها ونمطها ولونها لتطبيقها على جميع العناصر ضمن الشبكة.
المثال التالي هو شبكة من 3 أعمدة تحتوي على صورة في كل شبكة، ويكون
نمط الحدود ونوعها محدّدَين بشكلٍ فردي. تحتوي
الصورة الأولى على حدود محدّدة على أنّها STROKE. تحتوي الصورة الثانية على حدّ معرّف على النحو التالي:
NO_BORDER. لم يتم تحديد حدود للصورة الثالثة.
إضافة تذييل دائم
يمثّل التطبيق المصغّر CardFixedFooter
تذييل رسالة مربّع حوار أرسلها
تطبيق Chat.
يمكن أن تتضمّن التذييلات زرًا أساسيًا وزرًا ثانويًا.
لا تتوفّر أداة CardFixedFooter إلا ل
المحادثات.
في ما يلي مثال على تطبيق مصغّر CardFixedFooter يتضمّن زرَّين:
تحديد المشاكل وحلّها
عندما يعرض تطبيق Google Chat أو بطاقة خطأ، تظهر في واجهة Chat رسالة تفيد بأنّ "حدث خطأ". أو "تعذّرت معالجة طلبك". في بعض الأحيان، لا يعرض واجهة مستخدم Chat أي رسالة خطأ، ولكن ينتج عن تطبيق Chat أو البطاقة نتيجة غير متوقّعة. على سبيل المثال، قد لا تظهر رسالة البطاقة .
على الرغم من أنّه قد لا تظهر رسالة خطأ في واجهة مستخدم Chat، تتوفّر رسائل خطأ وصفية وبيانات السجلّ لمساعدتك في حلّ الأخطاء عند تفعيل تسجيل الأخطاء في تطبيقات Chat. للحصول على مساعدة في عرض الأخطاء وتصحيحها وتصحيح الأخطاء، يُرجى الاطّلاع على مقالة تحديد مشاكل Google Chat وحلّها.