यूज़र इंटरफ़ेस सेट अप करना

Google Cloud Search ट्यूटोरियल के इस पेज में एम्बेड किए जा सकने वाले Search विजेट का इस्तेमाल करके कस्टम सर्च ऐप्लिकेशन सेट अप करने का तरीका बताया गया है. इस ट्यूटोरियल की शुरुआत से शुरू करने के लिए, Cloud Search शुरू करने का ट्यूटोरियल देखें.

डिपेंडेंसी इंस्टॉल करें

  1. अगर कनेक्टर अब भी डेटा स्टोर करने की जगह को इंडेक्स कर रहा है, तो एक नया शेल खोलें और उस पर क्लिक करें.

  2. कमांड लाइन से, डायरेक्ट्री को cloud-search-samples/end-to-end/search-interface में बदलें.

  3. वेब सर्वर चलाने के लिए ज़रूरी डिपेंडेंसी डाउनलोड करने के लिए, यह कमांड चलाएं:

npm install

खोज ऐप्लिकेशन के क्रेडेंशियल बनाएं

Cloud Search API को कॉल करने के लिए, कनेक्टर को सेवा खाते के क्रेडेंशियल की ज़रूरत होती है. क्रेडेंशियल बनाने के लिए:

  1. Google Cloud Console पर वापस जाएं.

  2. बाईं ओर मौजूद नेविगेशन में, क्रेडेंशियल पर क्लिक करें.

  3. क्रेडेंशियल बनाएं ड्रॉप-डाउन सूची से, OAuth क्लाइंट आईडी चुनें. इसके बाद, आपको "OAuth क्लाइंट आईडी बनाएं" पेज दिखेगा.

  4. (ज़रूरी नहीं). अगर आपने सहमति वाली स्क्रीन कॉन्फ़िगर नहीं की है, तो सहमति वाली स्क्रीन कॉन्फ़िगर करें पर क्लिक करें. इसके बाद, "OAuth का इस्तेमाल करने की सहमति" वाली स्क्रीन दिखेगी.

    1. अंदरूनी पर क्लिक करें और बनाएं पर क्लिक करें. एक अन्य "OAuth सहमति" स्क्रीन दिखती है.

    2. ज़रूरी फ़ील्ड भरें. इसके बारे में ज़्यादा निर्देशों के लिए, OAuth 2.0 सेट अप करना का उपयोगकर्ता की सहमति वाला सेक्शन देखें.

  5. ऐप्लिकेशन का टाइप ड्रॉप-डाउन सूची पर क्लिक करें और वेब ऐप्लिकेशन चुनें.

  6. नाम फ़ील्ड में, "ट्यूटोरियल" डालें.

  7. अनुमति वाले JavaScript ऑरिजिन फ़ील्ड में, यूआरआई जोड़ें पर क्लिक करें. आपको एक "यूआरआई" फ़ील्ड दिखेगा.

  8. यूआरआई फ़ील्ड में, http://localhost:8080 डालें.

  9. बनाएं पर क्लिक करें. "OAuth क्लाइंट बनाया गया" स्क्रीन दिखती है.

  10. क्लाइंट आईडी नोट करें. इस वैल्यू का इस्तेमाल, ऐप्लिकेशन की पहचान करने के लिए तब किया जाता है, जब OAuth2 की मदद से उपयोगकर्ता की अनुमति का अनुरोध किया जाता है. इसे लागू करने के लिए क्लाइंट सीक्रेट की ज़रूरत नहीं है.

  11. ठीक है पर क्लिक करें.

खोज ऐप्लिकेशन बनाएं

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

  1. Google Admin console पर वापस जाएं.
  2. ऐप्लिकेशन आइकॉन पर क्लिक करें. आपको "ऐप्लिकेशन एडमिन" पेज दिखेगा.
  3. Google Workspace पर क्लिक करें. आपको "Google Workspace एडमिन" पेज दिखेगा.
  4. नीचे की ओर स्क्रोल करें और Cloud Search पर क्लिक करें. ऐसा करने पर, आपको "Google Workspace के लिए सेटिंग" पेज दिखेगा.
  5. सर्च ऐप्लिकेशन पर क्लिक करें. "खोज ऐप्लिकेशन" पेज दिखेगा.
  6. पीले रंग के गोल + पर क्लिक करें. "एक नया खोज ऐप्लिकेशन बनाएं" डायलॉग दिखाई देगा.
  7. डिसप्ले नेम फ़ील्ड में, "ट्यूटोरियल" डालें.
  8. बनाएं पर क्लिक करें.
  9. नए बनाए गए खोज ऐप्लिकेशन के बगल में मौजूद पेंसिल आइकॉन पर क्लिक करें ("खोज ऐप्लिकेशन में बदलाव करें"). "खोज ऐप्लिकेशन के बारे में जानकारी" पेज दिखेगा.
  10. ऐप्लिकेशन आईडी को नोट करें.
  11. डेटा सोर्स की दाईं ओर मौजूद, पेंसिल आइकॉन पर क्लिक करें.
  12. "ट्यूटोरियल" के बगल में, चालू करें टॉगल पर क्लिक करें. इस टॉगल से, बनाए गए नए सर्च ऐप्लिकेशन के लिए ट्यूटोरियल डेटा सोर्स चालू हो जाता है.
  13. "ट्यूटोरियल" डेटा सोर्स की दाईं ओर, डिसप्ले के विकल्प पर क्लिक करें.
  14. सभी पहलुओं की जांच करें.
  15. सेव करें पर क्लिक करें.
  16. हो गया पर क्लिक करें.

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

क्रेडेंशियल और खोज ऐप्लिकेशन बनाने के बाद, ऐप्लिकेशन कॉन्फ़िगरेशन को इस तरह शामिल करने के लिए उसे अपडेट करें:

  1. कमांड लाइन से, डायरेक्ट्री को `cloud-search-सैंपल/end-to-end/search-interface/public' में बदलें.
  2. app.js फ़ाइल को टेक्स्ट एडिटर में खोलें.
  3. फ़ाइल में सबसे ऊपर, searchConfig वैरिएबल खोजें.
  4. [client-id] को पहले बनाए गए OAuth क्लाइंट आईडी से बदलें.
  5. [application-id] को पिछले सेक्शन में बताए गए खोज ऐप्लिकेशन आईडी से बदलें.
  6. फ़ाइल सेव करें.

ऐप्लिकेशन चलाएं

इस निर्देश को चलाकर ऐप्लिकेशन शुरू करें:

npm run start

इंडेक्स पर क्वेरी करें

Search विजेट का इस्तेमाल करके, इंडेक्स से जुड़ी क्वेरी करने के लिए:

  1. अपना ब्राउज़र खोलें और http://localhost:8080 पर जाएं.
  2. ऐप्लिकेशन को आपकी ओर से Cloud Search से क्वेरी करने की अनुमति देने के लिए, साइन इन करें पर क्लिक करें.
  3. खोज बॉक्स में, कोई क्वेरी डालें, जैसे कि "test" शब्द. इसके बाद, Enter दबाएं. नतीजों में नेविगेट करने के लिए, पेज पर पहलुओं और पेजिनेशन कंट्रोल के साथ क्वेरी के नतीजे दिखने चाहिए.

कोड की समीक्षा करना

बाकी सेक्शन में यह देखा जाता है कि यूज़र इंटरफ़ेस कैसे बनाया गया है.

विजेट लोड हो रहा है

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

index.html
<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

दूसरा, स्क्रिप्ट तैयार होने के बाद onLoad कॉलबैक को कॉल किया जाता है. इसके बाद, यह Google API क्लाइंट, 'Google साइन-इन', और Cloud Search विजेट लाइब्रेरी को लोड करता है.

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 मैनेज करता है.

अनुमति मैनेज करना

उपयोगकर्ताओं को अपनी ओर से क्वेरी करने के लिए ऐप्लिकेशन को अनुमति देनी होगी. विजेट, उपयोगकर्ताओं को अनुमति देने के लिए कह सकता है. हालांकि, अनुमति को खुद मैनेज करके, बेहतर उपयोगकर्ता अनुभव हासिल किया जा सकता है.

खोज इंटरफ़ेस के लिए, यह ऐप्लिकेशन उपयोगकर्ता की साइन-इन स्थिति के आधार पर दो अलग-अलग व्यू दिखाता है.

index.html
<div class="content">
  <div id="app" hidden>
    <div id="header">
      <button id="sign-out">Sign-out</button>
    </div>
    <!-- Markup for widget...-->
  </div>
  <div id="welcome" hidden>
    <h1>Cloud Search Tutorial</h1>
    <p>Sign in with your Google account to search.</p>
    <button id="sign-in">Sign-in</button>
  </div>
</div>

शुरू करने के दौरान सही व्यू चालू होता है. साथ ही, साइन-इन और साइन-आउट इवेंट के लिए हैंडलर कॉन्फ़िगर किए जाते हैं:

app.js
/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
async function initializeApp() {
  await gapi.auth2.init({
      'clientId': searchConfig.clientId,
      'scope': 'https://www.googleapis.com/auth/cloud_search.query'
  });

  let auth = gapi.auth2.getAuthInstance();

  // Watch for sign in status changes to update the UI appropriately
  let onSignInChanged = (isSignedIn) => {
    document.getElementById("app").hidden = !isSignedIn;
    document.getElementById("welcome").hidden = isSignedIn;
    if (resultsContainer) {
      resultsContainer.clear();
    }
  }
  auth.isSignedIn.listen(onSignInChanged);
  onSignInChanged(auth.isSignedIn.get()); // Trigger with current status

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

  // ...

}

खोज इंटरफ़ेस बनाना

खोज विजेट को खोज इनपुट के लिए और खोज के नतीजों को होल्ड करने के लिए, कुछ एचटीएमएल मार्कअप की ज़रूरत होती है:

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

विजेट शुरू होने के दौरान, यह शुरू हो जाता है और इनपुट और कंटेनर एलिमेंट से जुड़ा रहता है:

app.js
gapi.config.update('cloudsearch.config/apiVersion', 'v1');
resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setSearchResultsContainerElement(document.getElementById('search_results'))
  .setFacetResultsContainerElement(document.getElementById('facet_results'))
  .build();

const searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setInput(document.getElementById('search_input'))
  .setAnchor(document.getElementById('suggestions_anchor'))
  .setResultsContainer(resultsContainer)
  .build();

बधाई हो, आपने ट्यूटोरियल पूरा कर लिया है! सफ़ाई के निर्देशों के लिए जारी रखें.

पीछे जाएं आगे बढ़ें