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

تعرض هذه الصفحة من دليل 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). سيظهر حقل "URI" فارغ.

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

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

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

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

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

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

  1. ارجِع إلى وحدة تحكُّم المشرف في Google.
  2. انقر على رمز Apps (التطبيقات). ستظهر صفحة "إدارة التطبيقات".
  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-pattern/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 وميزة "تسجيل الدخول بحساب 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();

تهانينا، لقد أكملت البرنامج التعليمي بنجاح! تابع للحصول على تعليمات التنظيف.

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