असल दुनिया से जुड़ी इंटरैक्टिविटी का इस्तेमाल करना आसान है.
अगर उन्हें कभी इसकी ज़रूरत न पड़े, तो क्या करना चाहिए? क्या होगा, अगर वे अपने फ़ोन के कैमरे को पैकेज पर मौजूद यूपीसी कोड पर फ़ोकस कर पाएं और आपकी साइट उन्हें सही कार्ट्रिज और एक बड़ा लाल "फिर से ऑर्डर करें" बटन दिखा पाए?
किसी साइट पर कैमरे का इस्तेमाल करने के अन्य तरीकों के बारे में सोचें. मान लें कि ऐसी साइट है जिस पर स्टोर में जाकर कीमत देखने की सुविधा है. किसी संग्रहालय के प्रज़ेंटेशन या ऐतिहासिक मार्कर के बारे में जानकारी पाने की कल्पना करें. जियोकैशिंग या साफ़-सफ़ाई वाले हंट जैसे गेम में, असल दुनिया की मशहूर जगहों की पहचान करने के बारे में सोचें.
वेब पर ऑब्जेक्ट की पहचान करने वाले टूल की मदद से, कैमरे के आधार पर ये काम किए जा सकते हैं. कुछ मामलों में, कोड लिखे बिना भी बेहतर अनुभव बनाया जा सकता है.
यह कैसे काम करता है?
ओपन-सोर्स वेब परसेप्शन टूलकिट की मदद से, अपनी वेबसाइट पर विज़ुअल सर्च की सुविधा जोड़ी जा सकती है. यह डिवाइस के कैमरे की स्ट्रीम को डिटेक्टर के एक सेट से पास करता है. ये डिटेक्टर, असल दुनिया के ऑब्जेक्ट को आपकी साइट के कॉन्टेंट से मैप करते हैं. इन ऑब्जेक्ट को "टारगेट" कहा जाता है. इस मैपिंग को आपकी साइट पर स्ट्रक्चर्ड डेटा (JSON-LD) का इस्तेमाल करके तय किया जाता है. इस डेटा की मदद से, अपनी पसंद के मुताबिक बनाए गए यूज़र इंटरफ़ेस (यूआई) में सही जानकारी दिखाई जा सकती है.
हम आपको इसकी कुछ जानकारी देंगे, ताकि आपको यह पता चल सके कि यह कैसे काम करता है. पूरी जानकारी के लिए, शुरू करने से जुड़ी गाइड, टूलकिट का रेफ़रंस, I/O Sandbox का डेमो, और सैंपल डेमो देखें.
स्ट्रक्चर्ड डेटा
इस टूलकिट को कैमरे में कोई टारगेट नहीं मिलता. आपको उन टारगेट के लिए लिंक किए गए 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">
नतीजा
जैसा कि मैंने ऊपर बताया है, यह वेब पर उपयोगकर्ताओं के व्यवहार को समझने वाले टूलकिट के बारे में पूरी जानकारी नहीं है. उम्मीद है कि इससे आपको इस बात की जानकारी मिलेगी कि किसी वेबसाइट में विज़ुअल खोज को जोड़ना कितना आसान है. शुरू करने के लिए गाइड और सैंपल डेमो की मदद से ज़्यादा जानें. टूलकिट के दस्तावेज़ को पढ़कर जानें कि यह क्या-क्या कर सकता है.