ווידג'ט החיפוש מספק ממשק חיפוש מותאם אישית לאפליקציות אינטרנט. כדי להטמיע את הווידג'ט צריך רק כמות קטנה של 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;
}
במאמר מחלקות CSS נתמכות תוכלו למצוא רשימה של מחלקות תמיכה ו-HTML לדוגמה שהווידג'ט יוצר.
מקשטים את הרכיבים באמצעות מתאם
כדי לקשט רכיב לפני העיבוד, צריך ליצור ולתאם מחדש מתאם שמטמיע אחת משיטות העיצוב, כמו decorateSuggestionElement
או decorateSearchResultElement.
לדוגמה, המתאמים הבאים מוסיפים מחלקה מותאמת אישית לרכיבי ההצעה והתוצאה.
כדי לרשום את המתאם בזמן אתחול הווידג'ט, צריך להשתמש ב-method setAdapter()
במחלקה המתאימה ב-Builder
:
מעצבים יכולים לשנות את המאפיינים של רכיב הקונטיינר וגם של כל רכיבי הצאצא. אפשר להוסיף או להסיר רכיבי צאצא במהלך הקישוט. עם זאת, אם אתם מבצעים שינויים מבניים באלמנטים, כדאי ליצור את הרכיבים ישירות במקום לקשט אותם.
יצירת רכיבים בהתאמה אישית באמצעות מתאם
כדי ליצור רכיב מותאם אישית להצעה, מאגר מאפיינים או תוצאת חיפוש, יש ליצור ולרשום מתאם עם המאפיינים createSuggestionElement
, createFacetResultElement
או createSearchResultElement
בהתאם.
המתאמים הבאים ממחישים יצירת רכיבים של הצעות ותוצאות חיפוש מותאמות אישית באמצעות תגי <template>
של HTML.
כדי לרשום את המתאם בעת אתחול הווידג'ט, יש להשתמש ב-method setAdapter()
במחלקה Builder
המתאימה:
יצירת רכיבי היבט בהתאמה אישית באמצעות createFacetResultElement
כפופה למספר הגבלות:
- צריך לצרף את המחלקה
cloudsearch_facet_bucket_clickable
של ה-CSS לרכיב שמשתמשים לוחצים עליו כדי להחליף קטגוריה. - עליכם לכלול כל קטגוריה ברכיב מכיל באמצעות המחלקה
של CSS
cloudsearch_facet_bucket_container
. - אי אפשר לעבד את הקטגוריות בסדר שונה מזה שבו הן מופיעות בתגובה.
לדוגמה, קטע הקוד הבא מעבד היבטים באמצעות קישורים במקום תיבות סימון.
התאמה אישית של התנהגות החיפוש
ההגדרות של אפליקציית חיפוש מייצגות את הגדרות ברירת המחדל של ממשק חיפוש, והן סטטיות. כדי להטמיע מסננים או מאפיינים דינמיים, כמו לאפשר למשתמשים להחליף בין מקורות נתונים, אפשר לבטל את ההגדרות של אפליקציית החיפוש על ידי יירוט של בקשת החיפוש באמצעות מתאם.
מטמיעים מתאם באמצעות method interceptSearchRequest
כדי לשנות בקשות שנשלחו ל-Search API לפני הביצוע.
לדוגמה, המתאם הבא מיירט בקשות להגבלת שאילתות למקור שנבחר על ידי המשתמש:
כדי לרשום את המתאם כשמפעילים את הווידג'ט, צריך להשתמש ב-method 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.
הפעלת ניפוי באגים
השתמשו ב-interceptSearchRequest
כדי להפעיל ניפוי באגים בווידג'ט החיפוש. לדוגמה:
if (!request.requestOptions) {
// Make sure requestOptions is populated
request.requestOptions = {};
}
// Enable debugging
request.requestOptions.debugOptions = {enableDebugging: true}
return request;