অনুসন্ধান উইজেট দিয়ে একটি অনুসন্ধান ইন্টারফেস তৈরি করুন

অনুসন্ধান উইজেটটি ওয়েব অ্যাপ্লিকেশনগুলির জন্য একটি কাস্টমাইজযোগ্য অনুসন্ধান ইন্টারফেস প্রদান করে। এটি বাস্তবায়নের জন্য ন্যূনতম HTML এবং জাভাস্ক্রিপ্ট প্রয়োজন এবং এটি ফ্যাসেট এবং পৃষ্ঠাঙ্কনের মতো সাধারণ বৈশিষ্ট্যগুলিকে সমর্থন করে। আপনি CSS এবং জাভাস্ক্রিপ্ট দিয়েও ইন্টারফেসটি কাস্টমাইজ করতে পারেন।

যদি আপনার আরও নমনীয়তার প্রয়োজন হয়, তাহলে Query API ব্যবহার করুন। Query API দিয়ে একটি অনুসন্ধান ইন্টারফেস তৈরি করা দেখুন।

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

অনুসন্ধান ইন্টারফেস তৈরি করতে এই পদক্ষেপগুলি প্রয়োজন:

1. একটি অনুসন্ধান অ্যাপ্লিকেশন কনফিগার করুন।
2. অ্যাপ্লিকেশনটির জন্য একটি ক্লায়েন্ট আইডি তৈরি করুন।
3. অনুসন্ধান বাক্স এবং ফলাফলের জন্য HTML মার্কআপ যোগ করুন।
4. পৃষ্ঠায় উইজেটটি লোড করুন।
5. উইজেটটি আরম্ভ করুন।

একটি অনুসন্ধান অ্যাপ্লিকেশন কনফিগার করুন

প্রতিটি অনুসন্ধান ইন্টারফেসের জন্য অ্যাডমিন কনসোলে সংজ্ঞায়িত একটি অনুসন্ধান অ্যাপ্লিকেশন প্রয়োজন। অ্যাপ্লিকেশনটি কোয়েরি সেটিংস প্রদান করে, যেমন ডেটা সোর্স, দিক এবং অনুসন্ধানের মানের পরামিতি।

একটি অনুসন্ধান অ্যাপ্লিকেশন তৈরি করতে, একটি কাস্টম অনুসন্ধান অভিজ্ঞতা তৈরি করুন দেখুন।

অ্যাপ্লিকেশনটির জন্য একটি ক্লায়েন্ট আইডি তৈরি করুন

ক্লাউড সার্চ এপিআই-তে অ্যাক্সেস কনফিগার করার ধাপগুলি ছাড়াও, আপনার ওয়েব অ্যাপ্লিকেশনের জন্য একটি ক্লায়েন্ট আইডি তৈরি করুন।

একটি প্রকল্প কনফিগার করুন

প্রকল্পটি কনফিগার করার সময়:

• ওয়েব ব্রাউজার ক্লায়েন্টের ধরণ নির্বাচন করুন।
• আপনার অ্যাপের মূল URI প্রদান করুন।
• ক্লায়েন্ট আইডিটি লক্ষ্য করুন। উইজেটের জন্য ক্লায়েন্ট সিক্রেটের প্রয়োজন হয় না।

আরও তথ্যের জন্য, ক্লায়েন্ট-সাইড ওয়েব অ্যাপ্লিকেশনের জন্য OAuth 2.0 দেখুন।

HTML মার্কআপ যোগ করুন

উইজেটের জন্য এই HTML উপাদানগুলির প্রয়োজন:

• অনুসন্ধান বাক্সের জন্য একটি input উপাদান।
• পরামর্শ ডায়ালগটি টেকসই করার জন্য একটি উপাদান।
• অনুসন্ধান ফলাফলের জন্য একটি উপাদান।
• (ঐচ্ছিক) ফ্যাসেট নিয়ন্ত্রণের জন্য একটি উপাদান।

এই স্নিপেটটি তাদের id বৈশিষ্ট্য দ্বারা চিহ্নিত উপাদানগুলি দেখায়:

পরিবেশন/উইজেট/পাবলিক/with_css/index.html

GitHub-এ দেখুন

<div id="search_bar">
  <div id="suggestions_anchor">
    <input type="text" id="search_input" placeholder="Search for...">
  </div>
</div>
<div id="facet_results"></div>
<div id="search_results"></div>

উইজেটটি লোড করুন

<script> ট্যাগ ব্যবহার করে লোডারটি অন্তর্ভুক্ত করুন:

পরিবেশন/উইজেট/পাবলিক/with_css/index.html

GitHub-এ দেখুন

<!-- Google API loader -->
<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

একটি onload কলব্যাক প্রদান করুন। লোডার প্রস্তুত হলে, API ক্লায়েন্ট, Google সাইন-ইন এবং ক্লাউড অনুসন্ধান মডিউল লোড করতে gapi.load() এ কল করুন।

পরিবেশন/উইজেট/পাবলিক/with_css/app.js

GitHub-এ দেখুন

/**
* 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)
}

উইজেটটি আরম্ভ করুন

আপনার ক্লায়েন্ট আইডি এবং https://www.googleapis.com/auth/cloud_search.query স্কোপ দিয়ে gapi.client.init() অথবা gapi.auth2.init() ব্যবহার করে ক্লায়েন্ট লাইব্রেরিটি শুরু করুন। উইজেটটি কনফিগার এবং বাইন্ড করতে বিল্ডার ক্লাসগুলি ব্যবহার করুন।

উদাহরণ আরম্ভ:

পরিবেশন/উইজেট/পাবলিক/with_css/app.js

GitHub-এ দেখুন

/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
function initializeApp() {
  // Load client ID & search app.
  loadConfiguration().then(function() {
    // Set API version to v1.
    gapi.config.update('cloudsearch.config/apiVersion', 'v1');

    // Build the result container and bind to DOM elements.
    var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
      .setSearchApplicationId(searchApplicationName)
      .setSearchResultsContainerElement(document.getElementById('search_results'))
      .setFacetResultsContainerElement(document.getElementById('facet_results'))
      .build();

    // Build the search box and bind to DOM elements.
    var searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
      .setSearchApplicationId(searchApplicationName)
      .setInput(document.getElementById('search_input'))
      .setAnchor(document.getElementById('suggestions_anchor'))
      .setResultsContainer(resultsContainer)
      .build();
  }).then(function() {
    // Init API/oauth client w/client ID.
    return gapi.auth2.init({
        'clientId': clientId,
        'scope': 'https://www.googleapis.com/auth/cloud_search.query'
    });
  });
}

কনফিগারেশন ভেরিয়েবল:

পরিবেশন/উইজেট/পাবলিক/with_css/app.js

GitHub-এ দেখুন

/**
* Client ID from OAuth credentials.
*/
var clientId = "...apps.googleusercontent.com";

/**
* Full resource name of the search application, such as
* "searchapplications/<your-id>".
*/
var searchApplicationName = "searchapplications/...";

সাইন-ইন অভিজ্ঞতা কাস্টমাইজ করুন

ব্যবহারকারীরা টাইপ করা শুরু করলে উইজেটটি সাইন ইন করতে অনুরোধ করে। একটি উপযুক্ত অভিজ্ঞতার জন্য আপনি ওয়েবসাইটের জন্য গুগল সাইন-ইন ব্যবহার করতে পারেন।

ব্যবহারকারীদের সরাসরি অনুমোদন দিন

সাইন-ইন অবস্থা পর্যবেক্ষণ এবং পরিচালনা করতে Sign In With Google ব্যবহার করুন। এই উদাহরণে একটি বোতাম ক্লিক করলে GoogleAuth.signIn() ব্যবহার করা হয়:

সার্ভিং/উইজেট/পাবলিক/উইথ_সাইনইন/অ্যাপ.জেএস

GitHub-এ দেখুন

// Handle sign-in/sign-out.
let auth = gapi.auth2.getAuthInstance();

// Watch for sign in status changes to update the UI appropriately.
let onSignInChanged = (isSignedIn) => {
  // Update UI to switch between signed in/out states
  // ...
}
auth.isSignedIn.listen(onSignInChanged);
onSignInChanged(auth.isSignedIn.get()); // Trigger with current status.

// Connect sign-in/sign-out buttons.
document.getElementById("sign-in").onclick = function(e) {
  auth.signIn();
};
document.getElementById("sign-out").onclick = function(e) {
  auth.signOut();
};

ব্যবহারকারীদের স্বয়ংক্রিয়ভাবে সাইন ইন করুন

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

ইন্টারফেসটি কাস্টমাইজ করুন

আপনি উইজেটের চেহারা পরিবর্তন করতে পারেন:

• CSS এর মাধ্যমে স্টাইলগুলিকে ওভাররাইড করা।
• অ্যাডাপ্টার দিয়ে উপাদান সাজানো।
• একটি অ্যাডাপ্টার দিয়ে কাস্টম উপাদান তৈরি করা।

CSS দিয়ে স্টাইল ওভাররাইড করুন

উইজেটটিতে নিজস্ব CSS রয়েছে। এটিকে ওভাররাইড করতে, নির্দিষ্টতা বাড়াতে পূর্বপুরুষ নির্বাচক ব্যবহার করুন:

#suggestions_anchor .cloudsearch_suggestion_container {
  font-size: 14px;
}

সমর্থিত CSS ক্লাসের রেফারেন্স দেখুন।

অ্যাডাপ্টার দিয়ে উপাদানগুলি সাজান

রেন্ডার করার আগে উপাদানগুলি পরিবর্তন করার জন্য একটি অ্যাডাপ্টার তৈরি এবং নিবন্ধন করুন। এই উদাহরণে একটি কাস্টম CSS ক্লাস যোগ করা হয়েছে:

পরিবেশন/উইজেট/পাবলিক/with_decorated_element/app.js

GitHub-এ দেখুন

/**
 * Search box adapter that decorates suggestion elements by
 * adding a custom CSS class.
 */
function SearchBoxAdapter() {}
SearchBoxAdapter.prototype.decorateSuggestionElement = function(element) {
  element.classList.add('my-suggestion');
}

/**
 * Results container adapter that decorates suggestion elements by
 * adding a custom CSS class.
 */
function ResultsContainerAdapter() {}
ResultsContainerAdapter.prototype.decorateSearchResultElement = function(element) {
  element.classList.add('my-result');
}

আরম্ভের সময় অ্যাডাপ্টারটি নিবন্ধন করুন:

পরিবেশন/উইজেট/পাবলিক/with_decorated_element/app.js

GitHub-এ দেখুন

// Build the result container and bind to DOM elements.
var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setAdapter(new ResultsContainerAdapter())
  // ...
  .build();

// Build the search box and bind to DOM elements.
var searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setAdapter(new SearchBoxAdapter())
  // ...
  .build();

একটি অ্যাডাপ্টার দিয়ে কাস্টম উপাদান তৈরি করুন

কাস্টম UI কম্পোনেন্ট তৈরি করতে createSuggestionElement , createFacetResultElement , অথবা createSearchResultElement প্রয়োগ করুন। এই উদাহরণে HTML <template> ট্যাগ ব্যবহার করা হয়েছে:

পরিবেশন/উইজেট/পাবলিক/উইথ_কাস্টম_এলিমেন্ট/অ্যাপ.জেএস

GitHub-এ দেখুন

/**
 * Search box adapter that overrides creation of suggestion elements.
 */
function SearchBoxAdapter() {}
SearchBoxAdapter.prototype.createSuggestionElement = function(suggestion) {
  let template = document.querySelector('#suggestion_template');
  let fragment = document.importNode(template.content, true);
  fragment.querySelector('.suggested_query').textContent = suggestion.suggestedQuery;
  return fragment.firstElementChild;
}

/**
 * Results container adapter that overrides creation of result elements.
 */
function ResultsContainerAdapter() {}
ResultsContainerAdapter.prototype.createSearchResultElement = function(result) {
  let template = document.querySelector('#result_template');
  let fragment = document.importNode(template.content, true);
  fragment.querySelector('.title').textContent = result.title;
  fragment.querySelector('.title').href = result.url;
  let snippetText = result.snippet != null ?
    result.snippet.snippet : '';
  fragment.querySelector('.query_snippet').innerHTML = snippetText;
  return fragment.firstElementChild;
}

অ্যাডাপ্টারটি নিবন্ধন করুন:

পরিবেশন/উইজেট/পাবলিক/উইথ_কাস্টম_এলিমেন্ট/অ্যাপ.জেএস

GitHub-এ দেখুন

// Build the result container and bind to DOM elements.
var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setAdapter(new ResultsContainerAdapter())
  // ...
  .build();

// Build the search box and bind to DOM elements.
var searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setAdapter(new SearchBoxAdapter())
  // ...
  .build();

কাস্টম ফ্যাসেট এলিমেন্টগুলিকে অবশ্যই এই নিয়মগুলি অনুসরণ করতে হবে:

• ক্লিকযোগ্য উপাদানের সাথে cloudsearch_facet_bucket_clickable সংযুক্ত করুন।
• প্রতিটি বালতি একটি cloudsearch_facet_bucket_container এ মুড়িয়ে দিন।
• প্রতিক্রিয়া থেকে বাকেট অর্ডার বজায় রাখুন।

উদাহরণস্বরূপ, নিম্নলিখিত স্নিপেটটি চেক বাক্সের পরিবর্তে লিঙ্ক ব্যবহার করে দিকগুলি রেন্ডার করে।

পরিবেশন/উইজেট/পাবলিক/উইথ_কাস্টম_ফ্যাসেট/অ্যাপ.জেএস

GitHub-এ দেখুন

/**
 * Results container adapter that intercepts requests to dynamically
 * change which sources are enabled based on user selection.
 */
function ResultsContainerAdapter() {
  this.selectedSource = null;
}

ResultsContainerAdapter.prototype.createFacetResultElement = function(result) {
  // container for the facet
  var container = document.createElement('div');

  // Add a label describing the facet (operator/property)
  var label = document.createElement('div')
  label.classList.add('facet_label');
  label.textContent = result.operatorName;
  container.appendChild(label);

  // Add each bucket
  for(var i in result.buckets) {
    var bucket = document.createElement('div');
    bucket.classList.add('cloudsearch_facet_bucket_container');

    // Extract & render value from structured value
    // Note: implementation of renderValue() not shown
    var bucketValue = this.renderValue(result.buckets[i].value)
    var link = document.createElement('a');
    link.classList.add('cloudsearch_facet_bucket_clickable');
    link.textContent = bucketValue;
    bucket.appendChild(link);
    container.appendChild(bucket);
  }
  return container;
}

// Renders a value for user display
ResultsContainerAdapter.prototype.renderValue = function(value) {
  // ...
}

অনুসন্ধান আচরণ কাস্টমাইজ করুন

অ্যাডাপ্টারের সাহায্যে অনুরোধগুলিকে আটকে রেখে অনুসন্ধান অ্যাপ্লিকেশন সেটিংস ওভাররাইড করুন। কার্যকর করার আগে অনুরোধগুলি সংশোধন করতে interceptSearchRequest বাস্তবায়ন করুন। এই উদাহরণটি একটি নির্বাচিত উৎসের মধ্যে প্রশ্নগুলিকে সীমাবদ্ধ করে:

সার্ভিং/উইজেট/পাবলিক/উইথ_রিকোয়েস্ট_ইন্টারসেপ্টর/অ্যাপ.জেএস

GitHub-এ দেখুন

/**
 * Results container adapter that intercepts requests to dynamically
 * change which sources are enabled based on user selection.
 */
function ResultsContainerAdapter() {
  this.selectedSource = null;
}
ResultsContainerAdapter.prototype.interceptSearchRequest = function(request) {
  if (!this.selectedSource || this.selectedSource == 'ALL') {
    // Everything selected, fall back to sources defined in the search
    // application.
    request.dataSourceRestrictions = null;
  } else {
    // Restrict to a single selected source.
    request.dataSourceRestrictions = [
      {
        source: {
          predefinedSource: this.selectedSource
        }
      }
    ];
  }
  return request;
}

অ্যাডাপ্টারটি নিবন্ধন করুন:

সার্ভিং/উইজেট/পাবলিক/উইথ_রিকোয়েস্ট_ইন্টারসেপ্টর/অ্যাপ.জেএস

GitHub-এ দেখুন

var resultsContainerAdapter = new ResultsContainerAdapter();
// Build the result container and bind to DOM elements.
var resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setAdapter(resultsContainerAdapter)
  // ...
  .build();

উৎস অনুসারে ফিল্টার করার জন্য একটি নির্বাচন বাক্স প্রদর্শন করতে নিম্নলিখিত HTML ব্যবহার করা হয়:

পরিবেশন/উইজেট/পাবলিক/উইথ_রিকোয়েস্ট_ইন্টারসেপ্টর/ইনডেক্স.এইচটিএমএল

GitHub-এ দেখুন

<div>
  <span>Source</span>
  <select id="sources">
    <option value="ALL">All</option>
    <option value="GOOGLE_GMAIL">Gmail</option>
    <option value="GOOGLE_DRIVE">Drive</option>
    <option value="GOOGLE_SITES">Sites</option>
    <option value="GOOGLE_GROUPS">Groups</option>
    <option value="GOOGLE_CALENDAR">Calendar</option>
    <option value="GOOGLE_KEEP">Keep</option>
  </select>
</div>

নিম্নলিখিত কোডটি পরিবর্তনটি শোনে, নির্বাচন সেট করে এবং প্রয়োজনে কোয়েরিটি পুনরায় কার্যকর করে।

সার্ভিং/উইজেট/পাবলিক/উইথ_রিকোয়েস্ট_ইন্টারসেপ্টর/অ্যাপ.জেএস

GitHub-এ দেখুন

// Handle source selection
document.getElementById('sources').onchange = (e) => {
  resultsContainerAdapter.selectedSource = e.target.value;
  let request = resultsContainer.getCurrentRequest();
  if (request.query) {
    // Re-execute if there's a valid query. The source selection
    // will be applied in the interceptor.
    resultsContainer.resetState();
    resultsContainer.executeRequest(request);
  }
}

আপনি অ্যাডাপ্টারে interceptSearchResponse প্রয়োগ করে অনুসন্ধান প্রতিক্রিয়াটিও আটকাতে পারেন।

পিন ভার্সন

• API সংস্করণ : শুরু করার আগে cloudsearch.config/apiVersion সেট করুন।
• উইজেট সংস্করণ : gapi.config.update('cloudsearch.config/clientVersion', 1.1) ব্যবহার করুন।

সেট না করা থাকলে উভয়ই ডিফল্ট 1.0।

উদাহরণস্বরূপ, উইজেটটিকে ১.১ সংস্করণে পিন করতে:

পরিবেশন/উইজেট/পাবলিক/বেসিক/অ্যাপ.জেএস

GitHub-এ দেখুন

gapi.config.update('cloudsearch.config/apiVersion', 'v1');

অনুসন্ধান ইন্টারফেসটি সুরক্ষিত করুন

ওয়েব অ্যাপ্লিকেশনের জন্য নিরাপত্তার সর্বোত্তম অনুশীলনগুলি অনুসরণ করুন, বিশেষ করে ক্লিকজ্যাকিং প্রতিরোধ করার জন্য।

ডিবাগিং সক্ষম করুন

ডিবাগিং সক্ষম করতে interceptSearchRequest ব্যবহার করুন:

if (!request.requestOptions) {
  request.requestOptions = {};
}
request.requestOptions.debugOptions = {enableDebugging: true};
return request;