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

בדף הזה של המדריך ל-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. (אופציונלי). אם עדיין לא הגדרתם את מסך ההסכמה, לוחצים על הגדרת מסך ההסכמה הסכמה ל-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. הדף 'הגדרות ב-Google Workspace' דף מופיעה.
  5. לוחצים על Search Applications (אפליקציות חיפוש). הכרטיסייה 'תכונות חיפוש' מופיעה.
  6. לוחצים על הסמל הצהוב + העגול. השדה 'יצירה של אפליקציית חיפוש חדשה' תופיע תיבת דו-שיח.
  7. בשדה Display name, מזינים 'tutorial'.
  8. לוחצים על יצירה.
  9. לוחצים על סמל העיפרון לצד אפליקציית החיפוש החדשה שנוצרה. ("עריכה של אפליקציית החיפוש"). השדה 'פרטי האפליקציה בחיפוש' מופיעה.
  10. רושמים או זוכרים את מזהה האפליקציה.
  11. משמאל לקטע מקורות נתונים, לוחצים על סמל העיפרון.
  12. ליד 'מדריך', לוחצים על המתג Enable. המתג הזה מפעיל מקור הנתונים של המדריך לשימוש באפליקציית החיפוש החדשה שנוצרה.
  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. הדף אמור להציג את תוצאות השאילתה, יחד עם המאפיינים פקדי החלוקה לדפים לניווט בתוצאות.

בדיקת הקוד

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

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

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

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>

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

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

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

הקודם הבא