توضّح هذه الصفحة كيفية إنشاء مكوّنات البطاقة وبنيتها. البطاقات هي واجهات مستخدم يمكن لتطبيقات Google Chat استخدامها لعرض المعلومات وجمعها من مستخدمي Chat. يمكن لتطبيقات الدردشة إنشاء بطاقات وعرضها في الواجهات التالية:
- الرسائل التي تحتوي على بطاقة واحدة أو أكثر
- الصفحات الرئيسية: وهي بطاقة تظهر من علامة التبويب الصفحة الرئيسية في الرسائل المباشرة مع تطبيق Chat.
- مربّعات الحوار، وهي بطاقات يتم فتحها في نافذة جديدة من الرسائل وصفحات البداية
في هذه الصفحة، ستتعرّف على المكوّنات التالية للبطاقة:
- العناوين، التي تتضمّن عادةً عنوان بطاقة أو قسم بطاقة
- الأقسام التي تشكّل النص الأساسي للبطاقة، بما في ذلك التطبيقات المصغّرة والعناصر التفاعلية الأخرى في قسم البطاقة، يمكنك إضافة المزيد من البنية إلى البطاقة، بما في ذلك الأعمدة والجداول.
- التذييلات الثابتة، التي تظهر في أسفل مربّعات الحوار لعرض عناصر واجهة المستخدم الثابتة، مثل الأزرار
المتطلبات الأساسية
تطبيق Google Chat تم إعداده لتلقّي أحداث التفاعل والردّ عليها لإنشاء تطبيق تفاعلي في Chat، أكمل أحد أدلة البدء السريع التالية استنادًا إلى بنية التطبيق التي تريد استخدامها:
- خدمة HTTP باستخدام Google Cloud Functions
- برمجة تطبيقات Google
- 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. لا تحتوي الصورة الثالثة على حدود محدّدة.
إضافة منصّة عرض بعناصر متغيّرة
يعرض التطبيق المصغّر Carousel مجموعة من عناصر CarouselCard يمكن التنقّل بينها على الشاشة وخارجها. يمكنك إضافة عناصر واجهة مستخدم متعددة إلى كل CarouselCard.
إضافة تذييل ثابت
يمثّل عنصر واجهة المستخدم CardFixedFooter تذييل رسالة حوار أرسلها تطبيق Chat. يمكن أن تتضمّن التذييلات زرًا أساسيًا وزرًا ثانويًا.
لا تتوفّر أداة CardFixedFooter إلا للحوارات.
في ما يلي مثال على أداة CardFixedFooter تتضمّن زرَّين:
تحديد المشاكل وحلّها
عندما يعرض تطبيق أو بطاقة في Google Chat خطأً، تعرض واجهة Chat رسالة تفيد بأنّه "حدث خطأ". أو "لم نتمكّن من معالجة طلبك". في بعض الأحيان، لا تعرض واجهة مستخدم Chat أي رسالة خطأ، ولكن ينتج تطبيق Chat أو البطاقة نتيجة غير متوقّعة، مثلاً، قد لا تظهر رسالة البطاقة.
على الرغم من أنّه قد لا تظهر رسالة خطأ في واجهة مستخدم Chat، تتوفّر رسائل خطأ وصفية وبيانات سجلّات لمساعدتك في إصلاح الأخطاء عند تفعيل تسجيل الأخطاء لتطبيقات Chat. للحصول على مساعدة في عرض الأخطاء وتصحيحها وتحديد المشاكل فيها، يُرجى الاطّلاع على تحديد مشاكل Google Chat وحلّها.