البحث المرئي باستخدام مجموعة أدوات تصور الويب

تفاعل واقعي سهل الاستخدام

Joe Medley

ماذا لو لم يحتاجوا إلى ذلك مطلقًا؟ ماذا لو كان بإمكانهم توجيه كاميرا هاتفهم نحو رمز UPC على الحزمة وكان بإمكان موقعك الإلكتروني عرض الخرطوشة المناسبة وزر "إعادة الطلب" كبير باللون الأحمر؟

فكِّر في طرق أخرى يمكنك من خلالها استخدام الكاميرا على موقع إلكتروني. تخيل موقعًا إلكترونيًا يتيح التحقّق من السعر في المتجر. تخيل الحصول على معلومات عن معرض في متحف أو علامة تاريخية. تخيل تحديد معالم العالم الحقيقي في ألعاب مثل الإخفاء والبحث بمساعدة عناصر أخرى.

تجعل مجموعة أدوات تصور الويب هذه السيناريوهات المستندة إلى الكاميرا ممكنة. في بعض الحالات، يمكنك حتى إنشاء تجربة بدون كتابة رموز.

كيف تعمل هذه الميزة؟

تساعدك Web Perception Toolkit المفتوح المصدر في إضافة ميزة البحث المرئي إلى موقعك الإلكتروني. وهو يمرّر بث كاميرا الجهاز من خلال مجموعة من أدوات الرصد التي تربط أجسامًا حقيقية تُعرف باسم "الأهداف" لمحتوى موقعك الإلكتروني. يتم تحديد عملية الربط هذه باستخدام البيانات المنظَّمة (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، ويتم تنشيطه في كل مرة يتم فيها العثور على هدف. يمكن أن يكون الهدف عنصرًا في العالم الواقعي أو علامة مثل رمز شريطي أو رمز استجابة سريعة.

إنّ عملية الاستجابة لهذا الحدث هي نفسها أيّ حدث آخر مع استثناء سبقت الإشارة إليه. في حال عدم تنفيذ الحدث، يتم تلقائيًا إنشاء واجهة مستخدِم باستخدام البيانات المنظَّمة. لإلغاء هذا السلوك، شغِّل معالِج الأحداث من خلال الاتصال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">

الخاتمة

كما ذكرت في البداية، هذه ليست نظرة شاملة على مجموعة أدوات Web Perception . نأمل أن يمنحك فكرة عن مدى سهولة إضافة البحث المرئي إلى موقع ويب. يمكنك الاطّلاع على مزيد من المعلومات من خلال دليل البدء وعيّنات دروس الشرح. اطّلِع على مستندات أدوات المساعدة لمعرفة ما يمكن أن تقدّمه .