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

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

تثبيت الحِزم التابعة

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

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

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

npm install

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

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

  1. ارجع إلى وحدة تحكّم Google Cloud.

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

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

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

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

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

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

  6. في حقل الاسم، أدخِل "tutorial".

  7. في حقل مصادر JavaScript المسموح بها، انقر على إضافة معرّف الموارد المنتظم (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. في مربّع البحث، أدخِل طلب بحث، مثل الكلمة "اختبار"، واضغط على 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 و&quot;تسجيل الدخول باستخدام Google&quot; و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();

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

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