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

בדף הזה במדריך ל-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. בחלונית הניווט הימנית, לוחצים על פרטי כניסה.

  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. בדף יוצגו תוצאות השאילתה, יחד עם מאפיינים ופקדי חלוקה לדפים כדי לנווט בין התוצאות.

בדיקת הקוד

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

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

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

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

שנית, המערכת קוראת לפונקציית הקריאה החוזרת onLoad כשהסקריפט מוכן. לאחר מכן, הוא טוען את ספריות הווידג'טים של Google API client, ‏ 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();

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

הקודם הבא