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

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

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

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

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

การปรับปรุงการเข้าถึงและการตอบสนอง

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

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

การเปลี่ยนแปลง DOM ที่อาจส่งผลกระทบต่อพอร์ทัลของคุณ

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

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

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

• การนำทางด้านข้าง
  • การนำทางด้านข้างได้รับการเขียนขึ้นใหม่ทั้งหมดด้วยองค์ประกอบที่เป็นวัสดุเชิงมุม
  • ตอนนี้ส่วนหัวการนำทางด้านข้างเปลี่ยนเป็น <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 ในแอป

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

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

รหัสปัญหา	ชื่อคอมโพเนนต์	คำอธิบาย
161269688	พอร์ทัลแบบผสานรวม	ภาพขนาดย่อของชิ้นงานแสดงผลไม่ถูกต้องใน Apigee แบบผสม ตอนนี้ภาพขนาดย่อแสดงอย่างถูกต้องในหน้าชิ้นงาน
161295683	พอร์ทัลแบบผสานรวม	เซิร์ฟเวอร์ล้มเหลวโดยไม่มีการตั้งค่าคำอธิบายสำหรับแอป ตอนนี้การสร้างแอปจะประสบความสำเร็จหากไม่ได้กำหนดคำอธิบาย (ช่องที่ไม่บังคับ) สำหรับแอป
160898967	พอร์ทัลแบบผสานรวม	หน้า Landing Page สำหรับพอร์ทัลเลื่อนไม่ถูกต้อง ตอนนี้หน้า Landing Page ของพอร์ทัลเลื่อนได้แล้ว
160613314, 159197760, 158643196, 158069283, 158069066, 140154942	พอร์ทัลแบบผสานรวม	การแก้ไขความปลอดภัยเบ็ดเตล็ด
158593496	พอร์ทัลแบบผสานรวม	สร้างแอปสำหรับนักพัฒนาแอปในพอร์ทัลเวอร์ชัน 1 ไม่สำเร็จ ปัญหาได้รับการแก้ไขแล้วที่ทำให้ไม่สามารถสร้างแอปของนักพัฒนาซอฟต์แวร์ในพอร์ทัลเวอร์ชัน 1
158318079	พอร์ทัลแบบผสานรวม	การเพิ่มหรือแก้ไข URL เรียกกลับในพอร์ทัลนักพัฒนาซอฟต์แวร์ไม่ทำงาน ปัญหาที่ส่งผลให้ผู้ใช้พอร์ทัลเพิ่มหรือแก้ไข URL เรียกกลับในหน้า API ไม่ได้
157902256	พอร์ทัลแบบผสานรวม	การเผยแพร่จะลบล้างการอัปเดตชื่อหน้าได้ในหน้ารายละเอียดของหน้า ปัญหาได้รับการแก้ไขแล้วซึ่งทำให้การอัปเดตชื่อหน้าถูกลบล้างเมื่อคุณเผยแพร่พอร์ทัล (เกิดจากเงื่อนไขเกี่ยวกับเชื้อชาติ)
138993728	พอร์ทัลแบบผสานรวม	การจัดเรียงและการค้นหาอีเมลของโปรแกรมสำหรับนักพัฒนาแอปไม่ทำงาน การค้นหาและจัดเรียงบัญชีผู้ใช้ที่เป็นผู้ใช้ทั่วไปทำงานตามที่คาดไว้แล้ว

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

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