Gerçek dünyadaki etkileşimi kolayca kullanma
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ğazada fiyat kontrolünü destekleyen bir site olduğunu varsayalım. 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 kaynaklı Web Perception Toolkit, web sitenize görsel arama eklemenize yardımcı olur. Cihaz kamera akışını, gerçek dünyadaki nesneleri (burada "hedefler" olarak adlandırılır) sitenizdeki içerikle eşleyen bir dizi algılayıcıdan 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.
Bu özelliğin nasıl çalıştığına dair size yeterli 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 işlem yapmazsanız Web Algılama Aracı, hedefleri tanımlayabilir ve ardından verilerde sağlanan bilgilere göre kartları gösterebilir ya da 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 olur? Bu araç seti, yaşam döngüsü etkinlikleri, bu etkinlikler etrafında kullanıcı deneyimi oluşturmak için Kart ve Düğme nesneleri ve kartlara stil uygulamanın kolay bir yolunu sunar. Bu konuyla ilgili olarak, Başlangıç kılavuzumuza dayalı kodlarla biraz bilgi vereceğim.
Yaşam döngüsü etkinlikleri arasında en önemlisi, bir hedef her bulunduğunda tetiklenen PerceivedResults etkinliğidir. Hedef, gerçek dünyadaki 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 istisna dışında diğer tüm 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 dizileri 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 bilgilere 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, bu durumda en yararlı olduğunu düşündüğüm öğeye tek tıklamayla erişim sağlarım.
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ç
Başta da belirttiğim gibi, bu makale Web Algısı Aracı Kiti'ni kapsamlı bir şekilde ele almıyor. 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. Bu araçla neler yapabileceğinizi öğrenmek için araç seti belgelerini inceleyin.