खोज विजेट के साथ खोज इंटरफ़ेस बनाना

Search विजेट, वेब ऐप्लिकेशन के लिए पसंद के मुताबिक सर्च इंटरफ़ेस उपलब्ध कराता है. विजेट को सिर्फ़ कुछ एचटीएमएल और JavaScript की ज़रूरत होती है, ताकि पहलू और पेज नंबर जैसी सामान्य खोज सुविधाओं को लागू करता है और उन्हें चालू करता है. आपने लोगों तक पहुंचाया मुफ़्त में CSS और JavaScript की मदद से इंटरफ़ेस के हिस्सों को कस्टमाइज़ भी कर सकता है.

अगर आपको विजेट से मिलने वाली सुविधाओं से ज़्यादा विकल्प चाहिए, तो क्वेरी एपीआई. क्वेरी API की मदद से खोज इंटरफ़ेस बनाने के बारे में जानकारी के लिए, Query API की मदद से खोज इंटरफ़ेस बनाना देखें.

सर्च इंटरफ़ेस बनाएं

खोज इंटरफ़ेस बनाने के लिए कई चरणों की ज़रूरत होती है:

  1. खोज ऐप्लिकेशन को कॉन्फ़िगर करें
  2. ऐप्लिकेशन के लिए क्लाइंट आईडी जनरेट करना
  3. खोज बॉक्स और नतीजों के लिए एचटीएमएल मार्कअप जोड़ना
  4. विजेट को पेज पर लोड करें
  5. विजेट शुरू करें

खोज ऐप्लिकेशन को कॉन्फ़िगर करें

हर सर्च इंटरफ़ेस में एक सर्च ऐप्लिकेशन होना चाहिए Admin console में साइन इन करें. सर्च ऐप्लिकेशन में ज़्यादा जानकारी क्वेरी से जुड़ी जानकारी, जैसे कि डेटा सोर्स, पहलू, और खोज गुणवत्ता सेटिंग.

खोज ऐप्लिकेशन बनाने के लिए, इसे देखें पसंद के मुताबिक खोज अनुभव बनाएं.

ऐप्लिकेशन के लिए क्लाइंट आईडी जनरेट करना

इन चरणों के अतिरिक्त Google Cloud Search API का ऐक्सेस कॉन्फ़िगर करना, आपको वेब ऐप्लिकेशन के लिए क्लाइंट आईडी भी जनरेट करना होगा.

प्रोजेक्ट कॉन्फ़िगर करना

प्रोजेक्ट कॉन्फ़िगर करने पर:

  • वेब ब्राउज़र क्लाइंट टाइप चुनें
  • ऑरिजिन यूआरआई दें तीन सबसे सही तरीक़े यहाँ दिए गए हैं.
  • बनाए गए क्लाइंट आईडी का नोट. आपको इस काम के लिए Client-ID की ज़रूरत होगी अगले चरणों को पूरा करें. इसके लिए, क्लाइंट सीक्रेट की ज़रूरत नहीं है विजेट.

ज़्यादा जानकारी के लिए, देखें क्लाइंट-साइड वेब ऐप्लिकेशन के लिए OAuth 2.0.

एचटीएमएल मार्कअप जोड़ें

विजेट को काम करने के लिए कुछ एचटीएमएल की ज़रूरत होती है. आपने लोगों तक पहुंचाया मुफ़्त में यह जानकारी ज़रूर देनी होगी:

  • खोज बॉक्स के लिए एक input एलिमेंट.
  • सुझाव पॉप-अप को ऐंकर करने के लिए एलिमेंट.
  • खोज के नतीजे शामिल करने वाला एलिमेंट.
  • (वैकल्पिक) फ़ेसेट कंट्रोल शामिल करने के लिए एलिमेंट दें.

नीचे दिया गया एचटीएमएल स्निपेट, खोज विजेट के लिए एचटीएमएल दिखाता है, जहां सीमित होने वाले एलिमेंट की पहचान, id एट्रिब्यूट से की जाती है:

serving/widget/public/with_css/index.html
<div id="search_bar">
  <div id="suggestions_anchor">
    <input type="text" id="search_input" placeholder="Search for...">
  </div>
</div>
<div id="facet_results"></div>
<div id="search_results"></div>

विजेट को लोड करें

विजेट को लोडर स्क्रिप्ट की मदद से डाइनैमिक तरीके से लोड किया जाता है. शामिल करने के लिए लोड करने के लिए, नीचे दिखाए गए तरीके से <script> टैग का इस्तेमाल करें:

serving/widget/public/with_css/index.html
<!-- Google API loader -->
<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

आपको स्क्रिप्ट टैग में onload कॉलबैक देना होगा. फ़ंक्शन को कॉल किया जाता है जब लोडर तैयार हो. जब लोडर तैयार हो जाए, तब विजेट को लोड करना जारी रखें एपीआई क्लाइंट, 'Google साइन-इन', और Cloud Search मॉड्यूल लोड करने के लिए, gapi.load() को कॉल करें.

serving/widget/public/with_css/app.js
/**
* Load the cloud search widget & auth libraries. Runs after
* the initial gapi bootstrap library is ready.
*/
function onLoad() {
  gapi.load('client:auth2:cloudsearch-widget', initializeApp)
}

सभी मॉड्यूल के होने के बाद, 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 क्लास और उसे अपने एचटीएमएल एलिमेंट से बाइंड करें.

नीचे दिए गए उदाहरण में, विजेट को शुरू करने का तरीका बताया गया है:

serving/widget/public/with_css/app.js
/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
function initializeApp() {
  // Load client ID & search app.
  loadConfiguration().then(function() {
    // Set API version to v1.
    gapi.config.update('cloudsearch.config/apiVersion', 'v1');

    // Build the result container and bind to DOM elements.
    var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
      .setSearchApplicationId(searchApplicationName)
      .setSearchResultsContainerElement(document.getElementById('search_results'))
      .setFacetResultsContainerElement(document.getElementById('facet_results'))
      .build();

    // Build the search box and bind to DOM elements.
    var searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
      .setSearchApplicationId(searchApplicationName)
      .setInput(document.getElementById('search_input'))
      .setAnchor(document.getElementById('suggestions_anchor'))
      .setResultsContainer(resultsContainer)
      .build();
  }).then(function() {
    // Init API/oauth client w/client ID.
    return gapi.auth2.init({
        'clientId': clientId,
        'scope': 'https://www.googleapis.com/auth/cloud_search.query'
    });
  });
}

ऊपर दिए गए उदाहरण में, कॉन्फ़िगरेशन के लिए दो वैरिएबल के बारे में बताया गया है. इनके बारे में यहां बताया गया है:

serving/widget/public/with_css/app.js
/**
* Client ID from OAuth credentials.
*/
var clientId = "...apps.googleusercontent.com";

/**
* Full resource name of the search application, such as
* "searchapplications/<your-id>".
*/
var searchApplicationName = "searchapplications/...";

साइन-इन करने के अनुभव को पसंद के मुताबिक बनाएं

डिफ़ॉल्ट रूप से, विजेट, उपयोगकर्ताओं को साइन-इन करने और ऐप्लिकेशन को अनुमति देने के लिए कहता है उस समय वे कोई क्वेरी टाइप करना शुरू करते हैं. Google Analytics 4 पर माइग्रेट करने के लिए, वेबसाइटों के लिए Google साइन इन ताकि उपयोगकर्ताओं को साइन-इन करने का बेहतर अनुभव दिया जा सके.

उपयोगकर्ताओं को सीधे तौर पर अनुमति देना

Google से साइन इन करें सुविधा का इस्तेमाल करके, उपयोगकर्ताओं और उन्हें साइन-इन या साइन-आउट कर सकते हैं. उदाहरण के लिए, निम्न उदाहरण में, isSignedIn को देखा जा सकता है साइन-इन से जुड़े बदलावों पर नज़र रखने की स्थिति और GoogleAuth.signIn() का इस्तेमाल करता है किसी बटन से साइन-इन करने का तरीका क्लिक:

serving/widget/public/with_signin/app.js
// Handle sign-in/sign-out.
let auth = gapi.auth2.getAuthInstance();

// Watch for sign in status changes to update the UI appropriately.
let onSignInChanged = (isSignedIn) => {
  // Update UI to switch between signed in/out states
  // ...
}
auth.isSignedIn.listen(onSignInChanged);
onSignInChanged(auth.isSignedIn.get()); // Trigger with current status.

// Connect sign-in/sign-out buttons.
document.getElementById("sign-in").onclick = function(e) {
  auth.signIn();
};
document.getElementById("sign-out").onclick = function(e) {
  auth.signOut();
};

ज़्यादा जानकारी के लिए, 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.

उदाहरण के लिए, नीचे दिए गए अडैप्टर सुझाव में एक कस्टम क्लास जोड़ते हैं और खोज के नतीजों में दिखने वाले एलिमेंट.

serving/widget/public/with_decorated_element/app.js
/**
 * Search box adapter that decorates suggestion elements by
 * adding a custom CSS class.
 */
function SearchBoxAdapter() {}
SearchBoxAdapter.prototype.decorateSuggestionElement = function(element) {
  element.classList.add('my-suggestion');
}

/**
 * Results container adapter that decorates suggestion elements by
 * adding a custom CSS class.
 */
function ResultsContainerAdapter() {}
ResultsContainerAdapter.prototype.decorateSearchResultElement = function(element) {
  element.classList.add('my-result');
}

विजेट शुरू करते समय, अडैप्टर को रजिस्टर करने के लिए, setAdapter() का इस्तेमाल करें Builder क्लास का तरीका:

serving/widget/public/with_decorated_element/app.js
// Build the result container and bind to DOM elements.
var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setAdapter(new ResultsContainerAdapter())
  // ...
  .build();

// Build the search box and bind to DOM elements.
var searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setAdapter(new SearchBoxAdapter())
  // ...
  .build();

डेकोरेटर कंटेनर एलिमेंट के एट्रिब्यूट के साथ-साथ उनमें से भी किसी एट्रिब्यूट में बदलाव कर सकते हैं चाइल्ड एलिमेंट. सजावट के दौरान, चाइल्ड एलिमेंट जोड़े या हटाए जा सकते हैं. हालांकि, अगर एलिमेंट में बुनियादी बदलाव किए जा रहे हैं, तो और उन्हें सीधे तौर पर नहीं दिखाना चाहिए.

अडैप्टर की मदद से कस्टम एलिमेंट बनाना

किसी सुझाव, फ़ेसेट कंटेनर या खोज के नतीजे के लिए कस्टम एलिमेंट बनाने के लिए, लागू करने वाला अडैप्टर बनाना और रजिस्टर करना createSuggestionElement createFacetResultElement, या createSearchResultElement बार-बार बंद किया जा सकता है.

नीचे दिए गए अडैप्टर, आपकी पसंद के मुताबिक सुझाव और खोज के नतीजे बनाते हैं एचटीएमएल <template> टैग का इस्तेमाल करने वाले एलिमेंट.

serving/widget/public/with_custom_element/app.js
/**
 * Search box adapter that overrides creation of suggestion elements.
 */
function SearchBoxAdapter() {}
SearchBoxAdapter.prototype.createSuggestionElement = function(suggestion) {
  let template = document.querySelector('#suggestion_template');
  let fragment = document.importNode(template.content, true);
  fragment.querySelector('.suggested_query').textContent = suggestion.suggestedQuery;
  return fragment.firstElementChild;
}

/**
 * Results container adapter that overrides creation of result elements.
 */
function ResultsContainerAdapter() {}
ResultsContainerAdapter.prototype.createSearchResultElement = function(result) {
  let template = document.querySelector('#result_template');
  let fragment = document.importNode(template.content, true);
  fragment.querySelector('.title').textContent = result.title;
  fragment.querySelector('.title').href = result.url;
  let snippetText = result.snippet != null ?
    result.snippet.snippet : '';
  fragment.querySelector('.query_snippet').innerHTML = snippetText;
  return fragment.firstElementChild;
}

विजेट को शुरू करते समय अडैप्टर को रजिस्टर करने के लिए, setAdapter() का इस्तेमाल करें Builder क्लास का तरीका:

serving/widget/public/with_custom_element/app.js
// Build the result container and bind to DOM elements.
var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setAdapter(new ResultsContainerAdapter())
  // ...
  .build();

// Build the search box and bind to DOM elements.
var searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setAdapter(new SearchBoxAdapter())
  // ...
  .build();

createFacetResultElement के साथ कस्टम फ़ेसेट एलिमेंट बनाना पर कई पाबंदियां लागू होती हैं:

  • आपको सीएसएस क्लास cloudsearch_facet_bucket_clickable को ऐसे एलिमेंट जिन पर उपयोगकर्ता क्लिक करके बकेट को टॉगल करते हैं.
  • आपको हर बकेट को सीएसएस वाले एलिमेंट में रैप करना होगा क्लास cloudsearch_facet_bucket_container.
  • बकेट को जिस क्रम में दिखाया जा रहा है उससे अलग क्रम में नहीं दिया जा सकता जवाब.

उदाहरण के लिए, नीचे दिया गया स्निपेट इसके बजाय लिंक का इस्तेमाल करके पहलुओं को रेंडर करता है डालें.

serving/widget/public/with_custom_facet/app.js
/**
 * Results container adapter that intercepts requests to dynamically
 * change which sources are enabled based on user selection.
 */
function ResultsContainerAdapter() {
  this.selectedSource = null;
}

ResultsContainerAdapter.prototype.createFacetResultElement = function(result) {
  // container for the facet
  var container = document.createElement('div');

  // Add a label describing the facet (operator/property)
  var label = document.createElement('div')
  label.classList.add('facet_label');
  label.textContent = result.operatorName;
  container.appendChild(label);

  // Add each bucket
  for(var i in result.buckets) {
    var bucket = document.createElement('div');
    bucket.classList.add('cloudsearch_facet_bucket_container');

    // Extract & render value from structured value
    // Note: implementation of renderValue() not shown
    var bucketValue = this.renderValue(result.buckets[i].value)
    var link = document.createElement('a');
    link.classList.add('cloudsearch_facet_bucket_clickable');
    link.textContent = bucketValue;
    bucket.appendChild(link);
    container.appendChild(bucket);
  }
  return container;
}

// Renders a value for user display
ResultsContainerAdapter.prototype.renderValue = function(value) {
  // ...
}

खोज व्यवहार को पसंद के मुताबिक बनाएं

सर्च ऐप्लिकेशन सेटिंग डिफ़ॉल्ट दिखाती हैं सर्च इंटरफ़ेस के लिए कॉन्फ़िगरेशन करते हैं और ये स्टैटिक होते हैं. डाइनैमिक लागू करने के लिए फ़िल्टर या पहलू, जैसे कि उपयोगकर्ताओं को डेटा सोर्स टॉगल करने की अनुमति देना खोज अनुरोध को इंटरसेप्ट करके, खोज ऐप्लिकेशन की सेटिंग को बदलें अडैप्टर के साथ.

अडैप्टर को इस interceptSearchRequest को किए गए अनुरोधों को संशोधित करने का तरीका खोज API लागू होने से पहले.

उदाहरण के लिए, यह अडैप्टर, क्वेरी को प्रतिबंधित करने के अनुरोधों को बीच में रोकता है उपयोगकर्ता के चुने गए सोर्स के लिए:

serving/widget/public/with_request_interceptor/app.js
/**
 * Results container adapter that intercepts requests to dynamically
 * change which sources are enabled based on user selection.
 */
function ResultsContainerAdapter() {
  this.selectedSource = null;
}
ResultsContainerAdapter.prototype.interceptSearchRequest = function(request) {
  if (!this.selectedSource || this.selectedSource == 'ALL') {
    // Everything selected, fall back to sources defined in the search
    // application.
    request.dataSourceRestrictions = null;
  } else {
    // Restrict to a single selected source.
    request.dataSourceRestrictions = [
      {
        source: {
          predefinedSource: this.selectedSource
        }
      }
    ];
  }
  return request;
}

विजेट शुरू करते समय अडैप्टर को रजिस्टर करने के लिए, setAdapter() ResultsContainer को बनाने का तरीका

serving/widget/public/with_request_interceptor/app.js
var resultsContainerAdapter = new ResultsContainerAdapter();
// Build the result container and bind to DOM elements.
var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setAdapter(resultsContainerAdapter)
  // ...
  .build();

नीचे दिए गए एचटीएमएल का इस्तेमाल, फ़िल्टर करने के लिए एक बॉक्स दिखाने के लिए किया जाता है स्रोत:

serving/widget/public/with_request_interceptor/index.html
<div>
  <span>Source</span>
  <select id="sources">
    <option value="ALL">All</option>
    <option value="GOOGLE_GMAIL">Gmail</option>
    <option value="GOOGLE_DRIVE">Drive</option>
    <option value="GOOGLE_SITES">Sites</option>
    <option value="GOOGLE_GROUPS">Groups</option>
    <option value="GOOGLE_CALENDAR">Calendar</option>
    <option value="GOOGLE_KEEP">Keep</option>
  </select>
</div>

निम्न कोड बदलाव को सुनता है, चुनाव सेट करता है, और ज़रूरत पड़ने पर क्वेरी को दोबारा जवाब देता है.

serving/widget/public/with_request_interceptor/app.js
// Handle source selection
document.getElementById('sources').onchange = (e) => {
  resultsContainerAdapter.selectedSource = e.target.value;
  let request = resultsContainer.getCurrentRequest();
  if (request.query) {
    // Re-execute if there's a valid query. The source selection
    // will be applied in the interceptor.
    resultsContainer.resetState();
    resultsContainer.executeRequest(request);
  }
}

खोज के नतीजे को देखने के लिए, interceptSearchResponse है.

एपीआई वर्शन को पिन करें

विजेट डिफ़ॉल्ट रूप से, एपीआई के नए और स्टेबल वर्शन का इस्तेमाल करता है. किसी खास वर्शन के लिए, cloudsearch.config/apiVersion कॉन्फ़िगरेशन पैरामीटर सेट करें अपने पसंदीदा वर्शन पर अपडेट करें.

serving/widget/public/basic/app.js
gapi.config.update('cloudsearch.config/apiVersion', 'v1');

अगर इसे सेट नहीं किया जाता है या अमान्य वैल्यू पर सेट किया जाता है, तो एपीआई वर्शन डिफ़ॉल्ट रूप से 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;