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

หน้านี้ของบทแนะนำ Google Cloud 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. ป้อน "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. ในช่องชื่อที่แสดง ให้ป้อน "บทแนะนำ"
  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 โดยทำดังนี้

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();

  // ...

}

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

วิดเจ็ตการค้นหาต้องใช้มาร์กอัป 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();

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

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