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

หน้าบทแนะนำของ 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. ป้อน "บทแนะนำ" ในช่องชื่อ

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. ป้อน "บทแนะนำ" ในช่องชื่อที่แสดง
8. คลิกสร้าง
9. คลิกไอคอนดินสอข้างแอปพลิเคชันการค้นหาที่สร้างใหม่ ("แก้ไขแอปพลิเคชันการค้นหา") หน้า "รายละเอียดแอปพลิเคชันการค้นหา" จะปรากฏขึ้น
10. จดรหัสแอปพลิเคชันไว้
11. คลิกไอคอนดินสอทางด้านขวาของแหล่งข้อมูล
12. คลิกปุ่มสลับเปิดใช้ข้าง "บทแนะนำ" ปุ่มสลับนี้จะเปิดใช้แหล่งข้อมูลบทแนะนำสําหรับแอปพลิเคชันการค้นหาที่สร้างขึ้นใหม่
13. คลิกตัวเลือกการแสดงผลที่ด้านขวาของแหล่งข้อมูล "บทแนะนำ"
14. ตรวจสอบข้อมูลประกอบทั้งหมด
15. คลิกบันทึก
16. คลิกเสร็จสิ้น

กำหนดค่าเว็บแอปพลิเคชัน

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

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

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

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

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

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

index.html

ดูใน GitHub

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

ลำดับที่ 2 ระบบจะเรียกใช้โค้ดเรียกกลับ onLoad เมื่อสคริปต์พร้อม จากนั้นจะโหลดไคลเอ็นต์ Google API, Google Sign-In และไลบรารีวิดเจ็ต Cloud Search

app.js

ดูใน GitHub

/**
 * 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

ดูใน GitHub

<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

ดูใน GitHub

/**
 * 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

ดูใน GitHub

<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

ดูใน GitHub

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

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

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