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

Google Cloud 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. नाम फ़ील्ड में, "tutorial" डालें.

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

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

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

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

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

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

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

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

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

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

  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 Sign-in, और 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();

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

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