Search विजेट, वेब ऐप्लिकेशन के लिए पसंद के मुताबिक सर्च इंटरफ़ेस उपलब्ध कराता है. विजेट को लागू करने के लिए, सिर्फ़ कुछ एचटीएमएल और JavaScript की ज़रूरत होती है. साथ ही, ये पहलुओं और पेज पर नंबर डालने जैसी सामान्य खोज सुविधाओं को चालू करता है. सीएसएस और JavaScript की मदद से भी इंटरफ़ेस के हिस्सों को अपनी पसंद के मुताबिक बनाया जा सकता है.
अगर आपको विजेट से मिलने वाली सुविधा से ज़्यादा विकल्प चाहिए, तो क्वेरी एपीआई का इस्तेमाल करें. क्वेरी एपीआई की मदद से खोज इंटरफ़ेस बनाने के बारे में जानकारी पाने के लिए, क्वेरी एपीआई की मदद से खोज इंटरफ़ेस बनाना देखें.
सर्च इंटरफ़ेस बनाएं
खोज इंटरफ़ेस बनाने के लिए कई चरणों की ज़रूरत होती है:
- खोज ऐप्लिकेशन को कॉन्फ़िगर करें
- ऐप्लिकेशन के लिए क्लाइंट आईडी जनरेट करना
- खोज बॉक्स और नतीजों के लिए एचटीएमएल मार्कअप जोड़ना
- विजेट को पेज पर लोड करें
- विजेट शुरू करें
खोज ऐप्लिकेशन को कॉन्फ़िगर करें
हर खोज इंटरफ़ेस में Admin console में, एक खोज ऐप्लिकेशन होना चाहिए. सर्च ऐप्लिकेशन, क्वेरी के लिए ज़्यादा जानकारी देता है, जैसे कि डेटा सोर्स, पहलू, और खोज क्वालिटी की सेटिंग.
खोज ऐप्लिकेशन बनाने के लिए, पसंद के मुताबिक खोज अनुभव बनाना देखें.
ऐप्लिकेशन के लिए क्लाइंट आईडी जनरेट करना
Google Cloud Search API का ऐक्सेस कॉन्फ़िगर करना में दिए गए चरणों के अलावा, आपको वेब ऐप्लिकेशन के लिए भी क्लाइंट आईडी जनरेट करना होगा.
प्रोजेक्ट कॉन्फ़िगर करने पर:
- वेब ब्राउज़र क्लाइंट टाइप चुनें
- अपने ऐप्लिकेशन का ऑरिजिन यूआरआई दें.
- बनाए गए क्लाइंट आईडी का नोट. अगले चरण को पूरा करने के लिए, आपको Client-ID की ज़रूरत होगी. विजेट के लिए क्लाइंट सीक्रेट ज़रूरी नहीं है.
ज़्यादा जानकारी के लिए, क्लाइंट-साइड वेब ऐप्लिकेशन के लिए OAuth 2.0 देखें.
एचटीएमएल मार्कअप जोड़ें
विजेट को काम करने के लिए कुछ एचटीएमएल की ज़रूरत होती है. आपको ये चीज़ें उपलब्ध करानी होंगी:
- खोज बॉक्स के लिए एक
input
एलिमेंट. - सुझाव पॉप-अप को ऐंकर करने के लिए एलिमेंट.
- खोज के नतीजे शामिल करने वाला एलिमेंट.
- (वैकल्पिक) फ़ेसेट कंट्रोल शामिल करने के लिए एलिमेंट दें.
नीचे दिया गया एचटीएमएल स्निपेट, एक खोज विजेट के लिए एचटीएमएल दिखाता है, जहां बाउंड किए जाने वाले एलिमेंट की पहचान, उनके id
एट्रिब्यूट की मदद से की जाती है:
विजेट को लोड करें
विजेट को लोडर स्क्रिप्ट की मदद से डाइनैमिक तरीके से लोड किया जाता है. लोड करने वाले टैग को शामिल करने के लिए, <script>
टैग का इस्तेमाल इस तरह से करें:
आपको स्क्रिप्ट टैग में onload
कॉलबैक देना होगा. जब लोडर तैयार हो,
तब फ़ंक्शन को कॉल किया जाता है. लोडर तैयार होने के बाद, एपीआई क्लाइंट, 'Google साइन-इन', और Cloud Search मॉड्यूल लोड करने के लिए, gapi.load()
पर कॉल करके विजेट को लोड करना जारी रखें.
सभी मॉड्यूल लोड होने के बाद, initializeApp()
फ़ंक्शन को कॉल किया जाता है.
विजेट शुरू करें
सबसे पहले, जनरेट किए गए क्लाइंट आईडी और https://www.googleapis.com/auth/cloud_search.query
स्कोप से gapi.client.init()
या gapi.auth2.init()
को कॉल करके क्लाइंट लाइब्रेरी शुरू करें. इसके बाद,
gapi.cloudsearch.widget.resultscontainer.Builder
और
gapi.cloudsearch.widget.searchbox.Builder
क्लास का इस्तेमाल करके, विजेट को कॉन्फ़िगर करें और
उसे अपने एचटीएमएल एलिमेंट से बाइंड करें.
नीचे दिए गए उदाहरण में, विजेट को शुरू करने का तरीका बताया गया है:
ऊपर दिए गए उदाहरण में, कॉन्फ़िगरेशन के लिए दो वैरिएबल के बारे में बताया गया है. इनके बारे में यहां बताया गया है:
साइन-इन करने के अनुभव को पसंद के मुताबिक बनाएं
डिफ़ॉल्ट रूप से, क्वेरी टाइप करना शुरू करते समय विजेट, उपयोगकर्ताओं को साइन-इन करने और ऐप्लिकेशन को अनुमति देने का अनुरोध करता है. वेबसाइटों के लिए Google साइन-इन का इस्तेमाल करके, उपयोगकर्ताओं को उनकी पसंद के मुताबिक साइन-इन करने का अनुभव दिया जा सकता है.
उपयोगकर्ताओं को सीधे तौर पर अनुमति देना
Google से साइन इन करें सुविधा का इस्तेमाल करके, उपयोगकर्ताओं की साइन-इन स्थिति पर नज़र रखें. साथ ही, ज़रूरत के हिसाब से साइन-इन या साइन-आउट करें. उदाहरण के लिए, यहां दिए गए उदाहरण में, साइन इन से जुड़े बदलावों को मॉनिटर करने के लिए isSignedIn
की स्थिति के बारे में बताया गया है. साथ ही, एक बटन पर क्लिक से साइन इन करने के लिए, GoogleAuth.signIn()
तरीके का इस्तेमाल किया गया है:
ज़्यादा जानकारी के लिए, Google से साइन-इन करें लेख पढ़ें.
अपने-आप साइन-इन होने वाले उपयोगकर्ता
आप अपने संगठन के उपयोगकर्ताओं की ओर से ऐप्लिकेशन को पहले से अनुमति देकर, साइन-इन करने के अनुभव को और आसान बना सकते हैं. यह तकनीक तब भी काम आती है, जब ऐप्लिकेशन को सुरक्षित रखने के लिए Cloud Identity Aware प्रॉक्सी का इस्तेमाल किया जा रहा हो.
ज़्यादा जानकारी के लिए, आईटी ऐप्लिकेशन के साथ 'Google साइन इन' का इस्तेमाल करना देखें.
इंटरफ़ेस को अपनी पसंद के मुताबिक बनाएं
अलग-अलग तकनीकों का इस्तेमाल करके, खोज इंटरफ़ेस के दिखने का तरीका बदला जा सकता है:
- सीएसएस का इस्तेमाल करके स्टाइल बदलना
- एलिमेंट को अडैप्टर से सजाएं
- अडैप्टर की मदद से कस्टम एलिमेंट बनाना
सीएसएस का इस्तेमाल करके स्टाइल बदलना
खोज विजेट में अपने सीएसएस की मदद से सुझाव और नतीजे के एलिमेंट के साथ-साथ पेज नंबर कंट्रोल करने की सुविधा होती है. इन एलिमेंट में ज़रूरत के मुताबिक बदलाव किया जा सकता है.
लोड होने के दौरान, Search विजेट डाइनैमिक तरीके से अपनी डिफ़ॉल्ट स्टाइलशीट लोड करता है. ऐसा ऐप्लिकेशन स्टाइलशीट लोड होने के बाद होता है, जिससे नियमों की प्राथमिकता बढ़ जाती है. यह पक्का करने के लिए कि डिफ़ॉल्ट स्टाइल के मुकाबले आपकी स्टाइल को प्राथमिकता दी जाए, डिफ़ॉल्ट नियमों की खासियत बढ़ाने के लिए ऐंसेस्टर सिलेक्टर का इस्तेमाल करें.
उदाहरण के लिए, दस्तावेज़ में स्टैटिक link
या style
टैग को लोड करने पर, इस नियम का कोई असर नहीं पड़ता.
.cloudsearch_suggestion_container {
font-size: 14px;
}
इसके बजाय, पेज में बताए गए एंसेस्टर कंटेनर के आईडी या क्लास का इस्तेमाल करके, नियम को मंज़ूरी दें.
#suggestions_anchor .cloudsearch_suggestion_container {
font-size: 14px;
}
सहायता क्लास की सूची और विजेट से बनाए गए एचटीएमएल के उदाहरण के लिए, इस्तेमाल की जा सकने वाली सीएसएस क्लास का रेफ़रंस देखें.
एलिमेंट को अडैप्टर से सजाएं
रेंडर करने से पहले एलिमेंट को सजाने के लिए, एक ऐसा अडैप्टर बनाएं और उसे फिर से सेट करें जो सजावट के किसी एक तरीके को लागू करता हो. जैसे, decorateSuggestionElement
या decorateSearchResultElement.
उदाहरण के लिए, नीचे दिए गए अडैप्टर, सुझाव और नतीजे के एलिमेंट में एक कस्टम क्लास जोड़ते हैं.
विजेट को शुरू करते समय अडैप्टर को रजिस्टर करने के लिए, उससे जुड़ी Builder
क्लास का setAdapter()
तरीका इस्तेमाल करें:
डेकोरेटर कंटेनर एलिमेंट के एट्रिब्यूट और किसी चाइल्ड एलिमेंट में बदलाव कर सकते हैं. सजावट के दौरान, चाइल्ड एलिमेंट जोड़े या हटाए जा सकते हैं. हालांकि, अगर एलिमेंट में बुनियादी बदलाव किए जा रहे हैं, तो उन्हें सजावट करने के बजाय सीधे एलिमेंट बनाएं.
अडैप्टर की मदद से कस्टम एलिमेंट बनाना
किसी सुझाव, फ़ैसेट कंटेनर या खोज के नतीजे के लिए कस्टम एलिमेंट बनाने के लिए, ऐसा अडैप्टर बनाएं और रजिस्टर करें जो createSuggestionElement
, createFacetResultElement
या createSearchResultElement
को बार-बार लागू करता हो.
नीचे दिए गए अडैप्टर, एचटीएमएल <template>
टैग का इस्तेमाल करके पसंद के मुताबिक सुझाव और खोज के नतीजों वाले एलिमेंट बनाने के बारे में बताते हैं.
विजेट को शुरू करते समय अडैप्टर को फिर से रजिस्टर करने के लिए, इससे जुड़ी Builder
क्लास के setAdapter()
तरीके का इस्तेमाल करें:
createFacetResultElement
के साथ कस्टम फ़ेसेट एलिमेंट बनाने पर कई पाबंदियां लागू होती हैं:
- आपको उस एलिमेंट में सीएसएस क्लास
cloudsearch_facet_bucket_clickable
को अटैच करना होगा जिस पर उपयोगकर्ता क्लिक करके बकेट को टॉगल करते हैं. - आपको हर बकेट को सीएसएस क्लास
cloudsearch_facet_bucket_container
वाले एलिमेंट में रैप करना होगा. - बकेट को जिस क्रम में रेंडर नहीं किया जा सकता उसी क्रम में रेंडर नहीं किया जा सकता.
उदाहरण के लिए, नीचे दिया गया स्निपेट चेक बॉक्स के बजाय लिंक का इस्तेमाल करके पहलुओं को रेंडर करता है.
खोज व्यवहार को पसंद के मुताबिक बनाएं
सर्च ऐप्लिकेशन सेटिंग, सर्च इंटरफ़ेस के लिए डिफ़ॉल्ट कॉन्फ़िगरेशन को दिखाती है और ये स्टैटिक होती हैं. डाइनैमिक फ़िल्टर या पहलू लागू करने के लिए, जैसे कि उपयोगकर्ताओं को डेटा सोर्स को टॉगल करने की अनुमति देना. इसके लिए, अडैप्टर का इस्तेमाल करके खोज के अनुरोध को इंटरसेप्ट करके, खोज ऐप्लिकेशन की सेटिंग बदली जा सकती हैं.
लागू करने से पहले, Search API में किए गए अनुरोधों में बदलाव करने के लिए, interceptSearchRequest
वाले तरीके का इस्तेमाल करके अडैप्टर को लागू करें.
उदाहरण के लिए, नीचे दिया गया अडैप्टर, उपयोगकर्ता के चुने गए सोर्स तक क्वेरी को सीमित करने के अनुरोधों को बीच में रोकता है:
विजेट को शुरू करते समय अडैप्टर को रजिस्टर करने के लिए, ResultsContainer
बनाते समय setAdapter()
वाला तरीका इस्तेमाल करें
स्रोतों के हिसाब से फ़िल्टर करने के लिए, एक बॉक्स दिखाने के लिए इस एचटीएमएल का इस्तेमाल किया जाता है:
नीचे दिया गया कोड बदलाव को सुनकर, चुने गए विकल्प को सेट करता है और ज़रूरत पड़ने पर क्वेरी को फिर से दिखाता है.
अडैप्टर में 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;