Search विजेट, वेब ऐप्लिकेशन के लिए पसंद के मुताबिक सर्च इंटरफ़ेस उपलब्ध कराता है. विजेट को सिर्फ़ कुछ एचटीएमएल और JavaScript की ज़रूरत होती है, ताकि पहलू और पेज नंबर जैसी सामान्य खोज सुविधाओं को लागू करता है और उन्हें चालू करता है. आपने लोगों तक पहुंचाया मुफ़्त में CSS और JavaScript की मदद से इंटरफ़ेस के हिस्सों को कस्टमाइज़ भी कर सकता है.
अगर आपको विजेट से मिलने वाली सुविधाओं से ज़्यादा विकल्प चाहिए, तो क्वेरी एपीआई. क्वेरी API की मदद से खोज इंटरफ़ेस बनाने के बारे में जानकारी के लिए, Query API की मदद से खोज इंटरफ़ेस बनाना देखें.
सर्च इंटरफ़ेस बनाएं
खोज इंटरफ़ेस बनाने के लिए कई चरणों की ज़रूरत होती है:
- खोज ऐप्लिकेशन को कॉन्फ़िगर करें
- ऐप्लिकेशन के लिए क्लाइंट आईडी जनरेट करना
- खोज बॉक्स और नतीजों के लिए एचटीएमएल मार्कअप जोड़ना
- विजेट को पेज पर लोड करें
- विजेट शुरू करें
खोज ऐप्लिकेशन को कॉन्फ़िगर करें
हर सर्च इंटरफ़ेस में एक सर्च ऐप्लिकेशन होना चाहिए Admin console में साइन इन करें. सर्च ऐप्लिकेशन में ज़्यादा जानकारी क्वेरी से जुड़ी जानकारी, जैसे कि डेटा सोर्स, पहलू, और खोज गुणवत्ता सेटिंग.
खोज ऐप्लिकेशन बनाने के लिए, इसे देखें पसंद के मुताबिक खोज अनुभव बनाएं.
ऐप्लिकेशन के लिए क्लाइंट आईडी जनरेट करना
इन चरणों के अतिरिक्त Google Cloud Search API का ऐक्सेस कॉन्फ़िगर करना, आपको वेब ऐप्लिकेशन के लिए क्लाइंट आईडी भी जनरेट करना होगा.
प्रोजेक्ट कॉन्फ़िगर करने पर:
- वेब ब्राउज़र क्लाइंट टाइप चुनें
- ऑरिजिन यूआरआई दें तीन सबसे सही तरीक़े यहाँ दिए गए हैं.
- बनाए गए क्लाइंट आईडी का नोट. आपको इस काम के लिए Client-ID की ज़रूरत होगी अगले चरणों को पूरा करें. इसके लिए, क्लाइंट सीक्रेट की ज़रूरत नहीं है विजेट.
ज़्यादा जानकारी के लिए, देखें क्लाइंट-साइड वेब ऐप्लिकेशन के लिए OAuth 2.0.
एचटीएमएल मार्कअप जोड़ना
विजेट को काम करने के लिए कुछ एचटीएमएल की ज़रूरत होती है. आपने लोगों तक पहुंचाया मुफ़्त में यह जानकारी ज़रूर देनी होगी:
- खोज बॉक्स के लिए एक
input
एलिमेंट. - सुझाव पॉप-अप को ऐंकर करने के लिए एलिमेंट.
- खोज के नतीजे शामिल करने वाला एलिमेंट.
- (वैकल्पिक) फ़ेसेट कंट्रोल शामिल करने के लिए एलिमेंट दें.
नीचे दिया गया एचटीएमएल स्निपेट, खोज विजेट के लिए एचटीएमएल दिखाता है, जहां
सीमित होने वाले एलिमेंट की पहचान, id
एट्रिब्यूट से की जाती है:
विजेट को लोड करें
विजेट को लोडर स्क्रिप्ट की मदद से डाइनैमिक तरीके से लोड किया जाता है. शामिल करने के लिए
लोड करने के लिए, नीचे दिखाए गए तरीके से <script>
टैग का इस्तेमाल करें:
आपको स्क्रिप्ट टैग में onload
कॉलबैक देना होगा. इस फ़ंक्शन को कॉल किया गया
जब लोडर तैयार हो. जब लोडर तैयार हो जाए, तब विजेट को लोड करना जारी रखें
एपीआई क्लाइंट, 'Google साइन-इन', और Cloud Search मॉड्यूल लोड करने के लिए, gapi.load()
को कॉल करें.
सभी मॉड्यूल के होने के बाद, 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
क्लास
और उसे अपने एचटीएमएल एलिमेंट से बाइंड करें.
नीचे दिए गए उदाहरण में, विजेट को शुरू करने का तरीका बताया गया है:
ऊपर दिए गए उदाहरण में, कॉन्फ़िगरेशन के लिए दो वैरिएबल के बारे में बताया गया है. इनके बारे में यहां बताया गया है:
साइन-इन करने के अनुभव को पसंद के मुताबिक बनाएं
डिफ़ॉल्ट रूप से, विजेट, उपयोगकर्ताओं को साइन-इन करने और ऐप्लिकेशन को अनुमति देने के लिए कहता है उस समय वे कोई क्वेरी टाइप करना शुरू करते हैं. Google Analytics 4 पर माइग्रेट करने के लिए, वेबसाइटों के लिए Google साइन इन ताकि उपयोगकर्ताओं को साइन-इन करने का बेहतर अनुभव दिया जा सके.
उपयोगकर्ताओं को सीधे तौर पर अनुमति देना
Google से साइन इन करें सुविधा का इस्तेमाल करके,
उपयोगकर्ताओं और उन्हें साइन-इन या साइन-आउट कर सकते हैं. उदाहरण के लिए, निम्न
उदाहरण में, isSignedIn
को देखा जा सकता है
साइन-इन से जुड़े बदलावों पर नज़र रखने की स्थिति और
GoogleAuth.signIn()
का इस्तेमाल करता है
किसी बटन से साइन-इन करने का तरीका
क्लिक:
ज़्यादा जानकारी के लिए, Google से साइन-इन करें लेख पढ़ें.
अपने-आप साइन-इन होने वाले लोग
आप अपने संगठन के उपयोगकर्ताओं की ओर से आवेदन करना होगा. यह तकनीक Cloud Identity Aware प्रॉक्सी का इस्तेमाल करने पर भी काम आ सकता है ऐप्लिकेशन को सुरक्षित रखने के लिए.
ज़्यादा जानकारी के लिए, आईटी ऐप्लिकेशन के साथ 'Google साइन इन' का इस्तेमाल करना देखें.
इंटरफ़ेस को अपनी पसंद के मुताबिक बनाएं
दिए गए कॉम्बिनेशन की मदद से, सर्च इंटरफ़ेस का लुक बदला जा सकता है तकनीक:
- सीएसएस का इस्तेमाल करके स्टाइल बदलना
- एलिमेंट को अडैप्टर से सजाएं
- अडैप्टर की मदद से कस्टम एलिमेंट बनाना
सीएसएस का इस्तेमाल करके स्टाइल बदलना
सुझाव और नतीजे के एलिमेंट को स्टाइल देने के लिए, Search विजेट अपने सीएसएस के साथ आता है साथ ही, ये पेज नंबर कंट्रोल करने की सुविधा भी देती है. इन एलिमेंट में ज़रूरत के मुताबिक बदलाव किया जा सकता है.
लोड होने के दौरान, Search विजेट डाइनैमिक तरीके से अपनी डिफ़ॉल्ट स्टाइलशीट लोड करता है. ऐसा, ऐप्लिकेशन की स्टाइलशीट लोड होने के बाद होता है. इससे प्राथमिकता बढ़ जाती है के नियमों के बारे में बताया गया है. आपकी स्टाइल को डिफ़ॉल्ट स्टाइल के मुकाबले प्राथमिकता दी जाए, डिफ़ॉल्ट नियमों की विशेषता बढ़ाने के लिए, एंसेस्टर सिलेक्टर का इस्तेमाल करें.
उदाहरण के लिए, स्टैटिक में लोड करने पर निम्न नियम का कोई प्रभाव नहीं होता
दस्तावेज़ में link
या style
टैग है.
.cloudsearch_suggestion_container {
font-size: 14px;
}
इसके बजाय, एंसेस्टर कंटेनर के आईडी या क्लास के साथ नियम को मंज़ूरी दें पेज में बताए गए हैं.
#suggestions_anchor .cloudsearch_suggestion_container {
font-size: 14px;
}
विजेट से तैयार की गई सहायता क्लास की सूची और एचटीएमएल का उदाहरण देखने के लिए, इस्तेमाल की जा सकने वाली सीएसएस क्लास के बारे में जानकारी.
एलिमेंट को अडैप्टर से सजाएं
रेंडर करने से पहले किसी एलिमेंट को सजाने के लिए,
अडैप्टर जो सजाने के तरीकों में से एक को लागू करता है, जैसे कि
decorateSuggestionElement
या decorateSearchResultElement.
उदाहरण के लिए, नीचे दिए गए अडैप्टर सुझाव में एक कस्टम क्लास जोड़ते हैं और खोज के नतीजों में दिखने वाले एलिमेंट.
विजेट शुरू करते समय, अडैप्टर को रजिस्टर करने के लिए, setAdapter()
का इस्तेमाल करें
Builder
क्लास का तरीका:
डेकोरेटर कंटेनर एलिमेंट के एट्रिब्यूट के साथ-साथ उनमें से भी किसी एट्रिब्यूट में बदलाव कर सकते हैं चाइल्ड एलिमेंट. सजावट के दौरान, चाइल्ड एलिमेंट जोड़े या हटाए जा सकते हैं. हालांकि, अगर एलिमेंट में बुनियादी बदलाव किए जा रहे हैं, तो और उन्हें सीधे तौर पर नहीं दिखाना चाहिए.
अडैप्टर की मदद से कस्टम एलिमेंट बनाना
किसी सुझाव, फ़ेसेट कंटेनर या खोज के नतीजे के लिए कस्टम एलिमेंट बनाने के लिए,
लागू करने वाला अडैप्टर बनाना और रजिस्टर करना
createSuggestionElement
,
createFacetResultElement
,
या createSearchResultElement
बार-बार बंद किया जा सकता है.
नीचे दिए गए अडैप्टर, आपकी पसंद के मुताबिक सुझाव और खोज के नतीजे बनाते हैं
एचटीएमएल <template>
टैग का इस्तेमाल करने वाले एलिमेंट.
विजेट को शुरू करते समय अडैप्टर को रजिस्टर करने के लिए, setAdapter()
का इस्तेमाल करें
Builder
क्लास का तरीका:
createFacetResultElement
के साथ कस्टम फ़ेसेट एलिमेंट बनाना
पर कई पाबंदियां लागू होती हैं:
- आपको सीएसएस क्लास
cloudsearch_facet_bucket_clickable
को ऐसे एलिमेंट जिन पर उपयोगकर्ता क्लिक करके बकेट को टॉगल करते हैं. - आपको हर बकेट को सीएसएस वाले एलिमेंट में रैप करना होगा
क्लास
cloudsearch_facet_bucket_container
. - बकेट को जिस क्रम में दिखाया जा रहा है उससे अलग क्रम में नहीं दिया जा सकता जवाब.
उदाहरण के लिए, नीचे दिया गया स्निपेट इसके बजाय लिंक का इस्तेमाल करके पहलुओं को रेंडर करता है डालें.
खोज व्यवहार को पसंद के मुताबिक बनाएं
सर्च ऐप्लिकेशन सेटिंग डिफ़ॉल्ट दिखाती हैं सर्च इंटरफ़ेस के लिए कॉन्फ़िगरेशन करते हैं और ये स्टैटिक होते हैं. डाइनैमिक लागू करने के लिए फ़िल्टर या पहलू, जैसे कि उपयोगकर्ताओं को डेटा सोर्स टॉगल करने की अनुमति देना खोज अनुरोध को इंटरसेप्ट करके, खोज ऐप्लिकेशन की सेटिंग को बदलें अडैप्टर के साथ.
अडैप्टर को इस
interceptSearchRequest
को किए गए अनुरोधों को संशोधित करने का तरीका
खोज API
लागू होने से पहले.
उदाहरण के लिए, यह अडैप्टर, क्वेरी को प्रतिबंधित करने के अनुरोधों को बीच में रोकता है उपयोगकर्ता के चुने गए सोर्स के लिए:
विजेट शुरू करते समय अडैप्टर को रजिस्टर करने के लिए,
setAdapter()
ResultsContainer
को बनाने का तरीका
नीचे दिए गए एचटीएमएल का इस्तेमाल, फ़िल्टर करने के लिए एक बॉक्स दिखाने के लिए किया जाता है स्रोत:
निम्न कोड बदलाव को सुनता है, चुनाव सेट करता है, और ज़रूरत पड़ने पर क्वेरी को दोबारा जवाब देता है.
खोज के नतीजे को देखने के लिए,
interceptSearchResponse
है.
एपीआई वर्शन को पिन करें
विजेट डिफ़ॉल्ट रूप से, एपीआई के नए और स्टेबल वर्शन का इस्तेमाल करता है. किसी
खास वर्शन के लिए, cloudsearch.config/apiVersion
कॉन्फ़िगरेशन पैरामीटर सेट करें
अपने पसंदीदा वर्शन पर अपडेट करें.
अगर इसे सेट नहीं किया जाता है या अमान्य वैल्यू पर सेट किया जाता है, तो एपीआई वर्शन डिफ़ॉल्ट रूप से 1.0 पर सेट होगा.
विजेट का वर्शन पिन करें
खोज इंटरफ़ेस में अचानक होने वाले बदलावों से बचने के लिए,
cloudsearch.config/clientVersion
कॉन्फ़िगरेशन पैरामीटर दिखाया गया है:
gapi.config.update('cloudsearch.config/clientVersion', 1.1);
अगर विजेट सेट नहीं है या इसकी वैल्यू अमान्य है, तो यह डिफ़ॉल्ट रूप से 1.0 पर सेट होगा.
सर्च इंटरफ़ेस को सुरक्षित बनाएं
खोज के नतीजों में बहुत ज़्यादा संवेदनशील जानकारी होती है. सर्वोत्तम व्यवहार का पालन करें वेब ऐप्लिकेशन को सुरक्षित करने के लिए, खास तौर पर क्लिकजैकिंग के हमले शामिल हैं.
ज़्यादा जानकारी के लिए, OWASP गाइड प्रोजेक्ट देखें
डीबग करने की सुविधा चालू करें
interceptSearchRequest
का इस्तेमाल करें
ताकि Search विजेट को डीबग करने की सुविधा चालू की जा सके. उदाहरण के लिए:
if (!request.requestOptions) {
// Make sure requestOptions is populated
request.requestOptions = {};
}
// Enable debugging
request.requestOptions.debugOptions = {enableDebugging: true}
return request;