20.07.27 - یادداشت های انتشار پورتال یکپارچه Apigee Edge

شما در حال مشاهده اسناد Apigee Edge هستید.
به مستندات Apigee X بروید . اطلاعات

دوشنبه، 27 جولای، انتشار نسخه جدیدی از پورتال یکپارچه Apigee Edge را آغاز خواهیم کرد.

ویژگی ها و پیشرفت های جدید

این بخش ویژگی ها و پیشرفت های جدید این نسخه را شرح می دهد.

بهبود دسترسی و پاسخگویی

موارد زیر بهبودهای دسترسی و پاسخگویی را که برای این نسخه پیاده سازی شده اند فهرست می کند.

• پیمایش صفحه‌کلید: اکنون می‌توانید نوارهای پیمایش سرصفحه و پاورقی، ناوبری جانبی SmartDocs، فهرست برنامه‌ها، نمای برنامه و کارت‌های API را با استفاده از صفحه‌کلید پیمایش کنید.
  
• مدیریت فوکوس: پیمایش با نوار پیمایش سرصفحه و پیمایش جانبی SmartDocs، فوکوس را به اولین <H1> صفحه پس از یک اقدام ناوبری منتقل می کند.
• مناطق زنده: تغییرات در لیست APIهای ناشی از فیلتر کردن متن اکنون به کاربرانی که از صفحه‌خوان استفاده می‌کنند گزارش می‌شود.
• استفاده معنایی از سرفصل‌های HTML: همه متن‌ها اکنون در تگ‌های HTML مناسب از نظر معنایی قرار دارند. اکنون یک ساختار سرفصل سلسله مراتبی مناسب در سرتاسر پورتال استفاده می شود.
• استفاده منحصر به فرد از <H1> : اکنون هر صفحه فقط یک <H1> دارد، بنابراین خوانندگان صفحه به راحتی می توانند آموزنده ترین توضیحات محتوای صفحه را شناسایی کنند.
• حروف بزرگ سبک: استفاده از تمام حروف به‌عنوان لهجه بصری اکنون منحصراً با CSS به جای متن واقعی اعمال می‌شود.
• ترتیب منطقی DOM: دکمه‌های عمل در صفحات ایجاد و ویرایش برنامه به زیر عناصر فرم در DOM منتقل شده‌اند تا بتوانند به ترتیب منطقی در تکمیل تعامل فرم فعال شوند.
• توضیحات متنی عناصر بصری: استفاده بهتر از برچسب‌ها، متن جایگزین و متن دکمه وجود دارد که همگی باعث بهبود پیمایش با صفحه‌خوان می‌شوند.
• کنتراست رنگ: کنتراست رنگ برای برآورده کردن الزامات کنتراست WCAG AA در بسیاری از نقاط محصول افزایش یافته است. عناوین API در لیست APIها به زیر تصویر منتقل شده اند تا از تضاد رنگ ناکافی احتمالی جلوگیری شود.
• اعتبار سنجی فرم: در صفحات ایجاد و ویرایش برنامه، دکمه های ارسال فرم دیگر غیرفعال نیستند و می توانند برای تأیید اعتبار فرم فعال شوند. فیلدهای فرم تأیید شده در صفحات ایجاد و ویرایش برنامه اکنون شامل توضیحات متنی خطای اعتبارسنجی است.
• پاسخگویی: اکنون حداکثر عرض وجود دارد که برای همه صفحات به جز SmartDocs اعمال می شود. ناوبری SmartDocs اکنون بر روی صفحه نمایش های باریک با اندازه تلفن کار می کند. صفحات ایجاد و ویرایش برنامه اکنون بیشتر به صفحه نمایش های باریک پاسخ می دهند.

تغییرات DOM که ممکن است بر پورتال شما تأثیر بگذارد

به خصوص در نظر بگیرید اگر:

• نوارهای پیمایش (سرصفحه و پاورقی) و عناوین صفحه با لغو CSS استایل بندی شده اند (یا پنهان شده اند) : اکنون حداکثر عرض برای محتوای صفحه وجود دارد. برای گسترش نوارهای پیمایش و هدرهای صفحه تا لبه پنجره مرورگر، Apigee عنصر :before شبه را استایل داد. برای اطلاعات بیشتر، نادیده گرفتن رنگ‌های اصلی برای نوارهای پیمایش و سرصفحه‌های صفحه را ببینید.
• عناصر صفحه با پس‌زمینه‌هایی وجود دارند که تا لبه پنجره مرورگر گسترش می‌یابند (غیر از تصویر پس‌زمینه تمام‌صفحه): حداکثر عرض محتوای صفحه برای بهبود پاسخ‌دهی محدود شده است، که ممکن است پانل‌های با عرض کامل قبلی را در صفحات سفارشی محدود کند. . برای اطلاعات بیشتر در مورد استفاده از تنظیمات جدید حداکثر عرض، به ایجاد یک پانل تمام عرض در یک صفحه پورتال مراجعه کنید.
• سطوح سرفصل خاص 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> برای اندازه صفحه نمایش دسکتاپ و موبایل پیچیده شده است
• اکنون دکمه کشویی کاربر به جای <a> یک <button> است

تغییر سبک پیوند

پیوندهای استاندارد <a> در متن اکنون به طور پیش‌فرض دارای یک زیرخط و یک رنگ پس‌زمینه (بر اساس تنظیمات تم "رنگ ثانویه") در شناور هستند.

تغییرات صفحه 404

تغییرات صفحه 404 در زیر خلاصه شده است.

• "اکنون وارد شوید" به جای <H1> اکنون <H2> است
• متن توضیح اکنون به جای <H1> <H2> است

صفحه API

تغییرات صفحه APIها بر اساس دسته بندی در زیر خلاصه شده است.

• کارت ورودی جستجو/فیلتر API:
  • <mat-card-content class="mat-card-content"> اکنون عنوان و ورودی کارت APIهای جستجو را می‌پیچد
  • <H2> اکنون از class="mat-subheading-1" به جای class="api-doc-filter-title" استفاده می کند.
  • <mat-form-field> اکنون appearance="outline" استفاده می کند
  • یک نماد جستجو قبل از ورودی به <mat-form-field> اضافه شده است: "<mat-icon matPrefix>search</mat-icon>"
  • برچسب های آریا و مراجع کنترلی به ورودی اضافه شده است
• پیام لیست API خالی:
  • "هیچ API یافت نشد" اکنون به جای <H1> <H2> است
  • توضیح اکنون به جای <H2> <H3> است
• لیست کارت های API:

  "هیچ API با جستجوی شما مطابقت ندارد" اکنون به جای <H1> <H2> است

• کارت های API:
  • >div class="api-doc-card-content-image-gradient"></div> حذف شد
  • عنوان API از تصویر حاوی <div> خارج شده و بلافاصله پس از تصویر <div> به <div class="api-doc-card-content-title"></div> منتقل شده است.
  • عنوان API اکنون به جای <H1> <H2> است

لیست برنامه ها:

• حالت خالی:
  • "شروع به کار" به جای <H1> اکنون <H2> است
  • راهنمای حالت خالی اکنون به جای <H2> <H3> است
• فهرست:
  • "برنامه های من" اکنون به جای <H1> <H2> است
  • <mat-row> اکنون در یک <a> تاب خورده است

ایجاد و ویرایش صفحات برنامه

تغییرات در صفحات ایجاد و ویرایش برنامه در زیر خلاصه شده است.

• <div class="app-buttons"> به انتهای <form> منتقل شد و <div class="form-buttons-sticky-container"> جایگزین شد.
• همه موارد استفاده از class .app-layout-section به .details-layout-section تغییر کرد.
• همه موارد استفاده از class .app-layout-section-title به .details-layout-section-title تغییر کرد.
• تمام عناوین بخش اکنون به جای <div> <H2> هستند
• همه موارد استفاده از class .app-layout-section-content به .details-layout-section-content تغییر کرد.
• لیست APIها دیگر فهرستی از کارت های API با سوئیچ های تغییر دهنده (شبیه به لیست API ها) نیست. در عوض، جدولی از APIها است
• ورودی URL بازگشت به تماس به بخش جدیدی منتقل شده است
• دکمه ذخیره اکنون از سبک دکمه‌های حصیری و پس‌زمینه رنگ اصلی استفاده می‌کند
• اکنون جداول در یک <div> با class .app-table-wrapper پیچیده شده اند
• سرصفحه های جدول اکنون از wrapper <thead> استفاده می کنند
• اکنون بدنه‌های میز از پوشش <tbody> استفاده می‌کنند
• [style.width] دیگر برای تنظیم عرض ستون جدول استفاده نمی شود
• اکنون همه تگ‌های <a> در جدول از <button استفاده می‌کنند

لیست تیم ها

تغییرات در لیست تیم در زیر خلاصه شده است.

• حالت خالی:
  • "شروع به کار" اکنون به جای <H1> <H2> است
  • "ایجاد یک تیم برای مدیریت مالکیت برنامه مشترک" اکنون به جای <H2> <H3> است
• فهرست:

  عنوان "تیم ها" اکنون به جای <H1> <H2> است

ایجاد و ویرایش صفحات تیم

تغییرات در صفحات ایجاد و ویرایش تیم در زیر خلاصه شده است.

• در <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 در زیر خلاصه شده است.

• ناوبری جانبی:
  • ناوبری جانبی به طور کامل با اجزای ماده زاویه ای بازنویسی شده است
  • عنوان های ناوبری جانبی اکنون به جای <div> <H2> هستند
  • موارد پیمایش اکنون از رنگ متن پیش‌فرض پورتال به جای ویرایشگر تم پورتال "رنگ ثانویه" استفاده می‌کنند.
  • موارد منتخب، فوکوس شده و معلق شده در پیمایش جانبی اکنون از تغییرات تیره و روشن ویرایشگر تم پورتال "رنگ ثانویه" برای متن و پس‌زمینه استفاده می‌کنند.
• مطالب:
  • بسیاری از عناوین فرعی مانند "پارامترهای مسیر" و "پارامترهای سرصفحه" اکنون به جای <H3> <H2> هستند.
  • موجودیت های طرحواره در صفحه نمای کلی اکنون به جای <H2> <H3>=> هستند

افزودن بهبودهای دسترسی به صفحه اصلی موجود

اگر پورتال خروجی دارید، باید صفحه اصلی را ویرایش کنید تا از پیشرفت‌های جدید دسترسی برای کارت‌های قابل پیمایش استفاده کنید، همانطور که در زیر توضیح داده شده است:

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
  }
}

روش به روز رسانی برای مدیریت API برای یک برنامه

تعامل کاربر برای مدیریت APIها در یک برنامه در پورتال یکپارچه تغییر کرده است. به طور خاص، هنگام مدیریت یک برنامه، کاربران باید در بخش API ها کلیک کنند یا (به جای ضامن) برای فعال یا غیرفعال کردن دسترسی، به ترتیب، به یک API از برنامه.

در صورت وجود، هر رویه‌ای را در پورتال خود که نحوه مدیریت APIها را در صفحه برنامه‌ها توضیح می‌دهد، به‌روزرسانی کنید. برای اطلاعات بیشتر، به مدیریت APIها در برنامه خود مراجعه کنید.

اشکالات رفع شد

اشکالات زیر در این نسخه رفع شده است. این لیست در درجه اول برای کاربرانی است که بررسی می کنند تا ببینند آیا بلیط های پشتیبانی آنها رفع شده است یا خیر. برای ارائه اطلاعات دقیق برای همه کاربران طراحی نشده است.

مسائل شناخته شده

برای لیستی از مشکلات شناخته شده در پورتال یکپارچه، به مشکلات شناخته شده با پورتال یکپارچه مراجعه کنید.