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

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

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

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

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

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

npm install

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

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

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

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

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

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

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

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

  5. לוחצים על הרשימה הנפתחת Application type ובוחרים באפשרות Web application.

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

  7. בשדה Authorized JavaScript origins, לוחצים על ADD URI. יופיע שדה URIs ריק.

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

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

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

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

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

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

  1. חוזרים למסוף Google Admin.
  2. לוחצים על סמל האפליקציות. הדף 'ניהול אפליקציות' יופיע.
  3. לוחצים על Google Workspace. הדף 'ניהול אפליקציות ב-Google Workspace' מופיע.
  4. גוללים למטה ולוחצים על Cloud Search. הדף Settings for Google Workspace יופיע.
  5. לוחצים על Search Applications (חיפוש אפליקציות). הדף 'תכונות חיפוש' יופיע.
  6. לוחצים על הסמל העגול הצהוב +. תיבת הדו-שיח 'יצירה של אפליקציית חיפוש חדשה' תופיע.
  7. בשדה Display name, מזינים '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. בתיבת החיפוש מזינים שאילתה, כמו המילה test (בדיקה) ומקישים על Enter. בדף צריכות להופיע תוצאות השאילתה, יחד עם מאפיינים ופקדנים של חלוקה לדפים כדי לנווט בתוצאות.

בדיקת הקוד

בחלקים הנותרים נסביר איך ממשק המשתמש בנוי.

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

הווידג'ט והספריות הקשורות נטענים בשני שלבים. קודם נטען הסקריפט של Bootstrap:

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

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

app.js
/**
 * 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 אחרי שכל הספריות הנדרשות נטענות.

טיפול בהרשאה

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

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

index.html
<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>

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

app.js
/**
 * 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:

index.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>

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

app.js
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();

כל הכבוד, סיימת את המדריך! ממשיכים לחלק הבא כדי לקבל הוראות לניקוי.

הקודם הבא