Interatividade fácil de usar no mundo real.
E se eles nunca precisarem? E se eles pudessem apontar a câmera do smartphone para o código UPC na embalagem e seu site pudesse apresentar o cartucho certo e um grande botão vermelho "reordenar"?
Pense em outras maneiras de usar uma câmera em um site. Imagine um site compatível com a verificação de preços na loja. Imagine receber informações sobre uma exposição de um museu ou um marcador histórico. Imagine identificar marcos reais em jogos como geocaching ou caça ao tesouro.
O Kit de ferramentas de percepção da Web torna esses cenários baseados em câmera possíveis. Em alguns casos, você pode até criar uma experiência sem escrever código.
Como funciona?
O kit de ferramentas de percepção da Web de código aberto ajuda você a adicionar pesquisa visual ao seu site. Ele passa o fluxo da câmera do dispositivo por um conjunto de detectores que mapeiam objetos do mundo real, aqui chamados de "alvos", para o conteúdo do seu site. Esse mapeamento é definido usando dados estruturados (JSON-LD) no site. Com esses dados, é possível apresentar as informações certas em uma interface personalizável.
Vou mostrar o suficiente para que você tenha uma ideia de como funciona. Para uma explicação completa, confira o guia de Primeiros passos, a referência do kit de ferramentas, a demonstração do sandbox da E/S e os exemplos de demonstração.
Dados estruturados
O kit de ferramentas não consegue encontrar nenhum alvo na visualização da câmera. Forneça dados JSON vinculados para os destinos que você quer que ele reconheça. Esses dados também contêm informações sobre esses destinos que serão mostrados ao usuário.
Os dados são tudo que você precisa para criar uma experiência do usuário como a da imagem abaixo. Se você não fizer mais nada, o Web Perception Toolkit poderá identificar destinos e mostrar e ocultar cards com base nas informações fornecidas nos dados. Teste por conta própria usando nossa demonstração de artefatos-mapa.
Adicione dados ao seu site com um arquivo de dados JSON vinculado, incluído usando uma tag <script>
e o tipo MIME "application/ld+json".
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
O arquivo é mais ou menos assim:
[
{
"@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"
}
}
]
A experiência do usuário
E se você quiser mais do que a experiência do usuário padrão? O kit de ferramentas oferece eventos de ciclo de vida, objetos de card e botão para criar a experiência do usuário com base nesses eventos e uma maneira fácil de estilizar os cards. Vou mostrar um pouco disso com base em código em nosso guia de Primeiros passos.
O evento de ciclo de vida mais importante é PerceivedResults, que é disparado sempre
que um destino é encontrado. Um destino pode ser um objeto real ou um marcador, como um código de barras ou QR code.
O processo para responder a esse evento é o mesmo usado para qualquer outro evento, com uma exceção já mencionada. Se você não implementar o evento, uma interface do usuário será criada automaticamente com dados estruturados. Para substituir esse
comportamento, inicie o manipulador de eventos chamando 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);
Vamos analisar o evento mais detalhadamente. O evento em si contém matrizes de marcadores e alvos que encontrou e perdeu. Quando alvos são encontrados no
mundo, os até disparar e passar objetos encontrados em event.found. Da mesma forma,
quando os destinos passam da visualização da câmera, o evento é disparado novamente, transmitindo objetos
perdidos em event.lost. Isso ajuda a considerar os movimentos da mão e do marcador:
as câmeras não seguram o suficiente, marcadores inseridos, esse tipo de coisa.
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.
}
Em seguida, você vai mostrar um card apropriado com base no que o kit de ferramentas encontrou.
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.
}
}
A adição de cards e botões é apenas uma questão de instanciar e anexar cards a um objeto pai. Exemplo:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
Por fim, aqui está como o todo será. Observe as conveniências que adicionei à experiência do usuário. Independentemente de o marcador ser encontrado ou não, dou acesso de um clique ao que considero mais útil na situação em questão.
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);
}
}
Formatação de cards
O Web Perception Toolkit oferece formatação integrada para cartões e botões
com a folha de estilo padrão. Mas é possível adicionar suas próprias informações com facilidade. Os objetos
Card e ActionButton fornecidos contêm propriedades style, entre muitas outras,
que permitem colocar seu carimbo organizacional na aparência. Para incluir a folha de estilo padrão, adicione um elemento <link> à sua página.
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
Conclusão
Como eu disse no início, esta não é uma visão completa do Kit de ferramentas de percepção da Web. Espero que ele dê uma ideia de como é fácil adicionar a pesquisa visual a um site. Saiba mais no guia Para começar e nas demonstrações de amostra. Leia a documentação do kit de ferramentas para saber o que ele pode fazer.