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

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

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

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

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

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

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

استخدِم "أداة إنشاء البطاقات" لتصميم ومعاينة واجهات المستخدم والرسائل لتطبيقات 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 من عرض البطاقة.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إضافة لوحة عرض دوّارة

يعرض تطبيق Carousel المصغّر مجموعة من عناصر CarouselCard التي يمكن الانتقال إليها وإبعادها عن الشاشة. يمكنك إضافة عدة تطبيقات مصغّرة إلى كل CarouselCard.

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

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

في ما يلي مثال على تطبيق مصغّر لـ CardFixedFooter يتضمّن زرَّين:

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

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

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