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

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

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

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

  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. في حقل الاسم، أدخِل "tutorial".

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

  8. في حقل عناوين URL، أدخِل http://localhost:8080.

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

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

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

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

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

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

مراجعة الرمز

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

تحميل التطبيق المصغّر

يتم تحميل التطبيق المصغّر والمكتبات ذات الصلة في مرحلتين. أولاً، يتم تحميل ملف التمهيد البرمجي:

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

  // ...

}

إنشاء واجهة البحث

يتطلب تطبيق "بحث Google" المصغّر قدرًا صغيرًا من ترميز 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();

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

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