חיפוש ויזואלי באמצעות כלי התפיסה באינטרנט

קל להשתמש באינטראקטיביות בעולם האמיתי.

ג'ו מדלי

נכון שזה יהיה נהדר אם משתמשים יוכלו לחפש באתר שלך באמצעות המצלמה שלהם? דמיינו את זה. האתר שלך הוא Razor McShaveyface. לקוחות מספרים לכם שהם מתקשים למצוא את המחסניות הנכונות לסכין הגיל שלהם כשהם מזמינים מחדש. הם לא יודעים מהן מילות המפתח הנכונות לחיפוש המוצר שלכם. והאמת היא שסביר להניח שהם אף פעם לא יעשו זאת.

מה אם הם לא צריכים לעשות זאת אף פעם? מה יקרה אם הם יוכלו לכוון את המצלמה של הטלפון לקוד קוד מוצר אוניברסלי (UPC) על החבילה, והאתר יוכל להציג לו את המחסנית המתאימה ולחצן אדום גדול ל"הזמנה מחדש"?

נסו לחשוב על דרכים אחרות לשימוש במצלמה באתר. נגיד אתר שתומך בבדיקת מחירים בחנות. תארו לעצמכם שתוכלו לקבל מידע על מוצג במוזיאון או סמל היסטורי. דמיינו איך מזהים ציוני דרך בעולם האמיתי במשחקים כמו גיאוקצ'ינג או ציד אוצרות.

בעזרת ערכת הכלים לתפיסת אינטרנט, התרחישים מבוססי-המצלמה מתאפשרים. במקרים מסוימים אפשר אפילו ליצור חוויה בלי לכתוב קוד.

איך זה עובד?

בעזרת קוד פתוח לניהול התפיסה באינטרנט, תוכלו להוסיף חיפוש ויזואלי לאתר שלכם. הוא מעביר זרם של מצלמת המכשיר דרך קבוצת גלאים שממפים אובייקטים מהעולם האמיתי, שנקראים כאן 'יעדים', לתוכן באתר שלכם. המיפוי הזה מוגדר באמצעות נתונים מובנים (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">

סיכום

כפי שאמרתי למעלה, זו לא סקירה מקיפה של הכלי לתפיסת האינטרנט. אני מקווה שהוא עוזר לכם להבין עד כמה קל להוסיף חיפוש חזותי לאתר. מידע נוסף מופיע במדריך תחילת העבודה ובהדגמות לדוגמה. כדאי לעיין במסמכי התיעוד של ערכת הכלים כדי להבין מה אפשר לעשות.