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

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

نصب وابستگی‌ها

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

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

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

npm install

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

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

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

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

3. از فهرست کشویی «ایجاد اعتبارنامه‌ها» ، شناسه کلاینت OAuth را انتخاب کنید. صفحه «ایجاد شناسه کلاینت OAuth» ظاهر می‌شود.

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

   1. روی «داخلی» و سپس «ایجاد» کلیک کنید. صفحه دیگری با عنوان «رضایت OAuth» ظاهر می‌شود.

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

5. روی فهرست کشویی نوع برنامه کلیک کنید و برنامه وب را انتخاب کنید.

6. در قسمت نام ، عبارت «آموزش» را وارد کنید.

7. در فیلد Authorized JavaScript origins ، روی ADD URI کلیک کنید. یک فیلد خالی "URIs" ظاهر می‌شود.

8. در فیلد URIs ، آدرس http://localhost:8080 را وارد کنید.

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

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

11. روی تأیید کلیک کنید.

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

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

1. به کنسول مدیریت گوگل برگردید.
2. روی آیکون برنامه‌ها کلیک کنید. صفحه «مدیریت برنامه‌ها» ظاهر می‌شود.
3. روی Google Workspace کلیک کنید. صفحه "Apps Google Workspace administration" نمایش داده می‌شود.
4. به پایین اسکرول کنید و روی Cloud Search کلیک کنید. صفحه «تنظیمات Google Workspace» نمایش داده می‌شود.
5. روی جستجوی برنامه‌ها کلیک کنید. صفحه «جستجوی برنامه‌ها» ظاهر می‌شود.
6. روی علامت گرد زرد + کلیک کنید. کادر محاوره‌ای «ایجاد یک برنامه جستجوی جدید» ظاهر می‌شود.
7. در قسمت نام نمایشی ، عبارت «آموزش» را وارد کنید.
8. روی ایجاد کلیک کنید.
9. روی نماد مداد در کنار برنامه جستجوی تازه ایجاد شده ("ویرایش برنامه جستجو") کلیک کنید. صفحه "جستجوی جزئیات برنامه" ظاهر می‌شود.
10. به شناسه برنامه توجه کنید.
11. در سمت راست منابع داده ، روی نماد مداد کلیک کنید.
12. کنار «آموزش»، روی گزینه‌ی فعال‌سازی کلیک کنید. این گزینه، منبع داده‌ی آموزش را برای برنامه‌ی جستجوی تازه ایجاد شده فعال می‌کند.
13. در سمت راست منبع داده «آموزش»، روی گزینه‌های نمایش (Display options) کلیک کنید.
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 را فشار دهید. صفحه باید نتایج جستجو را به همراه عناصر و کنترل‌های صفحه‌بندی برای پیمایش نتایج نمایش دهد.

بررسی کد

بخش‌های باقی‌مانده نحوه‌ی ساخت رابط کاربری را بررسی می‌کنند.

بارگذاری ویجت

ویجت و کتابخانه‌های مرتبط در دو مرحله بارگذاری می‌شوند. ابتدا، اسکریپت بوت‌استرپ بارگذاری می‌شود:

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

دوم، تابع فراخوانی onLoad پس از آماده شدن اسکریپت فراخوانی می‌شود. سپس کلاینت API گوگل، ورود به سیستم گوگل و کتابخانه‌های ویجت 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>

در طول مقداردهی اولیه، نمای صحیح فعال می‌شود و کنترل‌کننده‌های رویدادهای ورود و خروج پیکربندی می‌شوند:

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

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

قبلی بعدی