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

سهولة الاستخدام للتفاعل على أرض الواقع

ألن يكون من الرائع أن يتمكن المستخدمون من البحث في موقعك الإلكتروني باستخدام الكاميرا؟ تخيل هذا. موقعك هو Razor McShaveyface. يخبرك عملاؤك أنهم يواجهون صعوبة في العثور على الخراطيش المناسبة للحلاقة عند إعادة الطلب. ولا يعرفون الكلمات الرئيسية المناسبة للبحث عن المنتج. ونكون صادقين، ربما لن يحدث ذلك أبدًا.

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

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

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

How does it work?

مجموعة أدوات تصور الويب مفتوحة المصدر تساعدك في إضافة بحث مرئي إلى موقع الويب الخاص بك. وهو يمرِّر بث كاميرا الجهاز من خلال مجموعة من أدوات الرصد التي تعيِّن صورًا لكائنات في العالم الواقعي، تُسمى هنا "الأهداف"، إلى المحتوى على موقعك الإلكتروني. يتم تحديد عملية الربط هذه باستخدام البيانات المنظَّمة (JSON-LD) على موقعك الإلكتروني. باستخدام هذه البيانات، يمكنك تقديم المعلومات الصحيحة في واجهة مستخدم قابلة للتخصيص.

سأوضح لك ما يكفي من هذا لإعطائك لمحة عن طريقة عمله. للحصول على شرح كامل، يمكنك الاطّلاع على دليل البدء ومرجع الأدوات والعرض التوضيحي لمؤتمر I/O في وضع الحماية ونماذج تجريبية.

البيانات المنظَّمة

لا يمكن لمجموعة الأدوات العثور على أي هدف في الكاميرا. يجب عليك تزويده ببيانات JSON المرتبطة للأهداف التي تريد أن يتعرف عليها. وتحتوي هذه البيانات أيضًا على معلومات حول تلك الأهداف التي سيتم عرضها للمستخدم.

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

أضِف بيانات إلى موقعك الإلكتروني باستخدام ملف بيانات مرتبط بتنسيق 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);
  }
}

تنسيق البطاقات

توفر مجموعة أدوات تصور الويب تنسيقًا مضمنًا للبطاقات والأزرار مع ورقة الأنماط الافتراضية. ولكن يمكنك بسهولة إضافة طلباتك الخاصة. يحتوي العنصران Card وActionButton اللذان تم تقديمهما على سمات style (من بين العديد من العناصر الأخرى) التي تتيح لك وضع طابعك التنظيمي على الشكل والأسلوب. لتضمين ورقة الأنماط التلقائية، أضِف عنصر <link> إلى صفحتك.

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

الخلاصة

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