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

Gerçek zamanlı etkileşim, kullanımı kolay.

Ali Polat

Kullanıcılar kameralarını kullanarak sitenizde arama yapabilse harika olmaz mıydı? Bunu hayal edin. Siteniz Razor McShaveyface. Müşterileriniz yeniden sipariş verdiklerinde tıraş bıçakları için doğru kartuşları bulmakta güçlük çektiklerini söylüyor. Ürün aramanız için doğru anahtar kelimeleri bilmezler. Dürüst olalım ki muhtemelen asla olmayacaklar.

İhtiyaç duymazsa ne olur? Telefonlarının kamerasını paketteki UCC koduna doğrultabilseler ve sitenizde doğru kartuşu ve büyük kırmızı bir "yeniden sipariş" düğmesi sunabilselerdi ne olurdu?

Sitelerde kamera kullanmanın başka yollarını düşünün. Mağaza içi fiyat kontrolünü destekleyen bir site düşünün. Bir müze sergisi veya tarihi işaret hakkında bilgi aldığınızı hayal edin. Haritalarda coğrafi önbelleğe alma ya da hazine avı gibi oyunlardaki gerçek dünyadaki önemli noktaları tespit ettiğinizi düşünün.

Web Algı Araç Seti, kameraya dayalı bu senaryoları mümkün kılar. Bazı durumlarda kod yazmadan bir deneyim bile oluşturabilirsiniz.

İşleyiş şekli

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

Nasıl işlediğine dair fikir edinebilmeniz için bu kadar uzun video göstereceğim. Eksiksiz bir açıklama için Başlarken kılavuzuna, araç seti referansına, I/O Sandbox demosuna ve örnek demolara göz atın.

Yapılandırılmış veri

Araç seti, kameranın görüş açısında herhangi bir hedef göremez. Tanımasını istediğiniz hedefler için bağlı JSON verilerini sağlamanız gerekir. Bu veriler, kullanıcıya gösterilecek söz konusu hedefler hakkında bilgiler de içerir.

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

Varsayılan arayüz.

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

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

Dosyanın görünümü şuna benzer:

[
  {
    "@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 olur? Araç seti, yaşam döngüsü etkinlikleri, bu etkinlikler çerçevesinde kullanıcı deneyimini oluşturmanız için Kart ve Düğme nesneleri ve kartları şekillendirmenin kolay bir yolunu sunar. Başlarken kılavuzumuza giderek kaybolan kodlar hakkında biraz bilgi vereceğim.

En önemli yaşam döngüsü olayı PerceivedResults, bir hedef bulunduğunda etkinleşir. Hedef, gerçek dünyaya ait bir nesne veya barkod ya da QR kodu gibi bir işaretçi olabilir.

Bu etkinliği yanıtlama süreci, halihazırda sözü edilen bir istisna dışında diğer tüm etkinliklerle aynıdır. Etkinliği uygulamazsanız yapılandırılmış veriler kullanılarak otomatik bir şekilde bir kullanıcı arayüzü oluşturulur. Bu davranışı geçersiz kılmak için event.preventDefault() yöntemini çağırarak 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, bile yangınlar ve paslar event.found bölgesinde nesneler buldu. Benzer şekilde, hedefler kamera görünümünden geçtiğinde etkinlik tekrar etkinleşerek event.lost içindeki kayıp nesneler iletilir. Bu, el ve işaretleyici hareketlerini hesaba katmaya yardımcı olur. Kameralar yeterince sabit tutulmaz, işaretçiler bırakılır.

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

Sonra, araç setinin bulduğu şeye göre uygun bir kart gösterin.

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, basitçe bunları somutlaştırmak ve bir üst nesneye eklemektir. Örneğin:

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

Son olarak, tüm özellikler aşağıdaki gibi görünür. Kullanıcı deneyimine kattığım kolaylıklara dikkat edin. İşaretçinin bulunsa da bulunmasa da, içinde bulunduğumuz durumda en yararlı olduğunu 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ısı Araç Seti, varsayılan stil sayfasıyla birlikte kartlar ve düğmeler için yerleşik biçimlendirme sağlar. Kendinizinkini de kolayca ekleyebilirsiniz. Sağlanan Card ve ActionButton nesneleri, kuruluş damgasını görünüm ve izlenime koymanıza olanak tanıyan style özellikleri (diğer birçok özelliklerin yanı sıra) içerir. Varsayılan stil sayfasını eklemek için sayfanıza bir <link> öğesi ekleyin.

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

Sonuç

Yukarıda da belirttiğim gibi, bu, Web Algısı Araç Seti'ne ilişkin ayrıntılı bir inceleme değildir. Umarız bu video, bir web sitesine görsel arama eklemenin ne kadar kolay olduğuna dair size bir fikir verir. Başlarken kılavuzu ve örnek demolarla daha fazla bilgi edinin. Neler yapabildiğini öğrenmek için araç seti dokümanlarını ayrıntılı olarak inceleyin.