खोज विजेट, वेब ऐप्लिकेशन के लिए पसंद के मुताबिक सर्च इंटरफ़ेस उपलब्ध कराता है. विजेट को लागू करने और पेज पर नंबर डालने जैसी सामान्य खोज सुविधाओं को लागू करने के लिए, एचटीएमएल और JavaScript की ज़रूरत होती है. इंटरफ़ेस के हिस्सों को सीएसएस और JavaScript की मदद से भी पसंद के मुताबिक बनाया जा सकता है.
अगर आपको विजेट से मिलने वाले विकल्प से ज़्यादा विकल्प चाहिए, तो क्वेरी एपीआई का इस्तेमाल करें. क्वेरी एपीआई का इस्तेमाल करके खोज इंटरफ़ेस बनाने के बारे में जानकारी पाने के लिए, क्वेरी एपीआई की मदद से सर्च इंटरफ़ेस बनाना देखें.
सर्च इंटरफ़ेस बनाना
खोज इंटरफ़ेस बनाने के लिए कई चरणों की ज़रूरत होती है:
- सर्च ऐप्लिकेशन कॉन्फ़िगर करें
- ऐप्लिकेशन के लिए क्लाइंट आईडी जनरेट करें
- खोज बॉक्स और नतीजों के लिए, एचटीएमएल मार्कअप जोड़ना
- पेज पर विजेट को लोड करें
- विजेट को शुरू करना
सर्च ऐप्लिकेशन कॉन्फ़िगर करें
हर खोज इंटरफ़ेस के लिए, Admin console में तय किया गया खोज ऐप्लिकेशन होना चाहिए. सर्च ऐप्लिकेशन, क्वेरी के लिए अतिरिक्त जानकारी देता है, जैसे कि डेटा सोर्स, पहलू, और खोज क्वालिटी सेटिंग.
सर्च ऐप्लिकेशन बनाने के लिए, पसंद के मुताबिक खोज अनुभव बनाएं देखें.
ऐप्लिकेशन के लिए क्लाइंट आईडी जनरेट करें
Google Cloud Search API का ऐक्सेस कॉन्फ़िगर करें सेक्शन में दिए गए निर्देशों के अलावा, आपको वेब ऐप्लिकेशन के लिए क्लाइंट आईडी जनरेट करना भी होगा.
प्रोजेक्ट को कॉन्फ़िगर करते समय:
- वेब ब्राउज़र क्लाइंट टाइप चुनें
- अपने ऐप्लिकेशन का ऑरिजिन यूआरआई बताएं.
- बनाए गए क्लाइंट आईडी का नोट. अगले चरण पूरे करने के लिए, आपको क्लाइंट आईडी की ज़रूरत होगी. विजेट के लिए क्लाइंट सीक्रेट की ज़रूरत नहीं है.
ज़्यादा जानकारी के लिए, क्लाइंट-साइड वेब ऐप्लिकेशन के लिए OAuth 2.0 देखें.
एचटीएमएल मार्कअप जोड़ना
विजेट को काम करने के लिए कम एचटीएमएल की ज़रूरत होती है. आपको आपको नीचे दी गई जानकारी देनी होगी:
- खोज बॉक्स के लिए एक
input
एलिमेंट. - सुझाव के पॉप-अप को ऐंकर करने के लिए एलिमेंट.
- खोज के नतीजों को शामिल करने वाला एलिमेंट.
- (ज़रूरी नहीं) फ़ेस कंट्रोल शामिल करने के लिए कोई एलिमेंट दें.
यह एचटीएमएल स्निपेट, Search विजेट के लिए एचटीएमएल दिखाता है, जहां बाउंड होने वाले एलिमेंट की पहचान उनके 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
तरीके का इस्तेमाल करके अडैप्टर लागू करें.
उदाहरण के लिए, यह अडैप्टर, उपयोगकर्ता के चुने गए सोर्स तक क्वेरी को सीमित करने के अनुरोधों को बीच में रोकता है:
विजेट को शुरू करते समय अडैप्टर को रजिस्टर करने के लिए, setAdapter()
ResultsContainer
बनाने के तरीके का इस्तेमाल करें
नीचे दिए गए एचटीएमएल का इस्तेमाल सोर्स के हिसाब से फ़िल्टर करने के लिए एक चुनिंदा बॉक्स दिखाने के लिए किया जाता है:
नीचे दिया गया कोड बदलाव की पहचान करता है, चुनने का तरीका सेट करता है, और ज़रूरत पड़ने पर क्वेरी को फिर से लागू करता है.
अडैप्टर में interceptSearchResponse
लागू करके, खोज के जवाब को रोका भी जा सकता है.
एपीआई वर्शन को पिन करें
विजेट, डिफ़ॉल्ट रूप से एपीआई के सबसे नए और स्थिर वर्शन का इस्तेमाल करता है. किसी खास वर्शन में लॉक करने के लिए, विजेट को शुरू करने से पहले cloudsearch.config/apiVersion
कॉन्फ़िगरेशन पैरामीटर को पसंदीदा वर्शन पर सेट करें.
अगर इसे सेट नहीं किया जाता है या अमान्य वैल्यू पर सेट किया जाता है, तो एपीआई वर्शन डिफ़ॉल्ट रूप से 1.0 पर सेट हो जाएगा.
विजेट के वर्शन को पिन करें
सर्च इंटरफ़ेस में अनचाहे बदलावों से बचने के लिए, cloudsearch.config/clientVersion
कॉन्फ़िगरेशन पैरामीटर को इस तरह से सेट करें:
gapi.config.update('cloudsearch.config/clientVersion', 1.1);
अगर यह नीति सेट नहीं है या इसकी वैल्यू अमान्य है, तो विजेट का वर्शन डिफ़ॉल्ट रूप से 1.0 पर सेट हो जाएगा.
खोज इंटरफ़ेस को सुरक्षित बनाएं
खोज के नतीजों में बहुत संवेदनशील जानकारी होती है. वेब ऐप्लिकेशन को सुरक्षित रखने के लिए, सबसे सही तरीके अपनाएं. खास तौर पर, क्लिकजैकिंग हमलों से बचें.
ज़्यादा जानकारी के लिए, OWASP गाइड प्रोजेक्ट देखें
डीबग करना चालू करें
Search विजेट
को डीबग करने की सुविधा चालू करने के लिए, interceptSearchRequest
का इस्तेमाल करें. उदाहरण के लिए:
if (!request.requestOptions) {
// Make sure requestOptions is populated
request.requestOptions = {};
}
// Enable debugging
request.requestOptions.debugOptions = {enableDebugging: true}
return request;