Interattività reale facile da usare.
E se non ne avesse mai bisogno? E se potessero inquadrare il codice UPC sulla confezione con la fotocamera del telefono e il tuo sito potesse mostrare la cartuccia giusta e un grande pulsante rosso "Riordina"?
Pensa ad altri modi in cui puoi utilizzare una videocamera in un sito. Immagina un sito che supporta il controllo del prezzo in negozio. Immaginate di recuperare informazioni su un'esposizione museale o un cartello storico. Immagina di identificare punti di riferimento reali nei giochi come il geocaching o le cacce al tesoro.
Web Perception Toolkit rende possibili questi scenari basati su videocamere. In alcuni casi puoi persino creare un'esperienza senza scrivere codice.
Come funziona?
Il Web Perception Toolkit open source consente di aggiungere una ricerca visiva al tuo sito web. Trasmette uno stream della fotocamera del dispositivo attraverso un insieme di rilevatori che mappano gli oggetti reali, qui chiamati "target", ai contenuti del tuo sito. Questa mappatura viene definita utilizzando dati strutturati (JSON-LD) sul tuo sito. Con questi dati, puoi presentare le informazioni giuste in un'UI personalizzabile.
Te ne mostro abbastanza da farti un'idea del funzionamento. Per una spiegazione completa, consulta la guida Inizia, la documentazione di riferimento del kit di strumenti, la demo di Privacy Sandbox e le demo di esempio.
Dati strutturati
Il kit di strumenti non può trovare un bersaglio qualsiasi nel campo visivo della videocamera. Devi fornire con dati JSON collegati per i target che vuoi che vengano riconosciuti. Questi dati contengono anche informazioni sui target che verranno mostrati all'utente.
I dati sono tutto ciò di cui hai bisogno per creare un'esperienza utente come quella nell'immagine seguente. Se non fai altro, Web Perception Toolkit può identificare i target, poi mostrare e nascondere le schede in base alle informazioni fornite nei dati. Prova a usare la nostra demo della mappa degli artefatti.
Aggiungi dati al tuo sito con un file di dati JSON collegato, incluso utilizzando un tag <script>
e il tipo MIME "application/ld+json".
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
Il file ha un aspetto simile al seguente:
[
{
"@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"
}
}
]
L'esperienza utente
Cosa succede se vuoi più dell'esperienza utente predefinita? Il kit di strumenti fornisce eventi di ciclo di vita, oggetti Card e Button per creare l'esperienza utente in base a questi eventi e un modo semplice per applicare lo stile alle schede. Ne mostrerò un po' con il codice nella nostra Guida introduttiva.
L'evento del ciclo di vita più importante è PerceivedResults, che viene attivato ogni volta che viene trovato un target. Un target può essere un oggetto reale o un indicatore come
un codice a barre o un codice QR.
La procedura per rispondere a questo evento è la stessa di qualsiasi altro evento, con un'eccezione già accennata. Se non implementi l'evento, viene creata automaticamente un'interfaccia utente utilizzando i dati strutturati. Per eseguire l'override di questo comportamento, avvia il gestore eventi chiamandoevent.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);
Diamo un'occhiata più da vicino all'evento. L'evento stesso contiene array di indicatori e target trovati e persi. Quando vengono trovati bersagli nel
mondo, gli incendi e i passaggi hanno trovato oggetti in event.found. Analogamente, quando i target passano dalla visualizzazione della videocamera, l'evento viene attivato di nuovo, passando gli oggetti persi in event.lost. Ciò aiuta a tenere conto dei movimenti della mano e degli indicatori:
le videocamere non sono tenute abbastanza stabili, gli indicatori lasciati cadere e questo tipo di cose.
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.
}
Poi, mostri una scheda appropriata in base a quanto trovato dal toolkit.
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.
}
}
Per aggiungere schede e pulsanti, è sufficiente eseguirne l'inizializzazione e aggiungerle a un oggetto principale. Ad esempio:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
Infine, ecco come si presenta l'intera operazione. Notare le comodità che ho aggiunto all'esperienza utente. Indipendentemente dal fatto che l'indicatore venga trovato o meno, fornisco accesso con un solo clic a ciò che ritengo più utile nelle circostanze.
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);
}
}
Formattazione delle schede
Web Perception Toolkit fornisce la formattazione integrata per schede e pulsanti con il foglio di stile predefinito. Puoi, però, aggiungere facilmente le tue password. Gli oggetti Card e ActionButton forniti contengono proprietà style (tra molte altre) che ti consentono di personalizzare l'aspetto e il design in base alle esigenze della tua organizzazione. Per includere il
foglio di stile predefinito, aggiungi un elemento <link> alla pagina.
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
Conclusione
Come detto all'inizio, questo non è un esame esaustivo del toolkit per la percezione del web. Ci auguriamo che ti dia un'idea di quanto sia facile aggiungere la ricerca visiva a un sito web. Scopri di più con la guida Introduzione e le demo di esempio. Consulta la documentazione del kit per scoprire cosa può fare.