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

تعرض هذه الصفحة من برنامج Google Cloud Search التعليمي كيفية إعداد تطبيق بحث Google باستخدام أداة البحث القابلة للتضمين. للبدء من بداية هذا البرنامج التعليمي، راجع الدليل التعليمي حول بدء استخدام 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-samples/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. يجب أن تعرض الصفحة نتائج الاستعلام إلى جانب الواجهات عناصر التحكم في التقسيم على صفحات للتنقل بين النتائج.

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

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

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

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

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

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

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

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

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