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

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

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

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

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

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

npm install

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

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

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

  2. বাম দিকের নেভিগেশনে, ক্রেডেনশিয়ালস- এ ক্লিক করুন।

  3. "Create credentials" ড্রপ-ডাউন তালিকা থেকে "OAuth client ID " নির্বাচন করুন। "Create OAuth client ID" পৃষ্ঠাটি প্রদর্শিত হবে।

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

    1. Internal-এ ক্লিক করুন এবং CREATE-এ ক্লিক করুন। আরেকটি "OAuth consent" স্ক্রিন আসবে।

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

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

  6. Name ফিল্ডে "tutorial" লিখুন।

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

  8. URIs ফিল্ডে http://localhost:8080 লিখুন।

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

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

  11. OK ক্লিক করুন।

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

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

  1. গুগল অ্যাডমিন কনসোলে ফিরে যান।
  2. অ্যাপস আইকনে ক্লিক করুন। 'অ্যাপস অ্যাডমিনিস্ট্রেশন' পেজটি প্রদর্শিত হবে।
  3. Google Workspace-এ ক্লিক করুন। 'Apps Google Workspace administration' পৃষ্ঠাটি প্রদর্শিত হবে।
  4. নিচে স্ক্রোল করুন এবং ক্লাউড সার্চ-এ ক্লিক করুন। 'গুগল ওয়ার্কস্পেসের জন্য সেটিংস' পৃষ্ঠাটি প্রদর্শিত হবে।
  5. ‘ সার্চ অ্যাপ্লিকেশনস’-এ ক্লিক করুন। ‘সার্চ অ্যাপ্লিকেশনস’ পেজটি প্রদর্শিত হবে।
  6. গোলাকার হলুদ + চিহ্নটিতে ক্লিক করুন। "একটি নতুন সার্চ অ্যাপ্লিকেশন তৈরি করুন" ডায়ালগ বক্সটি প্রদর্শিত হবে।
  7. ডিসপ্লে নেম ফিল্ডে 'tutorial' লিখুন।
  8. তৈরি করুন- এ ক্লিক করুন।
  9. নতুন তৈরি করা সার্চ অ্যাপ্লিকেশনের পাশে থাকা পেন্সিল আইকনে ("সার্চ অ্যাপ্লিকেশন সম্পাদনা করুন") ক্লিক করুন। "সার্চ অ্যাপ্লিকেশনের বিবরণ" পৃষ্ঠাটি প্রদর্শিত হবে।
  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. আপনার পক্ষ থেকে ক্লাউড সার্চে তথ্য অনুসন্ধানের জন্য অ্যাপটিকে অনুমোদন দিতে সাইন ইন-এ ক্লিক করুন।
  3. সার্চ বক্সে 'test' শব্দটির মতো একটি কোয়েরি লিখে এন্টার চাপুন। পেজটিতে কোয়েরির ফলাফল প্রদর্শিত হবে এবং ফলাফল নেভিগেট করার জন্য ফেসেট ও পেজিনেশন কন্ট্রোলও থাকবে।

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

বাকি অংশগুলোতে ইউজার ইন্টারফেসটি কীভাবে তৈরি করা হয় তা আলোচনা করা হয়েছে।

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

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

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

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

অ্যাপ.জেএস
/**
 * 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>

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

অ্যাপ.জেএস
/**
 * 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>

ইনিশিয়ালাইজেশনের সময় উইজেটটি ইনিশিয়ালাইজ করা হয় এবং ইনপুট ও কন্টেইনার এলিমেন্টগুলোর সাথে বাইন্ড করা হয়:

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

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

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