অনুসন্ধান উইজেট ওয়েব অ্যাপ্লিকেশনের জন্য একটি কাস্টমাইজযোগ্য অনুসন্ধান ইন্টারফেস প্রদান করে। উইজেটটি বাস্তবায়নের জন্য শুধুমাত্র অল্প পরিমাণে HTML এবং JavaScript প্রয়োজন এবং সাধারণ অনুসন্ধান বৈশিষ্ট্যগুলিকে সক্ষম করে যেমন ফেসট এবং পেজিনেশন। এছাড়াও আপনি CSS এবং JavaScript দিয়ে ইন্টারফেসের কিছু অংশ কাস্টমাইজ করতে পারেন।
আপনার যদি উইজেট দ্বারা অফার করার চেয়ে বেশি নমনীয়তার প্রয়োজন হয়, তাহলে Query API ব্যবহার করার কথা বিবেচনা করুন। Query API এর সাথে একটি অনুসন্ধান ইন্টারফেস তৈরির তথ্যের জন্য, Query API এর সাথে একটি অনুসন্ধান ইন্টারফেস তৈরি করা পড়ুন।
একটি অনুসন্ধান ইন্টারফেস তৈরি করুন
অনুসন্ধান ইন্টারফেস নির্মাণের জন্য বেশ কয়েকটি পদক্ষেপের প্রয়োজন:
- একটি অনুসন্ধান অ্যাপ্লিকেশন কনফিগার করুন
- অ্যাপ্লিকেশনের জন্য একটি ক্লায়েন্ট আইডি তৈরি করুন
- অনুসন্ধান বাক্স এবং ফলাফলের জন্য HTML মার্কআপ যোগ করুন
- পৃষ্ঠায় উইজেট লোড করুন
- উইজেট আরম্ভ করুন
একটি অনুসন্ধান অ্যাপ্লিকেশন কনফিগার করুন
প্রতিটি অনুসন্ধান ইন্টারফেসে অ্যাডমিন কনসোলে সংজ্ঞায়িত একটি অনুসন্ধান অ্যাপ্লিকেশন থাকতে হবে। অনুসন্ধান অ্যাপ্লিকেশনটি প্রশ্নের জন্য অতিরিক্ত তথ্য প্রদান করে, যেমন ডেটা উত্স, দিক এবং অনুসন্ধানের গুণমান সেটিংস।
একটি অনুসন্ধান অ্যাপ্লিকেশন তৈরি করতে, একটি কাস্টম অনুসন্ধান অভিজ্ঞতা তৈরি করুন দেখুন।
অ্যাপ্লিকেশনের জন্য একটি ক্লায়েন্ট আইডি তৈরি করুন
Google ক্লাউড অনুসন্ধান API-এ অ্যাক্সেস কনফিগার করার ধাপগুলি ছাড়াও, আপনাকে অবশ্যই ওয়েব অ্যাপ্লিকেশনের জন্য একটি ক্লায়েন্ট আইডি তৈরি করতে হবে।
আপনি যখন প্রকল্পটি কনফিগার করেন:
- ওয়েব ব্রাউজার ক্লায়েন্ট টাইপ নির্বাচন করুন
- আপনার অ্যাপের মূল URI প্রদান করুন।
- তৈরি করা ক্লায়েন্ট আইডির নোট। পরবর্তী পদক্ষেপগুলি সম্পূর্ণ করতে আপনার ক্লায়েন্ট আইডির প্রয়োজন হবে। উইজেটের জন্য ক্লায়েন্ট সিক্রেটের প্রয়োজন নেই।
অতিরিক্ত তথ্যের জন্য, ক্লায়েন্ট-সাইড ওয়েব অ্যাপ্লিকেশনের জন্য OAuth 2.0 দেখুন।
HTML মার্কআপ যোগ করুন
উইজেটের কাজ করার জন্য অল্প পরিমাণে HTML প্রয়োজন। আপনাকে অবশ্যই প্রদান করতে হবে:
- অনুসন্ধান বাক্সের জন্য একটি
inputউপাদান। - পরামর্শ পপআপ অ্যাঙ্কর করার জন্য একটি উপাদান।
- অনুসন্ধান ফলাফল ধারণ করার জন্য একটি উপাদান।
- (ঐচ্ছিক) দিক নিয়ন্ত্রণগুলি ধারণ করার জন্য একটি উপাদান প্রদান করুন।
নিম্নলিখিত HTML স্নিপেট একটি অনুসন্ধান উইজেটের জন্য HTML দেখায়, যেখানে আবদ্ধ উপাদানগুলি তাদের id বৈশিষ্ট্য দ্বারা চিহ্নিত করা হয়:
উইজেট লোড করুন
উইজেটটি একটি লোডার স্ক্রিপ্টের মাধ্যমে গতিশীলভাবে লোড করা হয়। লোডার অন্তর্ভুক্ত করতে, দেখানো হিসাবে <script> ট্যাগ ব্যবহার করুন:
আপনাকে স্ক্রিপ্ট ট্যাগে একটি onload কলব্যাক প্রদান করতে হবে। লোডার প্রস্তুত হলে ফাংশনটি বলা হয়। লোডার প্রস্তুত হলে, API ক্লায়েন্ট, Google সাইন-ইন এবং ক্লাউড অনুসন্ধান মডিউলগুলি লোড করতে gapi.load() কল করে উইজেটটি লোড করা চালিয়ে যান।
সমস্ত মডিউল লোড হওয়ার পরে initializeApp() ফাংশনটি কল করা হয়।
উইজেট আরম্ভ করুন
প্রথমে, আপনার জেনারেট করা ক্লায়েন্ট আইডি এবং https://www.googleapis.com/auth/cloud_search.query স্কোপের সাথে gapi.client.init() বা gapi.auth2.init() কল করে ক্লায়েন্ট লাইব্রেরি শুরু করুন। এরপর, উইজেট কনফিগার করতে এবং এটিকে আপনার HTML উপাদানের সাথে আবদ্ধ করতে gapi.cloudsearch.widget.resultscontainer.Builder এবং gapi.cloudsearch.widget.searchbox.Builder ক্লাসগুলি ব্যবহার করুন৷
নিম্নলিখিত উদাহরণ দেখায় কিভাবে উইজেট শুরু করতে হয়:
উপরের উদাহরণটি কনফিগারেশনের জন্য দুটি ভেরিয়েবল উল্লেখ করে যা সংজ্ঞায়িত করা হয়েছে:
সাইন-ইন অভিজ্ঞতা কাস্টমাইজ করুন
ডিফল্টরূপে, উইজেট ব্যবহারকারীদের একটি ক্যোয়ারী টাইপ করা শুরু করার সময় অ্যাপটিতে সাইন-ইন করতে এবং অনুমোদন করতে অনুরোধ করে। ব্যবহারকারীদের জন্য আরো উপযোগী সাইন-ইন অভিজ্ঞতা অফার করতে আপনি ওয়েবসাইটগুলির জন্য Google সাইন-ইন ব্যবহার করতে পারেন৷
ব্যবহারকারীদের সরাসরি অনুমোদন করুন
ব্যবহারকারীর সাইন-ইন অবস্থা নিরীক্ষণ করতে এবং প্রয়োজনে সাইন-ইন বা সাইন-আউট ব্যবহারকারীদের জন্য সাইন ইন করুন Google ব্যবহার করুন। উদাহরণস্বরূপ, নিম্নলিখিত উদাহরণটি সাইন-ইন পরিবর্তনগুলি নিরীক্ষণ করতে isSignedIn অবস্থা পর্যবেক্ষণ করে এবং একটি বোতাম ক্লিক থেকে সাইন-ইন শুরু করতে GoogleAuth.signIn() পদ্ধতি ব্যবহার করে:
অতিরিক্ত বিবরণের জন্য, Google এর সাথে সাইন-ইন দেখুন।
স্বয়ংক্রিয়ভাবে সাইন-ইন ব্যবহারকারী
আপনি আপনার প্রতিষ্ঠানের ব্যবহারকারীদের পক্ষ থেকে অ্যাপ্লিকেশনটিকে প্রাক-অনুমোদিত করে সাইন-ইন অভিজ্ঞতাকে আরও সহজ করতে পারেন। ক্লাউড আইডেন্টিটি অ্যাওয়্যার প্রক্সি ব্যবহার করে অ্যাপ্লিকেশনটি রক্ষা করার জন্য এই কৌশলটিও কার্যকর।
অতিরিক্ত তথ্যের জন্য, আইটি অ্যাপের সাথে Google সাইন-ইন ব্যবহার করুন দেখুন।
ইন্টারফেস কাস্টমাইজ করুন
আপনি কৌশলগুলির সমন্বয়ের মাধ্যমে অনুসন্ধান ইন্টারফেসের চেহারা পরিবর্তন করতে পারেন:
- CSS দিয়ে শৈলী ওভাররাইড করুন
- একটি অ্যাডাপ্টার সঙ্গে উপাদান সাজাইয়া
- অ্যাডাপ্টারের সাহায্যে কাস্টম উপাদান তৈরি করুন
CSS দিয়ে শৈলী ওভাররাইড করুন
সার্চ উইজেট স্টাইল সাজেশন এবং ফলাফলের উপাদানের পাশাপাশি পৃষ্ঠা সংখ্যা নিয়ন্ত্রণের জন্য নিজস্ব CSS সহ আসে। আপনি প্রয়োজন হিসাবে এই উপাদান restyle করতে পারেন.
লোডের সময়, অনুসন্ধান উইজেট গতিশীলভাবে তার ডিফল্ট স্টাইলশীট লোড করে। অ্যাপ্লিকেশন স্টাইলশীটগুলি লোড হওয়ার পরে এটি ঘটে, নিয়মগুলির অগ্রাধিকার বাড়ায়৷ আপনার নিজস্ব শৈলীগুলি ডিফল্ট শৈলীর উপর অগ্রাধিকার নিশ্চিত করতে, পূর্বনির্ধারক নির্বাচকদের ডিফল্ট নিয়মগুলির নির্দিষ্টতা বাড়াতে ব্যবহার করুন।
উদাহরণস্বরূপ, নথিতে একটি স্ট্যাটিক link বা style ট্যাগে লোড করা হলে নিম্নলিখিত নিয়মের কোন প্রভাব নেই।
.cloudsearch_suggestion_container {
font-size: 14px;
}
পরিবর্তে, পৃষ্ঠায় ঘোষিত পূর্বপুরুষের ধারকটির আইডি বা শ্রেণির সাথে নিয়মটি যোগ্যতা অর্জন করুন।
#suggestions_anchor .cloudsearch_suggestion_container {
font-size: 14px;
}
উইজেট দ্বারা উত্পাদিত সমর্থন ক্লাসের একটি তালিকা এবং উদাহরণের জন্য, সমর্থিত CSS ক্লাস রেফারেন্স দেখুন।
একটি অ্যাডাপ্টার সঙ্গে উপাদান সাজাইয়া
রেন্ডারিংয়ের আগে একটি উপাদান সাজানোর জন্য, একটি অ্যাডাপ্টার তৈরি করুন এবং রেজিস্টার করুন যা সাজসজ্জার পদ্ধতিগুলির মধ্যে একটি প্রয়োগ করে যেমন decorateSuggestionElement বা decorateSearchResultElement.
উদাহরণস্বরূপ, নিম্নলিখিত অ্যাডাপ্টারগুলি পরামর্শ এবং ফলাফল উপাদানগুলিতে একটি কাস্টম শ্রেণী যুক্ত করে৷
উইজেট শুরু করার সময় অ্যাডাপ্টার নিবন্ধন করতে, সংশ্লিষ্ট Builder ক্লাসের setAdapter() পদ্ধতি ব্যবহার করুন:
ডেকোরেটররা কন্টেইনার উপাদানের পাশাপাশি যেকোনো শিশু উপাদানের বৈশিষ্ট্য পরিবর্তন করতে পারে। প্রসাধন সময় শিশু উপাদান যোগ বা সরানো হতে পারে. যাইহোক, উপাদানগুলিতে কাঠামোগত পরিবর্তন করা হলে, সাজসজ্জার পরিবর্তে সরাসরি উপাদানগুলি তৈরি করার কথা বিবেচনা করুন।
অ্যাডাপ্টারের সাহায্যে কাস্টম উপাদান তৈরি করুন
একটি সাজেশন, ফেসেট কন্টেইনার বা সার্চ রেজাল্টের জন্য একটি কাস্টম এলিমেন্ট তৈরি করতে, একটি অ্যাডাপ্টার তৈরি করুন এবং রেজিস্টার করুন যা createSuggestionElement , createFacetResultElement বা createSearchResultElement প্রয়োগ করে।
নিম্নলিখিত অ্যাডাপ্টারগুলি এইচটিএমএল <template> ট্যাগ ব্যবহার করে কাস্টম পরামর্শ এবং অনুসন্ধান ফলাফল উপাদান তৈরির চিত্র তুলে ধরে।
উইজেট আরম্ভ করার সময় অ্যাডাপ্টার নিবন্ধন করতে, সংশ্লিষ্ট Builder ক্লাসের setAdapter() পদ্ধতি ব্যবহার করুন:
createFacetResultElement সাথে কাস্টম ফ্যাসেট উপাদান তৈরি করা বেশ কয়েকটি বিধিনিষেধ সাপেক্ষে:
- একটি বালতি টগল করার জন্য ব্যবহারকারীরা ক্লিক করার জন্য আপনাকে CSS ক্লাস
cloudsearch_facet_bucket_clickableসংযুক্ত করতে হবে। - আপনাকে অবশ্যই প্রতিটি বালতি সিএসএস ক্লাস
cloudsearch_facet_bucket_containerসহ একটি ধারণকারী উপাদানে মুড়ে দিতে হবে। - আপনি বালতিগুলি প্রতিক্রিয়াতে প্রদর্শিত হওয়ার চেয়ে আলাদা ক্রমে রেন্ডার করতে পারবেন না।
উদাহরণস্বরূপ, নিম্নলিখিত স্নিপেট চেক বক্সের পরিবর্তে লিঙ্কগুলি ব্যবহার করে দিকগুলিকে রেন্ডার করে৷
অনুসন্ধান আচরণ কাস্টমাইজ করুন
অনুসন্ধান অ্যাপ্লিকেশন সেটিংস একটি অনুসন্ধান ইন্টারফেসের জন্য ডিফল্ট কনফিগারেশন প্রতিনিধিত্ব করে এবং স্থির। ডায়নামিক ফিল্টার বা দিকগুলি বাস্তবায়ন করতে, যেমন ব্যবহারকারীদের ডেটা উত্স টগল করার অনুমতি দেওয়া, আপনি একটি অ্যাডাপ্টারের সাথে অনুসন্ধানের অনুরোধটিকে বাধা দিয়ে অনুসন্ধান অ্যাপ্লিকেশন সেটিংস ওভাররাইড করতে পারেন৷
এক্সিকিউশনের আগে সার্চ এপিআই- তে করা অনুরোধগুলি সংশোধন করতে interceptSearchRequest পদ্ধতির সাথে একটি অ্যাডাপ্টার প্রয়োগ করুন।
উদাহরণ স্বরূপ, নিম্নলিখিত অ্যাডাপ্টার ব্যবহারকারী-নির্বাচিত উৎসে প্রশ্নগুলিকে সীমাবদ্ধ করার অনুরোধগুলিকে বাধা দেয়:
উইজেট শুরু করার সময় অ্যাডাপ্টার নিবন্ধন করতে, ResultsContainer তৈরি করার সময় setAdapter() পদ্ধতি ব্যবহার করুন
উত্স দ্বারা ফিল্টার করার জন্য একটি নির্বাচন বাক্স প্রদর্শন করতে নিম্নলিখিত HTML ব্যবহার করা হয়:
নিম্নলিখিত কোডটি পরিবর্তনের জন্য শোনে, নির্বাচন সেট করে এবং প্রয়োজনে প্রশ্নটি পুনরায় কার্যকর করে।
আপনি অ্যাডাপ্টারে interceptSearchResponse প্রয়োগ করে অনুসন্ধান প্রতিক্রিয়া আটকাতে পারেন।
API সংস্করণটি পিন করুন
ডিফল্টরূপে উইজেট API এর সর্বশেষ স্থিতিশীল সংস্করণ ব্যবহার করে। একটি নির্দিষ্ট সংস্করণে লক করতে, উইজেট শুরু করার আগে cloudsearch.config/apiVersion কনফিগারেশন প্যারামিটারটিকে পছন্দের সংস্করণে সেট করুন।
এপিআই সংস্করণটি ডিফল্ট হবে 1.0 যদি সেট না করা বা একটি অবৈধ মান সেট করা হয়।
উইজেট সংস্করণটি পিন করুন
অনুসন্ধান ইন্টারফেসে অপ্রত্যাশিত পরিবর্তন এড়াতে, দেখানো হিসাবে cloudsearch.config/clientVersion কনফিগারেশন প্যারামিটার সেট করুন:
gapi.config.update('cloudsearch.config/clientVersion', 1.1);
উইজেট সংস্করণ ডিফল্ট 1.0 হবে যদি সেট না করা হয় বা একটি অবৈধ মান সেট করা হয়।
অনুসন্ধান ইন্টারফেস সুরক্ষিত
অনুসন্ধানের ফলাফলে অত্যন্ত সংবেদনশীল তথ্য রয়েছে। ওয়েব অ্যাপ্লিকেশনগুলিকে সুরক্ষিত করার জন্য সর্বোত্তম অনুশীলনগুলি অনুসরণ করুন, বিশেষত ক্লিকজ্যাকিং আক্রমণের বিরুদ্ধে৷
আরও তথ্যের জন্য, OWASP গাইড প্রকল্প দেখুন
ডিবাগিং সক্ষম করুন
অনুসন্ধান উইজেটের জন্য ডিবাগিং চালু করতে interceptSearchRequest ব্যবহার করুন। যেমন:
if (!request.requestOptions) {
// Make sure requestOptions is populated
request.requestOptions = {};
}
// Enable debugging
request.requestOptions.debugOptions = {enableDebugging: true}
return request;