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

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

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

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

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

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

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

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

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

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

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

إنّ البيانات هي كل ما تحتاجه لتوفير تجربة مستخدم مثل تلك الواردة في الصورة أدناه. في حال عدم اتّخاذ أي إجراء آخر، يمكن لأداة Web Perception Toolkit تحديد الاستهدافات، ثمّ عرض البطاقات وإخفاؤها استنادًا إلى المعلومات المقدَّمة في البيانات. يمكنك تجربتها بنفسك باستخدام الإصدار التجريبي من "خريطة العناصر".

تتوفّر الواجهة التلقائية باستخدام البيانات المرتبطة فقط.
الواجهة التلقائية.

أضِف بيانات إلى موقعك الإلكتروني باستخدام ملف بيانات مرتبط بتنسيق JSON، مع تضمينه باستخدام علامة <script> ونوع "application/ld+json" MIME.

<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. نأمل أن يمنحك ذلك فكرة عن مدى سهولة إضافة ميزة البحث المرئي إلى موقع إلكتروني. يمكنك الاطّلاع على مزيد من المعلومات من خلال دليل البدء وعيّنات دروس الشرح. اطّلِع على مستندات أدوات المساعدة لمعرفة ما يمكن أن تقدّمه.