Dễ dàng sử dụng tính năng tương tác thực tế.
Nếu họ không bao giờ cần thì sao? Điều gì sẽ xảy ra nếu họ có thể hướng máy ảnh của điện thoại vào mã UPC trên gói hàng và trang web của bạn có thể hiển thị cho họ loại hộp mực phù hợp cùng với nút "đặt hàng lại" màu đỏ lớn?
Hãy nghĩ đến những cách khác mà bạn có thể sử dụng máy ảnh trên trang web. Hãy tưởng tượng một trang web hỗ trợ tính năng kiểm tra giá tại cửa hàng. Hãy tưởng tượng bạn nhận được thông tin về một triển lãm trong bảo tàng hoặc mốc lịch sử. Hãy tưởng tượng việc xác định các địa danh trong thế giới thực trong các trò chơi như tìm kho báu địa lý hoặc săn tìm đồ vật.
Bộ công cụ nhận thức trên web giúp thực hiện được những tình huống dựa trên máy ảnh này. Trong một số trường hợp, bạn thậm chí có thể tạo một trải nghiệm mà không cần viết mã.
Cách thức hoạt động
Bộ công cụ nhận thức web nguồn mở giúp bạn thêm tính năng tìm kiếm bằng hình ảnh vào trang web. API này truyền luồng máy ảnh của thiết bị thông qua một nhóm trình phát hiện ánh xạ các đối tượng thực tế (ở đây gọi là "mục tiêu") với nội dung trên trang web của bạn. Việc liên kết này được xác định bằng cách sử dụng Dữ liệu có cấu trúc (JSON-LD) trên trang web của bạn. Với dữ liệu này, bạn có thể trình bày thông tin phù hợp trong một giao diện người dùng có thể tuỳ chỉnh.
Tôi sẽ cho bạn thấy đủ để bạn biết cách hoạt động của tính năng này. Để biết nội dung giải thích đầy đủ, hãy xem hướng dẫn Bắt đầu, tài liệu tham khảo về bộ công cụ, minh hoạ Hộp cát I/O và minh hoạ mẫu.
Dữ liệu có cấu trúc
Bộ công cụ không thể tìm thấy mục tiêu bất kỳ trong khung nhìn của máy ảnh. Bạn phải cung cấp cho mô hình này dữ liệu JSON được liên kết cho các mục tiêu mà bạn muốn mô hình nhận dạng. Dữ liệu này cũng chứa thông tin về những mục tiêu đó sẽ hiển thị cho người dùng.
Dữ liệu là tất cả những gì bạn cần để tạo trải nghiệm người dùng như trong hình ảnh bên dưới. Nếu bạn không làm gì khác, Bộ công cụ nhận thức web có thể xác định các mục tiêu, sau đó hiển thị và ẩn thẻ dựa trên thông tin được cung cấp trong dữ liệu. Hãy tự mình thử điều này bằng cách sử dụng bản minh hoạ bản đồ cấu phần phần mềm của chúng tôi.
Thêm dữ liệu vào trang web bằng tệp dữ liệu được liên kết JSON, bao gồm cả thẻ <script> và loại MIME "application/ld+json".
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
Bản thân tệp này có dạng như sau:
[
{
"@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"
}
}
]
Trải nghiệm người dùng
Nếu bạn muốn có trải nghiệm người dùng tốt hơn trải nghiệm mặc định thì sao? Bộ công cụ này cung cấp cho bạn các sự kiện trong vòng đời, đối tượng Thẻ và Nút để tạo trải nghiệm người dùng xung quanh các sự kiện đó, cũng như một cách dễ dàng để tạo kiểu cho thẻ. Tôi sẽ giới thiệu một chút về điều này bằng mã dựa trên hướng dẫn Bắt đầu của chúng tôi.
Sự kiện quan trọng nhất trong vòng đời là PerceivedResults, được kích hoạt mỗi khi tìm thấy một mục tiêu. Mục tiêu có thể là một đối tượng thực tế hoặc một điểm đánh dấu như mã vạch hoặc mã QR.
Quy trình phản hồi sự kiện này giống như quy trình phản hồi mọi sự kiện khác, ngoại trừ một ngoại lệ đã được đề cập. Nếu bạn không triển khai sự kiện, giao diện người dùng sẽ tự động được tạo bằng dữ liệu có cấu trúc. Để ghi đè hành vi này, hãy bắt đầu trình xử lý sự kiện bằng cách gọi 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);
Hãy cùng tìm hiểu kỹ hơn về sự kiện này. Bản thân sự kiện này chứa các mảng của các điểm đánh dấu và mục tiêu mà nó đã tìm thấy và bị mất. Khi tìm thấy mục tiêu trong thế giới, sự kiện sẽ kích hoạt và truyền các đối tượng đã tìm thấy trong event.found. Tương tự, khi các mục tiêu chuyển từ chế độ xem máy ảnh, sự kiện sẽ kích hoạt lại, chuyển các đối tượng bị mất trong event.lost. Điều này giúp tính đến các chuyển động của tay và điểm đánh dấu: máy ảnh không được giữ đủ chắc chắn, điểm đánh dấu bị rơi, v.v.
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.
}
Tiếp theo, bạn sẽ hiển thị một thẻ phù hợp dựa trên nội dung mà bộ công cụ tìm thấy.
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.
}
}
Việc thêm thẻ và nút chỉ đơn giản là tạo bản sao và thêm các thẻ và nút đó vào đối tượng mẹ. Ví dụ:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
Cuối cùng, đây là toàn bộ giao diện. Hãy lưu ý những tiện lợi mà tôi đã thêm vào trải nghiệm người dùng. Cho dù có tìm thấy điểm đánh dấu hay không, tôi đều cung cấp quyền truy cập bằng một lần nhấp vào nội dung mà tôi cho là hữu ích nhất trong trường hợp này.
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);
}
}
Định dạng thẻ
Bộ công cụ nhận thức web cung cấp định dạng tích hợp cho thẻ và nút bằng trang kiểu mặc định. Tuy nhiên, bạn có thể dễ dàng thêm các thẻ của riêng mình. Các đối tượng Card và ActionButton được cung cấp chứa các thuộc tính style (trong số nhiều thuộc tính khác) cho phép bạn đặt dấu ấn tổ chức của mình lên giao diện. Để đưa vào trang bố cục kiểu mặc định, hãy thêm phần tử <link> vào trang.
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
Kết luận
Như đã nói ở trên, đây không phải là thông tin đầy đủ về Bộ công cụ nhận thức web. Hy vọng bài viết này sẽ giúp bạn biết cách dễ dàng thêm tính năng tìm kiếm bằng hình ảnh vào trang web. Tìm hiểu thêm qua hướng dẫn Bắt đầu và các bản minh hoạ mẫu. Hãy tìm hiểu tài liệu về bộ công cụ để biết bộ công cụ này có thể làm được những gì.