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

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 पर क्लिक करें. "Apps के Google Workspace एडमिन" पेज दिखाई देता है.
  4. नीचे स्क्रॉल करें और Cloud Search पर क्लिक करें. "Google Workspace की सेटिंग" पेज दिखाई देता है.
  5. Search App पर क्लिक करें. "Search Appplications" पेज दिखाई देता है.
  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. खोज बॉक्स में, कोई क्वेरी डालें, जैसे कि "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();

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

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