إنشاء بطاقات لتطبيقات Google Chat

تصف هذه الصفحة كيفية إنشاء مكونات وهيكل البطاقات مخصصة للمستخدمين الواجهات التي يمكن لتطبيقات Google Chat استخدامها لعرض البيانات وجمعها معلومات من مستخدمي Chat. يمكن لتطبيقات Chat إنشاء وعرض البطاقات في الواجهات التالية:

  • الرسائل التي تتضمّن بطاقة واحدة أو أكثر
  • الصفحات الرئيسية وهي بطاقة تظهر من علامة التبويب الصفحة الرئيسية مباشرةً الرسائل باستخدام تطبيق Chat
  • مربّعات الحوار، وهي بطاقات تفتح في نافذة جديدة من الرسائل والصفحات الرئيسية

في هذه الصفحة، ستتعرف على المكونات التالية للبطاقة:

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

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

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

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

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

إضافة عنوان

تطبيق CardHeader المصغّر عنوان بطاقة. يمكن أن تتضمن العناوين العنوان والعنوان الفرعي والصورة الرمزية لبطاقتك.

إليك مثال على السمة CardHeader:

إضافة قسم واحد أو أكثر من أقسام البطاقة

تطبيق CardSection المصغّر عبارة عن حاوية عالية المستوى داخل بطاقة. أنت تستخدم البطاقة أقسامًا لتجميع التطبيقات المصغّرة داخل بطاقة. يمكنك تضمين كلّ قسم من أقسام البطاقات عنوان وأداة واحدة أو أكثر.

إليك مثال على السمة CardSection التي تتضمّن سمتين textParagraph التطبيقات المصغّرة:

إضافة مُقسّم أفقي بين التطبيقات المصغّرة

تشير رسالة الأشكال البيانية تطبيق "divider" المصغّر خطًا أفقيًا يمتد بعرض بطاقة بين التطبيقات المصغّرة المكدسة عموديًا. الخط هو مُقسّم مرئي يساعد يميّز المستخدمون بين تطبيق مصغّر وآخر، ما يسهِّل قراءة البطاقات والفهم.

في ما يلي بطاقة تتألّف من تطبيق "divider" المصغّر بين أنواع أخرى من التطبيقات المصغّرة:

إضافة أعمدة

تشير رسالة الأشكال البيانية تطبيق "columns" المصغّر تعرض ما يصل إلى عمودين في البطاقة. يمكنك إضافة التطبيقات المصغّرة لكل عمود؛ تظهر الأدوات بالترتيب الذي المحددة. لتضمين أكثر من عمودَين أو لاستخدام صفوف، استخدِم التطبيق المصغّر grid.

يتم تحديد ارتفاع كل عمود من خلال العمود الأطول. على سبيل المثال، إذا والعمود الأول أطول من العمود الثاني، وكلا العمودين لهما ارتفاع العمود الأول. نظرًا لأن كل عمود يمكن أن يحتوي على رقم مختلف من الأدوات، لا يمكنك تحديد صفوف أو محاذاة الأدوات بين الأعمدة.

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

تحديد عرض العمود

يتم عرض الأعمدة جنبًا إلى جنب. يمكنك تخصيص عرض كل عمود باستخدام حقل horizontalSizeStyle. إذا كان عرض شاشة المستخدم ضيقًا جدًا، فسيتم التفاف العمود الثاني أسفل أولاً:

  • على الويب، يتم التفاف العمود الثاني إذا كان عرض الشاشة أقل من أو يساوي 480 بكسل.
  • في أجهزة iOS، يتم التفاف العمود الثاني إذا كان عرض الشاشة أقل من إلى 300 نقطة.
  • في أجهزة Android، يتم التفاف العمود الثاني إذا كان عرض الشاشة أقل من أو ما يساوي 320 وحدة بكسل مستقلة الكثافة (dp).

يعرض المثال التالي بطاقة مع تطبيق columns المصغّر الذي يعرض عمودين من النص مع 4 عناصر في الأعمدة. كل عنصر في الأعمدة له تم تطبيق horizontalSizeStyle لمعالجة مقدار مساحة النص يملأ كل عمود:

  • تستخدم الفقرة النصية الأولى FILL_MINIMUM_SPACE لملء ما لا يزيد عن 30% لعرض البطاقة.
  • تستخدم الفقرة النصية الثانية FILL_AVAILABLE_SPACE لملء الخيارات المتاحة مسافة في عرض البطاقة. في هذا المثال، يملأ 70% من مساحة العرض.
  • الفقرة النصية الثالثة لا تحدّد horizontalSizeStyle، لذا يتم ضبطها تلقائيًا. لملء المساحة المتاحة من مساحة البطاقة.
  • تستخدم الفقرة النصية الرابعة FILL_MINIMUM_SPACE لملء ما لا يزيد عن 30% لعرض البطاقة.

تحديد المحاذاة الأفقية لعمود

يمكنك محاذاة الأدوات أفقيًا إلى اليسار أو اليمين أو منتصف العمود من خلال ويحدد حقل horizontalAligment. إذا كانت عملية horizontalAlignment غير محدّدة، ستتم محاذاة الأدوات مع اليسار في عمود.

يؤدي المثال التالي إلى محاذاة النص أفقيًا داخل عمود إلى اليسار:

يعمل المثال التالي على محاذاة النص أفقيًا داخل عمود في المنتصف:

يقوم المثال التالي بمحاذاة النص أفقيًا داخل عمود إلى اليمين:

تحديد المحاذاة العمودية لعمود

يمكنك محاذاة الأدوات عموديًا إلى أعلى العمود أو أسفله أو وسطه من خلال ويحدد حقل verticalAlignment. إذا كان الحقل verticalAlignment غير محدّد، تتم محاذاة الأدوات في العمود. إلى الأعلى.

يحاذ المثال التالي النص عموديًا داخل عمود إلى الأعلى:

يعمل المثال التالي على محاذاة النص عموديًا داخل عمود في المنتصف:

يعمل المثال التالي على محاذاة النص عموديًا داخل عمود في الأسفل:

إضافة شبكة لعرض مجموعة من العناصر

تشير رسالة الأشكال البيانية تطبيق "grid" المصغّر تعرض شبكة بها مجموعة من العناصر. تدعم الشبكة أي عدد من والأعمدة والعناصر. يتم تحديد عدد الصفوف من خلال قسمة العناصر على الأعمدة. الشبكة التي تحتوي على 10 عناصر وعمودين تحتوي على 5 صفوف. شبكة تحتوي على 11 عنصرًا و2 تتكون من 6 صفوف.

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

المثال التالي هو شبكة من عمودين تحتوي على عنصر واحد:

لتحديد مكان ظهور النص مع صورة في الشبكة، يمكنك تحديد حقل gridItemLayout. يتيح لك هذا الحقل تحديد ما إذا كان النص سيظهر أعلى أو أسفل العنصر الموجود في الشبكة. إذا لم يتم تحديد gridItemLayout، يتم تعيين النص التلقائي على أسفل العنصر في الشبكة.

المثال التالي عبارة عن شبكة مكونة من ثلاثة أعمدة مع نص وصورة في كل شبكة. تحدد الشبكة الأولى النص الذي سيظهر فوق الصورة، والثانية تحدد الشبكة النص الذي يظهر أسفل الصورة، ولا تحدد الشبكة الثالثة موضع النص.

إضافة حدّ إلى شبكة أو عمود

بالنسبة إلى العناصر التي تظهر في التطبيق المصغّر column أو grid، يمكنك إضافة حد إلى عناصر واجهة المستخدم هذه من خلال تحديد حقل borderType و borderStyle الحقل. إذا لم يتم تحديد حقل borderStyle، سيتم ضبط القيمة التلقائية على عدم عرض أي حدود. يمكنك تحديد borderType لتطبيقه على جميع العناصر داخل تطبيق مصغّر أو تطبيق النمط لكل عنصر فردي داخل الأداة.

المثال التالي عبارة عن شبكة من عمودين مع صورة في كل شبكة حيث نوع الحد والنمط واللون لتطبيقه على جميع العناصر داخل الشبكة.

المثال التالي عبارة عن شبكة مكونة من 3 أعمدة مع صورة في كل شبكة تم تحديد نمط الحد ونوعه بشكل فردي. الأول تم تحديد حد الصورة على أنّه STROKE. للصورة الثانية حد تم تعريفه على أنه NO_BORDER لم يتم تحديد حدود للصورة الثالثة.

CardFixedFooter يمثل التطبيق تذييل رسالة مربع حوار تم إرساله بواسطة تطبيق Chat. يمكن أن تتضمن التذييلات زرًا أساسيًا وزرًا ثانويًا.

لا يتوفّر التطبيق المصغّر "CardFixedFooter" إلا مربعات الحوار.

في ما يلي مثال على أداة CardFixedFooter تتضمّن زرَّين:

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

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

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