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

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

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

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

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

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

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

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

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

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

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

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

ปัญหาได้รับการแก้ไขแล้วที่ทำให้ไม่สามารถสร้างแอปของนักพัฒนาซอฟต์แวร์ในพอร์ทัล V1 ได้

158318079 พอร์ทัลแบบผสานรวม

การเพิ่มหรือแก้ไข URL เรียกกลับในพอร์ทัลนักพัฒนาแอปไม่ทำงาน

ปัญหาได้รับการแก้ไขแล้วที่ป้องกันไม่ให้ผู้ใช้พอร์ทัลเพิ่มหรือแก้ไข URL ของ Callback ในหน้า API

157902256 พอร์ทัลแบบผสานรวม

การเผยแพร่อาจลบล้างการอัปเดตชื่อหน้าในหน้ารายละเอียดของหน้า

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

138993728 พอร์ทัลแบบผสานรวม

โปรแกรมสำหรับนักพัฒนาแอปการจัดเรียงอีเมลและการค้นหาไม่ทำงาน

ขณะนี้การค้นหาและการจัดเรียงบัญชีผู้ใช้ที่เป็นผู้ใช้ทั่วไปทำงานได้ตามปกติแล้ว

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

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