إعداد واجهة المستخدم

تعرض هذه الصفحة من البرنامج التعليمي حول Google Cloud Search كيفية إعداد تطبيق بحث مخصّص باستخدام أداة البحث القابلة للتضمين. للبدء من بداية هذا البرنامج التعليمي، يُرجى الرجوع إلى البرنامج التعليمي حول بدء استخدام Cloud Search.

تثبيت التبعيات

  1. إذا كان الموصل لا يزال يضع فهرسًا للمستودع، افتح واجهة shell جديدة وتابِع من هناك.

  2. من سطر الأوامر، غيِّر الدليل إلى cloud-search-samples/end-to-end/search-interface.

  3. لتنزيل التبعيات المطلوبة لتشغيل خادم الويب، نفِّذ الأمر التالي:

npm install

إنشاء بيانات اعتماد تطبيق البحث

يحتاج الموصل إلى بيانات اعتماد حساب خدمة لاستدعاء واجهات برمجة تطبيقات Cloud Search. لإنشاء بيانات الاعتماد:

  1. ارجع إلى Google Cloud Console.

  2. في شريط التنقل الأيمن، انقر على بيانات الاعتماد.

  3. من القائمة المنسدلة إنشاء بيانات اعتماد ، انقر على معرِّف عميل OAuth. ستظهر صفحة "إنشاء معرِّف عميل OAuth".

  4. (اختياريّ): إذا لم تكن قد ضبطت شاشة طلب الموافقة، انقر على ضبط شاشة طلب الموافقة. ستظهر شاشة "الموافقة على OAuth".

    1. انقر على داخلي ثم على إنشاء. ستظهر شاشة أخرى بعنوان "الموافقة على OAuth".

    2. املأ الحقول المطلوبة. لمزيد من التعليمات، يُرجى الرجوع إلى قسم موافقة المستخدم في إعداد OAuth 2.0.

  5. انقر على القائمة المنسدلة نوع التطبيق واختَر تطبيق ويب.

  6. في حقل الاسم ، أدخِل "برنامج تعليمي".

  7. في حقل مصادر JavaScript المسموح بها ، انقر على إضافة معرّف الموارد المنتظم (URI). سيظهر حقل "معرّفات الموارد المنتظمة (URI)" فارغًا.

  8. في حقل معرّفات الموارد المنتظمة (URI) ، أدخِل http://localhost:8080.

  9. انقر على إنشاء. ستظهر شاشة "تم إنشاء عميل OAuth".

  10. سجِّل معرّف العميل. تُستخدَم هذه القيمة لتعريف التطبيق عند طلب إذن المستخدم باستخدام OAuth2. لا يلزم سر العميل لهذا التنفيذ.

  11. انقر على موافق.

إنشاء تطبيق البحث

بعد ذلك، أنشئ تطبيق بحث في "وحدة تحكّم المشرف". تطبيق البحث هو تمثيل افتراضي لواجهة البحث وإعداداتها التلقائية.

  1. يُرجى الرجوع إلى وحدة تحكّم المشرف في Google.
  2. انقر على رمز التطبيقات. ستظهر صفحة "إدارة التطبيقات".
  3. انقر على Google Workspace. ستظهر صفحة "إدارة تطبيقات Google Workspace".
  4. انتقِل إلى أسفل الصفحة وانقر على Cloud Search. ستظهر صفحة "إعدادات Google Workspace".
  5. انقر على تطبيقات البحث. ستظهر صفحة "تطبيقات البحث".
  6. انقر على رمز + الأصفر المستدير. سيظهر مربّع الحوار "إنشاء تطبيق بحث جديد".
  7. في حقل الاسم المعروض ، أدخِل "برنامج تعليمي".
  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. انقر على تسجيل الدخول لمنح التطبيق إذن طلب البحث من Cloud Search نيابةً عنك.
  3. في مربّع البحث، أدخِل طلب بحث، مثل الكلمة "اختبار"، واضغط على مفتاح الإدخال. يجب أن تعرض الصفحة نتائج طلب البحث بالإضافة إلى عناصر التحكّم في التصنيفات والترقيم للتنقّل بين النتائج.

مراجعة الرمز البرمجي

تتناول الأقسام المتبقية كيفية إنشاء واجهة المستخدم.

تحميل الأداة

يتم تحميل الأداة والمكتبات ذات الصلة على مرحلتَين. أولاً، يتم تحميل النص البرمجي للتمهيد:

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" وأداة 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();

تهانينا، لقد أكملت البرنامج التعليمي بنجاح. تابِع للاطّلاع على تعليمات التنظيف.

السابق التالي