جستجوی بصری با ابزار ادراک وب

آسان برای استفاده از تعامل در دنیای واقعی.

Joe Medley

اگر هرگز نیازی به این کار نداشته باشند چه؟ اگر آنها بتوانند دوربین تلفن خود را به سمت کد UPC روی بسته بگیرند و سایت شما بتواند کارتریج مناسب و یک دکمه بزرگ قرمز "تغییر سفارش" را به آنها ارائه دهد، چه؟

به راه های دیگری برای استفاده از دوربین در سایت فکر کنید. سایتی را تصور کنید که از بررسی قیمت در فروشگاه پشتیبانی می کند. تصور کنید اطلاعاتی در مورد یک نمایشگاه موزه یا نشانگر تاریخی دریافت می کنید. تصور کنید در بازی هایی مانند geocaching یا scavenger hunt، نقاط دیدنی دنیای واقعی را شناسایی کنید.

جعبه ابزار درک وب این سناریوهای مبتنی بر دوربین را ممکن می‌سازد. در برخی موارد حتی می توانید بدون نوشتن کد یک تجربه ایجاد کنید.

چگونه کار می کند؟

جعبه ابزار ادراک وب منبع باز به شما کمک می کند جستجوی بصری را به وب سایت خود اضافه کنید. این یک جریان دوربین دستگاه را از طریق مجموعه‌ای از آشکارسازها عبور می‌دهد که اشیاء دنیای واقعی را که در اینجا "هدف‌ها" نامیده می‌شوند، به محتوای سایت شما نقشه‌برداری می‌کنند. این نقشه برداری با استفاده از داده های ساختاریافته (JSON-LD) در سایت شما تعریف شده است. با این داده ها، می توانید اطلاعات مناسب را در یک رابط کاربری قابل تنظیم ارائه دهید.

من به اندازه کافی از این به شما نشان خواهم داد تا طرز کار آن را بچشید. برای توضیح کامل، راهنمای شروع ، مرجع کیت ابزار ، دمو I/O Sandbox و نمونه نمایشی را بررسی کنید.

داده های ساخت یافته

جعبه ابزار نمی تواند هیچ هدفی را در دید دوربین پیدا کند. باید داده‌های JSON مرتبط را برای اهدافی که می‌خواهید تشخیص دهد به آن ارائه کنید. این داده همچنین حاوی اطلاعاتی در مورد اهدافی است که به کاربر نشان داده می شود.

داده ها تنها چیزی است که برای ایجاد یک تجربه کاربری مانند تصویر زیر نیاز دارید. اگر کار دیگری انجام ندهید، Web Perception Toolkit می تواند اهداف را شناسایی کند، سپس کارت ها را بر اساس اطلاعات ارائه شده در داده ها نشان داده و پنهان کند. این را خودتان با استفاده از نسخه نمایشی نقشه مصنوع ما امتحان کنید.

داده ها را با یک فایل داده پیوندی JSON به سایت خود اضافه کنید، که شامل برچسب <script> و نوع MIME "application/ld+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);
  }
}

قالب بندی کارت ها

Web Perception Toolkit قالب بندی داخلی کارت ها و دکمه ها را با شیوه نامه پیش فرض فراهم می کند. اما شما به راحتی می توانید خود را اضافه کنید. شی‌های Card و ActionButton ارائه‌شده حاوی ویژگی‌های style (در میان بسیاری دیگر) هستند که به شما امکان می‌دهند مهر سازمانی خود را بر ظاهر و احساس بگذارید. برای گنجاندن شیوه نامه پیش فرض، یک عنصر <link> را به صفحه خود اضافه کنید.

<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">

نتیجه گیری

همانطور که در بالا گفتم، این یک نگاه جامع به جعبه ابزار درک وب نیست. امیدواریم این حس به شما بدهد که چقدر آسان است که جستجوی بصری را به یک وب سایت اضافه کنید. با راهنمای شروع و نمونه نمایشی بیشتر بیاموزید. برای یادگیری کارهایی که می تواند انجام دهد، به اسناد جعبه ابزار مراجعه کنید.