20.07.27 - บันทึกประจํารุ่นของพอร์ทัลที่ผสานรวม Apigee Edge

คุณกำลังดูเอกสารประกอบของ Apigee Edge
ไปที่เอกสารประกอบของ Apigee X info

ในวันจันทร์ที่ 27 กรกฎาคม เราจะเริ่มเปิดตัวพอร์ทัลที่ผสานรวม Apigee Edge เวอร์ชันใหม่

ฟีเจอร์ใหม่และการเพิ่มประสิทธิภาพ

ส่วนนี้จะอธิบายฟีเจอร์ใหม่และการเพิ่มประสิทธิภาพในรุ่นนี้

การปรับปรุงการช่วยเหลือพิเศษและการตอบสนอง

รายการต่อไปนี้แสดงการปรับปรุงการช่วยเหลือพิเศษและการตอบสนองที่ใช้ในรุ่นนี้

• การไปยังส่วนต่างๆ โดยใช้แป้นพิมพ์: ตอนนี้คุณสามารถไปยังแถบนำทางส่วนหัวและส่วนท้าย การนำทางด้านข้างของ SmartDocs รายการแอป ข้อมูลพร็อพเพอร์ตี้แอป และการ์ด API โดยใช้แป้นพิมพ์ได้แล้ว
  
• การจัดการโฟกัส: การไปยังส่วนต่างๆ ด้วยแถบนำทางส่วนหัวและการนำทางด้านข้างของ Smart Docs จะย้ายโฟกัสไปยัง <H1> แรกในหน้าหลังจากดำเนินการนำทาง
• ส่วนที่อัปเดตแบบเรียลไทม์: ตอนนี้ระบบจะรายงานการเปลี่ยนแปลงรายการ API ที่เกิดจากการกรองข้อความให้ผู้ใช้ที่ใช้โปรแกรมอ่านหน้าจอทราบแล้ว
• การใช้ส่วนหัว HTML เชิงความหมาย: ตอนนี้ข้อความทั้งหมดจะอยู่ในแท็ก HTML ที่เหมาะสมเชิงความหมาย ตอนนี้เราใช้โครงสร้างส่วนหัวแบบลำดับชั้นที่เหมาะสมทั่วทั้งพอร์ทัลแล้ว
• การใช้ <H1> แบบเอกพจน์: ตอนนี้แต่ละหน้ามีเพียง <H1> เดียวเพื่อให้โปรแกรมอ่านหน้าจอระบุคำอธิบายที่ให้ข้อมูลมากที่สุดเกี่ยวกับเนื้อหาของหน้าเว็บได้อย่างง่ายดาย
• การใช้ตัวพิมพ์ใหญ่เพื่อสไตล์: ตอนนี้การใช้ตัวพิมพ์ใหญ่ทั้งหมดเป็นจุดเน้นภาพจะใช้กับ CSS เท่านั้น ไม่ใช่ในข้อความจริง
• การจัดลำดับ DOM อย่างมีเหตุผล: ปุ่มการดำเนินการในหน้าสร้างและแก้ไขแอปได้ย้ายไปอยู่ใต้องค์ประกอบแบบฟอร์มใน DOM เพื่อให้เปิดใช้งานได้ตามลำดับอย่างมีเหตุผลเมื่อโต้ตอบกับแบบฟอร์มเสร็จสิ้น
• คำอธิบายที่เป็นข้อความขององค์ประกอบภาพ: มีการปรับปรุงการใช้งานป้ายกำกับ ข้อความแสดงแทน และข้อความปุ่ม ซึ่งทั้งหมดนี้ช่วยปรับปรุงการนำทางด้วยโปรแกรมอ่านหน้าจอ
• คอนทราสต์ของสี: เราได้เพิ่มคอนทราสต์ของสีเพื่อให้เป็นไปตามข้อกำหนดด้านคอนทราสต์ของ WCAG AA ในหลายๆ ส่วนของผลิตภัณฑ์ เราได้ย้ายชื่อ API ในรายการ API ไปไว้ใต้รูปภาพเพื่อหลีกเลี่ยงไม่ให้สีมีคอนทราสต์ไม่เพียงพอ
• การตรวจสอบแบบฟอร์ม: ในหน้าสร้างและแก้ไขแอป ระบบจะไม่ปิดใช้ปุ่มส่งแบบฟอร์มอีกต่อไป และสามารถเปิดใช้งานเพื่อตรวจสอบแบบฟอร์มได้ ตอนนี้ช่องแบบฟอร์มที่ตรวจสอบแล้วในหน้าสร้างและแก้ไขแอปจะมีคำอธิบายที่เป็นข้อความของข้อผิดพลาดในการตรวจสอบแล้ว
• การตอบสนอง: ตอนนี้มีความกว้างสูงสุดที่ใช้กับทุกหน้า ยกเว้น SmartDocs ตอนนี้การนำทางใน SmartDocs ใช้งานได้บนหน้าจอขนาดเล็กเท่าโทรศัพท์แล้ว ตอนนี้หน้าสร้างและแก้ไขแอปจะตอบสนองต่อหน้าจอแคบๆ ได้ดียิ่งขึ้น

การเปลี่ยนแปลง DOM ที่อาจส่งผลต่อพอร์ทัล

โดยเฉพาะอย่างยิ่งในกรณีต่อไปนี้

• แถบนำทาง (ส่วนหัวและส่วนท้าย) และส่วนหัวของหน้าได้รับการจัดรูปแบบ (หรือซ่อน) ด้วยการลบล้าง CSS: ตอนนี้เนื้อหาของหน้ามีขนาดความกว้างสูงสุดแล้ว Apigee ได้จัดรูปแบบองค์ประกอบเสมือน :before เพื่อขยายแถบนำทางและส่วนหัวของหน้าไปยังขอบของหน้าต่างเบราว์เซอร์ ดูข้อมูลเพิ่มเติมได้ที่การลบล้างสีหลักสำหรับแถบนำทางและส่วนหัวของหน้า
• มีองค์ประกอบของหน้าเว็บที่มีพื้นหลังซึ่งขยายไปจนถึงขอบของหน้าต่างเบราว์เซอร์ (นอกเหนือจากภาพพื้นหลังแบบเต็มหน้าจอ): ระบบได้จำกัดความกว้างสูงสุดของเนื้อหาหน้าเว็บเพื่อปรับปรุงการตอบสนอง ซึ่งอาจจำกัดแผงที่มีความกว้างเต็มก่อนหน้านี้ภายในหน้าเว็บที่กำหนดเอง ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้การตั้งค่า max-width ใหม่ได้ที่สร้างแผงแบบเต็มความกว้างในหน้าพอร์ทัล
• มีการกำหนดเป้าหมายระดับส่วนหัว HTML ที่เฉพาะเจาะจงด้วยตัวเลือก CSS เพื่อแก้ไขรูปแบบข้อความ: ระดับส่วนหัวที่ใช้กับเนื้อหาบางอย่างมีการเปลี่ยนแปลง ตัวอย่างเช่น <H1> → <H2> อ่านรายการการเปลี่ยนแปลงโดยละเอียดสำหรับการเปิดตัวนี้เพื่อทำความเข้าใจว่าเนื้อหาใดบ้างที่ได้รับผลกระทบ
• เลือกสีขาวหรือสีอ่อนมากเป็น "สีรอง" ในโปรแกรมแก้ไขธีมพอร์ทัล: ระบบจะใช้สีรองกับองค์ประกอบการนำทางที่มองเห็นได้ยากบนพื้นหลังสีขาว เราขอแนะนำให้เลือกสีรองที่เข้าถึงได้ แล้วแทนที่ด้วย scss ที่กำหนดเองในบางกรณีหากจำเป็น
• จัดรูปแบบลิงก์ในข้อความแล้ว: ตอนนี้การจัดรูปแบบลิงก์เข้าถึงได้ง่ายขึ้น ดูการเปลี่ยนแปลงด้านล่างเพื่อทำความเข้าใจว่าการเปลี่ยนแปลงนี้อาจมีผลต่อการจัดรูปแบบที่มีอยู่ของคุณอย่างไร
• มีการจัดรูปแบบหรือซ่อนเส้นขอบด้านล่าง 2 พิกเซลในพื้นที่เนื้อหาของการ์ดในโฮมวิวด้วยการลบล้าง CSS: เราได้ย้ายเส้นขอบนี้จาก <mat-card-content> ไปยังเส้นขอบด้านบนใน <mat-card-actions>

สรุปการเปลี่ยนแปลงโดยละเอียด

ส่วนต่อไปนี้จะสรุปการเปลี่ยนแปลงโดยละเอียดที่ได้ดำเนินการในรุ่นนี้ตามหมวดหมู่

การเปลี่ยนแปลงทั่วทั้งพอร์ทัล

สรุปการเปลี่ยนแปลงทั่วทั้งพอร์ทัลมีดังนี้

• ตัวแปรต่อไปนี้จะไม่มีการใช้งานอีกต่อไป
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• ตัวแปรใหม่ที่ให้การควบคุมความกว้างสูงสุดสำหรับพื้นที่เนื้อหาหลักและการเว้นวรรคแนวนอนขั้นต่ำสำหรับพื้นที่เนื้อหาหลักมีดังนี้
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

การเปลี่ยนแปลงแถบนำทางหลัก

สรุปการเปลี่ยนแปลงแถบนำทางหลักไว้ด้านล่าง

• ตอนนี้โลโก้ <img> อยู่ใน <a> สำหรับขนาดหน้าจอทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่
• ปุ่มเมนูแบบเลื่อนลงของผู้ใช้ตอนนี้เป็น <button> แทน <a>

การเปลี่ยนแปลงรูปแบบลิงก์

ตอนนี้ลิงก์มาตรฐาน <a> ภายในข้อความจะมีเส้นใต้โดยค่าเริ่มต้นและมีสีพื้นหลัง (อิงตามการตั้งค่าธีม "สีรอง") เมื่อวางเมาส์เหนือ

การเปลี่ยนแปลงหน้า 404

สรุปการเปลี่ยนแปลงหน้า 404 ได้ดังนี้

• ปุ่ม "ลงชื่อเข้าใช้เลย" เปลี่ยนเป็น <H2> แทน <H1> แล้ว
• ตอนนี้ข้อความอธิบายเป็น <H2> แทน <H1> แล้ว

หน้า API

สรุปการเปลี่ยนแปลงในหน้า API ตามหมวดหมู่ไว้ด้านล่าง

• การ์ดอินพุตการค้นหา/ตัวกรอง API
  • <mat-card-content class="mat-card-content"> ตอนนี้จะรวมส่วนหัวของการ์ดและอินพุตของ Search API
  • ตอนนี้ <H2> ใช้ class="mat-subheading-1" แทน class="api-doc-filter-title" แล้ว
  • ตอนนี้<mat-form-field>ใช้ appearance="outline"
  • เราได้เพิ่มไอคอนค้นหาใน <mat-form-field> ก่อนอินพุต "<mat-icon matPrefix>search</mat-icon>"
  • มีการเพิ่มป้ายกำกับ Aria และการอ้างอิงการควบคุมลงในอินพุต
• ข้อความรายการ API ว่างเปล่า
  • ข้อความ "ไม่พบ API" เปลี่ยนเป็น <H2> แทน <H1> แล้ว
  • ตอนนี้คำอธิบายคือ <H3> แทน <H2>
• รายการการ์ด API

  ข้อความ "ไม่มี API ที่ตรงกับการค้นหาของคุณ" เปลี่ยนเป็น <H2> แทน <H1> แล้ว

• การ์ด API
  • นำ >div class="api-doc-card-content-image-gradient"></div> ออกแล้ว
  • เราได้ย้ายชื่อ API ออกจากรูปภาพที่มี <div> และไปไว้ใน <div class="api-doc-card-content-title"></div> ต่อจากรูปภาพ <div> ทันที
  • ตอนนี้ API มีชื่อว่า <H2> แทน <H1> แล้ว

รายการแอป:

• สถานะว่างเปล่า
  • ตอนนี้ "เริ่มต้นใช้งาน" คือ <H2> ไม่ใช่ <H1>
  • ตอนนี้คำแนะนำเกี่ยวกับสถานะว่างเปล่าคือ <H3> แทน <H2>
• รายการ:
  • ตอนนี้ "แอปของฉัน" อยู่ที่ <H2> แทน <H1>
  • ตอนนี้ <mat-row> อยู่ใน <a> แล้ว

สร้างและแก้ไขหน้าแอป

สรุปการเปลี่ยนแปลงในหน้าสร้างและแก้ไขแอปมีดังนี้

• ย้าย <div class="app-buttons"> ไปไว้ท้าย <form> และแทนที่ด้วย <div class="form-buttons-sticky-container">
• เปลี่ยนการใช้งานทั้งหมดของคลาส .app-layout-section เป็น .details-layout-section แล้ว
• เปลี่ยนการใช้งานทั้งหมดของคลาส .app-layout-section-title เป็น .details-layout-section-title
• ตอนนี้หัวข้อทั้งหมดเป็น <H2> แทน <div>
• เปลี่ยนการใช้งานทั้งหมดของคลาส .app-layout-section-content เป็น .details-layout-section-content
• รายการ API จะไม่ใช่รายการการ์ด API ที่มีสวิตช์เปิด/ปิดอีกต่อไป (คล้ายกับรายการ API) แต่เป็นตารางของ API
• เราได้ย้ายอินพุต URL ของ Callback ไปยังส่วนใหม่แล้ว
• ตอนนี้ปุ่มบันทึกใช้สไตล์ mat-raised-button และพื้นหลังสีหลัก
• ตอนนี้ตารางจะอยู่ใน <div> ที่มีคลาส .app-table-wrapper
• ตอนนี้ส่วนหัวของตารางใช้ Wrapper <thead> แล้ว
• ตอนนี้เนื้อหาของตารางใช้ Wrapper <tbody> แล้ว
• [style.width] ไม่ได้ใช้ในการตั้งค่าความกว้างของคอลัมน์ตารางอีกต่อไป
• ตอนนี้แท็ก <a> ทั้งหมดภายในตารางจะใช้ <button แทน

รายชื่อทีม

สรุปการเปลี่ยนแปลงรายการทีมไว้ด้านล่าง

• สถานะว่างเปล่า
  • ตอนนี้ "เริ่มต้นใช้งาน" เป็น <H2> แล้ว ไม่ใช่ <H1>
  • "สร้างทีมเพื่อจัดการความเป็นเจ้าของแอปที่แชร์" ตอนนี้เป็น <H3> แทน <H2>
• รายการ:

  ตอนนี้ชื่อ "ทีม" คือ <H2> แทน <H1>

สร้างและแก้ไขหน้าทีม

สรุปการเปลี่ยนแปลงหน้าสร้างและแก้ไขทีมมีดังนี้

• ใน <form> ระบบได้แทนที่คลาส .teams-form ด้วย .details-form
• <div class="teams-buttons"> ถูกย้ายไปไว้ที่ส่วนท้ายของ <form> และแทนที่ด้วย <div class="form-buttons-sticky-container">
• เปลี่ยนการใช้งานทั้งหมดของคลาส .teams-layout-section เป็น .details-layout-section
• เปลี่ยนการใช้งานทั้งหมดของคลาส .teams-layout-section-title เป็น .details-layout-section-title
• เปลี่ยนการใช้งานทั้งหมดของคลาส .teams-layout-section-content เป็น .details-layout-section-content
• เพิ่ม <div class="team-apps-container"> รอบ <table class="team-apps"> แล้ว

SmartDocs

สรุปการเปลี่ยนแปลงอินเทอร์เฟซ SmartDocs ได้ดังนี้

• การนำทางด้านข้าง
  • เราได้เขียนการนำทางด้านข้างใหม่ทั้งหมดด้วยคอมโพเนนต์ Angular Material
  • ตอนนี้ส่วนหัวของการนำทางด้านข้างเป็น <H2> แล้ว ไม่ใช่ <div>
  • ตอนนี้รายการนำทางจะใช้สีข้อความเริ่มต้นของพอร์ทัลแทน "สีรอง" ของเครื่องมือแก้ไขธีมพอร์ทัล
  • ตอนนี้รายการที่เลือก โฟกัส และวางเมาส์ในแถบนำทางด้านข้างจะใช้รูปแบบสีเข้มและสีอ่อนของ "สีรอง" ในเครื่องมือแก้ไขธีมพอร์ทัลสำหรับข้อความและพื้นหลังตามลำดับ
• เนื้อหา:
  • ตอนนี้ส่วนหัวย่อยหลายรายการ เช่น "พารามิเตอร์เส้นทาง" และ "พารามิเตอร์ส่วนหัว" จะเป็น <H2> แทน <H3>
  • ตอนนี้เอนทิตีสคีมาในหน้าภาพรวมเป็น <H3>=> แล้ว ไม่ใช่ <H2>

เพิ่มการปรับปรุงการช่วยเหลือพิเศษลงในหน้าแรกที่มีอยู่

หากมีพอร์ทัลอยู่แล้ว คุณจะต้องแก้ไขหน้าแรกเพื่อใช้ประโยชน์จากการปรับปรุงการช่วยเหลือพิเศษใหม่สำหรับการ์ดที่ไปยังส่วนต่างๆ ได้ ตามที่อธิบายไว้ด้านล่าง

1. นำ href="" ออกจากคอนเทนเนอร์ <mat-card>
2. ใช้ <H2> แทน <H1> สำหรับส่วนหัวของการ์ดภายใน <mat-card-header>
3. ภายในส่วนหัวของการ์ด <h2> ให้ใส่ข้อความใน <a class="navigable-content" href="href-name"> และตั้งค่า href-name เป็นค่าที่เหมาะสมสำหรับการนำทางการ์ด

หรือจะใช้เทมเพลตการ์ดต่อไปนี้ก็ได้

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

การลบล้างสีหลักสำหรับแถบนำทางและส่วนหัวของหน้า

หากต้องการขยายแถบนำทางและส่วนหัวของหน้าเว็บ ไปจนสุดขอบหน้าต่างเบราว์เซอร์ ให้เพิ่มการจัดรูปแบบที่กำหนดเองสำหรับแถบนำทางและส่วนหัวของหน้าเว็บโดยใช้เอดิเตอร์ธีมขั้นสูง ซึ่งคล้ายกับส่วนหัวของแถบนำทางต่อไปนี้

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

ขั้นตอนการอัปเดตสำหรับการจัดการ API สำหรับแอป

การโต้ตอบของผู้ใช้เพื่อจัดการ API ในแอปบนพอร์ทัลแบบผสานรวมมีการเปลี่ยนแปลง กล่าวคือ เมื่อจัดการแอป ในส่วน API ผู้ใช้ต้องคลิก หรือ (แทนที่จะเป็นปุ่มเปิด/ปิด) เพื่อเปิดหรือปิดใช้การเข้าถึง API จากแอปตามลำดับ

อัปเดตขั้นตอนในพอร์ทัลที่อธิบายวิธีจัดการ API ในหน้าแอป หากมี ดูข้อมูลเพิ่มเติมได้ที่ การจัดการ API ในแอป

แก้ไขข้อบกพร่องแล้ว

เราได้แก้ไขข้อบกพร่องต่อไปนี้ในรุ่นนี้ โดยหลักแล้ว รายการนี้มีไว้สำหรับผู้ใช้ที่ต้องการตรวจสอบว่า คำขอรับการสนับสนุนได้รับการแก้ไขแล้วหรือไม่ แต่ไม่ได้ออกแบบมาเพื่อให้ข้อมูลโดยละเอียดแก่ผู้ใช้ทุกคน

ปัญหาที่ทราบ

ดูรายการปัญหาที่ทราบเกี่ยวกับพอร์ทัลแบบผสานรวมได้ที่ปัญหาที่ทราบเกี่ยวกับพอร์ทัลแบบผสานรวม