20.07.27: ملاحظات إصدار بوابة Apigee Edge المدمَجة

أنت الآن بصدد الاطّلاع على مستندات Apigee Edge.
انتقِل إلى مستندات Apigee X. info

سنبدأ في طرح إصدار جديد من البوابة المتكاملة في Apigee Edge يوم الاثنين 27 يوليو.

الميزات والتحسينات الجديدة

يوضّح هذا القسم الميزات والتحسينات الجديدة في هذا الإصدار.

تحسينات على إمكانية الوصول والاستجابة

في ما يلي قائمة بتحسينات إمكانية الوصول والاستجابة التي تم تنفيذها في هذا الإصدار.

• التنقّل باستخدام لوحة المفاتيح: أصبح بإمكانك الآن التنقّل في أشرطة التنقّل في الرأس والتذييل والتنقل الجانبي في SmartDocs وقائمة التطبيقات وعرض التطبيق وبطاقات واجهة برمجة التطبيقات باستخدام لوحة المفاتيح.
  
• إدارة التركيز: عند التنقّل باستخدام شريط التنقّل في العنوان والتنقل الجانبي في SmartDocs، ينتقل التركيز إلى أول <H1> في الصفحة بعد إجراء التنقّل.
• المناطق النشطة: يتم الآن إبلاغ المستخدمين الذين يستعينون بقارئ شاشة بالتغييرات التي تطرأ على قائمة واجهات برمجة التطبيقات نتيجةً للفلترة النصية.
• الاستخدام الدلالي لعناوين HTML: يتم الآن تضمين كل النص في علامات HTML مناسبة دلاليًا. يتم الآن استخدام بنية عناوين هرمية مناسبة في جميع أنحاء البوابة.
• استخدام <H1> بشكل مفرد: تحتوي كل صفحة الآن على <H1> واحد فقط، ما يتيح لبرامج قراءة الشاشة التعرّف بسهولة على الوصف الأكثر إفادةً لمحتوى الصفحة.
• الكتابة بالحروف الكبيرة لأغراض جمالية: يتم الآن استخدام الحروف الكبيرة كعنصر مرئي حصريًا مع CSS بدلاً من النص الفعلي.
• الترتيب المنطقي لنموذج المستند (DOM): تم نقل أزرار الإجراءات في صفحتَي "إنشاء تطبيق" و"تعديل التطبيق" إلى أسفل عناصر النموذج في نموذج المستند (DOM) ليتم تفعيلها بترتيب منطقي عند إكمال التفاعل مع النموذج.
• أوصاف نصية للعناصر المرئية: تم تحسين استخدام التصنيفات والنص البديل ونص الأزرار، ما يؤدي إلى تحسين التنقّل باستخدام قارئ الشاشة.
• تباين الألوان: تم تحسين تباين الألوان لاستيفاء متطلبات تباين معيار WCAG AA في العديد من الأماكن في جميع أنحاء المنتج. تم نقل عناوين واجهات برمجة التطبيقات في قائمة واجهات برمجة التطبيقات إلى أسفل الصورة لتجنُّب عدم كفاية تباين الألوان المحتمل.
• التحقّق من صحة النموذج: في صفحتَي "إنشاء تطبيق" و"تعديل التطبيق"، لم يعُد يتم إيقاف أزرار إرسال النموذج، ويمكن تفعيلها للتحقّق من صحة النموذج. تتضمّن حقول النموذج التي تم التحقّق من صحتها في صفحتَي "إنشاء تطبيق" و"تعديل التطبيق" الآن أوصافًا نصية لخطأ التحقّق من الصحة.
• الاستجابة: يتوفّر الآن حد أقصى للعرض ينطبق على جميع الصفحات باستثناء SmartDocs. تعمل ميزة التنقّل في SmartDocs الآن على الشاشات الضيقة بحجم الهاتف. أصبحت صفحتا "إنشاء التطبيق" و"تعديل التطبيق" أكثر استجابةً للشاشات الضيقة.

تغييرات DOM التي قد تؤثّر في البوابة

يجب مراعاة ما يلي على وجه الخصوص:

• تم تصميم أشرطة التنقّل (الرأس والتذييل) وعناوين الصفحات (أو إخفاؤها) باستخدام عمليات إلغاء CSS: أصبح هناك حد أقصى لعرض محتوى الصفحة. لتوسيع أشرطة التنقّل وعناوين الصفحات إلى حافة نافذة المتصفّح، تم تصميم العنصر الزائف :before في Apigee. لمزيد من المعلومات، اطّلِع على تجاوز الألوان الأساسية لأشرطة التنقّل وعناوين الصفحات.
• تتضمّن الصفحة عناصر ذات خلفيات تمتد إلى حافة نافذة المتصفّح (بخلاف صورة الخلفية بملء الشاشة): تمّ الحدّ من الحدّ الأقصى لعرض محتوى الصفحة لتحسين التجاوب، ما قد يؤدي إلى تقييد أي لوحات كانت سابقًا بعرض كامل ضمن الصفحات المخصّصة. لمزيد من المعلومات حول استخدام إعدادات الحد الأقصى للعرض الجديدة، يُرجى الاطّلاع على إنشاء لوحة بعرض كامل في صفحة بوابة.
• تم استهداف مستويات عناوين HTML معيّنة باستخدام أدوات اختيار CSS لتعديل أنماط النصوص: تم تغيير مستوى العنوان المطبّق على محتوى معيّن. على سبيل المثال: <H1> → <H2> راجِع قائمة التغييرات المفصّلة لهذا الإصدار لمعرفة المحتوى المتأثّر بالضبط.
• تم اختيار اللون الأبيض أو لون فاتح جدًا باعتباره "اللون الثانوي" في أداة تعديل تصميم البوابة: يُستخدَم اللون الثانوي لعناصر التنقّل التي يصعب رؤيتها على خلفية بيضاء. ننصحك باختيار لون ثانوي يسهل الوصول إليه ثم إلغاء تحديده إذا لزم الأمر باستخدام scss مخصّص في حالات معيّنة.
• تمّ تصميم الروابط داخل النص: أصبح تصميم الروابط أسهل في الاستخدام. اطّلِع على التغييرات أدناه لفهم كيفية تفاعلها مع التنسيق الحالي.
• تم تصميم أو إخفاء الحدّ السفلي الذي يبلغ عرضه 2 بكسل في مساحة المحتوى الخاصة ببطاقات العرض الرئيسية باستخدام عمليات إلغاء CSS: تم نقل هذا الحدّ من <mat-card-content> إلى حدّ علوي في <mat-card-actions>.

ملخّص التغييرات المفصّلة

تلخّص الأقسام التالية التغييرات التفصيلية التي تم تنفيذها في هذا الإصدار، حسب الفئة.

التغييرات على مستوى البوابة

في ما يلي ملخّص للتغييرات على مستوى البوابة.

• لم يعُد يتم استخدام المتغيّرات التالية:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• تتوفّر متغيرات جديدة تتيح التحكّم في الحد الأقصى لعرض مساحة المحتوى الرئيسية والحد الأدنى للحشو الأفقي لمساحة المحتوى الرئيسية:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

تغييرات في شريط التنقّل الأساسي

في ما يلي ملخّص للتغييرات التي تم إجراؤها على شريط التنقّل الرئيسي.

• يتم الآن تضمين الشعار <img> في <a> لكلّ من أحجام شاشات الكمبيوتر والأجهزة الجوّالة
• أصبح زر القائمة المنسدلة للمستخدمين الآن <button> بدلاً من <a>

تغييرات في نمط الروابط

تتضمّن الروابط العادية <a> داخل النص الآن خطًا سفليًا تلقائيًا ولون خلفية (استنادًا إلى إعدادات المظهر "اللون الثانوي") عند التمرير فوقها

تغييرات على الصفحة 404

في ما يلي ملخّص للتغييرات التي أجريناها على صفحة 404.

• أصبح الزر "تسجيل الدخول الآن" <H2> بدلاً من <H1>
• أصبح نص التفسير الآن <H2> بدلاً من <H1>

صفحة واجهات برمجة التطبيقات

في ما يلي ملخّص للتغييرات التي تم إجراؤها على صفحة واجهات برمجة التطبيقات حسب الفئة.

• بطاقة إدخال البحث/الفلترة في واجهة برمجة التطبيقات:
  • تتضمّن <mat-card-content class="mat-card-content"> الآن عنوان بطاقة واجهات برمجة التطبيقات الخاصة بالبحث والإدخال
  • تستخدم السمة <H2> الآن class="mat-subheading-1" بدلاً من class="api-doc-filter-title"
  • يستخدم<mat-form-field> الآن appearance="outline"
  • تمت إضافة رمز بحث إلى <mat-form-field> قبل الإدخال: "<mat-icon matPrefix>search</mat-icon>"
  • تمت إضافة تصنيفات Aria ومراجع عناصر التحكّم إلى الإدخال
• رسالة قائمة واجهات برمجة التطبيقات الفارغة:
  • أصبح الخطأ "لم يتم العثور على أي واجهات برمجة تطبيقات" هو <H2> بدلاً من <H1>
  • أصبح التفسير الآن <H3> بدلاً من <H2>
• قائمة بطاقات واجهة برمجة التطبيقات:

  أصبح الخطأ "ما مِن واجهات برمجة تطبيقات تتطابق مع بحثك" هو <H2> بدلاً من <H1>

• بطاقات واجهة برمجة التطبيقات:
  • تمت إزالة >div class="api-doc-card-content-image-gradient"></div>.
  • تم نقل عنوان واجهة برمجة التطبيقات من الصورة التي تحتوي على <div> إلى <div class="api-doc-card-content-title"></div> مباشرةً بعد الصورة <div>
  • أصبحت عناوين واجهات برمجة التطبيقات الآن <H2> بدلاً من <H1>

قائمة التطبيقات:

• الحالة الفارغة:
  • أصبح الزر "البدء" الآن <H2> بدلاً من <H1>
  • أصبحت إرشادات الحالة الفارغة الآن <H3> بدلاً من <H2>
• القائمة:
  • تغيّر اسم "تطبيقاتي" ليصبح الآن <H2> بدلاً من <H1>
  • تم الآن تشويه <mat-row> في <a>

إنشاء صفحات التطبيقات وتعديلها

في ما يلي ملخّص للتغييرات التي تم إجراؤها على صفحتَي "إنشاء تطبيق" و"تعديل التطبيق".

• تم نقل <div class="app-buttons"> إلى نهاية <form> واستبداله بـ <div class="form-buttons-sticky-container">
• تم تغيير جميع استخدامات الفئة .app-layout-section إلى .details-layout-section
• تم تغيير جميع استخدامات الفئة .app-layout-section-title إلى .details-layout-section-title
• أصبحت جميع عناوين الأقسام الآن <H2> بدلاً من <div>
• تم تغيير جميع استخدامات الفئة .app-layout-section-content إلى .details-layout-section-content
• لم تعُد قائمة واجهات برمجة التطبيقات عبارة عن قائمة ببطاقات واجهات برمجة التطبيقات مع مفاتيح تبديل (على غرار قائمة واجهات برمجة التطبيقات). بل هو جدول لواجهات برمجة التطبيقات
• تم نقل حقل إدخال عنوان URL لرد الاتصال إلى قسم جديد
• يستخدم زر الحفظ الآن نمط mat-raised-button وخلفية اللون الأساسي
• يتم الآن تضمين الجداول في <div> مع الفئة .app-table-wrapper
• تستخدم عناوين الجداول الآن أداة التغليف <thead>
• تستخدم نصوص الجداول الآن أداة التغليف <tbody>
• لم يعُد يتم استخدام [style.width] لضبط عرض أعمدة الجدول
• تستخدم جميع علامات <a> داخل الجدول الآن <button بدلاً من ذلك

قائمة الفِرق

في ما يلي ملخّص للتغييرات التي تم إجراؤها على قائمة "الفريق".

• الحالة الفارغة:
  • أصبح الزر "البدء" الآن <H2> بدلاً من <H1>
  • أصبح الخيار "إنشاء فريق لإدارة ملكية التطبيقات المشتركة" <H3> بدلاً من <H2>
• القائمة:

  أصبح عنوان "الفِرق" الآن <H2> بدلاً من <H1>

إنشاء صفحات الفريق وتعديلها

في ما يلي ملخّص للتغييرات التي تم إجراؤها على صفحتَي "إنشاء فريق" و"تعديل الفريق".

• في <form>، تم استبدال الفئة .teams-form بالفئة .details-form
• تم نقل <div class="teams-buttons"> إلى نهاية <form> واستبداله بـ <div class="form-buttons-sticky-container">
• تم تغيير جميع استخدامات الفئة .teams-layout-section إلى .details-layout-section
• تم تغيير جميع استخدامات الفئة .teams-layout-section-title إلى .details-layout-section-title
• تم تغيير جميع استخدامات الفئة .teams-layout-section-content إلى .details-layout-section-content
• تمت إضافة <div class="team-apps-container"> حول <table class="team-apps">

SmartDocs

في ما يلي ملخّص للتغييرات التي تم إجراؤها على واجهة SmartDocs.

• التنقل الجانبي:
  • تمت إعادة كتابة شريط التنقّل الجانبي بالكامل باستخدام مكوّنات angular-material
  • أصبحت عناوين شريط التنقّل الجانبي الآن <H2> بدلاً من <div>
  • تستخدم عناصر التنقّل الآن لون النص التلقائي للبوابة بدلاً من "اللون الثانوي" في أداة تعديل مظهر البوابة
  • تستخدم العناصر المحدّدة والمركّز عليها والتي يتم التمرير فوقها في شريط التنقّل الجانبي الآن أشكالاً داكنة وفاتحة من "اللون الثانوي" في أداة تعديل مظهر البوابة للنص والخلفية على التوالي.
• المحتوى:
  • أصبحت العديد من العناوين الفرعية، مثل "مَعلمات المسار" و "مَعلمات العنوان"، <H2> بدلاً من <H3>
  • أصبحت عناصر المخطط في صفحة النظرة العامة <H3>=> بدلاً من <H2>

إضافة تحسينات على إمكانية الوصول إلى صفحة رئيسية حالية

إذا كان لديك بوابة حالية، عليك تعديل الصفحة الرئيسية للاستفادة من التحسينات الجديدة المتعلقة بتسهيل الاستخدام للبطاقات القابلة للتنقّل، كما هو موضّح أدناه:

1. إزالة href="" من الحاوية <mat-card>
2. استخدِم <H2> بدلاً من <H1> لعنوان البطاقة ضمن <mat-card-header>.
3. داخل عنوان البطاقة <h2>، لف النص بعلامة <a class="navigable-content" href="href-name"> واضبط href-name على القيمة المناسبة لتصفّح البطاقة.

بدلاً من ذلك، يمكنك استخدام نموذج البطاقة التالي:

<mat-card class="home-page-card quick-start">
  <mat-card-header class="home-page-card-header" color="primary">
    <mat-icon class="home-page-card-header-icon">
      check_circle
    </mat-icon>
    <h2 class="home-page-card-header-text">
      <a class="navigable-content" href="page-route">
        Card heading
      </a>
    </h2>
  </mat-card-header>
  <mat-card-content class="home-page-card-content">
    <p class="home-page-card-content-text">
      Extra content
    </p>
  </mat-card-content>
</mat-card>
</p>

تجاوز الألوان الأساسية لأشرطة التنقّل وعناوين الصفحات

لتوسيع أشرطة التنقل وعناوين الصفحات إلى حافة نافذة المتصفح، أضِف أنماطًا مخصّصة لأشرطة التنقل وعناوين الصفحات باستخدام أداة تعديل المظهر المتقدّمة، على غرار ما يلي لشريط التنقل في العنوان:

// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
  color: #fff //  color for navigation text

  // Use the :before pseudo element to style the background of full-width bars
  // (header and footer navigation bars and page headers)
  &:before {
    background-color: #000; // background color for header navigation bar
  }
}

إجراءات تعديل إدارة واجهات برمجة التطبيقات لأحد التطبيقات

تغيّر تفاعل المستخدم لإدارة واجهات برمجة التطبيقات في تطبيق على البوابة المدمجة. على وجه التحديد، عند إدارة تطبيق، يجب أن ينقر المستخدمون في قسم "واجهات برمجة التطبيقات" على أو (بدلاً من زر التبديل) لتفعيل الوصول إلى واجهة برمجة تطبيقات من التطبيق أو إيقافه، على التوالي.

عدِّل أي إجراءات على البوابة الإلكترونية توضّح كيفية إدارة واجهات برمجة التطبيقات في صفحة التطبيقات، إذا كان ذلك منطبقًا. لمزيد من المعلومات، يُرجى الاطّلاع على إدارة واجهات برمجة التطبيقات في تطبيقك.

إصلاح الأخطاء

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

المشاكل المعروفة

للاطّلاع على قائمة بالمشاكل المعروفة في البوابة المدمجة، يُرجى الانتقال إلى المشاكل المعروفة في البوابة المدمجة.