Dễ dàng sử dụng tính tương tác trong thế giới thực.
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ể giới thiệu cho họ hộp mực phù hợp và nút "đặt hàng lại" lớn màu đỏ?
Hãy nghĩ về những cách khác mà bạn có thể sử dụng camera trên một trang web. Hãy tưởng tượng có 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 web giúp thực hiện được các 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. Nó truyền luồng máy ảnh của thiết bị qua một tập hợp trình phát hiện giúp ánh xạ các đối tượng trong thế giới thực, ở đây gọi là "mục tiêu", tớ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ẽ trình bày đủ để giúp bạn hiểu rõ hơn về 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 lớp này dữ liệu JSON được liên kết đối với các mục tiêu mà bạn muốn công cụ này nhận dạng. Dữ liệu này cũng chứa thông tin về các 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 bên dưới. Nếu bạn không làm gì khác, Bộ công cụ cảm nhận web có thể xác định các mục tiêu, sau đó hiển thị và ẩn các 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 của bạn bằng một tệp dữ liệu được liên kết JSON, đi kèm với thẻ <script> và loại MIME "application/ld+json".
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
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 trong thế giới thực 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 sự kiện khác với trường hợp 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 đó chứa các mảng gồm các điểm đánh dấu và mục tiêu mà sự kiện đó vừa 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ư tôi đã nói ở trên cùng, đây chưa phải là tài liệu đầy đủ về Bộ công cụ nhận biết 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. Hãy tìm hiểu thêm trong hướng dẫn Bắt đầu và bản minh hoạ mẫu. Hãy tìm hiểu tài liệu về bộ công cụ để tìm hiểu những việc mà bộ công cụ này có thể làm.