توفّر أداة البحث واجهة بحث قابلة للتخصيص لتطبيقات الويب. ولا تتطلّب الأداة سوى استخدام مقدار صغير من HTML وJavaScript لتنفيذها وتفعيل ميزات البحث الشائعة، مثل الواجهات والتقسيم على صفحات. ويمكنك أيضًا تخصيص أجزاء من الواجهة باستخدام CSS وJavaScript.
إذا كنت تحتاج إلى مرونة أكبر من تلك التي توفرها الأداة، ففكر في استخدام واجهة برمجة تطبيقات طلبات البحث. للحصول على معلومات حول إنشاء واجهة بحث باستخدام واجهة برمجة تطبيقات طلبات البحث، راجع إنشاء واجهة بحث باستخدام واجهة برمجة تطبيقات طلبات البحث.
إنشاء واجهة بحث
يتطلب إنشاء واجهة البحث عدة خطوات:
- ضبط تطبيق بحث
- إنشاء معرِّف عميل للتطبيق
- إضافة ترميز HTML لمربع البحث والنتائج
- تحميل التطبيق المصغّر على الصفحة
- إعداد التطبيق المصغّر
ضبط تطبيق بحث
يجب أن تحتوي كل واجهة بحث على تطبيق بحث محدّد في وحدة تحكُّم المشرف. يوفّر تطبيق البحث معلومات إضافية لطلب البحث، مثل مصادر البيانات والواجهات وإعدادات جودة البحث.
ولإنشاء تطبيق بحث، يُرجى الرجوع إلى المقالة إنشاء تجربة بحث مخصّصة.
إنشاء معرِّف عميل للتطبيق
بالإضافة إلى الخطوات الواردة في ضبط الوصول إلى واجهة برمجة تطبيقات Google Cloud Search، عليك أيضًا إنشاء معرِّف عميل لتطبيق الويب.
عند ضبط المشروع:
- اختَر نوع العميل متصفِّح الويب.
- قدِّم عنوان URI المصدر لتطبيقك.
- ملاحظة حول معرِّف العميل الذي تم إنشاؤه ستحتاج إلى معرّف العميل لإكمال الخطوات التالية. لا يكون سر العميل مطلوبًا للأداة.
للحصول على معلومات إضافية، يُرجى الاطِّلاع على OAuth 2.0 لتطبيق الويب من جهة العميل.
إضافة ترميز HTML
تتطلّب الأداة قدرًا صغيرًا من محتوى HTML كي تعمل. عليك تقديم:
- عنصر
input
لمربّع البحث - عنصر لإرساء النافذة المنبثقة للاقتراح.
- عنصر لاحتواء نتائج البحث.
- (اختياري) يمكنك توفير عنصر لاحتواء عناصر التحكم في الواجهات.
يعرض مقتطف HTML التالي رمز HTML لأداة البحث، حيث يتم تحديد العناصر المطلوب ربطها من خلال سمة id
:
تحميل التطبيق المصغّر
يتم تحميل الأداة ديناميكيًا عبر نص برمجي لبرنامج التحميل. لتضمين أداة التحميل، استخدِم العلامة <script>
كما هو موضّح:
يجب تقديم طلب استدعاء onload
في علامة النص البرمجي. يتم استدعاء الدالة عندما يكون
المحمّل جاهزًا. عندما تكون أداة التحميل جاهزة، يمكنك مواصلة تحميل التطبيق المصغّر من خلال طلب gapi.load()
لتحميل عميل واجهة برمجة التطبيقات و"تسجيل الدخول بحساب Google" ووحدات Cloud Search.
يتم استدعاء الدالة initializeApp()
بعد تحميل جميع الوحدات.
إعداد التطبيق المصغّر
أولاً، عليك إعداد مكتبة العملاء من خلال استدعاء
gapi.client.init()
أو gapi.auth2.init()
باستخدام معرّف العميل الذي أنشأته
ونطاق https://www.googleapis.com/auth/cloud_search.query
. بعد ذلك، عليك استخدام الفئتَين gapi.cloudsearch.widget.resultscontainer.Builder
وgapi.cloudsearch.widget.searchbox.Builder
لضبط التطبيق المصغّر وربطه بعناصر HTML.
يوضّح المثال التالي كيفية إعداد التطبيق المصغّر:
يشير المثال أعلاه إلى متغيّرَين للضبط محدّد على النحو التالي:
تخصيص تجربة تسجيل الدخول
بشكل افتراضي، تطلب الأداة من المستخدمين تسجيل الدخول وإعطاء الإذن للتطبيق عند بدء كتابة طلب البحث. يمكنك استخدام ميزة تسجيل الدخول بحساب Google للمواقع الإلكترونية لتقديم تجربة تسجيل دخول أكثر تخصيصًا للمستخدمين.
تفويض المستخدمين مباشرةً
يمكنك استخدام ميزة تسجيل الدخول باستخدام حساب Google لمراقبة حالة تسجيل دخول المستخدم، والمستخدمين الذين سجّلوا الدخول أو الخروج حسب الحاجة. على سبيل المثال، يرصد المثال التالي حالة isSignedIn
لمراقبة تغييرات تسجيل الدخول ويستخدم طريقة GoogleAuth.signIn()
لبدء تسجيل الدخول من خلال نقرة على زر:
للحصول على تفاصيل إضافية، يُرجى الاطّلاع على صفحة تسجيل الدخول باستخدام حساب Google.
المستخدمون الذين سجّلوا الدخول تلقائيًا
ويمكنك أيضًا تسهيل تجربة تسجيل الدخول من خلال التفويض المسبق للتطبيق نيابةً عن المستخدمين في مؤسستك. ويكون هذا الأسلوب مفيدًا أيضًا في حال استخدام Cloud Identity Aware Proxy لحماية التطبيق.
للحصول على معلومات إضافية، راجِع استخدام ميزة "تسجيل الدخول بحساب Google" من خلال تطبيقات تكنولوجيا المعلومات.
تخصيص الواجهة
يمكنك تغيير مظهر واجهة البحث من خلال مجموعة من الأساليب:
- إلغاء الأنماط باستخدام CSS
- تزيين العناصر باستخدام محوّل
- إنشاء عناصر مخصصة باستخدام محوّل
إلغاء الأنماط باستخدام CSS
يتوفّر في تطبيق "بحث Google" المصغّر ميزة CSS الخاصة به لاقتراح الأنماط وعناصر النتائج، بالإضافة إلى عناصر التحكّم في التقسيم على صفحات. يمكنك إعادة تصميم هذه العناصر حسب الحاجة.
أثناء التحميل، يحمِّل تطبيق "بحث Google" المصغّر ورقة الأنماط التلقائية بشكل ديناميكي. يحدث ذلك بعد تحميل أوراق أنماط التطبيق، ما يؤدي إلى زيادة أولوية القواعد. لضمان أن تكون للأنماط الخاصة بك الأسبقية على الأنماط التلقائية، استخدِم محددات الأصل لزيادة خصوصية القواعد التلقائية.
على سبيل المثال، ليس للقاعدة التالية أي تأثير إذا تم تحميلها في علامة link
ثابتة أو علامة style
في المستند.
.cloudsearch_suggestion_container {
font-size: 14px;
}
بدلاً من ذلك، عليك تأهيل القاعدة باستخدام رقم التعريف أو فئة حاوية الأصل الواردة في الصفحة.
#suggestions_anchor .cloudsearch_suggestion_container {
font-size: 14px;
}
للحصول على قائمة بفئات الدعم ومثال على ترميز HTML الذي تم إنشاؤه من خلال الأداة، يمكنك الاطّلاع على مرجع فئات CSS المتوافقة.
تزيين العناصر باستخدام محوّل
لتزيين عنصر قبل العرض، يجب إنشاء معدِّل
وإعادة تسجيله ينفّذ إحدى طرق التزيين مثل
decorateSuggestionElement
أو decorateSearchResultElement.
على سبيل المثال، تضيف المحولات التالية فئة مخصصة إلى عناصر الاقتراح والنتيجة.
لتسجيل المحوِّل عند إعداد التطبيق المصغّر، استخدِم الطريقة setAdapter()
لفئة Builder
المعنيّة:
يجوز لمصممي الديكور تعديل سمات عنصر الحاوية بالإضافة إلى أي عناصر فرعية. يمكن أن تتم إضافة العناصر الثانوية أو إزالتها أثناء الزينة. ومع ذلك، إذا أجريت تغييرات هيكلية على العناصر، ففكر في إنشاء العناصر مباشرة بدلاً من التزيين.
إنشاء عناصر مخصصة باستخدام محوّل
لإنشاء عنصر مخصّص لاقتراح أو حاوية واجهة أو نتيجة بحث،
يمكنك إنشاء محوِّل وتسجيله ينفّذ
createSuggestionElement
،
createFacetResultElement
،
أو createSearchResultElement
بشكل متكرر.
توضّح المحوّلات التالية عملية إنشاء عناصر اقتراحات مخصّصة ونتائج البحث
باستخدام علامات HTML <template>
.
لتسجيل المحوِّل عند إعداد الأداة، استخدِم الطريقة setAdapter()
لفئة Builder
المعنيّة:
إنّ إنشاء عناصر واجهة مخصّصة باستخدام createFacetResultElement
يخضع لعدة قيود:
- عليك إرفاق فئة CSS
cloudsearch_facet_bucket_clickable
بالعنصر الذي ينقر عليه المستخدمون لتبديل الحزمة. - يجب أن تضع كل مجموعة في عنصر تضمين مع فئة CSS
cloudsearch_facet_bucket_container
. - لا يمكنك عرض المجموعات بترتيب مختلف عما تظهر في الإجابة.
على سبيل المثال، يعرض المقتطف التالي الواجهات باستخدام روابط بدلاً من مربّعات الاختيار.
تخصيص سلوك البحث
تمثل إعدادات تطبيق البحث التهيئة الافتراضية لواجهة البحث وتكون ثابتة. لتنفيذ عوامل تصفية أو واجهات ديناميكية، مثل السماح للمستخدمين بتبديل مصادر البيانات، يمكنك إلغاء إعدادات تطبيق البحث من خلال اعتراض طلب البحث باستخدام محوّل.
نفِّذ محوِّلاً باستخدام الطريقة
interceptSearchRequest
لتعديل الطلبات التي تم إرسالها إلى
search API
قبل التنفيذ.
على سبيل المثال، يعترض المحوِّل التالي الطلبات لتقييد طلبات البحث على مصدر يختاره المستخدم:
لتسجيل المحوِّل عند إعداد التطبيق المصغّر، استخدِم الإجراء
setAdapter()
عند إنشاء ResultsContainer
.
يُستخدم رمز HTML التالي لعرض مربّع اختيار للفلترة حسب المصادر:
ترصد التعليمة البرمجية التالية التغيير وتضبط التحديد وتعيد تنفيذ الاستعلام إذا لزم الأمر.
يمكنك أيضًا اعتراض استجابة البحث من خلال تنفيذ interceptSearchResponse
في المحوِّل.
تثبيت إصدار واجهة برمجة التطبيقات
تستخدم الأداة تلقائيًا أحدث إصدار ثابت من واجهة برمجة التطبيقات. ولقفله في إصدار محدّد، عليك ضبط معلَمة الإعداد cloudsearch.config/apiVersion
على الإصدار المفضّل قبل إعداد التطبيق المصغّر.
وفي حال لم يتم ضبط هذه السياسة أو ضبطها على قيمة غير صالحة، سيتم ضبط إصدار واجهة برمجة التطبيقات تلقائيًا على 1.0.
تثبيت إصدار التطبيق المصغّر
لتجنُّب حدوث تغييرات غير متوقعة على واجهات البحث، اضبط
مَعلمة الإعداد cloudsearch.config/clientVersion
على النحو الموضّح:
gapi.config.update('cloudsearch.config/clientVersion', 1.1);
وسيتم ضبط إصدار التطبيق المصغّر تلقائيًا على 1.0 في حال تركه بدون ضبط أو ضبطه على قيمة غير صالحة.
تأمين واجهة البحث
تتضمّن نتائج البحث معلومات حساسة للغاية. اتّبِع أفضل الممارسات لتأمين تطبيقات الويب، خاصةً ضد هجمات إخفاء النقرات.
لمزيد من المعلومات، يُرجى الاطّلاع على مشروع دليل OWASP.
تفعيل تصحيح الأخطاء
استخدِم interceptSearchRequest
لتفعيل تصحيح الأخطاء في تطبيق "بحث Google" المصغّر. مثال:
if (!request.requestOptions) {
// Make sure requestOptions is populated
request.requestOptions = {};
}
// Enable debugging
request.requestOptions.debugOptions = {enableDebugging: true}
return request;