20.07.27 - Catatan rilis portal terintegrasi Apigee Edge

Anda sedang melihat dokumentasi Apigee Edge.
Buka dokumentasi Apigee X. info

Pada hari Senin, 27 Juli, kami akan mulai merilis versi baru portal terintegrasi Apigee Edge.

Fitur dan peningkatan baru

Bagian ini menjelaskan peningkatan dan fitur baru dalam rilis ini.

Peningkatan aksesibilitas dan responsivitas

Daftar berikut mencantumkan peningkatan aksesibilitas dan responsivitas yang diimplementasikan untuk rilis ini.

  • Navigasi keyboard: Kini Anda dapat menggunakan menu navigasi header dan footer, navigasi samping SmartDocs, Daftar aplikasi, Tampilan aplikasi, dan kartu API menggunakan keyboard.
  • Pengelolaan fokus: Menavigasi dengan menu navigasi header dan navigasi samping SmartDocs akan memindahkan fokus ke <H1> pertama di halaman setelah tindakan navigasi.
  • Region live: Perubahan pada daftar API yang dihasilkan dari pemfilteran tekstual kini dilaporkan ke pengguna yang menggunakan pembaca layar.
  • Penggunaan semantik judul HTML: Semua teks kini dimuat dalam tag HTML yang sesuai secara semantik. Struktur {i>heading<i} dengan hierarki yang tepat kini digunakan di seluruh portal.
  • Penggunaan tunggal <H1>: Setiap halaman kini hanya memiliki satu <H1> sehingga pembaca layar dapat dengan mudah mengidentifikasi deskripsi konten halaman yang paling informatif.
  • Kapitalisasi gaya: Penggunaan huruf besar semua sebagai aksen visual kini diterapkan secara eksklusif dengan CSS, bukan di teks sebenarnya.
  • Urutan logis DOM: Tombol tindakan di halaman Buat dan Edit Aplikasi telah dipindahkan ke bawah elemen formulir di DOM sehingga dapat diaktifkan dalam urutan logis, pada saat interaksi formulir selesai.
  • Deskripsi tekstual elemen visual: Ada peningkatan penggunaan label, teks alternatif, dan teks tombol, yang semuanya meningkatkan navigasi dengan pembaca layar.
  • Kontras warna: Kontras warna telah ditingkatkan untuk memenuhi persyaratan kontras WCAG AA di banyak tempat di seluruh produk. Judul API dalam daftar API telah dipindahkan ke bawah gambar untuk menghindari kemungkinan kontras warna yang tidak memadai.
  • Validasi formulir: Di halaman Buat dan Edit Aplikasi, tombol pengiriman formulir tidak lagi dinonaktifkan dan dapat diaktifkan untuk memvalidasi formulir. Kolom formulir yang divalidasi di halaman Buat dan Edit Aplikasi kini menyertakan deskripsi tekstual tentang error validasi.
  • Responsivitas: Kini ada lebar maksimum yang berlaku untuk semua halaman, kecuali SmartDocs. Navigasi SmartDocs kini berfungsi pada layar ponsel yang sempit. Halaman Buat dan Edit Aplikasi kini lebih responsif untuk layar yang sempit.

Perubahan DOM yang mungkin memengaruhi portal Anda

Terutama pertimbangkan jika:

  • Menu navigasi (header dan footer) serta judul halaman telah ditata (atau disembunyikan) dengan penggantian CSS: Sekarang ada lebar maksimum untuk konten halaman. Untuk memperluas menu navigasi dan header halaman ke tepi jendela browser, Apigee menata gaya elemen pseudo :before. Untuk informasi selengkapnya, lihat Mengganti warna primer untuk menu navigasi dan header halaman.
  • Ada elemen halaman dengan latar belakang yang meluas ke tepi jendela browser (selain gambar latar layar penuh): Lebar maksimum konten halaman telah dibatasi untuk meningkatkan daya respons, yang dapat membatasi panel lebar penuh sebelumnya dalam halaman khusus. Untuk informasi selengkapnya tentang cara menggunakan setelan lebar maksimal yang baru, lihat Membuat panel lebar penuh di halaman portal.
  • Tingkat judul HTML tertentu telah ditargetkan dengan pemilih CSS untuk mengubah gaya teks: Tingkat judul yang diterapkan ke konten tertentu telah berubah. Misalnya: <H1> → <H2> Tinjau daftar perubahan mendetail untuk rilis ini guna memahami secara persis konten apa yang terpengaruh.
  • Warna putih atau sangat terang dipilih sebagai "warna sekunder" di editor tema portal: Warna sekunder digunakan untuk elemen navigasi yang akan sulit dilihat pada latar belakang berwarna putih. Sebaiknya pilih warna sekunder yang dapat diakses, lalu ganti warna tersebut jika perlu dengan scss kustom dalam situasi tertentu.
  • Gaya link dalam teks telah diubah: Gaya link kini lebih mudah diakses. Lihat perubahan di bawah untuk memahami cara aplikasi dapat berinteraksi dengan gaya visual yang ada.
  • Border-bottom 2 piksel di area konten kartu tampilan beranda telah ditata atau disembunyikan dengan penggantian CSS: Batas ini telah dipindahkan dari <mat-card-content> ke batas atas di <mat-card-actions>.

Ringkasan perubahan mendetail

Bagian berikut merangkum perubahan mendetail yang telah diimplementasikan dalam rilis ini, berdasarkan kategori.

Perubahan di seluruh portal

Perubahan di seluruh portal dirangkum di bawah ini.

  • Variabel berikut tidak lagi digunakan:
    • $layout-horizontal-padding
    • $layout-main-content-horiz-padding
    • $layout-header-horiz-padding
    • $layout-context-bar-horiz-padding
  • Ada variabel baru yang memberikan kontrol atas lebar maksimum untuk area konten utama dan padding horizontal minimum untuk area konten utama:
    • $layout-main-content-max-width
    • $layout-horizontal-min-padding

Perubahan menu navigasi utama

Perubahan pada menu navigasi utama dirangkum di bawah ini.

  • Logo <img> kini digabungkan dalam <a> untuk ukuran layar desktop dan seluler
  • Tombol drop-down pengguna kini menjadi <button>, bukan <a>

Link standar <a> dalam teks kini memiliki garis bawah secara default dan warna latar belakang (berdasarkan setelan tema "warna sekunder") saat kursor diarahkan

Perubahan halaman 404

Berikut adalah ringkasan perubahan pada halaman 404.

  • "Login sekarang" kini menjadi <H2>, bukan <H1>
  • Teks penjelasan kini menjadi <H2>, bukan <H1>

Halaman APIs

Perubahan pada halaman API dirangkum di bawah, berdasarkan kategori.

  • Kartu input penelusuran/filter API:
    • <mat-card-content class="mat-card-content"> kini menggabungkan judul dan input kartu API penelusuran
    • <H2> kini menggunakan class="mat-subheading-1", bukan class="api-doc-filter-title"
    • <mat-form-field> kini menggunakan appearance="outline"
    • Ikon penelusuran telah ditambahkan ke <mat-form-field> sebelum input: "<mat-icon matPrefix>search</mat-icon>"
    • Label dan referensi kontrol aria telah ditambahkan ke input
  • Pesan daftar API kosong:
    • "Tidak ditemukan API" sekarang menjadi <H2>, bukan <H1>
    • Penjelasan kini menjadi <H3>, bukan <H2>
  • Daftar kartu API:

    "Tidak ada API yang cocok dengan penelusuran Anda" sekarang menjadi <H2> bukan <H1>

  • Kartu API:
    • >div class="api-doc-card-content-image-gradient"></div> telah dihapus
    • Judul API telah dipindahkan dari gambar yang berisi <div> dan ke <div class="api-doc-card-content-title"></div> tepat setelah gambar <div>
    • Judul API kini menjadi <H2>, bukan <H1>

Daftar Aplikasi:

  • Status kosong:
    • "Mulai" kini menjadi <H2>, bukan <H1>
    • Panduan status kosong kini menjadi <H3>, bukan <H2>
  • Daftar:
    • "Aplikasi Saya" kini menjadi <H2>, bukan <H1>
    • <mat-row> sekarang dibelokkan dalam <a>

Membuat dan Mengedit halaman Aplikasi

Perubahan pada halaman Buat dan Edit Aplikasi dirangkum di bawah ini.

  • <div class="app-buttons"> telah dipindahkan ke akhir <form> dan diganti dengan <div class="form-buttons-sticky-container">
  • Semua penggunaan class .app-layout-section diubah menjadi .details-layout-section
  • Semua penggunaan class .app-layout-section-title diubah menjadi .details-layout-section-title
  • Semua judul bagian kini berwarna <H2>, bukan <div>
  • Semua penggunaan class .app-layout-section-content diubah menjadi .details-layout-section-content
  • Daftar API tidak lagi berupa daftar kartu API dengan tombol beralih (serupa dengan daftar API). Sebagai gantinya, ini adalah tabel API
  • Input URL Callback telah dipindahkan ke bagian baru
  • Tombol simpan kini menggunakan gaya tombol yang diangkat matras dan latar belakang warna primer
  • Tabel sekarang digabungkan dalam <div> dengan class .app-table-wrapper
  • Header tabel kini menggunakan wrapper <thead>
  • Isi tabel kini menggunakan wrapper <tbody>
  • [style.width] tidak lagi digunakan untuk menetapkan lebar kolom tabel
  • Semua tag <a> dalam tabel kini menggunakan <button sebagai gantinya

Daftar tim

Perubahan pada daftar Tim dirangkum di bawah ini.

  • Status kosong:
    • "Mulai" kini menjadi <H2>, bukan <H1>
    • "Buat tim untuk mengelola kepemilikan aplikasi bersama" kini menjadi <H3> bukan <H2>
  • {i>List<i}:

    Judul "Tim" sekarang menjadi <H2>, bukan <H1>

Membuat dan Mengedit halaman Tim

Perubahan pada halaman Buat dan Edit Tim dirangkum di bawah ini.

  • Di <form>, class .teams-form telah diganti dengan .details-form
  • <div class="teams-buttons"> telah dipindahkan ke akhir <form> dan diganti dengan <div class="form-buttons-sticky-container">
  • Semua penggunaan class .teams-layout-section diubah menjadi .details-layout-section
  • Semua penggunaan class .teams-layout-section-title diubah menjadi .details-layout-section-title
  • Semua penggunaan class .teams-layout-section-content diubah menjadi .details-layout-section-content
  • <div class="team-apps-container"> ditambahkan di sekitar <table class="team-apps">

SmartDocs

Perubahan pada antarmuka SmartDocs dirangkum di bawah ini.

  • Navigasi samping:
    • Navigasi samping telah ditulis ulang sepenuhnya dengan komponen material angular
    • Judul navigasi samping kini menjadi <H2>, bukan <div>
    • Item navigasi kini menggunakan warna teks default portal, bukan editor tema portal "warna sekunder"
    • Item yang dipilih, difokuskan, dan digeser ke samping di navigasi samping kini menggunakan variasi gelap dan terang dari "warna sekunder" editor tema portal untuk masing-masing teks dan latar belakang
  • Konten:
    • Banyak subjudul seperti "Parameter Jalur" dan "Parameter Header" kini menjadi <H2>, bukan <H3>
    • Entitas skema di halaman ringkasan kini menjadi <H3>=>, bukan <H2>

Menambahkan peningkatan aksesibilitas ke halaman beranda yang ada

Jika memiliki portal keluar, Anda perlu mengedit halaman beranda untuk memanfaatkan peningkatan aksesibilitas baru untuk kartu yang dapat dinavigasi, seperti yang dijelaskan di bawah:

  1. Hapus href="" dari penampung <mat-card>.
  2. Gunakan <H2>, bukan <H1> untuk judul kartu dalam <mat-card-header>.
  3. Di dalam judul kartu <h2>, gabungkan teks dalam <a class="navigable-content" href="href-name"> dan tetapkan href-name ke nilai yang sesuai untuk navigasi kartu.

Atau, Anda dapat menggunakan template kartu berikut:


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

Mengganti warna primer untuk menu navigasi dan header halaman

Untuk memperluas menu navigasi dan header halaman ke tepi jendela browser, tambahkan gaya kustom untuk menu navigasi dan header halaman menggunakan editor tema lanjutan, seperti berikut untuk menu navigasi header:


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

Memperbarui prosedur pengelolaan API untuk aplikasi

Interaksi pengguna untuk mengelola API dalam aplikasi di portal terintegrasi telah berubah. Khususnya, saat mengelola aplikasi, di bagian API, pengguna harus mengklik ikon aktifkan atau ikon nonaktifkan (bukan tombol) untuk mengaktifkan atau menonaktifkan akses ke API dari aplikasi.

Perbarui semua prosedur di portal Anda yang menjelaskan cara mengelola API di halaman aplikasi, jika ada. Untuk informasi selengkapnya, lihat Mengelola API di aplikasi Anda.

Bug telah diperbaiki

Bug berikut telah diperbaiki dalam rilis ini. Daftar ini terutama ditujukan bagi pengguna yang memeriksa apakah tiket dukungan mereka telah diperbaiki. API ini tidak dirancang untuk memberikan informasi mendetail kepada semua pengguna.

ID Masalah Nama Komponen Deskripsi
161269688 Portal Terintegrasi

Thumbnail aset tidak dirender dengan benar di Apigee Hybrid

Thumbnail kini ditampilkan dengan benar di halaman Aset.

161295683 Portal Terintegrasi

Server gagal tanpa deskripsi yang ditetapkan untuk aplikasi

Pembuatan aplikasi kini akan berhasil jika deskripsi (kolom opsional) tidak ditetapkan untuk aplikasi.

160898967 Portal Terintegrasi

Halaman landing untuk portal tidak dapat di-scroll dengan benar

Halaman landing portal kini dapat di-scroll.

160613314,
159197760,
158643196,
158069283,
158069066,
140154942 		Portal Terintegrasi

Perbaikan keamanan lainnya
158593496 Portal Terintegrasi

Pembuatan aplikasi developer gagal di portal V1

Masalah yang mencegah pembuatan aplikasi developer di portal V1 telah diperbaiki.

158318079 Portal Terintegrasi

Menambahkan atau mengubah URL callback di portal developer tidak berfungsi

Masalah yang mencegah pengguna portal menambahkan atau mengubah URL callback di halaman API telah diperbaiki.

157902256 Portal Terintegrasi

Publikasi dapat menggantikan pembaruan nama halaman di halaman Detail halaman

Masalah yang menyebabkan pembaruan nama halaman diganti saat Anda memublikasikan portal (disebabkan oleh kondisi race) telah diperbaiki.

138993728 Portal Terintegrasi

Pengurutan dan penelusuran email program developer tidak berfungsi

Penelusuran dan pengurutan akun pengguna konsumen kini berfungsi seperti yang diharapkan.

Masalah umum

Untuk mengetahui daftar masalah umum pada portal terintegrasi, lihat Masalah umum pada portal terintegrasi.