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

בדף הזה של המדריך של 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. יופיע הדף 'יצירת מזהה לקוח ב-OAuth'.

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

   1. לוחצים על פנימי ולוחצים על יצירה. יופיע מסך נוסף של "הסכמת OAuth".

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

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

6. בשדה שם, מזינים 'מערך הדרכה'.

7. בשדה מקורות מורשים של JavaScript, לוחצים על הוספת 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. לוחצים על sign in כדי לתת לאפליקציה הרשאה לשלוח שאילתות ל-Cloud Search בשמכם.
3. בתיבת החיפוש מזינים שאילתה, כמו המילה test (בדיקה) ומקישים על Enter. הדף צריך להציג את תוצאות השאילתה יחד עם מאפיינים ופקדי עימוד כדי לנווט בתוצאות.

בדיקת הקוד

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

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

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

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

/**
 * 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>

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

/**
 * 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();

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

הקודם הבא