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

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

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

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

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

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

npm install

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

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

  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. בשדה שם, מזינים 'מדריך'.

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

  8. בשדה URI, מזינים 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. בשדה שם תצוגה, מזינים 'מדריך'.
  8. לוחצים על יצירה.
  9. לוחצים על סמל העיפרון לצד אפליקציית החיפוש החדשה ("Edit search application"). יופיע הדף 'פרטי אפליקציית החיפוש'.
  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. כדי לנווט בתוצאות, הדף צריך להציג את תוצאות השאילתה יחד עם מאפיינים ופקדי עימוד.

בדיקת הקוד

בקטעים הנותרים נבדקת הגרסה של ממשק המשתמש.

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

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

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

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

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

הקודם הבא