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

หน้าบทแนะนำ 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 ว่าง "URL" จะปรากฏขึ้น

  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 ระยะ อย่างแรกคือ การเปิดเครื่อง โหลดสคริปต์แล้ว:

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

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

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