Fácil de usar en el mundo real
¿Y si nunca lo necesitan? ¿Y si pudiera apuntar la cámara de su teléfono hacia el código UPC en el paquete y tu sitio podría presentarles el cartucho correcto y un gran botón rojo para “reordenar”?
Piensa en otras formas de usar una cámara en un sitio. Imagina un sitio que admita la verificación de precios en tienda. Imagina obtener información sobre la exhibición de un museo o un marcador histórico. Imagina identificar puntos de referencia del mundo real en juegos, como geocaching o búsqueda del tesoro.
El kit de herramientas de percepción web posibilita estas situaciones basadas en la cámara. En algunos casos, incluso puedes crear una experiencia sin escribir código.
¿Cómo funciona?
El kit de herramientas de percepción web de código abierto te ayuda a agregar una búsqueda visual a tu sitio web. Pasa una transmisión de cámara del dispositivo a través de un conjunto de detectores que asignan objetos del mundo real, denominados "objetivos", al contenido de tu sitio. Esa asignación se define con datos estructurados (JSON-LD) en tu sitio. Con estos datos, puedes presentar la información correcta en una IU personalizable.
Te mostraré lo suficiente sobre esto para que tengas una idea de cómo funciona. Para obtener una explicación completa, consulta la guía de introducción, la referencia del kit de herramientas, la demostración de la zona de pruebas de E/S y las demostraciones de muestra.
Datos estructurados
El kit de herramientas no puede encontrar ningún objetivo en el campo visual de la cámara. Debes proporcionarle datos JSON vinculados para los destinos que deseas que reconozca. Esos datos también contienen información sobre esos objetivos que se le mostrarán al usuario.
Los datos son todo lo que necesitas para crear una experiencia del usuario como la que se muestra en la siguiente imagen. Si no realizas ninguna otra acción, Web Perception Toolkit puede identificar objetivos y, luego, mostrar y ocultar tarjetas según la información proporcionada en los datos. Pruébalo con nuestra demostración de artifact-map.
Agrega datos a tu sitio con un archivo de datos JSON vinculado, incluido con una etiqueta <script> y el tipo de MIME "application/ld+json".
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
El archivo en sí se verá de la siguiente manera:
[
{
"@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"
}
}
]
La experiencia del usuario
¿Qué sucede si quieres algo más que la experiencia del usuario predeterminada? El kit de herramientas te proporciona eventos de ciclo de vida, objetos de tarjetas y botones para diseñar la experiencia del usuario en torno a esos eventos, y una manera fácil de diseñar las tarjetas. Mostraré un poco de esto con código perdido en nuestra guía de introducción.
El evento de ciclo de vida más importante es PerceivedResults, que se activa cada vez que se encuentra un destino. Un objetivo puede ser un objeto real o un marcador, como un código de barras o QR.
El proceso para responder a este evento es el mismo que el de cualquier otro evento, con una excepción ya mencionada. Si no implementas el evento, se creará automáticamente una interfaz de usuario con datos estructurados. Para anular este comportamiento, inicia tu controlador de eventos con una llamada a 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);
Analicemos más en detalle el evento. El evento en sí contiene arrays de marcadores y objetivos que encontró y perdió. Cuando los objetivos se encuentran en el mundo, los incendios y los pases uniformes encontraron objetos en event.found. De manera similar, cuando los objetivos pasan desde la vista de la cámara, el evento se vuelve a activar y pasa los objetos perdidos en event.lost. Esto ayuda a tener en cuenta los movimientos de la mano y el marcador: las cámaras no se sostenían lo suficiente, los marcadores se dejaron caer, ese tipo de cosas.
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.
}
A continuación, muestra una tarjeta adecuada en función de lo que encontró el kit de herramientas.
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.
}
}
Agregar tarjetas y botones es simplemente crear una instancia de ellos y adjuntarlos a un objeto principal. Por ejemplo:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
Por último, así es como se ve todo. Observa las ventajas que agregué a la experiencia del usuario. Independientemente de si el marcador se encuentra o no, proporciono acceso con un solo clic a lo que considero que es más útil en las circunstancias.
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);
}
}
Formatear tarjetas
El kit de herramientas de percepción web proporciona un formato integrado para tarjetas y botones con la hoja de estilo predeterminada. Pero puedes agregar las tuyas fácilmente. Los objetos Card y ActionButton proporcionados contienen propiedades style (entre muchas otras) que te permiten agregar tu sello organizacional al diseño. Para incluir la hoja de estilo predeterminada, agrega un elemento <link> a tu página.
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
Conclusión
Como dije en la parte superior, este no es un análisis exhaustivo del kit de herramientas de percepción web. Con suerte, te dará una idea de lo fácil que es agregar búsquedas visuales a un sitio web. Obtén más información en la guía de introducción y las demostraciones de ejemplo. Consulta la documentación del kit de herramientas para saber lo que puede hacer.