20.07.27 - Ghi chú phát hành cổng tích hợp Apigee Edge

Bạn đang xem tài liệu về Apigee Edge.
Chuyển đến tài liệu về Apigee X. thông tin

Vào thứ Hai, ngày 27 tháng 7, chúng tôi sẽ bắt đầu phát hành phiên bản mới của cổng thông tin tích hợp Apigee Edge.

Tính năng mới và tính năng nâng cao

Phần này mô tả các tính năng và điểm cải tiến mới trong bản phát hành này.

Cải tiến về khả năng hỗ trợ tiếp cận và tốc độ phản hồi

Dưới đây là danh sách các điểm cải tiến về khả năng hỗ trợ tiếp cận và khả năng phản hồi được triển khai cho bản phát hành này.

• Thao tác bằng bàn phím: Giờ đây, bạn có thể di chuyển giữa các thanh điều hướng ở đầu trang và chân trang, di chuyển bên cạnh SmartDocs, Danh sách ứng dụng, Chế độ xem ứng dụng và thẻ API bằng bàn phím.
  
• Quản lý tiêu điểm: Di chuyển bằng thanh điều hướng ở tiêu đề và phần điều hướng bên của SmartDocs di chuyển tiêu điểm đến <H1> đầu tiên trên trang sau một thao tác di chuyển.
• Khu vực trực tiếp: Những thay đổi đối với danh sách API do lọc văn bản hiện được báo cáo cho người dùng sử dụng trình đọc màn hình.
• Sử dụng theo ngữ nghĩa của tiêu đề HTML: Tất cả văn bản hiện được chứa trong thẻ HTML phù hợp về ngữ nghĩa. Cấu trúc tiêu đề có phân cấp phù hợp hiện được sử dụng trong toàn bộ cổng thông tin.
• Sử dụng <H1> ít thường xuyên: Mỗi trang hiện chỉ có một <H1> duy nhất để trình đọc màn hình có thể dễ dàng xác định đoạn mô tả chứa nội dung hữu ích nhất của trang.
• Viết hoa văn phong: Việc sử dụng toàn bộ chữ viết hoa làm điểm nhấn hình ảnh hiện chỉ được áp dụng với CSS thay vì trong văn bản thực tế.
• Thứ tự hợp lý của DOM: Các nút hành động trên trang Tạo và chỉnh sửa ứng dụng đã được di chuyển xuống dưới các thành phần biểu mẫu trong DOM để có thể được kích hoạt theo thứ tự hợp lý sau khi hoàn thành hoạt động tương tác với biểu mẫu.
• Mô tả văn bản của các phần tử hình ảnh: Cải tiến việc sử dụng nhãn, văn bản thay thế và văn bản trên nút, tất cả đều cải thiện khả năng điều hướng bằng trình đọc màn hình.
• Độ tương phản màu: Độ tương phản màu đã được tăng lên để đáp ứng các yêu cầu về độ tương phản của WCAG AA ở nhiều nơi trên sản phẩm. Các tiêu đề API trong danh sách API đã được di chuyển xuống dưới hình ảnh để tránh khả năng độ tương phản màu không đủ.
• Xác thực biểu mẫu: Trên trang Tạo và chỉnh sửa ứng dụng, nút gửi biểu mẫu không còn bị vô hiệu hoá nữa và có thể được kích hoạt để xác thực biểu mẫu. Các trường biểu mẫu đã được xác thực trên trang Tạo và chỉnh sửa ứng dụng giờ đây có nội dung mô tả bằng văn bản về lỗi xác thực.
• Mức độ phản hồi: Hiện có chiều rộng tối đa áp dụng cho tất cả các trang, ngoại trừ SmartDocs. Tính năng điều hướng của SmartDocs hiện hoạt động trên các màn hình hẹp có kích thước điện thoại. Giờ đây, các trang Tạo và chỉnh sửa ứng dụng sẽ phản hồi nhanh hơn với màn hình hẹp.

Các thay đổi về DOM có thể ảnh hưởng đến cổng thông tin của bạn

Đặc biệt cân nhắc xem:

• Các thanh điều hướng (đầu trang và chân trang) và tiêu đề trang đã được tạo kiểu (hoặc ẩn) bằng cơ chế ghi đè CSS: Hiện đã có chiều rộng tối đa cho nội dung trang. Để mở rộng thanh điều hướng và tiêu đề trang ra cạnh cửa sổ trình duyệt, Apigee đã tạo kiểu cho phần tử giả :before. Để biết thêm thông tin, hãy xem phần Ghi đè màu chính cho thanh điều hướng và tiêu đề trang.
• Có các phần tử trang có nền mở rộng ra tới cạnh cửa sổ trình duyệt (trừ hình nền toàn màn hình): Chiều rộng tối đa của nội dung trang bị giới hạn để cải thiện khả năng thích ứng, điều này có thể khiến các bảng điều khiển trước đây có chiều rộng đầy đủ bị hạn chế trong các trang tuỳ chỉnh. Để biết thêm thông tin về cách sử dụng chế độ cài đặt chiều rộng tối đa mới, hãy xem phần Tạo bảng điều khiển có chiều rộng đầy đủ trong trang cổng thông tin.
• Các cấp tiêu đề HTML cụ thể đã được nhắm mục tiêu bằng bộ chọn CSS để sửa đổi kiểu văn bản: Cấp tiêu đề áp dụng cho một số nội dung nhất định đã thay đổi. Ví dụ: <H1> → <H2> Xem danh sách thay đổi chi tiết của bản phát hành này để hiểu chính xác những nội dung bị ảnh hưởng.
• Màu trắng hoặc màu rất sáng được chọn làm "màu phụ" trong trình chỉnh sửa giao diện của cổng: Màu phụ được dùng cho các thành phần điều hướng khó nhìn thấy trên nền trắng. Bạn nên chọn màu phụ dễ tiếp cận rồi ghi đè màu đó nếu cần bằng scs tuỳ chỉnh trong các trường hợp cụ thể.
• Tạo kiểu cho đường liên kết trong văn bản:Giờ đây, bạn có thể dễ dàng tạo kiểu cho đường liên kết trong văn bản. Hãy xem các thay đổi dưới đây để hiểu cách tạo kiểu này có thể tương tác với kiểu hiện tại của bạn.
• Đường viền dưới cùng 2 px ở vùng nội dung của thẻ xem trang chủ đã được tạo kiểu hoặc ẩn bằng cơ chế ghi đè CSS: Đường viền này đã được chuyển từ <mat-card-content> thành đường viền trên cùng vào ngày <mat-card-actions>.

Tóm tắt các thay đổi chi tiết

Các phần sau đây tóm tắt các thay đổi chi tiết đã được triển khai trong bản phát hành này theo danh mục.

Thay đổi trên toàn cổng thông tin

Dưới đây là thông tin tóm tắt về các thay đổi trên toàn cổng thông tin.

• Các biến sau không còn được sử dụng nữa:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Có một số biến mới cho phép kiểm soát chiều rộng tối đa cho vùng nội dung chính và khoảng đệm ngang tối thiểu cho vùng nội dung chính:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Các thay đổi đối với thanh điều hướng chính

Dưới đây là thông tin tóm tắt các thay đổi đối với thanh điều hướng chính.

• Biểu trưng <img> hiện được bao bọc trong một <a> dành cho cả kích thước màn hình máy tính và thiết bị di động
• Nút thả xuống dành cho người dùng hiện là <button> thay vì <a>

Thay đổi kiểu liên kết

Theo mặc định, đường liên kết chuẩn <a> trong văn bản sẽ có đường gạch chân và màu nền (dựa trên chế độ cài đặt giao diện "màu phụ") khi di chuột

Thay đổi trang 404

Dưới đây là thông tin tóm tắt về các thay đổi đối với trang 404.

• Nút "Đăng nhập ngay" hiện là <H2> thay vì <H1>
• Văn bản giải thích hiện là <H2> thay vì <H1>

Trang API

Những thay đổi đối với trang API được tóm tắt dưới đây theo danh mục.

• Thẻ nhập dữ liệu tìm kiếm/bộ lọc API:
  • <mat-card-content class="mat-card-content"> hiện gói tiêu đề và mục nhập của thẻ API tìm kiếm
  • <H2> hiện đang sử dụng class="mat-subheading-1" thay vì class="api-doc-filter-title"
  • <mat-form-field> hiện đang sử dụng appearance="outline"
  • Biểu tượng tìm kiếm đã được thêm vào <mat-form-field> trước giá trị nhập: "<mat-icon matPrefix>search</mat-icon>"
  • Đã thêm nhãn Aria và tham chiếu điều khiển vào dữ liệu đầu vào
• Thông báo danh sách API trống:
  • "Không tìm thấy API" nào hiện là <H2> thay vì <H1>
  • Nội dung giải thích hiện là <H3> thay vì <H2>
• Danh sách thẻ API:

  "Không có API nào phù hợp với nội dung tìm kiếm của bạn" hiện là <H2> thay vì <H1>

• Thẻ API:
  • Đã xoá >div class="api-doc-card-content-image-gradient"></div>
  • Tiêu đề API đã được di chuyển ra khỏi hình ảnh chứa <div> và vào <div class="api-doc-card-content-title"></div> ngay sau hình ảnh <div>
  • Tiêu đề API hiện là <H2> thay vì <H1>

Danh sách ứng dụng:

• Trạng thái trống:
  • Mục "Bắt đầu" hiện là <H2> thay vì <H1>
  • Hướng dẫn trạng thái trống hiện là <H3> thay vì <H2>
• Danh sách:
  • "Ứng dụng của tôi" hiện là <H2> thay vì <H1>
  • <mat-row> hiện bị biến dạng trong <a>

Tạo và chỉnh sửa trang Ứng dụng

Dưới đây là thông tin tóm tắt về các thay đổi đối với các trang Tạo và chỉnh sửa ứng dụng.

• <div class="app-buttons"> đã được chuyển đến cuối <form> và thay thế bằng <div class="form-buttons-sticky-container">
• Đã thay đổi toàn bộ mức sử dụng của lớp .app-layout-section thành .details-layout-section
• Đã thay đổi toàn bộ mức sử dụng của lớp .app-layout-section-title thành .details-layout-section-title
• Bây giờ, tất cả tiêu đề mục sẽ là <H2> thay vì <div>
• Đã thay đổi toàn bộ mức sử dụng của lớp .app-layout-section-content thành .details-layout-section-content
• Danh sách API không còn là danh sách thẻ API có nút bật/tắt (tương tự như danh sách API). Thay vào đó, đây là một bảng API
• Dữ liệu đầu vào URL gọi lại đã được chuyển vào một mục mới
• Nút lưu hiện sử dụng kiểu mat-rised-button và nền màu chính
• Các bảng hiện được gói trong một <div> có lớp .app-table-wrapper
• Tiêu đề bảng hiện sử dụng trình bao bọc <thead>
• Phần thân bảng hiện sử dụng trình bao bọc <tbody>
• [style.width] không còn được dùng để đặt chiều rộng cột trong bảng nữa
• Tất cả thẻ <a> trong bảng hiện sử dụng <button

Danh sách nhóm

Dưới đây là thông tin tóm tắt các thay đổi đối với Danh sách nhóm.

• Trạng thái trống:
  • "Bắt đầu" hiện là <H2> thay vì <H1>
  • Lựa chọn "Tạo nhóm để quản lý quyền sở hữu ứng dụng dùng chung" hiện là <H3> thay vì <H2>
• Danh sách:

  Danh hiệu "Nhóm" hiện là <H2> thay vì <H1>

Tạo và chỉnh sửa các trang của Nhóm

Dưới đây là thông tin tóm tắt về các thay đổi đối với các trang Tạo và chỉnh sửa nhóm.

• Trên <form>, lớp .teams-form đã được thay thế bằng .details-form
• <div class="teams-buttons"> đã được chuyển đến cuối <form> và thay thế bằng <div class="form-buttons-sticky-container">
• Đã thay đổi toàn bộ mức sử dụng của lớp .teams-layout-section thành .details-layout-section
• Đã thay đổi toàn bộ mức sử dụng của lớp .teams-layout-section-title thành .details-layout-section-title
• Đã thay đổi toàn bộ mức sử dụng của lớp .teams-layout-section-content thành .details-layout-section-content
• Đã thêm <div class="team-apps-container"> xung quanh <table class="team-apps">

SmartDocs

Các thay đổi đối với giao diện SmartDocs được tóm tắt dưới đây.

• Trình đơn bên:
  • Thành phần điều hướng bên đã được viết lại hoàn toàn với các thành phần góc-Material
  • Tiêu đề điều hướng bên hiện giờ là <H2> thay vì <div>
  • Các mục điều hướng hiện sử dụng màu văn bản mặc định của cổng thông tin thay vì "màu phụ" trong trình chỉnh sửa giao diện của cổng thông tin
  • Các mục đã chọn, lấy tiêu điểm và di chuột trong thanh điều hướng bên hiện sử dụng các biến thể sáng và tối của trình chỉnh sửa giao diện cổng thông tin "màu phụ" cho văn bản và nền tương ứng
• Nội dung:
  • Nhiều tiêu đề phụ như "Tham số đường dẫn" và "Tham số tiêu đề" hiện có giá trị là <H2> thay vì <H3>
  • Thực thể giản đồ trên trang tổng quan hiện là <H3>=> thay vì <H2>

Thêm nội dung cải tiến về khả năng hỗ trợ tiếp cận vào trang chủ hiện có

Nếu có cổng thoát, bạn cần phải chỉnh sửa trang chủ để tận dụng những điểm cải tiến mới về khả năng hỗ trợ tiếp cận dành cho thẻ điều hướng được, như mô tả dưới đây:

1. Xoá href="" khỏi vùng chứa <mat-card>.
2. Sử dụng <H2> thay vì <H1> cho tiêu đề thẻ trong <mat-card-header>.
3. Bên trong tiêu đề thẻ <h2>, hãy gói văn bản trong một <a class="navigable-content" href="href-name"> và đặt href-name thành giá trị thích hợp cho hoạt động điều hướng của thẻ.

Ngoài ra, bạn có thể sử dụng mẫu thẻ sau:

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

Ghi đè màu chính cho thanh điều hướng và tiêu đề trang

Để mở rộng thanh điều hướng và tiêu đề trang ra cạnh cửa sổ trình duyệt, hãy thêm kiểu tuỳ chỉnh cho thanh điều hướng và tiêu đề trang bằng trình chỉnh sửa giao diện nâng cao, tương tự như quy trình sau đây cho thanh điều hướng tiêu đề:

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

Cập nhật quy trình quản lý API cho ứng dụng

Hoạt động tương tác của người dùng để quản lý API trong một ứng dụng trên cổng thông tin tích hợp đã thay đổi. Cụ thể, khi quản lý một ứng dụng, trong phần API, người dùng phải nhấp vào hoặc (thay vì nút bật/tắt) để bật hoặc tắt quyền truy cập tương ứng vào một API từ ứng dụng đó.

Cập nhật mọi quy trình trên cổng thông tin của bạn có mô tả cách quản lý các API trên trang ứng dụng (nếu có). Để biết thêm thông tin, hãy xem bài viết Quản lý API trong ứng dụng.

Đã sửa lỗi

Các lỗi sau đây đã được khắc phục trong bản phát hành này. Danh sách này chủ yếu dành cho người dùng kiểm tra xem phiếu yêu cầu hỗ trợ của họ đã được khắc phục hay chưa. Tính năng này không nhằm cung cấp thông tin chi tiết cho tất cả người dùng.

ID vấn đề	Tên thành phần	Nội dung mô tả
161269688	Cổng thông tin tích hợp	Hình thu nhỏ của tài sản hiển thị không chính xác trong kết hợp Apigee Giờ đây, hình thu nhỏ hiển thị chính xác trên trang Tài sản.
161295683	Cổng thông tin tích hợp	Máy chủ gặp lỗi và chưa thiết lập được nội dung mô tả cho ứng dụng Quá trình tạo ứng dụng sẽ thành công nếu không xác định được nội dung mô tả (trường không bắt buộc) cho ứng dụng.
160898967	Cổng thông tin tích hợp	Trang đích của cổng thông tin không cuộn đúng cách Trang đích cổng thông tin hiện có thể cuộn được.
160613314, 159197760, 158643196, 158069283, 158069066, 140154942	Cổng thông tin tích hợp	Các bản sửa lỗi bảo mật khác
158593496	Cổng thông tin tích hợp	Không tạo được ứng dụng dành cho nhà phát triển trong cổng phiên bản 1 Đã khắc phục một sự cố ngăn nhà phát triển tạo ứng dụng trên cổng thông tin phiên bản 1.
158318079	Cổng thông tin tích hợp	Không thể thêm hoặc sửa đổi URL gọi lại trong cổng thông tin cho nhà phát triển Đã khắc phục sự cố khiến người dùng cổng thông tin không thể thêm hoặc sửa đổi URL gọi lại trên trang API.
157902256	Cổng thông tin tích hợp	Việc xuất bản có thể ghi đè việc cập nhật tên trang trên trang Chi tiết trang Chúng tôi đã khắc phục một vấn đề khiến lượt cập nhật tên trang bị ghi đè khi bạn xuất bản cổng thông tin (do một tình huống tương tranh gây ra).
138993728	Cổng thông tin tích hợp	Tính năng sắp xếp email và tìm kiếm trong các chương trình dành cho nhà phát triển không hoạt động Tính năng tìm kiếm và sắp xếp các tài khoản người dùng tiêu dùng hiện hoạt động như mong đợi.

Vấn đề đã biết

Để xem danh sách các vấn đề đã biết với cổng thông tin tích hợp, hãy xem phần Các vấn đề đã biết với cổng thông tin tích hợp.