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

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

27 Temmuz Pazartesi günü, Apigee Edge 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 duyarlılık iyileştirmeleri listelenmiştir.

• Klavyeyle gezinme: Artık klavyeyi kullanarak başlık ve altbilgi gezinme çubuklarında, Smart Docs 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 Smart Docs 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> öğesi 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ı: Uygulama 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ı. API listesindeki API başlıkları, renk kontrastının yetersiz olmasını önlemek için 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 hariç tüm sayfalar için geçerli olan maksimum genişlik var. SmartDocs navigasyonu 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 sahte öğesini stilize etti. Daha fazla bilgi için Gezinme çubukları ve sayfa başlıkları için birincil renkleri geçersiz kılma başlıklı makaleyi inceleyin.
• 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ılmıştır. 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 biçimlendirildi: Bağlantıların biçimlendirilmesi 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ılma işlemleriyle 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.

• Logo <img> artık hem masaüstü hem de mobil ekran boyutları için <a> içine alınmıştır.
• Kullanıcı açılır liste düğmesi artık <a> yerine <button>

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ınır) 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 <H2> yerine <H1>
  • Açıklama artık <H2> yerine <H3>
• API kartları listesi:

  "Aramanızla eşleşen API yok" mesajı artık <H2> yerine <H1>

• 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 <div> resminden hemen sonraki <div class="api-doc-card-content-title"></div> bölümüne yerleştirildi.
  • 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 rehberliği 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ımı .details-layout-section olarak değiştirildi
• .app-layout-section-title sınıfının tüm kullanımı .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ımı .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ıyla <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ımı .details-layout-section olarak değiştirildi
• .teams-layout-section-title sınıfının tüm kullanımı .details-layout-section-title olarak değiştirildi
• .teams-layout-section-content sınıfının tüm kullanımı .details-layout-section-content olarak değiştirildi
• <div class="team-apps-container">, <table class="team-apps"> öğesinin etrafına eklendi

SmartDocs

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

• Yanda 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 gezinme panelinde seçilen, odaklanan ve üzerine gelinen öğelerde artık sırasıyla metin ve arka plan için portal tema düzenleyicisinin "ikincil renk" özelliğinin 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 içinde <h2> metni <a class="navigable-content" href="href-name"> ile sarmalayın ve href-name öğesini 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 veya simgesini (açma/kapatma düğmesi yerine) tıklayarak uygulamadan bir API'ye erişimi etkinleştirmeli veya devre dışı bırakmalı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, öncelikle destek taleplerinin 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.