رابط کاربری را تنظیم کنید

این صفحه از آموزش Google Cloud Search نحوه راه‌اندازی یک برنامه جستجوی سفارشی با استفاده از ویجت جستجوی جاسازی‌شده را نشان می‌دهد. برای شروع از ابتدای این آموزش، به آموزش شروع جستجوی ابری مراجعه کنید.

وابستگی ها را نصب کنید

  1. اگر کانکتور همچنان مخزن را ایندکس می کند، یک پوسته جدید باز کنید و در آنجا ادامه دهید.

  2. از خط فرمان، دایرکتوری را به cloud-search-samples/end-to-end/search-interface تغییر دهید.

  3. برای دانلود وابستگی های مورد نیاز برای اجرای وب سرور، دستور زیر را اجرا کنید:

npm install

اعتبار برنامه جستجو را ایجاد کنید

رابط برای فراخوانی Cloud Search API به اعتبارنامه حساب سرویس نیاز دارد. برای ایجاد اعتبار:

  1. به کنسول Google Cloud برگردید.

  2. در پیمایش سمت چپ، روی اعتبارنامه کلیک کنید.

  3. از لیست کشویی Create credentials ، شناسه مشتری OAuth را انتخاب کنید. صفحه "ایجاد شناسه مشتری OAuth" ظاهر می شود.

  4. (اختیاری). اگر صفحه رضایت را پیکربندی نکرده‌اید، روی پیکربندی صفحه رضایت کلیک کنید. صفحه "رضایت OAuth" ظاهر می شود.

    1. روی Internal کلیک کنید و روی CREATE کلیک کنید. یکی دیگر از صفحه های "رضایت OAuth" ظاهر می شود.

    2. فیلدهای الزامی را پر کنید برای دستورالعمل‌های بیشتر، به بخش رضایت کاربر تنظیمات OAuth 2.0 مراجعه کنید.

  5. روی لیست کشویی Application type کلیک کنید و Web application را انتخاب کنید.

  6. در قسمت Name عبارت "آموزش" را وارد کنید.

  7. در فیلد مبداهای مجاز جاوا اسکریپت ، روی ADD URI کلیک کنید. یک فیلد خالی "URIs" ظاهر می شود.

  8. در قسمت URIs ، http://localhost:8080 وارد کنید.

  9. روی CREATE کلیک کنید. صفحه "مشتری OAuth ایجاد شد" ظاهر می شود.

  10. به شناسه مشتری توجه کنید. این مقدار برای شناسایی برنامه هنگام درخواست مجوز کاربر با OAuth2 استفاده می شود. رمز مشتری برای این پیاده سازی مورد نیاز نیست.

  11. روی OK کلیک کنید.

برنامه جستجو را ایجاد کنید

بعد، یک برنامه جستجو در کنسول مدیریت ایجاد کنید. برنامه جستجو یک نمایش مجازی از رابط جستجو و پیکربندی پیش فرض آن است.

  1. به کنسول مدیریت گوگل بازگردید.
  2. روی نماد برنامه ها کلیک کنید. صفحه "Apps Administration" ظاهر می شود.
  3. روی Google Workspace کلیک کنید. صفحه "Apps Google Workspace Administration" ظاهر می شود.
  4. به پایین بروید و روی Cloud Search کلیک کنید. صفحه "تنظیمات Google Workspace" ظاهر می شود.
  5. روی جستجوی برنامه ها کلیک کنید. صفحه "جستجوی برنامه ها" ظاهر می شود.
  6. روی زرد گرد + کلیک کنید. گفتگوی "ایجاد یک برنامه جستجوی جدید" ظاهر می شود.
  7. در قسمت نمایش نام ، "آموزش" را وارد کنید.
  8. روی CREATE کلیک کنید.
  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. در کادر جستجو، عبارتی مانند کلمه "test" را وارد کرده و 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، 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();

تبریک می گویم، شما آموزش را با موفقیت به پایان رساندید! برای دستورالعمل های پاکسازی ادامه دهید.

قبلی بعدی