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