20.07.27 - Apigee Edge entegre portal sürüm notları

Apigee Edge belgelerini görüntülüyorsunuz.
Apigee X belgelerine gidin. bilgi

27 Temmuz Pazartesi günü, Apigee Edge'in entegre portalının yeni bir sürümünü yayınlamaya başlayacağız.

Yeni özellikler ve geliştirmeler

Bu bölümde, bu sürümdeki yeni özellikler ve geliştirmeler açıklanmaktadır.

Erişilebilirlik ve yanıt verme ile ilgili iyileştirmeler

Aşağıda, bu sürümde uygulanan erişilebilirlik ve yanıt verme hızı iyileştirmeleri listelenmiştir.

• Klavyeyle gezinme: Artık klavyeyi kullanarak başlık ve altbilgi gezinme çubuklarında, SmartDocs yan gezinme bölümünde, Uygulamalar listesinde, Uygulama görünümünde ve API kartlarında gezinebilirsiniz.
  
• Odak yönetimi: Başlık gezinme çubuğu ve SmartDocs yan gezinme ile gezinirken, gezinme işleminden sonra odakta sayfadaki ilk <H1> olur.
• Canlı bölgeler: Metin filtreleme sonucunda API listesinde yapılan değişiklikler artık ekran okuyucu kullanan kullanıcılara bildiriliyor.
• HTML başlıklarının semantik kullanımı: Tüm metinler artık semantik olarak uygun HTML etiketlerinde yer alıyor. Portal genelinde artık uygun şekilde hiyerarşik bir başlık yapısı kullanılıyor.
• <H1> öğesinin tekil kullanımı: Artık her sayfada yalnızca tek bir <H1> bulunuyor. Böylece ekran okuyucular, sayfa içeriğinin en bilgilendirici açıklamasını kolayca tanımlayabiliyor.
• Stil amaçlı büyük harf kullanımı: Görsel vurgu olarak tümü büyük harf kullanımı artık gerçek metinde değil, yalnızca CSS ile uygulanıyor.
• DOM'un mantıksal sıralaması: Oluştur ve Uygulamayı Düzenle sayfalarındaki işlem düğmeleri, form etkileşimi tamamlandığında mantıksal sırayla etkinleştirilebilmeleri için DOM'daki form öğelerinin altına taşındı.
• Görsel öğelerin metin açıklamaları: Etiketler, alternatif metinler ve düğme metinleri daha iyi kullanılıyor. Bunların tümü, ekran okuyucuyla gezinmeyi kolaylaştırıyor.
• Renk kontrastı: Ürünün birçok yerinde WCAG AA kontrastı şartlarını karşılamak için renk kontrastı artırıldı. Olası yetersiz renk kontrastını önlemek için API listesindeki API başlıkları resmin altına taşındı.
• Form doğrulama: Uygulama Oluşturma ve Düzenleme sayfalarında, form gönderme düğmeleri artık devre dışı değil ve formu doğrulamak için etkinleştirilebilir. Uygulama oluşturma ve düzenleme sayfalarındaki doğrulanmış form alanları artık doğrulama hatasının metin açıklamalarını içeriyor.
• Duyarlılık: Artık SmartDocs dışındaki tüm sayfalar için geçerli olan maksimum genişlik var. SmartDocs gezinme özelliği artık dar telefon ekranlarında da çalışıyor. Uygulama oluşturma ve düzenleme sayfaları artık dar ekranlara daha duyarlı.

Portalınızı etkileyebilecek DOM değişiklikleri

Özellikle şu durumlarda göz önünde bulundurun:

• Gezinme çubukları (üstbilgi ve altbilgi) ve sayfa başlıkları, CSS geçersiz kılmalarıyla stilize edildi (veya gizlendi): Sayfa içeriği için artık maksimum genişlik var. Apigee, gezinme çubuklarını ve sayfa başlıklarını tarayıcı penceresinin kenarına kadar uzatmak için :before sözde öğesini stilize etti. Daha fazla bilgi için Gezinme çubukları ve sayfa başlıkları için birincil renkleri geçersiz kılma konusuna bakın.
• Tarayıcı penceresinin kenarına kadar uzanan arka planlara sahip sayfa öğeleri var (tam ekran arka plan resmi hariç): Sayfa içeriğinin maksimum genişliği, duyarlılığı artırmak için sınırlandırıldı. Bu durum, özel sayfalardaki daha önce tam genişlikte olan panelleri kısıtlayabilir. Yeni max-width ayarlarını kullanma hakkında daha fazla bilgi için Portal sayfasında tam genişlikte panel oluşturma başlıklı makaleyi inceleyin.
• Metin stillerini değiştirmek için CSS seçicilerle belirli HTML başlık seviyeleri hedeflendi: Belirli bir içeriğe uygulanan başlık seviyesi değişti. Örneğin: <H1> → <H2> Hangi içeriklerin etkilendiğini tam olarak anlamak için bu sürümle ilgili ayrıntılı değişiklik listesini inceleyin.
• Portal teması düzenleyicisinde "ikincil renk" olarak beyaz veya çok açık bir renk seçilmiştir: İkincil renk, beyaz arka plan üzerinde zor görülecek gezinme öğeleri için kullanılır. Erişilebilir bir ikincil renk seçmenizi ve gerekirse belirli durumlarda özel scss ile bu rengi geçersiz kılmanızı öneririz.
• Metin içi bağlantılar stilize edildi: Bağlantıların stilize edilmesi artık daha erişilebilir. Mevcut stilinizle nasıl etkileşime girebileceğini anlamak için aşağıdaki değişikliklere göz atın.
• Ana görünüm kartlarının içerik alanındaki 2 piksel border-bottom, CSS geçersiz kılmalarıyla stilize edilmiş veya gizlenmiş: Bu kenarlık, <mat-card-content> öğesinden <mat-card-actions> öğesindeki border-top'a taşınmıştır.

Ayrıntılı değişikliklerin özeti

Aşağıdaki bölümlerde, bu sürümde uygulanan ayrıntılı değişiklikler kategoriye göre özetlenmiştir.

Portal genelinde değişiklikler

Portal genelinde yapılan değişiklikler aşağıda özetlenmiştir.

• Aşağıdaki değişkenler artık kullanılmıyor:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Ana içerik alanının maksimum genişliği ve ana içerik alanının minimum yatay dolgusu üzerinde kontrol sağlayan yeni değişkenler vardır:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Birincil gezinme çubuğu değişiklikleri

Birincil gezinme çubuğunda yapılan değişiklikler aşağıda özetlenmiştir.

• <img> logosu artık hem masaüstü hem de mobil ekran boyutları için <a> ile sarmalanıyor.
• Kullanıcı açılır menü düğmesi artık <a> yerine <button> şeklinde

Bağlantı stili değişiklikleri

Metin içindeki standart bağlantılar <a> artık varsayılan olarak alt çizgiye ve fareyle üzerine gelindiğinde arka plan rengine (tema ayarlarındaki "ikincil renk" temel alınarak) sahip

404 sayfası değişiklikleri

404 sayfasında yapılan değişiklikler aşağıda özetlenmiştir.

• "Şimdi oturum açın" seçeneği artık <H1> yerine <H2>
• Açıklama metni artık <H1> yerine <H2>

API'ler sayfası

API'ler sayfasında yapılan değişiklikler, kategoriye göre aşağıda özetlenmiştir.

• API arama/filtreleme giriş kartı:
  • <mat-card-content class="mat-card-content"> artık arama API'leri kart başlığını ve girişini sarmalıyor
  • <H2> artık class="api-doc-filter-title" yerine class="mat-subheading-1" kullanıyor
  • <mat-form-field> artık appearance="outline" kullanıyor
  • Girişin önüne <mat-form-field> arama simgesi eklendi: "<mat-icon matPrefix>search</mat-icon>"
  • Girişe ARIA etiketleri ve kontrol referansları eklendi.
• Boş API listesi mesajı:
  • "API bulunamadı" mesajı artık <H1> yerine <H2>
  • Açıklama artık <H2> yerine <H3>
• API kartları listesi:

  "Aramanızla eşleşen API yok" mesajı artık <H1> yerine <H2> olarak gösteriliyor.

• API kartları:
  • >div class="api-doc-card-content-image-gradient"></div> kaldırıldı
  • API başlığı, <div> içeren resmin dışına taşınarak resmin hemen ardından <div class="api-doc-card-content-title"></div> bölümüne yerleştirildi. <div>
  • API başlıkları artık <H1> yerine <H2>

Uygulama Listesi:

• Boş durum:
  • "Başlayın" düğmesi artık <H1> yerine <H2>
  • Boş durum yönergeleri artık <H2> yerine <H3>
• Liste:
  • "Uygulamalarım" artık <H1> yerine <H2>
  • <mat-row> artık <a> içinde çarpıtılıyor

Uygulama sayfaları oluşturma ve düzenleme

Uygulama oluşturma ve düzenleme sayfalarında yapılan değişiklikler aşağıda özetlenmiştir.

• <div class="app-buttons">, <form> öğesinin sonuna taşındı ve <div class="form-buttons-sticky-container"> ile değiştirildi
• .app-layout-section sınıfının tüm kullanımları .details-layout-section olarak değiştirildi
• .app-layout-section-title sınıfının tüm kullanımları .details-layout-section-title olarak değiştirildi
• Tüm bölüm başlıkları artık <div> yerine <H2>
• .app-layout-section-content sınıfının tüm kullanımları .details-layout-section-content olarak değiştirildi
• API listesi artık açma/kapatma düğmeleri olan API kartlarından oluşan bir liste değil (API listesine benzer). Bunun yerine, API'lerin bulunduğu bir tablodur.
• Geri çağırma URL'si girişi yeni bir bölüme taşındı
• Kaydet düğmesi artık mat-raised-button stilini ve birincil renk arka planını kullanıyor.
• Tablolar artık .app-table-wrapper sınıfına sahip bir <div> içine yerleştiriliyor.
• Tablo üstbilgileri artık <thead> sarmalayıcısını kullanıyor
• Tablo gövdeleri artık <tbody> sarmalayıcısını kullanıyor
• [style.width] artık tablo sütunu genişliklerini ayarlamak için kullanılmıyor
• Tablodaki tüm <a> etiketleri artık bunun yerine <button kullanıyor.

Teams listesi

Ekip listesinde yapılan değişiklikler aşağıda özetlenmiştir.

• Boş durum:
  • "Başlayın" düğmesi artık <H1> yerine <H2>
  • "Paylaşılan uygulama sahipliğini yönetmek için ekip oluşturma" seçeneği artık <H2> yerine <H3> olarak gösteriliyor.
• Liste:

  "Ekipler" başlığı artık <H1> yerine <H2>

Ekip sayfaları oluşturma ve düzenleme

Ekip oluşturma ve düzenleme sayfalarında yapılan değişiklikler aşağıda özetlenmiştir.

• <form> tarihinde .teams-form sınıfı .details-form ile değiştirildi
• <div class="teams-buttons">, <form> listesinin sonuna taşındı ve <div class="form-buttons-sticky-container"> ile değiştirildi
• .teams-layout-section sınıfının tüm kullanımları .details-layout-section olarak değiştirildi
• .teams-layout-section-title sınıfının tüm kullanımları .details-layout-section-title olarak değiştirildi
• .teams-layout-section-content sınıfının tüm kullanımları .details-layout-section-content olarak değiştirildi
• <div class="team-apps-container">, <table class="team-apps"> öğesinin etrafına eklendi

SmartDocs

Smart Docs arayüzünde yapılan değişiklikler aşağıda özetlenmiştir.

• Yan gezinme:
  • Yan gezinme, angular-material bileşenleriyle tamamen yeniden yazıldı.
  • Yan gezinme başlıkları artık <div> yerine <H2>
  • Gezinme öğeleri artık portal teması düzenleyicisinin "ikincil rengi" yerine portalın varsayılan metin rengini kullanıyor.
  • Yan gezinmedeki seçili, odaklanılmış ve fareyle üzerine gelinen öğelerde artık sırasıyla metin ve arka plan için portal tema düzenleyicisinin "ikincil renginin" koyu ve açık varyasyonları kullanılıyor.
• İçerik:
  • "Yol Parametreleri" ve "Başlık Parametreleri" gibi birçok alt başlık artık <H3> yerine <H2> olarak gösteriliyor.
  • Genel bakış sayfasındaki şema öğeleri artık <H2> yerine <H3>=>

Mevcut bir ana sayfaya erişilebilirlik iyileştirmeleri ekleme

Mevcut bir portalınız varsa, aşağıda açıklandığı gibi, gezilebilir kartlarla ilgili yeni erişilebilirlik iyileştirmelerinden yararlanmak için ana sayfayı düzenlemeniz gerekir:

1. href="" öğesini <mat-card> kapsayıcısından kaldırın.
2. <mat-card-header> içindeki kart başlığı için <H1> yerine <H2> kullanın.
3. Kart başlığının <h2> içine metni <a class="navigable-content" href="href-name"> ile sarmalayın ve href-name değerini kartın Gezinmesi için uygun değere ayarlayın.

Alternatif olarak aşağıdaki kart şablonunu kullanabilirsiniz:

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

Gezinme çubukları ve sayfa başlıkları için birincil renkleri geçersiz kılma

Gezinme çubuklarını ve sayfa başlıklarını tarayıcı penceresinin kenarına kadar uzatmak için gelişmiş tema düzenleyiciyi kullanarak gezinme çubukları ve sayfa başlıkları için özel stil ekleyin. Başlık gezinme çubuğu için aşağıdaki gibi bir stil ekleyebilirsiniz:

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

Bir uygulamanın API'lerini yönetme için güncelleme prosedürü

Entegre portalda bir uygulamadaki API'leri yönetmek için kullanılan kullanıcı etkileşimi değişti. Özellikle bir uygulamayı yönetirken kullanıcılar, API'ler bölümünde bir API'ye uygulamadan erişimi etkinleştirmek veya devre dışı bırakmak için sırasıyla ya da simgesini (açma/kapatma düğmesi yerine) tıklamalıdır.

Portalınızdaki, uygulama sayfasında API'lerin nasıl yönetileceğini açıklayan tüm prosedürleri güncelleyin (geçerliyse). Daha fazla bilgi için Uygulamanızdaki API'leri yönetme başlıklı makaleyi inceleyin.

Düzeltilen hatalar

Bu sürümde aşağıdaki hatalar düzeltilmiştir. Bu liste, öncelikli olarak destek kayıtlarının düzeltilip düzeltilmediğini kontrol eden kullanıcılar içindir. Tüm kullanıcılar için ayrıntılı bilgi sağlamak üzere tasarlanmamıştır.

Bilinen sorunlar

Entegre portal ile ilgili bilinen sorunların listesi için Entegre portal ile ilgili bilinen sorunlar başlıklı makaleyi inceleyin.