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

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

تثبيت الملحقات

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

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

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- 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. في مربّع البحث، أدخِل طلب بحث، مثل كلمة "test"، واضغط على Enter. ينبغي أن تعرض الصفحة نتائج طلب البحث جنبًا إلى جنب مع الواجهات وعناصر التحكم في التقسيم على صفحات للتنقل في النتائج.

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

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

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

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

<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

ثانيًا، يتم استدعاء استدعاء الدالة onLoad عندما يصبح النص البرمجي جاهزًا. بعد ذلك، يتم تحميل مكتبات برامج واجهة برمجة تطبيقات Google وتسجيل الدخول بحساب Google ومكتبات أدوات Cloud Search.

/**
 * 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" بعد تحميل جميع المكتبات المطلوبة.

التعامل مع التفويض

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

بالنسبة إلى واجهة البحث، يقدِّم التطبيق طريقتَي عرض مختلفتين بناءً على حالة تسجيل دخول المستخدم.

<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>

أثناء الإعداد، يتم تفعيل طريقة العرض الصحيحة وضبط معالِجات أحداث تسجيل الدخول وتسجيل الخروج:

/**
 * 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 لإدخال عبارة البحث وللاحتفاظ بنتائج البحث:

<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>

تتم تهيئة الأداة وربطها بعناصر الإدخال والحاوية أثناء التهيئة:

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

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

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