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

असल दुनिया से इंटरैक्ट करने में आसान.

जो मेडली

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

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

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

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

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

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

मैं आपको इसकी काफ़ी जानकारी दिखाऊँगी, ताकि आपको इसके काम करने का तरीका दिखाया जा सके. पूरी जानकारी के लिए, शुरुआत शुरू करना गाइड, टूलकिट रेफ़रंस, I/O सैंडबॉक्स डेमो, और सैंपल डेमो देखें.

स्ट्रक्चर्ड डेटा

टूलकिट को कैमरे के व्यू में कोई टारगेट नहीं मिला. आपको इसे उन टारगेट के लिए लिंक किया गया JSON डेटा देना होगा जिनकी पहचान आपको करनी है. इस डेटा में उन टारगेट के बारे में भी जानकारी शामिल होगी जो उपयोगकर्ता को दिखाए जाएंगे.

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

डिफ़ॉल्ट इंटरफ़ेस.

JSON से लिंक की गई डेटा फ़ाइल की मदद से, अपनी साइट में डेटा जोड़ें. इसमें <script> टैग और "application/ld+json" MIME टाइप शामिल हैं.

<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">

नतीजा

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