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

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

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

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

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

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

npm install

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

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

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

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

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

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

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

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

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

  6. ป้อน "บทแนะนำ" ในช่องชื่อ

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

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

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

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

  11. คลิกตกลง

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

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

  1. กลับไปที่คอนโซลผู้ดูแลระบบของ Google
  2. คลิกไอคอนแอป หน้า "การดูแลระบบแอป" จะปรากฏขึ้น
  3. คลิก Google Workspace หน้า "การดูแลระบบ Google Workspace ของแอป" จะปรากฏขึ้น
  4. เลื่อนลงแล้วคลิก Cloud Search หน้า "การตั้งค่าสำหรับ Google Workspace" จะปรากฏขึ้น
  5. คลิกแอปพลิเคชันการค้นหา หน้า "Search Appplications" จะปรากฏขึ้น
  6. คลิกวงกลมสีเหลือง + กล่องโต้ตอบ "สร้างแอปพลิเคชันการค้นหาใหม่" จะปรากฏขึ้น
  7. ในช่องชื่อที่แสดง ให้ป้อน "บทแนะนำ"
  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

ค้นหาดัชนี

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

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

ตรวจสอบโค้ด

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

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

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

index.html
<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

app.js
/**
 * 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 มุมมองที่แตกต่างกันขึ้นอยู่กับสถานะการลงชื่อเข้าใช้ของผู้ใช้

index.html
<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>

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

app.js
/**
 * 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();

  // ...

}

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

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

index.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>

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

app.js
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();

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

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