يوفر تطبيق "بحث Google" المصغّر واجهة بحث قابلة للتخصيص لتطبيقات الويب. ولا يتطلّب التطبيق المصغّر سوى قدرًا صغيرًا من HTML وJavaScript لتنفيذ ميزات البحث الشائعة وتفعيلها، مثل الواجهات والتقسيم على صفحات. ويمكنك أيضًا تخصيص أجزاء من الواجهة باستخدام CSS وJavaScript.
إذا كنت بحاجة إلى مرونة أكبر من تلك التي توفّرها الأداة، يمكنك استخدام Query API. للحصول على معلومات حول إنشاء واجهة بحث باستخدام واجهة برمجة التطبيقات لطلبات البحث، يمكنك الاطّلاع على إنشاء واجهة بحث باستخدام واجهة برمجة تطبيقات طلبات البحث.
إنشاء واجهة بحث
يتطلب إنشاء واجهة البحث عدة خطوات:
- إعداد تطبيق بحث
- إنشاء معرِّف عميل للتطبيق
- إضافة ترميز HTML لمربّع البحث والنتائج
- تحميل التطبيق المصغّر على الصفحة
- إعداد التطبيق المصغّر
إعداد تطبيق بحث
يجب أن تحتوي كل واجهة بحث على تطبيق بحث محدد في وحدة تحكم المشرف. يوفر تطبيق البحث معلومات إضافية لطلب البحث، مثل مصادر البيانات والواجهات وإعدادات جودة البحث.
لإنشاء تطبيق بحث، يمكنك الرجوع إلى إنشاء تجربة بحث مخصّصة.
إنشاء معرِّف عميل للتطبيق
بالإضافة إلى الخطوات الواردة في ضبط إمكانية الوصول إلى Google Cloud Search API، عليك أيضًا إنشاء معرِّف عميل لتطبيق الويب.
عند إعداد المشروع:
- اختَر نوع عميل متصفِّح الويب.
- أدخل معرّف الموارد المنتظم (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 Aware Aware Proxy لحماية التطبيق.
لمزيد من المعلومات، يمكنك الاطّلاع على مقالة استخدام ميزة "تسجيل الدخول بحساب Google" مع تطبيقات تكنولوجيا المعلومات.
تخصيص الواجهة
يمكنك تغيير شكل واجهة البحث من خلال مجموعة من الأساليب:
- إلغاء الأنماط باستخدام CSS
- تزيين العناصر باستخدام محوّل
- إنشاء عناصر مخصّصة باستخدام محوّل
إلغاء الأنماط باستخدام CSS
يشتمل تطبيق "بحث Google" المصغّر على خدمة CSS الخاصة به لاختيار نمط الاقتراحات والنتائج، فضلاً عن عناصر التحكم في التقسيم على صفحات. ويمكنك إعادة تصميم هذه العناصر حسب الحاجة.
أثناء التحميل، تعمل أداة البحث على تحميل ورقة الأنماط التلقائية بشكل ديناميكي. يحدث ذلك بعد تحميل أوراق أنماط التطبيقات، ما يؤدي إلى رفع أولوية القواعد. لضمان حصول أنماطك الخاصة على الأولوية على الأنماط التلقائية، استخدِم أدوات اختيار الأصل لزيادة تحديد قواعد القواعد التلقائية.
على سبيل المثال، لن يكون للقاعدة التالية أي تأثير في حال تحميلها في علامة 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
لتفعيل تصحيح الأخطاء في أداة البحث. على سبيل المثال:
if (!request.requestOptions) {
// Make sure requestOptions is populated
request.requestOptions = {};
}
// Enable debugging
request.requestOptions.debugOptions = {enableDebugging: true}
return request;