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

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

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

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

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

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

npm install

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

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

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

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

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

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

    1. Internal এ ক্লিক করুন এবং CREATE এ ক্লিক করুন। আরেকটি "OAuth সম্মতি" স্ক্রিন প্রদর্শিত হবে।

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

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

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

  7. Authorized JavaScript origins ক্ষেত্রে, ADD URI ক্লিক করুন। একটি খালি "URIs" ক্ষেত্র প্রদর্শিত হবে।

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

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

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

  11. ঠিক আছে ক্লিক করুন।

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

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

  1. গুগল অ্যাডমিন কনসোলে ফিরে যান।
  2. অ্যাপস আইকনে ক্লিক করুন। "অ্যাপস অ্যাডমিনিস্ট্রেশন" পৃষ্ঠাটি প্রদর্শিত হবে।
  3. Google Workspace এ ক্লিক করুন। "Apps Google Workspace administration" পৃষ্ঠাটি প্রদর্শিত হবে।
  4. নিচে স্ক্রোল করুন এবং ক্লাউড সার্চ এ ক্লিক করুন। "সেটিংস ফর গুগল ওয়ার্কস্পেস" পৃষ্ঠাটি প্রদর্শিত হবে।
  5. Search Applications এ ক্লিক করুন। "Search Applications" পৃষ্ঠাটি প্রদর্শিত হবে।
  6. হলুদ বৃত্তাকার + ক্লিক করুন। "একটি নতুন অনুসন্ধান অ্যাপ্লিকেশন তৈরি করুন" ডায়ালগটি প্রদর্শিত হবে।
  7. "প্রদর্শন নাম" ক্ষেত্রে, "টিউটোরিয়াল" লিখুন।
  8. তৈরি করুন ক্লিক করুন।
  9. নতুন তৈরি করা অনুসন্ধান অ্যাপ্লিকেশনের পাশে পেন্সিল আইকনে ক্লিক করুন ("অনুসন্ধান অ্যাপ্লিকেশন সম্পাদনা করুন")। "অ্যাপ্লিকেশনের বিবরণ অনুসন্ধান করুন" পৃষ্ঠাটি প্রদর্শিত হবে।
  10. আবেদন আইডিটি লক্ষ্য করুন।
  11. ডেটা সোর্স এর ডানদিকে, পেন্সিল আইকনে ক্লিক করুন।
  12. "টিউটোরিয়াল" এর পাশে, Enable toggle এ ক্লিক করুন। এই টগলটি নতুন তৈরি অনুসন্ধান অ্যাপ্লিকেশনের জন্য টিউটোরিয়াল ডেটা উৎস সক্ষম করে।
  13. "টিউটোরিয়াল" ডেটা সোর্সের ডানদিকে, Display options এ ক্লিক করুন।
  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. আপনার পক্ষ থেকে ক্লাউড সার্চ জিজ্ঞাসা করার জন্য অ্যাপটিকে অনুমোদন দিতে সাইন ইন এ ক্লিক করুন।
  3. অনুসন্ধান বাক্সে, "পরীক্ষা" শব্দটির মতো একটি প্রশ্ন লিখুন এবং এন্টার টিপুন। ফলাফলগুলি নেভিগেট করার জন্য পৃষ্ঠাটিতে দিক এবং পৃষ্ঠাকরণ নিয়ন্ত্রণ সহ প্রশ্নের ফলাফল প্রদর্শন করা উচিত।

কোডটি পর্যালোচনা করা হচ্ছে

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

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

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

সূচক.html
<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

দ্বিতীয়ত, স্ক্রিপ্ট প্রস্তুত হয়ে গেলে onLoad কলব্যাক ডাকা হয়। এরপর এটি Google API ক্লায়েন্ট, Google সাইন-ইন এবং ক্লাউড অনুসন্ধান উইজেট লাইব্রেরি লোড করে।

অ্যাপ.জেএস
/**
 * 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 দ্বারা পরিচালিত হয়।

অনুমোদন পরিচালনা

ব্যবহারকারীদের তাদের পক্ষ থেকে জিজ্ঞাসা করার জন্য অ্যাপটিকে অনুমোদন দিতে হবে। উইজেট ব্যবহারকারীদের অনুমোদনের জন্য অনুরোধ জানাতে পারে, তবে আপনি নিজে অনুমোদন পরিচালনা করে আরও ভালো ব্যবহারকারীর অভিজ্ঞতা অর্জন করতে পারেন।

অনুসন্ধান ইন্টারফেসের জন্য, ব্যবহারকারীর সাইন-ইন অবস্থার উপর নির্ভর করে অ্যাপটি দুটি ভিন্ন ভিউ উপস্থাপন করে।

সূচক.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>

ইনিশিয়ালাইজেশনের সময় সঠিক ভিউ সক্ষম করা হয় এবং সাইন-ইন এবং সাইন-আউট ইভেন্টগুলির জন্য হ্যান্ডলারগুলি কনফিগার করা হয়:

অ্যাপ.জেএস
/**
 * 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 মার্কআপের প্রয়োজন হয়:

সূচক.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>

ইনিশিয়ালাইজেশনের সময় উইজেটটি ইনিশিয়ালাইজ করা হয় এবং ইনপুট এবং কন্টেইনার উপাদানের সাথে আবদ্ধ হয়:

অ্যাপ.জেএস
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();

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

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