Web Algısı Araç Seti ile görsel arama

Gerçek dünyadaki etkileşimi kolayca kullanma

Joe Medley

Kullanıcının bu bilgilere hiç ihtiyacı olmazsa ne olur? Müşteriler telefonlarının kamerasını paketteki UPC koduna doğrulttuğu zaman siteniz onlara doğru kartuşu ve büyük bir kırmızı "yeniden sipariş ver" düğmesini gösterebilirse ne olur?

Sitede kamerayı kullanabileceğiniz diğer yolları düşünün. Mağaza içi fiyat kontrolünü destekleyen bir site düşünün. Bir müze sergisi veya tarihi işaretçi hakkında bilgi edindiğinizi hayal edin. Coğrafi işaretleme veya hazine avı gibi oyunlarda gerçek dünyadaki önemli yerleri tanımlamayı düşünün.

Web Algılama Aracı Kiti, kameraya dayalı bu senaryoları mümkün kılar. Bazı durumlarda kod yazmadan bile deneyim oluşturabilirsiniz.

İşleyiş şekli

Açık kaynak Web Algılama Araç Seti, web sitenize görsel arama eklemenize yardımcı olur. Gerçek dünyadaki nesneleri (burada "hedefler" olarak adlandırılır) sitenizdeki içerikle eşleyen bir dizi algılayıcı üzerinden cihaz kamera akışını iletir. Bu eşleme, sitenizde Yapılandırılmış Veriler (JSON-LD) kullanılarak tanımlanır. Bu verilerle, doğru bilgileri özelleştirilebilir bir kullanıcı arayüzünde sunabilirsiniz.

İşleyiş şekli konusunda size yeterince bilgi vereceğim. Ayrıntılı açıklama için Başlangıç kılavuzuna, araç seti referansına, G/Ç korumalı alanı demosuna ve örnek demolara göz atın.

Yapılandırılmış veri

Araç seti, kameranın görüş alanındaki herhangi bir hedefi bulamaz. Tanımlamasını istediğiniz hedefler için bağlı JSON verileriyle birlikte sağlamanız gerekir. Bu veriler, kullanıcıya gösterilecek hedeflerle ilgili bilgileri de içerir.

Aşağıdaki resimdeki gibi bir kullanıcı deneyimi oluşturmak için tek ihtiyacınız verilerdir. Başka bir şey yapmazsanız Web Algısı Araç Seti hedefleri tanımlayabilir, ardından verilerde sağlanan bilgilere dayanarak kartları gösterebilir ve gizleyebilir. Artifact haritası demomuzu kullanarak bunu kendiniz deneyebilirsiniz.

<script> etiketi ve "application/ld+json" MIME türü kullanılarak dahil edilen bir JSON bağlı veri dosyasıyla sitenize veri ekleyin.

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

Dosyanın kendisi şu şekilde görünür:

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

Kullanıcı deneyimi

Varsayılan kullanıcı deneyiminden daha fazlasını istiyorsanız ne yapabilirsiniz? Araç seti size yaşam döngüsü etkinliklerini, bu etkinlikler çerçevesinde kullanıcı deneyimini oluşturmanız için kart ve düğme nesneleri ve kartları biçimlendirmenin kolay bir yolunu sunar. Bu konuyu, Başlangıç kılavuzumuza dayalı kodlarla biraz göstereceğim.

Yaşam döngüsü etkinlikleri arasında en önemlisi, bir hedef her bulunduğunda tetiklenen PerceivedResults etkinliğidir. Hedef, gerçek dünyaya ait bir nesne veya barkod ya da QR kodu gibi bir işaretçi olabilir.

Bu etkinliğe yanıt verme süreci, daha önce bahsedilen bir istisna dışında diğer etkinliklerle aynıdır. Etkinliği uygulamazsanız yapılandırılmış veriler kullanılarak otomatik olarak bir kullanıcı arayüzü oluşturulur. Bu davranışı geçersiz kılmak için event.preventDefault() çağrısı yaparak etkinlik işleyicinizi başlatın.

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

Etkinliğe daha yakından bakalım. Etkinliğin kendisi hem bulduğu hem de kaybettiği işaretçi ve hedef dizilerini içerir. Dünyada hedef bulunduğunda, eşit ateşlenir ve bulunan nesneleri event.found'e iletir. Benzer şekilde, hedefler kamera görüş alanından geçtiğinde etkinlik tekrar tetiklenir ve kayıp nesneler event.lost içinde iletilir. Bu, el ve işaretçi hareketlerini hesaba katmanıza yardımcı olur: kameraların yeterince sabit tutulmaması, işaretçilerin düşürülmesi gibi durumlar.

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

Ardından, araç setinin bulduğu şeylere göre uygun bir kart gösterirsiniz.

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

Kart ve düğme eklemek için bunları örneklendirmeniz ve bir üst öğeye eklemeniz yeterlidir. Örneğin:

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

Son olarak, tüm sürecin nasıl göründüğüne göz atın. Kullanıcı deneyimine eklediğim kolaylıklara dikkat edin. İşaretçi bulunsa da bulunmasa da, belirli durumlarda en yararlı olacağını düşündüğüm şeye tek tıklamayla erişim sağlıyorum.

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

Kartları biçimlendirme

Web Algılama Aracı, varsayılan stil sayfasıyla kartlar ve düğmeler için yerleşik biçimlendirme sağlar. Ancak dilerseniz kendi emojilerinizi de kolayca ekleyebilirsiniz. Sağlanan Card ve ActionButton nesneleri, görünüme ve stile kuruluşunuzun damgasını vurmanıza olanak tanıyan style özelliklerini (diğerlerinin yanı sıra) içerir. Varsayılan stil sayfasını dahil etmek için sayfanıza bir <link> öğesi ekleyin.

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

Sonuç

En üstte de belirttiğim gibi bu, Web Algılama Araç Seti'ne kapsamlı bir bakış değildir. Bu makalenin, görsel aramayı bir web sitesine eklemenin ne kadar kolay olduğunu anlamanıza yardımcı olacağını umuyoruz. Başlangıç kılavuzundan ve örnek demolardan daha fazla bilgi edinin. Aracın neler yapabileceğini öğrenmek için araç seti belgelerini inceleyin.