בדף הזה של המדריך ל-Google Cloud Search מוסבר איך להגדיר באמצעות ווידג'ט החיפוש המוטמע. כדי להתחיל בתחילת המדריך הזה, עיינו בקטע מדריך לתחילת העבודה עם Cloud Search.
יחסי תלות בהתקנות
אם המחבר עדיין מוסיף את המאגר לאינדקס, פותחים מעטפת חדשה להמשיך שם.
משורת הפקודה, משנים את הספרייה ל-
cloud-search-samples/end-to-end/search-interface
כדי להוריד את יחסי התלות הנדרשים עבור מפעילים את שרת האינטרנט ומריצים את הפקודה הבאה:
npm install
יצירת פרטי הכניסה של אפליקציית החיפוש
המחבר דורש פרטי כניסה לחשבון שירות כדי להפעיל את Cloud Search ממשקי API. כדי ליצור את פרטי הכניסה:
חוזרים אל מסוף Google Cloud.
בחלונית הניווט השמאלית, לוחצים על Credentials (פרטי כניסה).
מהרשימה הנפתחת Create credentials, בוחרים באפשרות מזהה הלקוח ב-OAuth העמודה 'יצירת מזהה לקוח ב-OAuth' מופיעה.
(אופציונלי). אם עדיין לא הגדרתם את מסך ההסכמה, לוחצים על הגדרת מסך ההסכמה הסכמה ל-OAuth מופיעה.
לוחצים על פנימי ולוחצים על יצירה. עוד 'הסכמה ל-OAuth' מסך מופיעה.
ממלאים את שדות החובה. לקבלת הוראות נוספות, צריך לפנות למשתמש סעיף הסכמה של הגדרת OAuth 2.0.
לוחצים על הרשימה הנפתחת Application type ובוחרים באפשרות Web application.
בשדה שם, מזינים 'מערך הדרכה'.
בשדה מקורות מורשים של JavaScript, לוחצים על הוספת URI. שדה ריק URIs יופיע השדה.
בשדה URIs, מזינים
http://localhost:8080
.לוחצים על יצירה. האפשרות 'נוצר לקוח OAuth' מופיעה.
שימו לב למזהה הלקוח. הערך הזה משמש לזיהוי האפליקציה כאשר מבקשים הרשאת משתמש באמצעות OAuth2. סוד הלקוח אינו נדרש להטמעה הזאת.
לוחצים על אישור.
יצירה של אפליקציית החיפוש
בשלב הבא יוצרים אפליקציית חיפוש במסוף Admin. אפליקציית החיפוש הוא ייצוג וירטואלי של ממשק החיפוש וברירת המחדל שלו הגדרה אישית.
- חוזרים אל מסוף Google Admin.
- לוחצים על סמל האפליקציות. ניהול האפליקציות מופיעה.
- לוחצים על Google Workspace. הדף 'ניהול אפליקציות ב-Google Workspace' מופיעה.
- גוללים למטה ולוחצים על Cloud Search. הדף 'הגדרות ב-Google Workspace' דף מופיעה.
- לוחצים על Search Applications (אפליקציות חיפוש). הכרטיסייה 'תכונות חיפוש' מופיעה.
- לוחצים על הסמל הצהוב + העגול. השדה 'יצירה של אפליקציית חיפוש חדשה' תופיע תיבת דו-שיח.
- בשדה Display name, מזינים 'tutorial'.
- לוחצים על יצירה.
- לוחצים על סמל העיפרון לצד אפליקציית החיפוש החדשה שנוצרה. ("עריכה של אפליקציית החיפוש"). השדה 'פרטי האפליקציה בחיפוש' מופיעה.
- רושמים או זוכרים את מזהה האפליקציה.
- משמאל לקטע מקורות נתונים, לוחצים על סמל העיפרון.
- ליד 'מדריך', לוחצים על המתג Enable. המתג הזה מפעיל מקור הנתונים של המדריך לשימוש באפליקציית החיפוש החדשה שנוצרה.
- משמאל ל'מדריך' מקור נתונים, לוחצים על אפשרויות תצוגה.
- כדאי לבדוק את כל המאפיינים.
- לוחצים על שמירה.
- לוחצים על סיום.
הגדרת אפליקציית האינטרנט
אחרי יצירת פרטי הכניסה ואפליקציית החיפוש, צריך לעדכן את האפליקציה כך שתכלול את הערכים האלה:
- משורת הפקודה, משנים את הספרייה ל- `cloud-search-samples/end-to-end/search-interface/public.'
- פתיחת הקובץ
app.js
באמצעות כלי לעריכת טקסט. - מוצאים את המשתנה
searchConfig
בחלק העליון של הקובץ. - מחליפים את
[client-id]
במזהה הלקוח הקודם של OAuth שנוצר. - מחליפים את
[application-id]
במזהה אפליקציית החיפוש שמצוין ב בקטע הקודם. - שומרים את הקובץ.
הפעלת האפליקציה
מפעילים את האפליקציה באמצעות הפקודה הבאה:
npm run start
שליחת שאילתה לאינדקס
כדי לשלוח שאילתה על האינדקס באמצעות ווידג'ט החיפוש:
- פותחים את הדפדפן ומנווטים אל
http://localhost:8080
. - עליך ללחוץ על כניסה כדי לתת לאפליקציה הרשאה לשלוח שאילתות ל-Cloud Search בשמך.
- בתיבת החיפוש מזינים שאילתה, כמו המילה "test", ולוחצים Enter. הדף אמור להציג את תוצאות השאילתה, יחד עם המאפיינים פקדי החלוקה לדפים לניווט בתוצאות.
בדיקת הקוד
בחלקים הנותרים נסביר איך ממשק המשתמש בנוי.
הווידג'ט בטעינה
הווידג'ט והספריות הקשורות נטענים בשני שלבים. דבר ראשון, אתחול הסקריפט נטען:
שנית, מתבצעת קריאה חוזרת (callback) של onLoad
כשהסקריפט מוכן. לאחר מכן המכשיר נטען
לקוח Google API, 'כניסה באמצעות חשבון Google' וספריות הווידג'טים של Cloud Search.
באתחול האפליקציה הנותר מטופל על ידי initializeApp
אחרי שכל הספריות הנדרשות נטענות.
טיפול בהרשאות
המשתמשים חייבים לתת לאפליקציה הרשאה לשלוח שאילתה בשמם. כשהווידג'ט יכול לבקש מהמשתמשים להעניק הרשאה, ניתן לשפר את חוויית המשתמש על ידי טיפול באישור בעצמך.
לממשק החיפוש, האפליקציה מציגה שתי תצוגות שונות, בהתאם במצב הכניסה של המשתמש.
במהלך האתחול, התצוגה הנכונה מופעלת והרכיבי ה-handler של אירועי כניסה ויציאה מוגדרים:
יצירת ממשק החיפוש
לווידג'ט החיפוש נדרשת כמות קטנה של תגי עיצוב ב-HTML עבור החיפוש ולהחזיק את תוצאות החיפוש:
הווידג'ט מאותחל ומקושר לרכיבי הקלט והקונטיינר במהלך האתחול:
מזל טוב, השלמת בהצלחה את המדריך! המשך ב- הוראות לניקוי.