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

توضِّح صفحة الدليل التعليمي في 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. في حقل الاسم، أدخِل "البرنامج التعليمي".

  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. في الحقل اسم العرض، أدخِل "فيديو تعليمي".
  8. انقر على إنشاء.
  9. انقر على رمز القلم الرصاص بجانب تطبيق البحث الذي تم إنشاؤه حديثًا ("تعديل تطبيق البحث"). ستظهر لك صفحة "تفاصيل تطبيق البحث".
  10. سجِّل رقم تعريف التطبيق.
  11. على يسار مصادر البيانات، انقر على رمز القلم الرصاص.
  12. انقر على مفتاح التبديل تفعيل بجانب "الدليل التعليمي". يؤدي تفعيل هذا الخيار إلى تفعيل مصدر بيانات البرنامج التعليمي لتطبيق البحث الذي تم إنشاؤه حديثًا.
  13. إلى يسار مصدر بيانات "الدليل التعليمي"، انقر على خيارات العرض.
  14. تحقق من جميع الواجهات.
  15. انقر على حفظ.
  16. انقر على تم.

إعداد تطبيق الويب

بعد إنشاء بيانات الاعتماد وتطبيق البحث، عدِّل إعدادات التطبيق لتشمل القيم التالية:

  1. من سطر الأوامر، غيِّر الدليل إلى "cloud-search- sample/end-to-end/search-interface/public".
  2. افتح ملف app.js باستخدام محرِّر نصوص.
  3. ابحث عن المتغيّر searchConfig في أعلى الملف.
  4. استبدِل [client-id] بمعرِّف عميل OAuth الذي تم إنشاؤه سابقًا.
  5. استبدِل [application-id] بمعرّف تطبيق البحث المُشار إليه في القسم السابق.
  6. احفظ الملف.

تشغيل التطبيق

ابدأ التطبيق من خلال تنفيذ هذا الأمر:

npm run start

طلب البحث من الفهرس

لطلب البحث في الفهرس باستخدام تطبيق "بحث Google" المصغّر:

  1. افتح المتصفّح وانتقِل إلى http://localhost:8080.
  2. انقر على تسجيل الدخول لتفويض التطبيق بالبحث في Cloud Search نيابةً عنك.
  3. في مربّع البحث، أدخِل طلب بحث، مثل الكلمة "اختبار"، واضغط على مفتاح 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" وتطبيقات 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();

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

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