Penelusuran visual dengan Toolkit Persepsi Web

Mudah digunakan interaktivitas dunia nyata.

Bukankah bagus jika pengguna dapat menelusuri situs Anda menggunakan kamera mereka? Bayangkan hal ini. Situs Anda adalah Razor McShaveyface. Pelanggan Anda memberi tahu bahwa mereka kesulitan menemukan kartrid yang tepat untuk pisau cukur mereka saat memesan ulang. Mereka tidak tahu kata kunci yang tepat untuk pencarian produk Anda. Dan jujur saja, mereka mungkin tidak akan pernah melakukannya.

Bagaimana jika mereka tidak memerlukannya? Bagaimana jika mereka dapat mengarahkan kamera ponsel ke kode UPC pada kemasan dan situs Anda dapat menampilkan kartrid yang tepat dan tombol "pesan ulang" berwarna merah yang besar?

Pikirkan cara lain untuk menggunakan kamera di suatu situs. Bayangkan sebuah situs yang mendukung pemeriksaan harga di toko. Bayangkan mendapatkan informasi tentang pameran museum atau penanda sejarah. Bayangkan mengidentifikasi tempat terkenal di dunia nyata dalam game seperti geocaching atau perburuan.

Web Perception Toolkit memungkinkan skenario berbasis kamera ini. Dalam beberapa kasus, Anda bahkan dapat membuat pengalaman tanpa menulis kode.

Bagaimana cara kerjanya?

Toolkit Persepsi Web open source membantu Anda menambahkan penelusuran visual ke situs. Aliran data kamera perangkat akan diteruskan melalui sekumpulan detektor yang memetakan objek dunia nyata, yang disebut "target", ke konten di situs Anda. Pemetaan ini ditentukan menggunakan Data Terstruktur (JSON-LD) di situs Anda. Dengan data ini, Anda dapat menyajikan informasi yang tepat dalam UI yang dapat disesuaikan.

Saya akan menunjukkan ini cukup untuk memberi Anda gambaran tentang cara kerjanya. Untuk penjelasan lengkapnya, lihat panduan Memulai, referensi toolkit, demo Sandbox I/O, dan contoh demo.

Data terstruktur

Toolkit ini tidak dapat menemukan target apa pun di tampilan kamera. Anda harus memberinya data JSON yang ditautkan untuk target yang ingin dikenalinya. Data ini juga berisi informasi tentang target yang akan ditampilkan kepada pengguna.

Data ini adalah yang Anda butuhkan untuk membuat pengalaman pengguna seperti pada gambar di bawah. Jika Anda tidak melakukan apa pun, Web Perception Toolkit dapat mengidentifikasi target, lalu menampilkan dan menyembunyikan kartu berdasarkan informasi yang diberikan dalam data. Coba ini sendiri menggunakan demo peta artefak kami.

Tambahkan data ke situs Anda dengan file data tertaut JSON, yang disertakan menggunakan tag <script> dan jenis MIME "application/ld+json".

<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">

File itu sendiri terlihat seperti ini:

[
  {
    "@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"
    }
  }
]

Pengalaman pengguna

Bagaimana jika Anda menginginkan lebih dari pengalaman pengguna default? Toolkit ini memberi Anda peristiwa siklus proses, objek Kartu dan Tombol untuk membuat pengalaman pengguna seputar peristiwa tersebut, dan cara mudah untuk menata gaya kartu. Saya akan menunjukkan sedikitnya dengan kode yang didasarkan pada panduan Memulai kami.

Peristiwa siklus proses yang paling penting adalah PerceivedResults, yang diaktifkan setiap kali target ditemukan. Target dapat berupa objek dunia nyata atau penanda seperti kode batang atau kode QR.

Proses untuk merespons peristiwa ini sama seperti proses untuk peristiwa lainnya dengan pengecualian yang telah disebutkan. Jika Anda tidak menerapkan peristiwa ini, antarmuka pengguna akan otomatis dibuat menggunakan data terstruktur. Untuk mengganti perilaku ini, mulai pengendali peristiwa Anda dengan memanggil 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);

Mari kita lihat peristiwa tersebut lebih dekat. Peristiwa ini sendiri berisi array penanda dan target yang ditemukan dan hilang. Jika target ditemukan di dunia, bahkan akan diaktifkan dan meneruskan objek yang ditemukan di event.found. Demikian pula, saat target lulus dari tampilan kamera, peristiwa akan diaktifkan kembali, dengan meneruskan objek yang hilang di event.lost. Hal ini membantu memperhitungkan gerakan tangan dan penanda: kamera tidak memegang cukup stabil, menjatuhkan penanda, hal semacam itu.

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.
}

Selanjutnya, Anda menunjukkan kartu yang sesuai berdasarkan toolkit yang ditemukan.

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.
  }
}

Menambahkan kartu dan tombol hanya dengan membuat instance dan menambahkannya ke objek induk. Contoh:

const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'

Terakhir, seperti inilah tampilannya. Perhatikan kenyamanan yang telah saya tambahkan ke pengalaman pengguna. Baik penanda ditemukan atau tidak, saya memberikan akses sekali klik ke penanda yang menurut saya paling berguna dalam situasi tersebut.

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);
  }
}

Memformat kartu

Web Perception Toolkit menyediakan pemformatan bawaan untuk kartu dan tombol dengan stylesheet default. Tetapi Anda dapat dengan mudah menambahkannya sendiri. Objek Card dan ActionButton yang disediakan berisi properti style (di antara banyak lainnya) yang memungkinkan Anda memberi stempel organisasi pada tampilan dan nuansa. Untuk menyertakan stylesheet default, tambahkan elemen <link> ke halaman Anda.

<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">

Kesimpulan

Seperti yang saya katakan di atas, ini bukan pembahasan lengkap tentang Toolkit Persepsi Web. Semoga hal ini memberi Anda gambaran tentang betapa mudahnya menambahkan pencarian visual ke sebuah {i>website<i}. Pelajari lebih lanjut dengan panduan Memulai dan contoh demo. Pelajari dokumentasi toolkit untuk mempelajari hal-hal yang dapat dilakukannya.