Interatividade do mundo real fácil de usar.
E se eles nunca precisarem? E se ele pudesse 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 que aceite a verificação de preços na loja. Imagine obter informações sobre uma exposição de museu ou um marcador histórico. Imagine identificar pontos turísticos do mundo real 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 Web Perception Toolkit de código aberto ajuda você a adicionar pesquisa visual ao seu site. Ele transmite o fluxo da câmera do dispositivo por um conjunto de detectores que mapeiam objetos do mundo real, chamados de "alvos", para o conteúdo do site. Esse mapeamento é definido por meio de dados estruturados (JSON-LD) no seu site. Com esses dados, você pode apresentar as informações certas em uma interface personalizável.
Mostrarei isso o suficiente para dar uma amostra de como funciona. Para uma explicação completa, confira o guia de introdução, a referência do kit de ferramentas, a demonstração do sandbox do Google I/O e os exemplos de demonstrações.
Dados estruturados
O kit de ferramentas não consegue encontrar nenhum alvo na visualização da câmera. Forneça a ele dados JSON vinculados para os destinos que você quer que ele reconheça. Esses dados também contém informações sobre os destinos que serão mostrados ao usuário.
Os dados são tudo o 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 alvos e, em seguida, mostrar e ocultar cards com base nas informações fornecidas nos dados. Teste isso usando nossa demonstração de artefato.
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 Card e Button para criar a experiência do usuário em torno desses eventos, além de uma maneira fácil de estilizar os cards. Vou mostrar um pouco disso com o código com base no nosso guia Primeiros passos.
O evento mais importante do ciclo de vida é PerceivedResults, que é acionado sempre que um destino é encontrado. Um alvo 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 de 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 destinos encontrados e perdidos. Quando os alvos são encontrados no
mundo, o par dispara e passa 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:
câmeras não são mantidas de maneira estável 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.
}
}
Para adicionar cartões e botões, basta instanciá-los e anexá-los a um objeto pai. Exemplo:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
Finalmente, aqui está como tudo ficaria. Observe as conveniências que adicionei à experiência do usuário. Independentemente de o marcador ser encontrado ou não, forneço acesso com um clique ao que considero mais útil nas circunstâncias.
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);
}
}
Formatar cards
O Web Perception Toolkit oferece formatação integrada para cartões e botões
com a folha de estilo padrão. Mas é fácil adicionar o seu. 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 disse no início, esta não é uma visão completa do Kit de ferramentas de percepção da Web. Esperamos que isso dê a você uma noção de como é fácil adicionar pesquisa visual a um site. Saiba mais com o guia Primeiros passos e os exemplos de demonstrações. Analise a documentação do kit de ferramentas para saber o que ele pode fazer.