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

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

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

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

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

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

npm install

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

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

  1. กลับไปที่ Google Cloud Console

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

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

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

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

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

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

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

  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. คลิกแอปพลิเคชันการค้นหา หน้า "ค้นหาแอปพลิเคชัน" จะปรากฏขึ้น
  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 เฟส ก่อนอื่น ระบบจะโหลดสคริปต์ การเริ่มต้นระบบ

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

ประการที่สอง ระบบจะเรียกใช้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();

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

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