הגדרה של ממשק המשתמש

בדף הזה במדריך ל-Google Cloud Search מוסבר איך להגדיר אפליקציית חיפוש בהתאמה אישית באמצעות ווידג'ט החיפוש שניתן להטמעה. כדי להתחיל מההתחלה של המדריך הזה, אפשר לעיין במדריך לתחילת העבודה עם Cloud Search.

התקנת יחסי תלות

1. אם המחבר עדיין מבצע אינדוקס למאגר, פותחים מעטפת חדשה וממשיכים שם.

2. משורת הפקודה, משנים את הספרייה ל-cloud-search-samples/end-to-end/search-interface.

3. כדי להוריד את יחסי התלות הנדרשים להרצת שרת האינטרנט, מריצים את הפקודה הבאה:

npm install

יצירת פרטי הכניסה לאפליקציית החיפוש

כדי להשתמש במחבר הזה, צריך פרטי כניסה של חשבון שירות כדי לבצע קריאה ל-Cloud Search APIs. כדי ליצור את פרטי הכניסה:

1. חוזרים אל מסוף Google Cloud.

2. בחלונית הניווט הימנית, לוחצים על Credentials (פרטי כניסה).

3. ברשימה הנפתחת Create credentials, בוחרים באפשרות OAuth client ID. מופיע הדף 'יצירת מזהה לקוח OAuth'.

4. (אופציונלי). אם לא הגדרתם את מסך ההסכמה, לוחצים על הגדרת מסך ההסכמה. מופיע מסך ההסכמה ל-OAuth.

   1. לוחצים על פנימי ואז על יצירה. יופיע מסך נוסף של 'הסכמה ל-OAuth'.

   2. ממלאים את שדות החובה. הוראות נוספות זמינות בקטע בנושא הסכמת המשתמש במאמר הגדרת OAuth 2.0.

5. לוחצים על הרשימה הנפתחת סוג האפליקציה ובוחרים באפשרות אפליקציית אינטרנט.

6. בשדה שם, מזינים 'tutorial'.

7. בשדה מקורות מורשים של JavaScript, לוחצים על הוספת URI. יופיע שדה ריק בשם 'כתובות URI'.

8. בשדה URIs, מזינים http://localhost:8080.

9. לוחצים על יצירה. מופיע המסך 'נוצר לקוח OAuth'.

10. חשוב לזכור את מזהה הלקוח. הערך הזה משמש לזיהוי האפליקציה כשמבקשים הרשאת משתמש באמצעות OAuth2. ההטמעה הזו לא מחייבת שימוש בסוד לקוח.

11. לוחצים על אישור.

יצירת אפליקציית החיפוש

לאחר מכן, יוצרים אפליקציית חיפוש במסוף Admin. אפליקציית החיפוש היא ייצוג וירטואלי של ממשק החיפוש והגדרות ברירת המחדל שלו.

1. חוזרים למסוף Google Admin.
2. לוחצים על סמל האפליקציות. יופיע הדף 'ניהול אפליקציות'.
3. לוחצים על Google Workspace. מופיע הדף 'ניהול אפליקציות ב-Google Workspace'.
4. גוללים למטה ולוחצים על Cloud Search. מופיע הדף 'הגדרות של Google Workspace'.
5. לוחצים על חיפוש אפליקציות. יופיע הדף 'חיפוש אפליקציות'.
6. לוחצים על העיגול הצהוב עם הסימן +. מופיעה תיבת הדו-שיח 'יצירת אפליקציית חיפוש חדשה'.
7. בשדה השם המוצג, מזינים 'tutorial'.
8. לוחצים על יצירה.
9. לוחצים על סמל העיפרון לצד אפליקציית החיפוש החדשה ("עריכת אפליקציית חיפוש"). יופיע הדף 'חיפוש פרטי בקשה'.
10. שימו לב למזהה האפליקציה.
11. משמאל למקורות נתונים, לוחצים על סמל העיפרון.
12. לצד 'הדרכה', לוחצים על המתג הפעלה. המתג הזה מאפשר להפעיל את מקור הנתונים של ההדרכה באפליקציית החיפוש החדשה.
13. משמאל למקור הנתונים 'הדרכה', לוחצים על אפשרויות תצוגה.
14. בודקים את כל ההיבטים.
15. לוחצים על שמירה.
16. לוחצים על סיום.

הגדרת אפליקציית האינטרנט

אחרי שיוצרים את פרטי הכניסה ואת אפליקציית החיפוש, מעדכנים את הגדרות האפליקציה כך שיכללו את הערכים האלה:

1. משורת הפקודה, משנים את הספרייה ל-`cloud-search-samples/end-to-end/search-interface/public.'
2. פותחים את קובץ app.js בכלי לעריכת טקסט.
3. מחפשים את המשתנה searchConfig בחלק העליון של הקובץ.
4. מחליפים את [client-id] במזהה הלקוח של OAuth שנוצר קודם.
5. מחליפים את [application-id] במזהה אפליקציית החיפוש שצוין בקטע הקודם.
6. שומרים את הקובץ.

הפעלת האפליקציה

מריצים את הפקודה הבאה כדי להפעיל את האפליקציה:

npm run start

שליחת שאילתה לאינדקס

כדי לשלוח שאילתה לאינדקס באמצעות ווידג'ט החיפוש:

1. פותחים את הדפדפן ועוברים אל http://localhost:8080.
2. לוחצים על כניסה כדי לאשר לאפליקציה לשלוח שאילתות ל-Cloud Search בשמכם.
3. בתיבת החיפוש, מזינים שאילתה, כמו המילה 'בדיקה', ומקישים על Enter. בדף יוצגו תוצאות השאילתה, יחד עם מאפיינים ופקדי חלוקה לדפים לניווט בתוצאות.

בדיקת הקוד

בסעיפים הבאים נבדוק איך ממשק המשתמש בנוי.

טעינת הווידג'ט

טעינת הווידג'ט והספריות שקשורות אליו מתבצעת בשני שלבים. קודם כול, נטען סקריפט bootstrap:

<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

שנית, המערכת קוראת לפונקציית הקריאה החוזרת onLoad אחרי שהסקריפט מוכן. לאחר מכן, הוא טוען את ספריית הלקוח של Google API, את ספריית הכניסה לחשבון Google ואת ספריות הווידג'טים של Cloud Search.

/**
 * Load the cloud search widget & auth libraries. Runs after
 * the initial gapi bootstrap library is ready.
 */
function onLoad() {
  gapi.load('client:auth2:cloudsearch-widget', initializeApp)
}

האתחול הנותר של האפליקציה מטופל על ידי initializeApp אחרי שכל הספריות הנדרשות נטענות.

טיפול בהרשאה

המשתמשים צריכים לאשר לאפליקציה לבצע שאילתות בשמם. הווידג'ט יכול לבקש מהמשתמשים לאשר הרשאות, אבל כדי לשפר את חוויית המשתמש, מומלץ לטפל בהרשאות בעצמכם.

בממשק החיפוש, האפליקציה מציגה שני תצוגות שונות בהתאם למצב הכניסה של המשתמש.

<div class="content">
  <div id="app" hidden>
    <div id="header">
      <button id="sign-out">Sign-out</button>
    </div>
    <!-- Markup for widget...-->
  </div>
  <div id="welcome" hidden>
    <h1>Cloud Search Tutorial</h1>
    <p>Sign in with your Google account to search.</p>
    <button id="sign-in">Sign-in</button>
  </div>
</div>

במהלך האתחול, התצוגה הנכונה מופעלת והגורמים שמטפלים באירועי הכניסה והיציאה מוגדרים:

/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
async function initializeApp() {
  await gapi.auth2.init({
      'clientId': searchConfig.clientId,
      'scope': 'https://www.googleapis.com/auth/cloud_search.query'
  });

  let auth = gapi.auth2.getAuthInstance();

  // Watch for sign in status changes to update the UI appropriately
  let onSignInChanged = (isSignedIn) => {
    document.getElementById("app").hidden = !isSignedIn;
    document.getElementById("welcome").hidden = isSignedIn;
    if (resultsContainer) {
      resultsContainer.clear();
    }
  }
  auth.isSignedIn.listen(onSignInChanged);
  onSignInChanged(auth.isSignedIn.get()); // Trigger with current status

  // Connect sign-in/sign-out buttons
  document.getElementById("sign-in").onclick = (e) =>  auth.signIn();
  document.getElementById("sign-out").onclick = (e) => auth.signOut();

  // ...

}

יצירת ממשק החיפוש

ווידג'ט החיפוש דורש כמות קטנה של תגי HTML לתיבת הקלט של החיפוש ולתוצאות החיפוש:

<div id="search_bar">
  <div>
    <div id="suggestions_anchor">
      <input type="text" id="search_input" placeholder="Search for...">
    </div>
  </div>
</div>
<div id="facet_results" ></div>
<div id="search_results" ></div>

הווידג'ט מאותחל ומקושר לרכיבי הקלט והמאגר במהלך האתחול:

gapi.config.update('cloudsearch.config/apiVersion', 'v1');
resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setSearchResultsContainerElement(document.getElementById('search_results'))
  .setFacetResultsContainerElement(document.getElementById('facet_results'))
  .build();

const searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setInput(document.getElementById('search_input'))
  .setAnchor(document.getElementById('suggestions_anchor'))
  .setResultsContainer(resultsContainer)
  .build();

כל הכבוד, סיימת את המדריך בהצלחה. בהמשך מופיעות הוראות לניקוי.

הקודם הבא