ווידג'ט החיפוש מספק ממשק חיפוש שניתן להתאמה אישית לאפליקציות אינטרנט. כדי להטמיע את הווידג'ט יש צורך בכמות קטנה של HTML ו-JavaScript, והוא מאפשר תכונות חיפוש נפוצות כמו היבטים ועימוד. תוכלו גם להתאים אישית חלקים בממשק באמצעות CSS ו-JavaScript.
אם אתם צריכים יותר גמישות ממה שהווידג'ט מציע, כדאי להשתמש ב-Query API. למידע על יצירת ממשק חיפוש באמצעות Query API, קראו את המאמר יצירת ממשק חיפוש באמצעות Query API.
פיתוח ממשק חיפוש
כדי לבנות את ממשק החיפוש צריך לבצע כמה שלבים:
- הגדרת אפליקציית חיפוש
- יצירת מזהה לקוח לאפליקציה
- הוספת תגי עיצוב ל-HTML לתיבת החיפוש ולתוצאות
- טעינת הווידג'ט בדף
- אתחול הווידג'ט
הגדרת אפליקציית חיפוש
לכל ממשק חיפוש צריך להגדיר אפליקציית חיפוש במסוף Admin. אפליקציית החיפוש מספקת מידע נוסף לגבי השאילתה, כמו מקורות הנתונים, המאפיינים והגדרות איכות החיפוש.
כדי ליצור אפליקציית חיפוש, קראו את המאמר יצירת חוויית חיפוש בהתאמה אישית.
יצירת מזהה לקוח לאפליקציה
בנוסף לשלבים המפורטים במאמר הגדרת הגישה ל-Google Cloud Search API, צריך גם ליצור מזהה לקוח לאפליקציית האינטרנט.
כשמגדירים את הפרויקט:
- בוחרים בסוג הלקוח דפדפן אינטרנט
- מספקים את ה-URI המקורי של האפליקציה.
- הערה לגבי מזהה הלקוח שנוצר. כדי להשלים את השלבים הבאים, תצטרכו את מזהה הלקוח. סוד הלקוח לא נדרש עבור הווידג'ט.
למידע נוסף, קראו את המאמר OAuth 2.0 לאפליקציית אינטרנט בצד הלקוח.
הוספת תגי עיצוב ל-HTML
כדי שהווידג'ט יפעל, יש צורך בכמות קטנה של HTML. אתם צריכים לספק:
- רכיב
input
לתיבת החיפוש. - רכיב שאליו אפשר לעגן את החלון הקופץ של ההצעה.
- רכיב להכללה של תוצאות החיפוש.
- (אופציונלי) מספקים רכיב שיכיל את פקדי המאפיינים.
קטע ה-HTML הבא מציג את קוד ה-HTML של ווידג'ט חיפוש, שבו הרכיבים שיש לקשר מזוהים באמצעות המאפיין id
:
טעינת הווידג'ט
הווידג'ט נטען באופן דינמי באמצעות סקריפט של טעינה. כדי לכלול את המטען, משתמשים בתג <script>
כמו שמוצג כאן:
צריך לציין בתג הסקריפט קריאה חוזרת (callback) מסוג onload
. קוראים לפונקציה כשהטעינה מוכנה. כשהטעינה מוכנה, ממשיכים לטעון את הווידג'ט על ידי שליחת קריאה ל-gapi.load()
כדי לטעון את המודולים של לקוח ה-API, כניסה באמצעות חשבון Google ו-Cloud Search.
מתבצעת קריאה לפונקציה initializeApp()
אחרי שכל המודולים נטענים.
אתחול הווידג'ט
קודם כול, מאתחלים את ספריית הלקוח על ידי קריאה ל-gapi.client.init()
או ל-gapi.auth2.init()
באמצעות מזהה הלקוח שנוצר וההיקף https://www.googleapis.com/auth/cloud_search.query
. לאחר מכן צריך להשתמש במחלקות gapi.cloudsearch.widget.resultscontainer.Builder
ו-gapi.cloudsearch.widget.searchbox.Builder
כדי להגדיר את הווידג'ט ולחבר אותו לרכיבי ה-HTML.
הדוגמה הבאה מראה איך לאתחל את הווידג'ט:
הדוגמה שלמעלה מפנה לשני משתנים של תצורה שמוגדרים כך:
התאמה אישית של חוויית הכניסה
כברירת מחדל, הווידג'ט מבקש מהמשתמשים להיכנס לחשבון ולאשר את האפליקציה בזמן שהם מתחילים להקליד שאילתה. אפשר להשתמש בכניסה באמצעות חשבון Google לאתרים כדי להציע למשתמשים חוויית כניסה מותאמת יותר.
מתן הרשאה ישירה למשתמשים
בעזרת Sign In with Google תוכלו לעקוב אחרי מצב הכניסה של המשתמש, לבצע כניסה או יציאה מהחשבון לפי הצורך. לדוגמה, הדוגמה הבאה רואה את המצב isSignedIn
כדי לעקוב אחר שינויים בכניסה לחשבון, ומשתמשת בשיטה GoogleAuth.signIn()
כדי להתחיל את הכניסה מלחיצה על לחצן:
לפרטים נוספים, ראו כניסה באמצעות חשבון Google.
כניסה אוטומטית של משתמשים
כדי לייעל את חוויית הכניסה, אתם יכולים לתת לאפליקציה הרשאה מראש בשם משתמשים בארגון. השיטה הזו שימושית גם אם משתמשים בשרת proxy ל-Cloud Identity Aware כדי להגן על האפליקציה.
למידע נוסף, אפשר לעיין במאמר בנושא שימוש ב'כניסה באמצעות חשבון Google' עם אפליקציות IT.
התאמה אישית של הממשק
אפשר לשנות את המראה של ממשק החיפוש באמצעות שילוב של שיטות:
- שינוי הסגנונות באמצעות CSS
- מקשטים את האלמנטים באמצעות מתאם
- יצירת רכיבים בהתאמה אישית באמצעות מתאם
שינוי הסגנונות באמצעות CSS
לווידג'ט החיפוש יש שירות CSS משלו לרכיבים של הצעות סגנון ותוצאות, וגם פקדי החלוקה לדפים. תוכלו לעצב מחדש את הרכיבים האלה לפי הצורך.
במהלך הטעינה, ווידג'ט החיפוש טוען באופן דינמי את גיליון הסגנונות שלו שמוגדר כברירת מחדל. הפעולה הזו מתרחשת אחרי טעינת גיליונות של סגנונות של אפליקציות, העלאת העדיפות של הכללים. כדי להבטיח שהסגנונות שלכם יקבלו עדיפות על פני סגנונות ברירת המחדל, תוכלו להשתמש בבוררי אב כדי להגביר את מידת הספציפיות של כללי ברירת המחדל.
לדוגמה, לכלל הבא אין השפעה אם הוא נטען בתג link
או style
סטטי במסמך.
.cloudsearch_suggestion_container {
font-size: 14px;
}
במקום זאת, מתאימים את הכלל עם המזהה או המחלקה של מאגר האב שמוצהר בדף.
#suggestions_anchor .cloudsearch_suggestion_container {
font-size: 14px;
}
רשימה של סוגי תמיכה ו-HTML לדוגמה שהווידג'ט יצרה מופיעה במאמרי העזרה מחלקות CSS נתמכות.
מקשטים את האלמנטים באמצעות מתאם
כדי לקשט את האלמנט לפני הרינדור, צריך ליצור ולחבר מחדש מתאם שמטמיע אחת משיטות העיצוב, כמו decorateSuggestionElement
או decorateSearchResultElement.
לדוגמה, המתאמים הבאים מוסיפים מחלקה מותאמת אישית לרכיבי ההצעה והתוצאה.
כדי לרשום את המתאם בזמן אתחול הווידג'ט, צריך להשתמש בשיטה setAdapter()
במחלקה Builder
המתאימה:
מעצבים יכולים לשנות את המאפיינים של רכיב הקונטיינר וגם את כל רכיבי הצאצא. במהלך קישוט, אפשר להוסיף או להסיר אלמנטים צאצאים. עם זאת, אם אתם מבצעים שינויים מבניים באלמנטים, כדאי ליצור את הרכיבים ישירות במקום לקשט אותם.
יצירת רכיבים בהתאמה אישית באמצעות מתאם
כדי ליצור רכיב מותאם אישית להצעה, למאגר מאפיינים או לתוצאת חיפוש, צריך ליצור ולרשום מתאם שמטמיע את createSuggestionElement
, createFacetResultElement
או createSearchResultElement
באופן אוטומטי.
המתאמים הבאים ממחישים יצירת רכיבים של הצעות בהתאמה אישית ותוצאות חיפוש באמצעות תגי HTML <template>
.
כדי לרשום את המתאם בזמן אתחול הווידג'ט, צריך להשתמש ב-method setAdapter()
במחלקה המתאימה: Builder
:
יצירת רכיבי מאפיין מותאמים אישית באמצעות createFacetResultElement
כפופה למספר הגבלות:
- אתם צריכים לחבר את מחלקת ה-CSS
cloudsearch_facet_bucket_clickable
לרכיב שהמשתמשים לוחצים עליו כדי להחליף מצב של קטגוריה. - אתם צריכים לארוז כל קטגוריה ברכיב מכיל עם מחלקת ה-CSS
cloudsearch_facet_bucket_container
. - אי אפשר לעבד את הקטגוריות בסדר שונה מכפי שהן מופיעות בתשובה.
לדוגמה, קטע הקוד הבא יוצר מאפיינים באמצעות קישורים במקום תיבות סימון.
התאמה אישית של התנהגות החיפוש
ההגדרות של אפליקציית חיפוש מייצגות את הגדרות ברירת המחדל של ממשק החיפוש, והן סטטיות. כדי להטמיע מסננים או מאפיינים דינמיים, כמו מתן אפשרות למשתמשים להחליף מצב במקורות נתונים, אפשר לבטל את ההגדרות של אפליקציות החיפוש על ידי יירוט בקשת החיפוש באמצעות מתאם.
כדי לשנות בקשות שנשלחות ל-Search API לפני ההפעלה, מטמיעים מתאם באמצעות השיטה interceptSearchRequest
.
לדוגמה, המתאם הבא מיירט בקשות כדי להגביל שאילתות למקור שנבחר על ידי המשתמש:
כדי לרשום את המתאם בזמן אתחול הווידג'ט, צריך להשתמש בשיטה setAdapter()
כשיוצרים את ה-ResultsContainer
קוד ה-HTML הבא משמש להצגת תיבת בחירה לסינון לפי מקורות:
הקוד הבא מקשיב לשינוי, מגדיר את הבחירה ומבצע מחדש את השאילתה במקרה הצורך.
אפשר גם ליירט את תגובת החיפוש על ידי הטמעה של interceptSearchResponse
במתאם.
הצמדה של גרסת ה-API
כברירת מחדל, הווידג'ט משתמש בגרסה היציבה והעדכנית ביותר של ה-API. כדי לנעול גרסה ספציפית, צריך להגדיר את פרמטר ההגדרה cloudsearch.config/apiVersion
לגרסה המועדפת לפני אתחול הווידג'ט.
ברירת המחדל של גרסת ה-API היא 1.0 אם היא לא מוגדרת או מוגדרת כערך לא חוקי.
הצמדת גרסת הווידג'ט
כדי למנוע שינויים לא צפויים בממשקי החיפוש, צריך להגדיר את פרמטר ההגדרה cloudsearch.config/clientVersion
כפי שמוצג:
gapi.config.update('cloudsearch.config/clientVersion', 1.1);
ברירת המחדל של גרסת הווידג'ט היא 1.0 אם היא לא מוגדרת או מוגדרת כערך לא חוקי.
אבטחת ממשק החיפוש
תוצאות החיפוש מכילות מידע רגיש מאוד. פועלים לפי השיטות המומלצות לאבטחת אפליקציות אינטרנט, במיוחד מפני התקפות clickjacking.
למידע נוסף, ראו פרויקט OWASP Guide Project
הפעלת ניפוי באגים
אפשר להשתמש ב-interceptSearchRequest
כדי להפעיל את ניפוי הבאגים בווידג'ט החיפוש. למשל:
if (!request.requestOptions) {
// Make sure requestOptions is populated
request.requestOptions = {};
}
// Enable debugging
request.requestOptions.debugOptions = {enableDebugging: true}
return request;