توفّر أداة "بحث Google" واجهة بحث قابلة للتخصيص لتطبيقات الويب. لا تتطلّب الأداة سوى مقدار صغير من HTML وJavaScript لتنفيذها وتفعِّل ميزات البحث الشائعة مثل الواجهات والتقسيم على صفحات. يمكنك أيضًا تخصيص أجزاء من الواجهة باستخدام CSS وJavaScript.
إذا كنت بحاجة إلى مرونة أكبر مما توفّره الأداة، يمكنك استخدام Query API. للحصول على معلومات حول إنشاء واجهة بحث باستخدام Query API، يمكنك الرجوع إلى إنشاء واجهة بحث باستخدام Query API.
إنشاء واجهة بحث
يتطلب إنشاء واجهة البحث عدة خطوات:
- إعداد تطبيق بحث
- إنشاء معرِّف عميل للتطبيق
- إضافة ترميز 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 لحماية التطبيق.
لمزيد من المعلومات، يُرجى الاطّلاع على استخدام "تسجيل الدخول بحساب 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
بالعنصر الذي ينقر عليه المستخدمون لتبديل مجموعة. - يجب التفاف كل حزمة في عنصر رئيسي باستخدام الفئة
cloudsearch_facet_bucket_container
في CSS. - لا يمكنك عرض الحِزم بترتيب مختلف عن الذي تظهر في الرد.
على سبيل المثال، يعرض المقتطف التالي الواجهات باستخدام الروابط بدلاً من مربعات الاختيار.
تخصيص سلوك البحث
تمثل إعدادات تطبيق البحث التهيئة التلقائية لواجهة بحث وهي ثابتة. لتطبيق فلاتر أو واجهات ديناميكية، مثل السماح للمستخدمين بتبديل مصادر البيانات، يمكنك إلغاء إعدادات تطبيق البحث من خلال اعتراض طلب البحث باستخدام محوّل.
نفِّذ محوّلاً باستخدام الطريقة
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;