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

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

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

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

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

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

npm install

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

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

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

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

  3. ברשימה הנפתחת Create credentials בוחרים באפשרות OAuth client ID. הדף Create 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. הדף 'הגדרות ל-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. בתיבת החיפוש, מזינים שאילתה, כמו המילה 'בדיקה', ומקישים על 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();

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

הקודם הבא