ইউজার ইন্টারফেস সেট আপ করুন

Google ক্লাউড অনুসন্ধান টিউটোরিয়ালের এই পৃষ্ঠাটি দেখায় কিভাবে এম্বেডযোগ্য অনুসন্ধান উইজেট ব্যবহার করে একটি কাস্টম অনুসন্ধান অ্যাপ্লিকেশন সেট আপ করতে হয়৷ এই টিউটোরিয়ালের শুরু থেকে শুরু করতে, ক্লাউড অনুসন্ধান শুরু করার টিউটোরিয়াল পড়ুন।

নির্ভরতা ইনস্টল করুন

  1. যদি সংযোগকারী এখনও সংগ্রহস্থল সূচী করে, একটি নতুন শেল খুলুন এবং সেখানে চালিয়ে যান।

  2. কমান্ড লাইন থেকে, cloud-search-samples/end-to-end/search-interface ডিরেক্টরি পরিবর্তন করুন।

  3. ওয়েব সার্ভার চালানোর জন্য প্রয়োজনীয় নির্ভরতা ডাউনলোড করতে, নিম্নলিখিত কমান্ডটি চালান: 

npm install

অনুসন্ধান অ্যাপ্লিকেশন শংসাপত্র তৈরি করুন

ক্লাউড সার্চ API কল করার জন্য সংযোগকারীর পরিষেবা অ্যাকাউন্টের শংসাপত্র প্রয়োজন৷ শংসাপত্র তৈরি করতে:

  1. Google ক্লাউড কনসোলে ফিরে যান।

  2. বাম নেভিগেশনে, শংসাপত্রে ক্লিক করুন।

  3. শংসাপত্র তৈরি করুন ড্রপ-ডাউন তালিকা থেকে, OAuth ক্লায়েন্ট আইডি নির্বাচন করুন। "OAuth ক্লায়েন্ট আইডি তৈরি করুন" পৃষ্ঠাটি প্রদর্শিত হবে৷

  4. (ঐচ্ছিক)। আপনি যদি সম্মতি স্ক্রীন কনফিগার না করে থাকেন, তাহলে সম্মতি স্ক্রীন কনফিগার করুন ক্লিক করুন। "OAuth সম্মতি" স্ক্রীন প্রদর্শিত হবে৷

    1. অভ্যন্তরীণ ক্লিক করুন এবং তৈরি করুন ক্লিক করুন। আরেকটি "OAuth সম্মতি" স্ক্রীন দেখা যাচ্ছে।

    2. প্রয়োজনীয় ক্ষেত্রগুলি পূরণ করুন। আরও নির্দেশাবলীর জন্য, OAuth 2.0 সেট আপ করার ব্যবহারকারীর সম্মতি বিভাগটি পড়ুন।

  5. অ্যাপ্লিকেশন প্রকারের ড্রপ-ডাউন তালিকাতে ক্লিক করুন এবং ওয়েব অ্যাপ্লিকেশন নির্বাচন করুন।

  6. নাম ক্ষেত্রে, "টিউটোরিয়াল" লিখুন।

  7. অনুমোদিত জাভাস্ক্রিপ্ট অরিজিন ফিল্ডে, ADD URI এ ক্লিক করুন। একটি খালি "URIs" ক্ষেত্র প্রদর্শিত হবে৷

  8. URIs ক্ষেত্রে, http://localhost:8080 লিখুন।

  9. CREATE এ ক্লিক করুন। "OAuth ক্লায়েন্ট তৈরি করা হয়েছে" স্ক্রীন প্রদর্শিত হবে।

  10. ক্লায়েন্ট আইডি নোট করুন। OAuth2 এর সাথে ব্যবহারকারীর অনুমোদনের অনুরোধ করার সময় এই মানটি অ্যাপ্লিকেশন সনাক্ত করতে ব্যবহৃত হয়। এই বাস্তবায়নের জন্য ক্লায়েন্ট সিক্রেটের প্রয়োজন নেই।

  11. ওকে ক্লিক করুন।

অনুসন্ধান অ্যাপ্লিকেশন তৈরি করুন

এরপরে, অ্যাডমিন কনসোলে একটি অনুসন্ধান অ্যাপ্লিকেশন তৈরি করুন। অনুসন্ধান অ্যাপ্লিকেশনটি অনুসন্ধান ইন্টারফেস এবং এর ডিফল্ট কনফিগারেশনের একটি ভার্চুয়াল উপস্থাপনা।

  1. Google অ্যাডমিন কনসোলে ফিরে যান।
  2. অ্যাপস আইকনে ক্লিক করুন। "অ্যাপস প্রশাসন" পৃষ্ঠাটি প্রদর্শিত হবে৷
  3. Google Workspace-এ ক্লিক করুন। "Apps Google Workspace প্রশাসন" পৃষ্ঠাটি দেখা যাচ্ছে।
  4. নিচে স্ক্রোল করুন এবং ক্লাউড সার্চ এ ক্লিক করুন। "Google Workspace-এর জন্য সেটিংস" পৃষ্ঠা দেখা যাচ্ছে।
  5. অনুসন্ধান অ্যাপ্লিকেশন ক্লিক করুন. "অনুসন্ধান অ্যাপ্লিকেশন" পৃষ্ঠা প্রদর্শিত হবে।
  6. বৃত্তাকার হলুদ + ক্লিক করুন। "একটি নতুন অনুসন্ধান অ্যাপ্লিকেশন তৈরি করুন" ডায়ালগ প্রদর্শিত হবে।
  7. প্রদর্শন নামের ক্ষেত্রে, "টিউটোরিয়াল" লিখুন।
  8. CREATE এ ক্লিক করুন।
  9. নতুন তৈরি অনুসন্ধান অ্যাপ্লিকেশনের পাশে পেন্সিল আইকনে ক্লিক করুন ("অনুসন্ধান অ্যাপ্লিকেশন সম্পাদনা করুন")৷ "অনুসন্ধানের বিশদ বিবরণ" পৃষ্ঠাটি প্রদর্শিত হবে।
  10. অ্যাপ্লিকেশন আইডি নোট করুন।
  11. ডেটা উত্সের ডানদিকে, পেন্সিল আইকনে ক্লিক করুন৷
  12. "টিউটোরিয়াল" এর পাশে, সক্ষম টগল এ ক্লিক করুন। এই টগলটি নতুন তৈরি অনুসন্ধান অ্যাপ্লিকেশনের জন্য টিউটোরিয়াল ডেটা উত্স সক্ষম করে৷
  13. "টিউটোরিয়াল" ডেটা উৎসের ডানদিকে, প্রদর্শন বিকল্পগুলিতে ক্লিক করুন।
  14. সমস্ত দিক পরীক্ষা করুন।
  15. সেভ এ ক্লিক করুন।
  16. সম্পন্ন ক্লিক করুন.

ওয়েব অ্যাপ্লিকেশন কনফিগার করুন

শংসাপত্র এবং অনুসন্ধান অ্যাপ্লিকেশন তৈরি করার পরে, নিম্নলিখিত মানগুলি অন্তর্ভুক্ত করতে অ্যাপ্লিকেশন কনফিগারেশন আপডেট করুন:

  1. কমান্ড লাইন থেকে, ডিরেক্টরিকে `ক্লাউড-সার্চ-স্যাম্পল/এন্ড-টু-এন্ড/সার্চ-ইন্টারফেস/পাবলিক'-এ পরিবর্তন করুন।
  2. একটি টেক্সট এডিটর দিয়ে app.js ফাইল খুলুন।
  3. ফাইলের শীর্ষে searchConfig ভেরিয়েবল খুঁজুন।
  4. পূর্বে তৈরি OAuth ক্লায়েন্ট আইডি দিয়ে [client-id] প্রতিস্থাপন করুন।
  5. পূর্ববর্তী বিভাগে উল্লিখিত অনুসন্ধান অ্যাপ্লিকেশন আইডি দিয়ে [application-id] প্রতিস্থাপন করুন।
  6. ফাইলটি সংরক্ষণ করুন।

অ্যাপ্লিকেশন চালান

এই কমান্ডটি চালানোর মাধ্যমে অ্যাপ্লিকেশন শুরু করুন:

npm run start

সূচক জিজ্ঞাসা করুন

অনুসন্ধান উইজেট ব্যবহার করে সূচক জিজ্ঞাসা করতে:

  1. আপনার ব্রাউজার খুলুন এবং http://localhost:8080 এ নেভিগেট করুন।
  2. আপনার পক্ষ থেকে ক্লাউড সার্চকে জিজ্ঞাসা করার জন্য অ্যাপটিকে অনুমোদন করতে সাইন ইন এ ক্লিক করুন।
  3. অনুসন্ধান বাক্সে, একটি প্রশ্ন লিখুন, যেমন "পরীক্ষা" শব্দটি এবং এন্টার টিপুন। পৃষ্ঠাটি ফলাফল নেভিগেট করার জন্য দিক এবং পৃষ্ঠা সংখ্যা নিয়ন্ত্রণ সহ ক্যোয়ারী ফলাফল প্রদর্শন করা উচিত।

কোড পর্যালোচনা

অবশিষ্ট বিভাগগুলি পরীক্ষা করে কিভাবে ইউজার ইন্টারফেস তৈরি করা হয়।

উইজেট লোড হচ্ছে

উইজেট এবং সম্পর্কিত লাইব্রেরি দুটি ধাপে লোড করা হয়। প্রথমত, বুটস্ট্র্যাপ স্ক্রিপ্ট লোড করা হয়:

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 সাইন-ইন এবং ক্লাউড অনুসন্ধান উইজেট লাইব্রেরিগুলিকে লোড করে৷

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();

  // ...

}

অনুসন্ধান ইন্টারফেস তৈরি করা হচ্ছে

অনুসন্ধান উইজেটের জন্য অনুসন্ধান ইনপুট এবং অনুসন্ধান ফলাফল ধরে রাখার জন্য অল্প পরিমাণে HTML মার্কআপ প্রয়োজন:

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();

অভিনন্দন, আপনি সফলভাবে টিউটোরিয়ালটি সম্পূর্ণ করেছেন! পরিষ্কার করার নির্দেশাবলীর জন্য চালিয়ে যান।

পূর্ববর্তী পরবর্তী