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

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

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

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

در این بخش به ویژگی‌ها و بهبودهای جدید این نسخه اشاره شده است.

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

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

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

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

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

• نوارهای ناوبری (سربرگ و پاورقی) و سربرگ‌های صفحه با استفاده از CSS overrides استایل‌بندی (یا پنهان) شده‌اند : اکنون حداکثر عرض برای محتوای صفحه وجود دارد. برای گسترش نوارهای ناوبری و سربرگ‌های صفحه تا لبه پنجره مرورگر، Apigee عنصر شبه :before را استایل‌بندی کرده است. برای اطلاعات بیشتر، به Override کردن رنگ‌های اصلی برای نوارهای ناوبری و سربرگ‌های صفحه مراجعه کنید.
• عناصری از صفحه وجود دارند که پس‌زمینه‌هایشان تا لبه پنجره مرورگر امتداد می‌یابد (به غیر از تصویر پس‌زمینه تمام صفحه): حداکثر عرض محتوای صفحه برای بهبود واکنش‌گرایی محدود شده است، که ممکن است هر پنل تمام عرض قبلی را در صفحات سفارشی محدود کند. برای اطلاعات بیشتر در مورد استفاده از تنظیمات جدید حداکثر عرض، به بخش «ایجاد یک پنل تمام عرض در یک صفحه پورتال» مراجعه کنید.
• سطوح عنوان خاص HTML با انتخابگرهای CSS برای تغییر سبک‌های متن هدف قرار گرفته‌اند: سطح عنوان اعمال شده برای محتوای خاص تغییر کرده است. به عنوان مثال: <H1> → <H2> لیست تغییرات دقیق این نسخه را مرور کنید تا دقیقاً بفهمید چه محتوایی تحت تأثیر قرار گرفته است.
• یک رنگ سفید یا یک رنگ بسیار روشن به عنوان "رنگ ثانویه" در ویرایشگر قالب پورتال انتخاب می‌شود: رنگ ثانویه برای عناصر ناوبری استفاده می‌شود که در برابر پس‌زمینه سفید به سختی دیده می‌شوند. توصیه می‌کنیم یک رنگ ثانویه قابل دسترس انتخاب کنید و سپس در صورت لزوم با scss سفارشی در موقعیت‌های خاص، آن را لغو کنید.
• لینک‌های درون متن استایل‌بندی شده‌اند: استایل‌بندی لینک‌ها اکنون قابل دسترس‌تر است. برای درک چگونگی تعامل آن با استایل‌بندی موجود، تغییرات زیر را مشاهده کنید.
• حاشیه‌ی ۲ پیکسلیِ پایینِ ناحیه‌ی محتوای کارت‌های نمای خانه با استفاده از CSS overrides استایل‌دهی یا پنهان شده است: این حاشیه از <mat-card-content> به border-top در <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> درون متن، اکنون به طور پیش‌فرض دارای یک زیرخط و یک رنگ پس‌زمینه (بر اساس تنظیمات قالب "رنگ ثانویه") در هنگام قرارگیری ماوس هستند.

تغییرات صفحه ۴۰۴

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

• عبارت «همین حالا وارد شوید» اکنون به جای <H2> به <H1> تغییر یافته است.
• متن توضیح اکنون به جای <H2> <H1> است.

صفحه APIها

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

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

  عبارت «هیچ API با جستجوی شما مطابقت ندارد» اکنون به جای <H2> به <H1> تغییر یافته است.

• کارت‌های 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> است.
  • راهنمای وضعیت خالی اکنون به جای <H3> <H2> است.
• فهرست:
  • «برنامه‌های من» حالا به جای <H1> <H2> است.
  • <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 ‎ تغییر یافت.
• حالا تمام سرتیترهای بخش‌ها به جای <div> <H2> هستند.
• تمام موارد استفاده از کلاس .app-layout-section-content ‎ به .details-layout-section-content ‎ تغییر یافت.
• فهرست APIها دیگر فهرستی از کارت‌های API با کلیدهای تغییر وضعیت (مشابه فهرست APIها) نیست. در عوض، جدولی از APIها است.
• ورودی URL مربوط به فراخوانی به بخش جدیدی منتقل شده است
• دکمه ذخیره اکنون از سبک دکمه برجسته و رنگ پس‌زمینه اصلی استفاده می‌کند
• جداول اکنون در یک <div> با کلاس .app-table-wrapper قرار می‌گیرند.
• هدرهای جدول اکنون از پوشش <thead> استفاده می‌کنند
• بدنه‌های جدول اکنون از پوشش <tbody> استفاده می‌کنند
• [style.width] دیگر برای تنظیم عرض ستون‌های جدول استفاده نمی‌شود.
• اکنون تمام تگ‌های <a> درون جدول به جای <button استفاده می‌شوند.

فهرست تیم‌ها

تغییرات در لیست تیم‌ها به شرح زیر است.

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

  عنوان «تیم‌ها» اکنون به جای <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 در زیر خلاصه شده است.

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

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

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

1. href="" را از کانتینر <mat-card> حذف کنید.
2. برای عنوان کارت درون <mat-card-header> از <H2> به جای <H1> استفاده کنید.
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ها در برنامه خود مراجعه کنید.

اشکالات برطرف شد

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

مشکلات شناخته شده

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