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.
Truy cập vào tài liệu 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à điểm cải tiến

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 thiện khả năng hỗ trợ tiếp cận và khả năng phản hồi

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

• 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ác chế độ ghi đè CSS: Hiện có chiều rộng tối đa cho nội dung trang. Để mở rộng các thanh điều hướng và tiêu đề trang đến cạnh của 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 đế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ế mọi bảng điều khiển có chiều rộng đầy đủ 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 bài viết Tạo bảng điều khiển có chiều rộng tối đa trong trang cổng thông tin.
• Các cấp tiêu đề HTML cụ thể đã được nhắm đến bằng bộ chọn CSS để sửa đổi kiểu văn bản: Cấp tiêu đề được áp dụng cho một số nội dung đã thay đổi. Ví dụ: <H1> → <H2> Xem danh sách thay đổi chi tiết cho bản phát hành này để biết chính xác nội dung nào 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ụ được dùng cho các phần tử điều hướng sẽ khó nhìn 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 đó bằng scss tuỳ chỉnh nếu cần trong những 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 hơn. Hãy xem các thay đổi bên dưới để hiểu cách thay đổi này có thể tương tác với kiểu hiện có của bạn.
• Đường viền 2 px ở cuối vùng nội dung của các thẻ trong chế độ xem trang chủ đã được tạo kiểu hoặc ẩn bằng các chế độ ghi đè CSS: Đường viền này đã được di chuyển từ <mat-card-content> sang đường viền trên của <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 bộ cổng

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

• Các biến sau đây 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ó các 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

Thay đổi về thanh điều hướng chính

Những thay đổi đối với thanh điều hướng chính được tóm tắt bên dưới.

• Giờ đây, biểu trưng <img> được đặt 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 trình đơn thả xuống của người dùng hiện là <button> thay vì <a>

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

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

Thay đổi về trang 404

Các thay đổi đối với trang lỗi 404 được tóm tắt bên dưới.

• "Đă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 theo danh mục bên dưới.

• Thẻ đầu vào tìm kiếm/lọc API:
  • <mat-card-content class="mat-card-content"> hiện bao bọc tiêu đề và dữ liệu đầu vào 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 đang sử dụng appearance="outline"
  • Biểu tượng tìm kiếm đã được thêm vào <mat-form-field> trước dữ liệu đầu vào: "<mat-icon matPrefix>search</mat-icon>"
  • Nhãn Aria và thông tin tham chiếu về chế độ cài đặt đã được thêm vào đầ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>
  • Phần giải thích hiện là <H3> thay vì <H2>
• Danh sách thẻ API:

  Thông báo "Không có API nào khớ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:
  • "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 đã được chuyển đổi trong <a>

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

Dưới đây là nội dung tóm tắt về những thay đổi đối với trang Tạo và chỉnh sửa ứng dụng.

• <div class="app-buttons"> đã được di chuyển xuống cuối <form> và được thay thế bằng <div class="form-buttons-sticky-container">
• Tất cả cách sử dụng lớp .app-layout-section đều được thay đổi thành .details-layout-section
• Tất cả cách sử dụng lớp .app-layout-section-title đều được thay đổi thành .details-layout-section-title
• Tất cả tiêu đề của phần hiện là <H2> thay vì <div>
• Tất cả cách sử dụng lớp .app-layout-section-content đều được thay đổi thành .details-layout-section-content
• Danh sách API không còn là danh sách thẻ API có công tắc bật/tắt (tương tự như danh sách API). Thay vào đó, đây là một bảng gồm các API
• Đầu vào URL gọi lại đã được chuyển sang một phần mới
• Nút lưu hiện sử dụng kiểu mat-raised-button và nền màu chính
• Giờ đây, các bảng đượ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 của 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 của bảng
• Giờ đây, tất cả thẻ <a> trong bảng đều sử dụng <button

Danh sách nhóm

Dưới đây là nội dung tóm tắt về những 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 được chia sẻ" hiện là <H3> thay vì <H2>
• Danh sách:

  Tiêu đề "Teams" hiện là <H2> thay vì <H1>

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

Dưới đây là nội dung tóm tắt về những 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
• <div class="teams-buttons"> đã được di chuyển xuống cuối <form> và được thay thế bằng <div class="form-buttons-sticky-container">
• Tất cả cách sử dụng lớp .teams-layout-section đều được thay đổi thành .details-layout-section
• Tất cả cách sử dụng lớp .teams-layout-section-title đều được thay đổi thành .details-layout-section-title
• Tất cả cách sử dụng lớp .teams-layout-section-content đều được thay đổi thành .details-layout-section-content
• <div class="team-apps-container"> đã được thêm vào xung quanh <table class="team-apps">

SmartDocs

Dưới đây là nội dung tóm tắt về những thay đổi đối với giao diện SmartDocs.

• Thanh điều hướng bên:
  • Thanh điều hướng bên đã được viết lại hoàn toàn bằng các thành phần angular-material
  • Tiêu đề của trình đơn điều hướng bên hiện 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 được chọn, được lấy tiêu điểm và được di chuột trong trình đơn điều hướng bên hiện sử dụng các biến thể tối và sáng của "màu phụ" trong trình chỉnh sửa giao diện cổng thông tin 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 là <H2> thay vì <H3>
  • Các thực thể lược đồ trên trang tổng quan hiện là <H3>=> thay vì <H2>

Thêm các điểm cải thiện về khả năng tiếp cận vào trang chủ hiện có

Nếu có một cổng thông tin hiện có, bạn sẽ cần 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 cho các thẻ có thể điều hướng, 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 <a class="navigable-content" href="href-name"> và đặt href-name thành giá trị thích hợp cho chế độ đ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 các thanh điều hướng và tiêu đề trang đến cạnh của cửa sổ trình duyệt, hãy thêm kiểu tuỳ chỉnh cho các 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ư 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
  }
}

Quy trình cập nhật để quản lý API cho một ứng dụng

Tương tác của người dùng để quản lý các 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 mục API, người dùng phải nhấp vào hoặc (thay vì một nút bật/tắt) để bật hoặc tắt quyền truy cập 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 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 bài viết Quản lý các API trong ứng dụng.

Các lỗi đã được khắc phục

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 kiểm tra xem phiếu yêu cầu hỗ trợ của họ đã được giải quyết hay chưa. Báo cáo này không được thiết kế để cung cấp thông tin chi tiết cho tất cả người dùng.

Vấn đề đã biết

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