Búsqueda visual con el kit de herramientas de percepción web

Interactividad del mundo real fácil de usar

Joe Medley
Joe Medley
¿No sería genial que los usuarios pudieran buscar en tu sitio con la cámara? Imagina esto. Tu sitio es Razor McShaveyface. Tus clientes te dicen que tienen problemas para encontrar los cartuchos correctos para su máquina de afeitar cuando vuelven a hacer un pedido. No conocen las palabras clave adecuadas para la búsqueda de tu producto. Y, seamos honestos, es probable que nunca lo hagan.

¿Qué sucede si nunca lo necesitan? ¿Qué tal si pudiera apuntar la cámara de su teléfono al código UPC del paquete y tu sitio le mostrara el cartucho correcto y un gran botón rojo para volver a pedirlo?

Piensa en otras formas en las que puedes usar una cámara en un sitio. Imagina un sitio que admita la verificación de precios en la tienda. Imagina que obtienes información sobre una exhibición de un museo o un marcador histórico. Imagina identificar lugares de interés del mundo real en juegos como el geocaching o las búsquedas de objetos.

El kit de herramientas de percepción web hace posible 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 la búsqueda visual a tu sitio web. Pasa una transmisión de la cámara del dispositivo a través de un conjunto de detectores que asignan objetos del mundo real, aquí llamados "objetivos", al contenido de tu sitio. Esta 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 para que tengas una idea de cómo funciona. Para obtener una explicación completa, consulta la guía de Cómo comenzar, la referencia del kit de herramientas, la demo de I/O Sandbox y las demos de ejemplo.

Datos estructurados

El kit de herramientas no puede encontrar cualquier objetivo en el campo visual de la cámara. Debes proporcionarle datos JSON vinculados para los objetivos que deseas que reconozca. Estos datos también contienen información sobre los 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 haces nada más, el kit de herramientas de percepción web 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 artefactos de mapas.

La interfaz predeterminada está disponible solo con los datos vinculados.
Es la interfaz predeterminada.

Agrega datos a tu sitio con un archivo de datos vinculado JSON, que se incluye 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 ve 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 más que la experiencia del usuario predeterminada? El kit de herramientas te brinda eventos de ciclo de vida, objetos de tarjetas y botones para crear la experiencia del usuario en torno a esos eventos y una forma sencilla de aplicar diseño a las tarjetas. Te mostraré un poco de esto con un código basado de forma vaga en nuestra guía de Cómo comenzar.

El evento de ciclo de vida más importante es PerceivedResults, que se activa cada vez que se encuentra un objetivo. Un objetivo puede ser un objeto del mundo real o un marcador, como un código de barras o un código QR.

El proceso para responder a este evento es el mismo que para cualquier otro, con una excepción a la que ya se hizo alusión. Si no implementas el evento, se creará automáticamente una interfaz de usuario con datos estructurados. Para anular este comportamiento, llama a event.preventDefault() para iniciar el controlador de eventos.

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 el evento con más detalle. El evento en sí contiene arrays de marcadores y objetivos que encontró y perdió. Cuando se encuentran objetivos en el mundo, el evento se activa y pasa los objetos encontrados en event.found. De manera similar, cuando los objetivos pasan de 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 del marcador: cámaras que no se sostienen con suficiente firmeza, marcadores que se dejan caer, etcétera.

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 según 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 cuestión de crear instancias de ellos y agregarlos a un objeto superior. 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 comodidades que agregué a la experiencia del usuario. Ya sea que se encuentre el marcador o no, proporciono acceso con un clic a lo que creo 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);
  }
}

Cómo dar formato a las 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 tus propios videos fácilmente. Los objetos Card y ActionButton proporcionados contienen propiedades style (entre muchas otras) que te permiten poner tu sello organizativo en el aspecto. 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 al principio, esta no es una descripción exhaustiva del kit de herramientas de percepción web. Con suerte, te dará una idea de lo fácil que es agregar la búsqueda visual a un sitio web. Obtén más información con la guía de Introducción y las demos de muestra. Analiza la documentación del kit de herramientas para saber lo que puede hacer.