การโต้ตอบในชีวิตจริงที่ใช้งานง่าย
จะเกิดอะไรขึ้นหากผู้เรียนไม่เคยต้องดำเนินการดังกล่าว จะเกิดอะไรขึ้นหากลูกค้าสามารถชี้กล้องของโทรศัพท์ไปที่รหัส UPC บนแพ็กเกจ และเว็บไซต์ของคุณแสดงตลับหมึกที่ถูกต้องพร้อมปุ่ม "สั่งซื้ออีกครั้ง" สีแดงขนาดใหญ่
ลองนึกถึงวิธีอื่นๆ ที่คุณสามารถใช้กล้องในเว็บไซต์ ลองนึกภาพเว็บไซต์ที่รองรับการตรวจสอบราคาที่ร้านค้า ลองนึกภาพว่าคุณได้รับข้อมูลเกี่ยวกับนิทรรศการของพิพิธภัณฑ์หรือเครื่องหมายทางประวัติศาสตร์ ลองนึกภาพการระบุจุดสังเกตในชีวิตจริงในเกม เช่น การหาสมบัติหรือล่าสมบัติ
Web Perception Toolkit ช่วยให้สถานการณ์เหล่านี้ซึ่งอิงตามกล้องเป็นไปได้ ในบางกรณี คุณยังสร้างประสบการณ์การใช้งานได้โดยไม่ต้องเขียนโค้ด
หลักการทำงาน
Web Perception Toolkit แบบโอเพนซอร์สจะช่วยคุณเพิ่มการค้นหาด้วยภาพลงในเว็บไซต์ โดยส่งสตรีมจากกล้องของอุปกรณ์ผ่านชุดเครื่องตรวจจับที่จับคู่วัตถุในชีวิตจริงซึ่งเรียกว่า "เป้าหมาย" กับเนื้อหาในเว็บไซต์ การแมปนี้กำหนดโดยใช้ Structured Data (JSON-LD) ในเว็บไซต์ ข้อมูลนี้จะช่วยให้คุณนำเสนอข้อมูลที่ถูกต้องใน UI ที่ปรับแต่งได้
เราจะแสดงให้คุณเห็นพอสมควรเพื่อให้คุณเห็นภาพว่าวิธีนี้ทํางานอย่างไร ดูคำอธิบายทั้งหมดได้ในคู่มือเริ่มต้นใช้งาน ข้อมูลอ้างอิงเกี่ยวกับชุดเครื่องมือ การสาธิตแซนด์บ็อกซ์ I/O และตัวอย่างการสาธิต
ข้อมูลที่มีโครงสร้าง
เครื่องมือชุดนี้ไม่สามารถค้นหาเป้าหมายใดก็ได้ในมุมมองของกล้อง คุณต้องระบุข้อมูล JSON ที่ลิงก์สำหรับเป้าหมายที่ต้องการให้ระบบจดจำ ข้อมูลนี้ยังมีข้อมูลเกี่ยวกับเป้าหมายที่จะแสดงต่อผู้ใช้ด้วย
ข้อมูลนี้เป็นสิ่งที่คุณต้องใช้ในการสร้างประสบการณ์ของผู้ใช้ดังที่แสดงในรูปภาพด้านล่าง หากไม่ดําเนินการใดๆ เลย Web Perception Toolkit จะระบุเป้าหมาย จากนั้นแสดงและซ่อนการ์ดตามข้อมูลที่ให้ไว้ในข้อมูล ลองใช้อาร์ติแฟกต์แผนที่ Demo นี้ด้วยตัวคุณเอง
เพิ่มข้อมูลลงในเว็บไซต์ด้วยไฟล์ข้อมูลที่ลิงก์ 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 ซึ่งจะทํางานทุกครั้งที่พบเป้าหมาย เป้าหมายอาจเป็นวัตถุในชีวิตจริงหรือเครื่องหมาย เช่น บาร์โค้ดหรือคิวอาร์โค้ด
กระบวนการตอบสนองต่อเหตุการณ์นี้เหมือนกับเหตุการณ์อื่นๆ ที่มีข้อยกเว้นตามที่ได้กล่าวไว้แล้ว หากคุณไม่ได้ติดตั้งใช้งานเหตุการณ์ ระบบจะสร้างอินเทอร์เฟซผู้ใช้โดยอัตโนมัติโดยใช้ Structured Data หากต้องการลบล้างลักษณะการทํางานนี้ ให้เริ่มตัวจัดการเหตุการณ์ด้วยการเรียก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">
บทสรุป
ดังที่ได้กล่าวไว้ข้างต้น นี่เป็นภาพรวมคร่าวๆ ของชุดเครื่องมือการรับรู้เว็บ เราหวังว่าบทความนี้จะแสดงให้เห็นว่าการเพิ่มการค้นหาด้วยภาพลงในเว็บไซต์นั้นง่ายเพียงใด ดูข้อมูลเพิ่มเติมจากคู่มือการเริ่มต้นใช้งานและตัวอย่างการสาธิต อ่านเอกสารประกอบของชุดเครื่องมือเพื่อดูความสามารถของชุดเครื่องมือ