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

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. Client-ID नोट करें. इस वैल्यू का इस्तेमाल, OAuth2 की मदद से उपयोगकर्ता की अनुमति का अनुरोध करते समय ऐप्लिकेशन की पहचान करने के लिए किया जाता है. इसे लागू करने के लिए, क्लाइंट सीक्रेट की ज़रूरत नहीं है.

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

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

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

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

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

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

  1. कमांड लाइन से, डायरेक्ट्री को `cloud-search-sample/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. खोज बॉक्स में, कोई क्वेरी डालें, जैसे कि "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();

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

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