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

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

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

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

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

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

npm install

सर्च ऐप्लिकेशन के क्रेडेंशियल बनाना

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

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

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

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

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

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

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

npm run start

इंडेक्स से क्वेरी करना

खोज विजेट का इस्तेमाल करके इंडेक्स में क्वेरी करने के लिए:

  1. अपना ब्राउज़र खोलें और http://localhost:8080 पर जाएं.
  2. ऐप्लिकेशन को आपकी ओर से Cloud Search पर क्वेरी करने की अनुमति देने के लिए, साइन इन करें पर क्लिक करें.
  3. खोज बॉक्स में कोई क्वेरी डालें, जैसे कि "टेस्ट" शब्द. इसके बाद, 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();

बधाई हो, आपने ट्यूटोरियल पूरा कर लिया है! खाता मिटाने के निर्देशों के लिए, आगे बढ़ें.

पिछला आगे बढ़ें