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

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

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

ฟีเจอร์และการปรับปรุงใหม่

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

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

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

• การไปยังส่วนต่างๆ โดยใช้แป้นพิมพ์: ตอนนี้คุณสามารถไปยังส่วนต่างๆ ในแถบนำทางส่วนหัวและส่วนท้าย แถบนำทางด้านข้างของ SmartDocs รายการแอป มุมมองแอป และการ์ด API โดยใช้แป้นพิมพ์ได้แล้ว
  
• การจัดการโฟกัส: การไปยังส่วนต่างๆ ด้วยแถบนำทางส่วนหัวและแถบนำทางด้านข้างของ SmartDocs จะย้ายโฟกัสไปที่ <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"> ตอนนี้จะครอบคลุมส่วนหัวและการป้อนข้อมูลของการ์ดค้นหา 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 ในแอป

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

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

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

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