อินเทอร์แอกทีฟที่ใช้งานง่าย
คงจะดีไม่น้อยหากผู้ใช้สามารถค้นหาไซต์ของคุณโดยใช้กล้องของพวกเขาได้ ลองจินตนาการดู เว็บไซต์ของคุณคือ Razor McShaveyface ลูกค้าบอกว่าพวกเขามีปัญหาในการหาตลับหมึกที่ถูกต้องสำหรับมีดโกนเมื่อสั่งซื้อใหม่ พวกเขาไม่ทราบ คีย์เวิร์ดที่ถูกต้องสำหรับการค้นหาผลิตภัณฑ์ของคุณ บอกตรงๆ กันว่า พวกเขาอาจจะไม่ทำแบบนั้น
จะทำอย่างไรหากพวกเขาไม่จำเป็นต้องทำ จะเป็นอย่างไรหากพวกเขาเล็งกล้องโทรศัพท์ไปที่ รหัส UPC บนแพ็กเกจ และเว็บไซต์ของคุณก็อาจนำเสนอตลับหมึกที่ถูกต้อง และปุ่ม "สั่งซื้อใหม่" สีแดงขนาดใหญ่
ลองคิดถึงวิธีอื่นๆ ที่จะใช้กล้องในเว็บไซต์ สมมติว่ามีเว็บไซต์ ที่รองรับการตรวจสอบราคาในร้านค้า ลองจินตนาการดูว่าได้ข้อมูล การจัดแสดงในพิพิธภัณฑ์หรือเครื่องหมายทางประวัติศาสตร์ ลองจินตนาการถึงการระบุสถานที่สำคัญในโลกแห่งความเป็นจริง ในเกมอย่างการล่าสัตว์ (Geocaching) หรือการล่าขุมทรัพย์
Web Perception Toolkit ทำให้สถานการณ์ที่อิงตามกล้องเช่นนี้เป็นไปได้ ในบางกรณี คุณสามารถสร้าง ประสบการณ์ได้โดยไม่ต้องเขียนโค้ด
ลักษณะการจัดกิจกรรม
Web Perception Toolkit แบบโอเพนซอร์สช่วยให้คุณเพิ่มการค้นหาภาพลงในเว็บไซต์ได้ โดยจะส่งสตรีมจากกล้องของอุปกรณ์ผ่านชุดตัวตรวจจับที่ทำแผนที่วัตถุในโลกจริงซึ่งเรียกว่า "เป้าหมาย" กับเนื้อหาในเว็บไซต์ของคุณ การแมปนี้กำหนดโดยใช้ข้อมูลที่มีโครงสร้าง (JSON-LD) ในเว็บไซต์ของคุณ ด้วยข้อมูลนี้ คุณจะสามารถนำเสนอข้อมูลที่ถูกต้องใน UI ที่ปรับแต่งได้
ฉันจะสาธิตให้คุณดูก่อนว่าทำงานอย่างไร สำหรับคำอธิบายทั้งหมด โปรดดูที่คู่มือการเริ่มต้นใช้งาน ข้อมูลอ้างอิงชุดเครื่องมือ การสาธิตแซนด์บ็อกซ์ I/O และตัวอย่างการสาธิต
Structured Data
ชุดเครื่องมือไม่พบเฉพาะเป้าหมายในมุมมองของกล้อง คุณต้องระบุข้อมูล 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);
}
}
การจัดรูปแบบการ์ด
Web Perception Toolkit มีการจัดรูปแบบการ์ดและปุ่มต่างๆ ที่มีสไตล์ชีตเริ่มต้นอยู่แล้ว แต่คุณสามารถเพิ่มเองได้ง่ายๆ ออบเจ็กต์ Card
และ ActionButton
ที่ระบุมีพร็อพเพอร์ตี้ style
(และอีกมากมาย) ที่ช่วยให้คุณกำหนดตราประทับขององค์กรให้กับรูปลักษณ์ หากต้องการรวมสไตล์ชีตเริ่มต้น ให้เพิ่มองค์ประกอบ <link>
ลงในหน้าเว็บ
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
บทสรุป
อย่างที่กล่าวไปข้างต้น ข้อมูลนี้เป็นเพียงตัวอย่างบางส่วนของชุดเครื่องมือการรับรู้เว็บ หวังว่าวิธีนี้จะช่วยให้คุณเห็นว่าการเพิ่มการค้นหาภาพ ในเว็บไซต์นั้นทำได้ง่ายเพียงใด ดูข้อมูลเพิ่มเติมได้จากคู่มือเริ่มต้นใช้งานและตัวอย่างการสาธิต อ่านเอกสารชุดเครื่องมือเพื่อดูว่าแอปนี้ทำอะไรได้บ้าง