वेब पर्सेप्शन टूलकिट की मदद से विज़ुअल तरीके से खोज करना

असल दुनिया से जुड़ी इंटरैक्टिविटी का इस्तेमाल करना आसान है.

Joe Medley
Joe Medley
क्या यह अच्छा नहीं होगा, अगर उपयोगकर्ता अपने कैमरे का इस्तेमाल करके आपकी साइट को खोज सकें? इसकी कल्पना करें. आपकी साइट का नाम Razor McShaveyface है. आपके ग्राहक आपको बताते हैं कि उन्हें अपने रेज़र के लिए, फिर से ऑर्डर करते समय सही कार्ट्रिज ढूंढने में समस्या आ रही है. उन्हें आपके प्रॉडक्ट की खोज के लिए सही कीवर्ड नहीं पता. सच कहें, तो शायद ऐसा कभी न हो.

अगर उन्हें कभी भी ऐसा करने की ज़रूरत नहीं पड़ती है, तो क्या होगा? क्या होगा, अगर वे अपने फ़ोन के कैमरे को पैकेज पर मौजूद यूपीसी कोड पर फ़ोकस कर पाएं और आपकी साइट उन्हें सही कार्ट्रिज और एक बड़ा लाल "फिर से ऑर्डर करें" बटन दिखा पाए?

इस बारे में सोचें कि साइट पर कैमरे का इस्तेमाल कैसे किया जा सकता है. मान लें कि ऐसी साइट है जिस पर स्टोर में जाकर कीमत देखने की सुविधा है. किसी संग्रहालय के प्रज़ेंटेशन या ऐतिहासिक मार्कर के बारे में जानकारी पाने की कल्पना करें. कल्पना करें कि गेम में असल दुनिया के लैंडमार्क की पहचान की जा रही हो. जैसे, जियोकैशिंग या स्काvenger हंट.

वेब पर ऑब्जेक्ट की पहचान करने वाले टूल की मदद से, कैमरे के आधार पर ये काम किए जा सकते हैं. कुछ मामलों में, कोड लिखे बिना भी बेहतर अनुभव बनाया जा सकता है.

यह कैसे काम करता है?

ओपन-सोर्स वेब परसेप्शन टूलकिट की मदद से, अपनी वेबसाइट पर विज़ुअल सर्च की सुविधा जोड़ी जा सकती है. यह डिवाइस के कैमरे की स्ट्रीम को डिटेक्टर के एक सेट से पास करता है. ये डिटेक्टर, असल दुनिया के ऑब्जेक्ट को आपकी साइट के कॉन्टेंट से मैप करते हैं. इन ऑब्जेक्ट को "टारगेट" कहा जाता है. इस मैपिंग को आपकी साइट पर स्ट्रक्चर्ड डेटा (JSON-LD) का इस्तेमाल करके तय किया जाता है. इस डेटा की मदद से, अपनी पसंद के मुताबिक बनाए गए यूज़र इंटरफ़ेस (यूआई) में सही जानकारी दिखाई जा सकती है.

हम आपको इसकी कुछ जानकारी देंगे, ताकि आपको यह पता चल सके कि यह कैसे काम करता है. पूरी जानकारी के लिए, शुरू करने से जुड़ी गाइड, टूलकिट का रेफ़रंस, 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 है. यह हर बार ट्रिगर होता है, जब कोई टारगेट मिलता है. टारगेट, असल दुनिया का कोई ऑब्जेक्ट या मार्कर हो सकता है. जैसे, बार कोड या क्यूआर कोड.

इस इवेंट का जवाब देने की प्रोसेस, किसी भी दूसरे इवेंट के जवाब देने की प्रोसेस जैसी ही है. हालांकि, इसमें एक अपवाद है. अगर इवेंट लागू नहीं किया जाता है, तो स्ट्रक्चर्ड डेटा का इस्तेमाल करके उपयोगकर्ता इंटरफ़ेस अपने-आप बन जाता है. इस व्यवहार को बदलने के लिए,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">

नतीजा

जैसा कि मैंने ऊपर बताया है, यह वेब पर उपयोगकर्ताओं के व्यवहार को समझने वाले टूलकिट के बारे में पूरी जानकारी नहीं है. हमें उम्मीद है कि इससे आपको पता चल गया होगा कि किसी वेबसाइट में विज़ुअल सर्च की सुविधा को जोड़ना कितना आसान है. शुरू करने के लिए गाइड और सैंपल डेमो की मदद से ज़्यादा जानें. टूलकिट के दस्तावेज़ को पढ़कर जानें कि यह क्या-क्या कर सकता है.