หน้าบทแนะนำ Google Cloud Search นี้แสดงวิธีตั้งค่าแอปพลิเคชันการค้นหาที่กำหนดเองโดยใช้วิดเจ็ต Search แบบฝังได้ หากต้องการเริ่มต้นตั้งแต่ต้นของบทแนะนำนี้ โปรดดูบทแนะนำการเริ่มต้นใช้งาน Cloud Search
ติดตั้งการอ้างอิง
หากเครื่องมือเชื่อมต่อยังคงจัดทำดัชนีที่เก็บอยู่ ให้เปิด Shell ใหม่และดำเนินการต่อ
จากบรรทัดคำสั่ง ให้เปลี่ยนไดเรกทอรีเป็น
cloud-search-samples/end-to-end/search-interface
หากต้องการดาวน์โหลดทรัพยากร Dependency ที่จำเป็นสำหรับการเรียกใช้เว็บเซิร์ฟเวอร์ ให้เรียกใช้คำสั่งต่อไปนี้
npm install
สร้างข้อมูลเข้าสู่ระบบของแอปพลิเคชันการค้นหา
เครื่องมือเชื่อมต่อต้องใช้ข้อมูลเข้าสู่ระบบบัญชีบริการเพื่อเรียกใช้ Cloud Search API วิธีสร้างข้อมูลเข้าสู่ระบบ
กลับไปที่คอนโซล Google Cloud
ในการนำทางด้านซ้าย ให้คลิกข้อมูลเข้าสู่ระบบ
จากรายการแบบเลื่อนลงสร้างข้อมูลเข้าสู่ระบบ ให้เลือกรหัสไคลเอ็นต์ OAuth หน้า "สร้างรหัสไคลเอ็นต์ OAuth" จะปรากฏขึ้น
(ไม่บังคับ) หากยังไม่ได้กำหนดค่าหน้าจอคำยินยอม ให้คลิกกำหนดค่าหน้าจอความยินยอม หน้าจอ "คำยินยอม OAuth" จะปรากฏขึ้น
คลิกภายใน แล้วคลิกสร้าง หน้าจอ "คำยินยอม OAuth" อีกหน้าจอ จะปรากฏขึ้น
กรอกข้อมูลในช่องที่ต้องกรอก ดูวิธีการเพิ่มเติมได้ที่ส่วนความยินยอมของผู้ใช้ในการตั้งค่า OAuth 2.0
คลิกรายการแบบเลื่อนลงประเภทแอปพลิเคชัน แล้วเลือกเว็บแอปพลิเคชัน
ป้อน "บทแนะนำ" ในช่องชื่อ
ในช่องต้นทาง JavaScript ที่ได้รับอนุญาต ให้คลิกเพิ่ม URI ช่อง "URI" ว่างจะปรากฏขึ้น
ในช่อง URI ให้ป้อน
http://localhost:8080
คลิกสร้าง หน้าจอ "สร้างไคลเอ็นต์ OAuth แล้ว" จะปรากฏขึ้น
จดรหัสไคลเอ็นต์ ค่านี้จะใช้เพื่อระบุแอปพลิเคชันเมื่อขอสิทธิ์ผู้ใช้ด้วย OAuth2 ไม่จำเป็นต้องใช้รหัสลับไคลเอ็นต์ สำหรับการใช้งานนี้
คลิกตกลง
สร้างแอปพลิเคชันการค้นหา
จากนั้นให้สร้างแอปพลิเคชันการค้นหาในคอนโซลผู้ดูแลระบบ แอปพลิเคชันการค้นหาเป็นตัวแทนแบบเสมือนของอินเทอร์เฟซการค้นหาและการกำหนดค่าเริ่มต้น
- กลับไปที่คอนโซลผู้ดูแลระบบของ Google
- คลิกไอคอนแอป หน้า "การดูแลระบบแอป" จะปรากฏขึ้น
- คลิก Google Workspace หน้า "การดูแลระบบ Google Workspace ของแอป" จะปรากฏขึ้น
- เลื่อนลงแล้วคลิก Cloud Search หน้า "การตั้งค่าสำหรับ Google Workspace" จะปรากฏขึ้น
- คลิกแอปพลิเคชันการค้นหา หน้า "Search Appplications" จะปรากฏขึ้น
- คลิกวงกลมสีเหลือง + กล่องโต้ตอบ "สร้างแอปพลิเคชันการค้นหาใหม่" จะปรากฏขึ้น
- ในช่องชื่อที่แสดง ให้ป้อน "บทแนะนำ"
- คลิกสร้าง
- คลิกไอคอนดินสอถัดจากแอปพลิเคชันการค้นหาที่สร้างขึ้นใหม่ ("แก้ไขแอปพลิเคชันการค้นหา") หน้า "รายละเอียดแอปพลิเคชันการค้นหา" จะปรากฏขึ้น
- จดรหัสแอปพลิเคชันไว้
- คลิกไอคอนดินสอทางด้านขวาของแหล่งข้อมูล
- ข้าง "บทแนะนำ" ให้คลิกปุ่มสลับเปิดใช้ ปุ่มสลับนี้เปิดใช้แหล่งข้อมูลบทแนะนำสำหรับแอปพลิเคชันการค้นหาที่สร้างขึ้นใหม่
- คลิกตัวเลือกการแสดงผลทางด้านขวาของแหล่งข้อมูล "บทแนะนำ"
- ตรวจสอบข้อมูลประกอบทั้งหมด
- คลิกบันทึก
- คลิกเสร็จสิ้น
กำหนดค่าเว็บแอปพลิเคชัน
หลังจากสร้างข้อมูลเข้าสู่ระบบและแอปค้นหาแล้ว ให้อัปเดตการกำหนดค่าแอปพลิเคชันให้รวมค่าเหล่านี้ดังนี้
- จากบรรทัดคำสั่ง ให้เปลี่ยนไดเรกทอรีเป็น "cloud-search-samples/end-to-end/search-interface/public"
- เปิดไฟล์
app.js
ด้วยเครื่องมือแก้ไขข้อความ - ค้นหาตัวแปร
searchConfig
ที่ด้านบนของไฟล์ - แทนที่
[client-id]
ด้วยรหัสไคลเอ็นต์ OAuth ที่สร้างไว้ก่อนหน้านี้ - แทนที่
[application-id]
ด้วยรหัสแอปพลิเคชันการค้นหาที่ระบุไว้ในส่วนก่อนหน้า - บันทึกไฟล์
เรียกใช้แอปพลิเคชัน
เริ่มแอปพลิเคชันโดยเรียกใช้คำสั่งนี้
npm run start
ค้นหาดัชนี
วิธีค้นหาดัชนีโดยใช้วิดเจ็ต Search
- เปิดเบราว์เซอร์และไปที่
http://localhost:8080
- คลิกลงชื่อเข้าใช้เพื่อให้สิทธิ์แอปในการค้นหา Cloud Search ในนามของคุณ
- ในช่องค้นหา ให้ป้อนคำค้นหา เช่น คำว่า "ทดสอบ" แล้วกด Enter หน้าเว็บควรแสดงผลการค้นหา พร้อมด้วยข้อมูลประกอบและการควบคุมการใส่เลขหน้าเพื่อไปยังส่วนต่างๆ ของผลการค้นหา
ตรวจสอบโค้ด
ส่วนที่เหลือจะอธิบายถึงวิธีสร้างอินเทอร์เฟซผู้ใช้
กำลังโหลดวิดเจ็ต
วิดเจ็ตและไลบรารีที่เกี่ยวข้องจะมีการโหลดโดยแบ่งเป็น 2 ระยะ ก่อนอื่น สคริปต์ Bootstrap จะโหลดขึ้น:
ประการที่ 2 ระบบจะเรียก Callback onLoad
เมื่อสคริปต์พร้อมใช้งานแล้ว จากนั้นจะโหลดไคลเอ็นต์ Google API, Google Sign-In และไลบรารีวิดเจ็ตของ Cloud Search
การเริ่มต้นแอปที่เหลือจะมีการจัดการโดย initializeApp
เมื่อโหลดไลบรารีที่จำเป็นทั้งหมดแล้ว
การจัดการการให้สิทธิ์
ผู้ใช้ต้องอนุญาตให้แอปค้นหาในนามของตนเอง แม้ว่าวิดเจ็ตจะแจ้งให้ผู้ใช้อนุญาตได้ แต่คุณสามารถสร้างประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้นด้วยการจัดการการให้สิทธิ์ด้วยตนเอง
สำหรับอินเทอร์เฟซการค้นหา แอปจะแสดง 2 มุมมองที่แตกต่างกันขึ้นอยู่กับสถานะการลงชื่อเข้าใช้ของผู้ใช้
ในระหว่างการเริ่มต้น ระบบจะเปิดใช้มุมมองที่ถูกต้องและกำหนดค่าเครื่องจัดการสำหรับกิจกรรมการลงชื่อเข้าใช้และการออกจากระบบดังนี้
การสร้างอินเทอร์เฟซการค้นหา
วิดเจ็ต Search ต้องใช้มาร์กอัป HTML จำนวนเล็กน้อยสำหรับอินพุตการค้นหาและเก็บผลการค้นหา ดังนี้
วิดเจ็ตจะเริ่มต้นทำงานและเชื่อมโยงกับองค์ประกอบอินพุตและคอนเทนเนอร์ในระหว่างการเริ่มต้น
ยินดีด้วย คุณทำตามบทแนะนำเรียบร้อยแล้ว ดำเนินการต่อเพื่อดู วิธีการล้างข้อมูล