বাস্তব-বিশ্বের ইন্টারঅ্যাক্টিভিটি ব্যবহার করা সহজ।
যদি তাদের কখনই প্রয়োজন না হয়? যদি তারা তাদের ফোনের ক্যামেরাকে প্যাকেজে থাকা UPC কোডে নির্দেশ করতে পারে এবং আপনার সাইট তাদের সঠিক কার্টিজ এবং একটি বড় লাল "পুনঃক্রম" বোতাম দিয়ে উপস্থাপন করতে পারে?
আপনি একটি সাইটে একটি ক্যামেরা ব্যবহার করতে পারেন অন্যান্য উপায় সম্পর্কে চিন্তা করুন. এমন একটি সাইট কল্পনা করুন যা দোকানের মধ্যে মূল্য যাচাই সমর্থন করে। একটি জাদুঘর প্রদর্শনী বা ঐতিহাসিক মার্কার সম্পর্কে তথ্য পাওয়ার কল্পনা করুন। জিওক্যাচিং বা স্ক্যাভেঞ্জার হান্টের মতো গেমগুলিতে বাস্তব-বিশ্বের ল্যান্ডমার্ক চিহ্নিত করার কল্পনা করুন।
ওয়েব পারসেপশন টুলকিট এই ক্যামেরা ভিত্তিক পরিস্থিতিকে সম্ভব করে তোলে। কিছু ক্ষেত্রে আপনি কোড না লিখেও একটি অভিজ্ঞতা তৈরি করতে পারেন।
এটা কিভাবে কাজ করে?
ওপেন সোর্স ওয়েব পারসেপশন টুলকিট আপনাকে আপনার ওয়েবসাইটে ভিজ্যুয়াল সার্চ যোগ করতে সাহায্য করে। এটি ডিটেক্টরের একটি সেটের মাধ্যমে একটি ডিভাইস ক্যামেরা স্ট্রীম পাস করে যা আপনার সাইটের সামগ্রীতে বাস্তব-বিশ্বের বস্তুগুলিকে ম্যাপ করে, এখানে "লক্ষ্য" বলা হয়। এই ম্যাপিং আপনার সাইটে স্ট্রাকচার্ড ডেটা (JSON-LD) ব্যবহার করে সংজ্ঞায়িত করা হয়েছে। এই ডেটা দিয়ে, আপনি একটি কাস্টমাইজযোগ্য UI-তে সঠিক তথ্য উপস্থাপন করতে পারেন।
এটি কীভাবে কাজ করে তার স্বাদ দেওয়ার জন্য আমি আপনাকে যথেষ্ট দেখাব। সম্পূর্ণ ব্যাখ্যার জন্য, শুরু করার নির্দেশিকা, টুলকিট রেফারেন্স , I/O স্যান্ডবক্স ডেমো এবং নমুনা ডেমো দেখুন।
স্ট্রাকচার্ড ডেটা
টুলকিট ক্যামেরার ভিউতে কোনো টার্গেট খুঁজে পায় না। আপনি যে লক্ষ্যগুলি চিনতে চান তার জন্য আপনাকে অবশ্যই লিঙ্কযুক্ত JSON ডেটা প্রদান করতে হবে। এই ডেটাতে সেই লক্ষ্যগুলি সম্পর্কে তথ্য রয়েছে যা ব্যবহারকারীকে দেখানো হবে৷
নীচের চিত্রের মতো একটি ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে আপনার যা দরকার তা হল ডেটা৷ আপনি যদি অন্য কিছু না করেন, তাহলে ওয়েব পারসেপশন টুলকিট টার্গেট শনাক্ত করতে পারে, তারপর ডেটাতে প্রদত্ত তথ্যের উপর ভিত্তি করে কার্ড দেখাতে এবং লুকাতে পারে। আমাদের আর্টিফ্যাক্ট-ম্যাপ ডেমো ব্যবহার করে নিজের জন্য এটি চেষ্টা করুন।
একটি <script> ট্যাগ এবং "application/ld+json" MIME প্রকার ব্যবহার করে অন্তর্ভুক্ত একটি JSON লিঙ্কযুক্ত ডেটা ফাইলের সাথে আপনার সাইটে ডেটা যোগ করুন।
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
ফাইল নিজেই এই মত কিছু দেখায়:
[
{
"@context": "https://schema.googleapis.com/",
"@type": "ARArtifact",
"arTarget": {
"@type": "Barcode",
"text": "012345678912"
},
"arContent": {
"@type": "WebPage",
"url": "http://localhost:8080/demo/artifact-map/products/product1.html",
"name": "Product 1",
"description": "This is a product with a barcode",
"image": "http://localhost:8080/demo/artifact-map/products/product1.png"
}
}
]
ব্যবহারকারীর অভিজ্ঞতা
আপনি যদি ডিফল্ট ব্যবহারকারীর অভিজ্ঞতার চেয়ে বেশি চান? টুলকিট আপনাকে লাইফসাইকেল ইভেন্ট, কার্ড এবং বোতাম অবজেক্ট দেয় যাতে সেই ইভেন্টগুলির আশেপাশে ব্যবহারকারীর অভিজ্ঞতা তৈরি করা যায় এবং কার্ড স্টাইল করার একটি সহজ উপায়। আমি আমাদের শুরু করা গাইডের উপর ভিত্তি করে কোড সহ এর কিছুটা দেখাতে যাচ্ছি।
সবচেয়ে গুরুত্বপূর্ণ জীবনচক্র ইভেন্ট হল PerceivedResults , যেটি প্রতিবার লক্ষ্য পাওয়া গেলে গুলি করা হয়। একটি লক্ষ্য একটি বাস্তব-বিশ্বের বস্তু বা একটি মার্কার যেমন একটি বার কোড বা QR কোড হতে পারে।
এই ইভেন্টে সাড়া দেওয়ার প্রক্রিয়াটি অন্য যে কোনও ইভেন্টের মতোই একটি ব্যতিক্রম সহ ইতিমধ্যেই উল্লেখ করা হয়েছে৷ আপনি যদি ইভেন্টটি বাস্তবায়ন না করেন, তাহলে স্ট্রাকচার্ড ডেটা ব্যবহার করে একটি ইউজার ইন্টারফেস স্বয়ংক্রিয়ভাবে তৈরি হয়। এই আচরণটি ওভাররাইড করতে event.preventDefault() কল করে আপনার ইভেন্ট হ্যান্ডলার শুরু করুন।
const container = document.querySelector('.container');
async function onPerceivedResults(event) {
// preventDefault() to stop default result Card from showing.
event.preventDefault();
// Process the event.
}
window.addEventListener(PerceptionToolkit.Events.PerceivedResults, onPerceivedResults);
এর ঘটনা আরো ঘনিষ্ঠভাবে তাকান. ইভেন্টে নিজেই চিহ্নিতকারী এবং লক্ষ্যগুলির অ্যারে রয়েছে যা এটি খুঁজে পেয়েছে এবং হারিয়েছে। পৃথিবীতে যখন লক্ষ্যবস্তু পাওয়া যায়, এমনকি আগুন এবং পাসের event.found পাওয়া যায়। একইভাবে, লক্ষ্যগুলি ক্যামেরা ভিউ থেকে পাস করলে ইভেন্টটি আবার ফায়ার হয়, হারিয়ে যাওয়া বস্তুগুলিকে event.lost এ পাস করে। এটি হাত এবং মার্কার নড়াচড়ার জন্য অ্যাকাউন্টে সহায়তা করে: ক্যামেরাগুলি পর্যাপ্তভাবে ধরে রাখা যায় না, মার্কারগুলি ফেলে দেওয়া হয়, এই ধরনের জিনিস।
async function onPerceivedResults(event) {
// preventDefault() to stop default result Card from showing
event.preventDefault();
if (container.childNodes.length > 0) { return; }
const { found, lost } = event.detail;
// Deal with lost and found objects.
}
এরপরে, টুলকিটটি যা পাওয়া গেছে তার উপর ভিত্তি করে আপনি একটি উপযুক্ত কার্ড দেখান।
async function onPerceivedResults(event) {
event.preventDefault();
if (container.childNodes.length > 0) { return; }
const { found, lost } = event.detail;
if (found.length === 0 && lost.length === 0) {
// Object not found.
// Show a card with an offer to show the catalog.
} else if (found.length > 0) {
// Object found.
// Show a card with a reorder button.
}
}
কার্ড এবং বোতামগুলি যোগ করা কেবল সেগুলিকে তাত্ক্ষণিক করার এবং একটি মূল বস্তুতে যুক্ত করার বিষয়। যেমন:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
অবশেষে, এখানে পুরো জিনিসটি কেমন দেখাচ্ছে। ব্যবহারকারীর অভিজ্ঞতায় আমি যে সুবিধাগুলি যোগ করেছি তা লক্ষ্য করুন। মার্কারটি পাওয়া যায় বা না পাওয়া যায়, আমি পরিস্থিতিতে যা সবচেয়ে উপযোগী বলে মনে করি তাতে এক-ক্লিক অ্যাক্সেস প্রদান করি।
async function onPerceivedResults(event) {
// preventDefault() to stop default result Card from showing
event.preventDefault();
if (container.childNodes.length > 0) { return; }
const { found, lost } = event.detail;
const { ActionButton, Card } = PerceptionToolkit.Elements;
if (found.length === 0 && lost.length === 0) {
//Make a view catalog button.
const button = new ActionButton();
button.label = 'View catalog';
button.addEventListener('click', () => {
card.close();
//Run code to launch a catalog.
});
//Make a card for the button.
const card = new Card();
card.src = 'We wish we could help, but that\'s not our razor. Would you like to see our catalog?';
card.appendChild(button);
//Tell the toolkit it does not keep the card around
// if it finds something it recognizes.
card.dataset.notRecognized = true;
container.appendChild(card);
} else if (found.length > 0) {
//Make a reorder button.
const button = new ActionButton();
button.label = 'Reorder';
botton.addEventListener('click', () => {
card.close();
//Run code to reorder.
})
const card = new Card();
card.src = found[0].content;
card.appendChild(button);
container.appendChild(card);
}
}
ফরম্যাটিং কার্ড
ওয়েব পারসেপশন টুলকিট ডিফল্ট স্টাইলশীট সহ কার্ড এবং বোতামগুলির জন্য অন্তর্নির্মিত বিন্যাস প্রদান করে। কিন্তু আপনি সহজেই আপনার নিজের যোগ করতে পারেন. প্রদত্ত Card এবং ActionButton অবজেক্টগুলিতে style বৈশিষ্ট্য (অন্য অনেকের মধ্যে) রয়েছে যা আপনাকে আপনার সাংগঠনিক স্ট্যাম্প দেখতে এবং অনুভব করতে দেয়। ডিফল্ট স্টাইলশীট অন্তর্ভুক্ত করতে, আপনার পৃষ্ঠায় একটি <link> উপাদান যোগ করুন।
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
উপসংহার
আমি উপরে বলেছি, এটি ওয়েব পারসেপশন টুলকিটের একটি সম্পূর্ণ চেহারা নয়। আশা করি এটি আপনাকে একটি ধারনা দেয় যে একটি ওয়েবসাইটে ভিজ্যুয়াল অনুসন্ধান যোগ করা কতটা সহজ। শুরু করার নির্দেশিকা এবং নমুনা ডেমো সহ আরও জানুন। এটি কী করতে পারে তা শিখতে টুলকিট ডকুমেন্টেশনে খনন করুন৷