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

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

Joe Medley

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

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

Web Perception Toolkit מאפשר לבצע את התרחישים האלה שמבוססים על מצלמה. במקרים מסוימים אפשר אפילו ליצור חוויית משתמש בלי לכתוב קוד.

איך זה עובד?

ערכת הכלים של Web Perception Toolkit בקוד פתוח עוזרת לכם להוסיף חיפוש חזותי לאתר. המערכת מעבירה את הסטרימינג של מצלמת המכשיר דרך קבוצה של גלאי שממפים אובייקטים בעולם האמיתי, שנקראים כאן 'יעדים', לתוכן באתר. המיפוי הזה מוגדר באמצעות נתונים מובנים (JSON-LD) באתר שלכם. בעזרת הנתונים האלה תוכלו להציג את המידע הנכון בממשק משתמש שניתן להתאמה אישית.

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

נתונים מובְנים

ערכת הכלים לא יכולה למצוא כל יעד שמוצג בתצוגה של המצלמה. צריך לספק לו נתוני JSON מקושרים של היעדים שרוצים לזהות. הנתונים האלה מכילים גם מידע על היעדים שיוצגו למשתמש.

הנתונים האלה הם כל מה שדרוש כדי ליצור חוויית משתמש כמו זו שבתמונה שבהמשך. אם לא תבצעו פעולה נוספת, ערכת הכלים של Web Perception תוכל לזהות יעדים ולהציג ולהסתיר כרטיסים על סמך המידע שמופיע בנתונים. אתם יכולים לנסות זאת בעצמכם באמצעות הדגמה של artifact-map.

הוספת נתונים לאתר באמצעות קובץ נתונים מקושר בפורמט 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 מספקת עיצוב מובנה לכרטיסים וללחצנים באמצעות גיליון סגנונות ברירת המחדל. אבל אתם יכולים להוסיף בקלות סמלים משלכם. האובייקטים Card ו-ActionButton שסופקו מכילים מאפייני style (בין היתר) שמאפשרים להוסיף את חותמת הארגון למראה ולחוויה. כדי לכלול את גיליון הסגנונות שמוגדר כברירת מחדל, מוסיפים לדף רכיב <link>.

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

סיכום

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