ตั้งค่าอินเทอร์เฟซผู้ใช้

หน้านี้ของบทแนะนำ Google Cloud Search จะแสดงวิธีตั้งค่าแอปพลิเคชันการค้นหาที่กําหนดเองโดยใช้วิดเจ็ตการค้นหาที่ฝังได้ หากต้องการเริ่มต้นบทแนะนํานี้ตั้งแต่ต้น โปรดดูบทแนะนําการเริ่มต้นใช้งาน Cloud Search

ติดตั้งการอ้างอิง

1. หากเครื่องมือเชื่อมต่อยังคงจัดทําดัชนีที่เก็บ ให้เปิดเชลล์ใหม่แล้วดําเนินการต่อ

2. จากบรรทัดคำสั่ง ให้เปลี่ยนไดเรกทอรีเป็น cloud-search-samples/end-to-end/search-interface

3. หากต้องการดาวน์โหลดไลบรารีที่ต้องใช้ในการเรียกใช้เว็บเซิร์ฟเวอร์ ให้เรียกใช้คำสั่งต่อไปนี้

npm install

สร้างข้อมูลเข้าสู่ระบบแอปพลิเคชันการค้นหา

ตัวเชื่อมต่อต้องใช้ข้อมูลเข้าสู่ระบบของบัญชีบริการเพื่อเรียกใช้ Cloud Search API วิธีสร้างข้อมูลเข้าสู่ระบบ

1. กลับไปที่คอนโซล Google Cloud

2. คลิกข้อมูลเข้าสู่ระบบในการนําทางด้านซ้าย

3. เลือกรหัสไคลเอ็นต์ OAuth จากรายการแบบเลื่อนลงสร้างข้อมูลเข้าสู่ระบบ หน้า "สร้างรหัสไคลเอ็นต์ OAuth" จะปรากฏขึ้น

4. (ไม่บังคับ) หากยังไม่ได้กําหนดค่าหน้าจอคํายินยอม ให้คลิกกําหนดค่าหน้าจอคํายินยอม หน้าจอ "ความยินยอม OAuth" จะปรากฏขึ้น

   1. คลิกภายใน แล้วคลิกสร้าง หน้าจอ "ความยินยอม OAuth" อีกหน้าจอหนึ่งจะปรากฏขึ้น

   2. กรอกข้อมูลในช่องที่ต้องกรอก ดูวิธีการเพิ่มเติมได้ในส่วนความยินยอมของผู้ใช้ของการตั้งค่า OAuth 2.0

5. คลิกรายการแบบเลื่อนลงประเภทแอปพลิเคชัน แล้วเลือกเว็บแอปพลิเคชัน

6. ป้อน "tutorial" ในช่องชื่อ

7. ในช่องต้นทาง JavaScript ที่ได้รับอนุญาต ให้คลิกเพิ่ม URI ช่อง "URI" ที่ว่างเปล่าจะปรากฏขึ้น

8. ป้อน http://localhost:8080 ในช่อง URI

9. คลิกสร้าง หน้าจอ "สร้างไคลเอ็นต์ OAuth แล้ว" จะปรากฏขึ้น

10. จดรหัสไคลเอ็นต์ไว้ ค่านี้ใช้เพื่อระบุแอปพลิเคชันเมื่อขอการให้สิทธิ์ของผู้ใช้ด้วย OAuth2 คุณไม่จำเป็นต้องใช้รหัสลับไคลเอ็นต์สําหรับการติดตั้งใช้งานนี้

11. คลิกตกลง

สร้างแอปพลิเคชันการค้นหา

จากนั้นสร้างแอปพลิเคชันการค้นหาในคอนโซลผู้ดูแลระบบ แอปพลิเคชันการค้นหาคือการนําเสนอเสมือนจริงของอินเทอร์เฟซการค้นหาและการกําหนดค่าเริ่มต้น

1. กลับไปที่คอนโซลผู้ดูแลระบบของ Google
2. คลิกไอคอนแอป หน้า "การดูแลระบบแอป" จะปรากฏขึ้น
3. คลิก Google Workspace หน้า "การดูแลระบบแอป Google Workspace" จะปรากฏขึ้น
4. เลื่อนลงแล้วคลิก Cloud Search หน้า "การตั้งค่าสำหรับ Google Workspace" จะปรากฏขึ้น
5. คลิกแอปพลิเคชันการค้นหา หน้า "แอปพลิเคชันการค้นหา" จะปรากฏขึ้น
6. คลิกเครื่องหมาย + วงกลมสีเหลือง กล่องโต้ตอบ "สร้างแอปพลิเคชันการค้นหาใหม่" จะปรากฏขึ้น
7. ป้อน "tutorial" ในช่องชื่อที่แสดง
8. คลิกสร้าง
9. คลิกไอคอนดินสอข้างแอปพลิเคชันการค้นหาที่สร้างขึ้นใหม่ ("แก้ไขแอปพลิเคชันการค้นหา") หน้า "ค้นหารายละเอียดใบสมัคร" จะปรากฏขึ้น
10. จดบันทึกรหัสแอปพลิเคชัน
11. คลิกไอคอนดินสอทางด้านขวาของแหล่งข้อมูล
12. คลิกปุ่มเปิด/ปิดเปิดใช้ข้าง "บทแนะนำ" ปุ่มสลับนี้จะเปิดใช้แหล่งข้อมูลบทแนะนำสําหรับแอปพลิเคชันการค้นหาที่สร้างขึ้นใหม่
13. คลิกตัวเลือกการแสดงผลทางด้านขวาของแหล่งข้อมูล "บทแนะนํา"
14. ตรวจสอบแง่มุมทั้งหมด
15. คลิกบันทึก
16. คลิกเสร็จ

กำหนดค่าเว็บแอปพลิเคชัน

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

1. จากบรรทัดคำสั่ง ให้เปลี่ยนไดเรกทอรีเป็น "cloud-search-samples/end-to-end/search-interface/public"
2. เปิดไฟล์ app.js ด้วยเครื่องมือแก้ไขข้อความ
3. ค้นหาตัวแปร searchConfig ที่ด้านบนของไฟล์
4. แทนที่ [client-id] ด้วยรหัสไคลเอ็นต์ OAuth ที่สร้างขึ้นก่อนหน้านี้
5. แทนที่ [application-id] ด้วยรหัสแอปพลิเคชันการค้นหาที่ระบุไว้ในส่วนก่อนหน้า
6. บันทึกไฟล์

เรียกใช้แอปพลิเคชัน

เริ่มแอปพลิเคชันโดยเรียกใช้คําสั่งนี้

npm run start

ค้นหาดัชนี

วิธีค้นหาดัชนีโดยใช้วิดเจ็ตการค้นหา

1. เปิดเบราว์เซอร์และไปที่ http://localhost:8080
2. คลิกลงชื่อเข้าใช้เพื่อให้สิทธิ์แอปค้นหา Cloud Search ในนามของคุณ
3. ในช่องค้นหา ให้ป้อนข้อความค้นหา เช่น คําว่า "ทดสอบ" แล้วกด Enter หน้าเว็บควรแสดงผลการค้นหาพร้อมกับข้อมูลประกอบและการควบคุมการแบ่งหน้าเพื่อไปยังส่วนต่างๆ ของผลการค้นหา

การตรวจสอบโค้ด

ส่วนที่เหลือจะตรวจสอบวิธีสร้างอินเทอร์เฟซผู้ใช้

กำลังโหลดวิดเจ็ต

ระบบจะโหลดวิดเจ็ตและไลบรารีที่เกี่ยวข้อง 2 ระยะ ก่อนอื่น ระบบจะโหลดสคริปต์ Bootstrap โดยทำดังนี้

<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

ประการที่ 2 ระบบจะเรียกใช้ Callback onLoad เมื่อสคริปต์พร้อมใช้งาน จากนั้นจะโหลดไคลเอ็นต์ Google API, Google Sign-in และไลบรารีวิดเจ็ต Cloud Search

/**
 * Load the cloud search widget & auth libraries. Runs after
 * the initial gapi bootstrap library is ready.
 */
function onLoad() {
  gapi.load('client:auth2:cloudsearch-widget', initializeApp)
}

initializeApp จะจัดการการเริ่มต้นแอปที่เหลือเมื่อโหลดไลบรารีที่จำเป็นทั้งหมดแล้ว

การจัดการการให้สิทธิ์

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

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

<div class="content">
  <div id="app" hidden>
    <div id="header">
      <button id="sign-out">Sign-out</button>
    </div>
    <!-- Markup for widget...-->
  </div>
  <div id="welcome" hidden>
    <h1>Cloud Search Tutorial</h1>
    <p>Sign in with your Google account to search.</p>
    <button id="sign-in">Sign-in</button>
  </div>
</div>

ในระหว่างการเริ่มต้นระบบ ระบบจะเปิดใช้มุมมองที่ถูกต้องและกำหนดค่าตัวแฮนเดิลสำหรับเหตุการณ์การลงชื่อเข้าใช้และออกจากระบบ ดังนี้

/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
async function initializeApp() {
  await gapi.auth2.init({
      'clientId': searchConfig.clientId,
      'scope': 'https://www.googleapis.com/auth/cloud_search.query'
  });

  let auth = gapi.auth2.getAuthInstance();

  // Watch for sign in status changes to update the UI appropriately
  let onSignInChanged = (isSignedIn) => {
    document.getElementById("app").hidden = !isSignedIn;
    document.getElementById("welcome").hidden = isSignedIn;
    if (resultsContainer) {
      resultsContainer.clear();
    }
  }
  auth.isSignedIn.listen(onSignInChanged);
  onSignInChanged(auth.isSignedIn.get()); // Trigger with current status

  // Connect sign-in/sign-out buttons
  document.getElementById("sign-in").onclick = (e) =>  auth.signIn();
  document.getElementById("sign-out").onclick = (e) => auth.signOut();

  // ...

}

การสร้างอินเทอร์เฟซการค้นหา

วิดเจ็ตการค้นหาต้องใช้มาร์กอัป HTML เล็กน้อยสําหรับอินพุตการค้นหาและเพื่อเก็บผลการค้นหา

<div id="search_bar">
  <div>
    <div id="suggestions_anchor">
      <input type="text" id="search_input" placeholder="Search for...">
    </div>
  </div>
</div>
<div id="facet_results" ></div>
<div id="search_results" ></div>

วิดเจ็ตจะเริ่มต้นและเชื่อมโยงกับองค์ประกอบอินพุตและคอนเทนเนอร์ในระหว่างการเริ่มต้น

gapi.config.update('cloudsearch.config/apiVersion', 'v1');
resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setSearchResultsContainerElement(document.getElementById('search_results'))
  .setFacetResultsContainerElement(document.getElementById('facet_results'))
  .build();

const searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setInput(document.getElementById('search_input'))
  .setAnchor(document.getElementById('suggestions_anchor'))
  .setResultsContainer(resultsContainer)
  .build();

ยินดีด้วย คุณทำตามบทแนะนำจนเสร็จสมบูรณ์แล้ว โปรดอ่านวิธีการล้างข้อมูลต่อ

ก่อนหน้า ถัดไป