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 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 mới và tính năng nâng cao trong bản phát hành này.

Cải thiện khả năng phản hồi và hỗ trợ tiếp cận

Phần sau đây liệt kê 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.

• Điều hướng bằng bàn phím: Giờ đây, bạn có thể điều hướng trên thanh điều hướng ở đầu trang và chân trang, điều hướng bên SmartDocuments, 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: Thao tác bằng thanh điều hướng ở tiêu đề và thanh điều hướng bên SmartTài liệu sẽ di chuyển tiêu điểm đến <H1> đầu tiên trên trang sau một thao tác điều hướng.
• Khu vực trực tiếp: Giờ đây, các thay đổi đối với danh sách API do việc lọc văn bản sẽ được báo cáo cho người dùng sử dụng trình đọc màn hình.
• Sử dụng tiêu đề HTML theo ngữ nghĩa: Giờ đây, tất cả văn bản đều được đưa vào thẻ HTML phù hợp về mặt ngữ nghĩa. Cấu trúc tiêu đề có thứ bậc phù hợp hiện được sử dụng trên toàn bộ cổng thông tin.
• Cách sử dụng duy nhất của <H1>: Mỗi trang hiện chỉ có một <H1> để trình đọc màn hình có thể dễ dàng xác định đoạn mô tả có nhiều thông tin nhất về nội dung trang.
• Viết hoa kiểu cách: Giờ đây, việc sử dụng viết hoa toàn bộ làm điểm nhấn hình ảnh chỉ áp dụng cho CSS chứ không phải 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 các 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 để chúng có thể được kích hoạt theo thứ tự logic, khi hoàn tất tương tác biểu mẫu.
• Mô tả bằng văn bản của các phần tử hình ảnh: Cải thiện cách sử dụng nhãn, văn bản thay thế và văn bản trên nút, tất cả đều giúp 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 sắc: Độ tương phản màu đã được tăng lên để đáp ứng yêu cầu về độ tương phản của WCAG AA ở nhiều vị trí trong toàn bộ sản phẩm. Các tiêu đề API trong danh sách API đã được chuyển xuống dưới hình ảnh để tránh độ tương phản màu có thể 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 hiện bao gồm nội dung mô tả bằng văn bản về lỗi xác thực.
• Khả năng thích ứng: Hiện tại, 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 màn hình nhỏ có kích thước điện thoại. Trang Tạo và chỉnh sửa ứng dụng giờ đây phản hồi nhanh hơn với màn hình hẹp.

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

Đặc biệt, hãy cân nhắc xem:

• Thanh điều hướng (tiêu đề và chân trang) và tiêu đề trang đã được tạo kiểu (hoặc ẩn) bằng tính năng 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.
• Một số phần tử trang có nền mở rộng đến cạnh của cửa sổ trình duyệt (ngoài 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 phản hồi. Điều này có thể hạn chế bất kỳ bảng điều khiển có chiều rộng tối đa nào trước đây 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 Tạo bảng điều khiển có chiều rộng đầy đủ trên 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> Hãy xem danh sách thay đổi chi tiết của bản phát hành này để nắm 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ổng thông tin: Màu phụ dùng cho các thành phần điều hướng khó thấy trên nền trắng. Bạn nên chọn một màu phụ dễ tiếp cận, sau đó ghi đè màu đó (nếu cần) bằng các tệp scs tuỳ chỉnh trong một số trường hợp.
• Đã định kiểu đường liên kết trong văn bản: Giờ đây, bạn có thể tạo kiểu cho các đường liên kết dễ truy cập hơn. Hãy xem các thay đổi ở bên dưới để hiểu cách mã 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 trên vùng nội dung của thẻ trong chế độ xem trang chủ đã được tạo kiểu hoặc ẩn bằng cơ chế ghi đè CSS: Đường viền này đã được di chuyển từ <mat-card-content> sang đường viền trên cùng trên <mat-card-actions>.

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

Các phần sau đây tóm tắt những 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à tóm tắt 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
• Sau đây là một số biến mới giú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 về các thay đổi đối với thanh điều hướng chính.

• Biểu trưng <img> hiện được bọc trong một <a> 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 nay là <button> thay vì <a>

Các thay đổi về kiểu đường liên kết

Theo mặc định, đường liên kết chuẩn <a> trong văn bản sẽ có dấu gạch dưới và dùng 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à các thay đổi đối với trang 404.

• "Đă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

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

• Thẻ nhập nội dung tìm kiếm/bộ lọc API:
  • <mat-card-content class="mat-card-content"> hiện bao bọc mục nhập và tiêu đề của thẻ API tìm kiếm
  • <H2> hiện sử dụng class="mat-subheading-1" thay vì class="api-doc-filter-title"
  • <mat-form-field> hiện sử dụng appearance="outline"
  • Một biểu tượng tìm kiếm đã được thêm vào <mat-form-field> trước phương thức nhập: "<mat-icon matPrefix>search</mat-icon>"
  • Các nhãn Aria và tham chiếu đối chứng kiểm soát đã được thêm vào dữ liệu đầu vào
• Thông báo về danh sách API trống:
  • "Không tìm thấy API" 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 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 nay là <H2> thay vì <H1>

Danh sách ứng dụng:

• Trạng thái trống:
  • "Bắt đầu" hiện là <H2> thay vì <H1>
  • Hướng dẫn về 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 ở <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 trang Tạo và chỉnh sửa ứng dụng.

• Đã chuyển <div class="app-buttons"> đến cuối <form> và được thay thế bằng <div class="form-buttons-sticky-container">
• Đã thay đổi mọi cách sử dụng lớp .app-layout-section thành .details-layout-section
• Đã thay đổi mọi cách sử dụng lớp .app-layout-section-title thành .details-layout-section-title
• Tất cả tiêu đề của các mục nay là <H2> thay vì <div>
• Đã thay đổi mọi cách sử dụng 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
• Mục nhập URL gọi lại đã được di chuyển vào một mục mới
• Nút lưu hiện sử dụng kiểu nút mat-Raised-up và màu nền 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 nội dung 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
• Giờ đây, tất cả thẻ <a> trong bảng đều sử dụng <button

Danh sách đội

Dưới đây là nội dung tóm tắt về 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>
  • "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:

  "Nhóm" tiêu đề hiện là <H2> thay vì <H1>

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

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

• Trên <form>, lớp .teams-form đã được thay thế bằng .details-form
• Đã chuyển <div class="teams-buttons"> đến cuối <form> và thay thế bằng <div class="form-buttons-sticky-container">
• Đã thay đổi mọi cách sử dụng lớp .teams-layout-section thành .details-layout-section
• Đã thay đổi mọi cách sử dụng lớp .teams-layout-section-title thành .details-layout-section-title
• Đã thay đổi mọi cách sử dụng 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

Dưới đây là tóm tắt các thay đổi đối với giao diện SmartDocuments.

• Điều hướng bên:
  • Bảng điều hướng bên đã được viết lại hoàn toàn bằng các thành phần Material có góc
  • Tiêu đề của thanh điều hướng bên nay 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ụ" của trình chỉnh sửa giao diện cổng thông tin
  • Các mục đã chọn, đặt 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à "Header Parameters" (Tham số tiêu đề) hiện là <H2> thay vì <H3>
  • Các thực thể giản đồ trên trang tổng quan nay là <H3>=> thay vì <H2>

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

Nếu có cổng thoát, bạn sẽ cần chỉnh sửa trang chủ để tận dụng các cải tiến về khả năng hỗ trợ tiếp cận mới dành cho các thẻ có thể điều hướng, như được 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 để điều hướng trong thẻ.

Ngoài ra, bạn có thể 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 vào cạnh của 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ư cách sau 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 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 của ứng dụng đó.

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

Đã khắc phục 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 những người dùng đang kiểm tra để xem nếu phiếu yêu cầu hỗ trợ của họ đã được khắc phục. Tính năng này không được thiết kế nhằm cung cấp thông tin chi tiết về tất cả người dùng.

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

Vấn đề đã biết

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