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

หน้านี้ของบทแนะนำ 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. คลิกปุ่มเปิด/ปิดเปิดใช้ ข้าง "tutorial" ปุ่มนี้จะเปิดใช้แหล่งข้อมูลบทแนะนำสำหรับแอปพลิเคชันการค้นหาที่สร้างขึ้นใหม่
13. คลิกตัวเลือกการแสดงผล ทางด้านขวาของแหล่งข้อมูล "tutorial"
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. ป้อนคำค้นหา เช่น คำว่า "test" ในช่องค้นหา แล้วกด Enter หน้าเว็บควรแสดงผลการค้นหาพร้อมแง่มุมและตัวควบคุมการแบ่งหน้าเพื่อไปยังผลการค้นหา

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

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

การโหลดวิดเจ็ต

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

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

จากนั้นระบบจะเรียกใช้ Callback onLoad เมื่อสคริปต์พร้อมใช้งาน แล้วจะโหลดไลบรารีของไคลเอ็นต์ API ของ Google, Google Sign-in และวิดเจ็ต Search ของ 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();

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

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