1. Barcode Input Elementine Genel Bakış

Kuika’nın Barcode Input elementi, kullanıcıların barkodları tarayarak hızlı ve hatasız veri girişi yapmasını sağlar. Barkodlar, cihaz kamerası veya bağlı barkod okuyucular aracılığıyla algılanır ve otomatik olarak input alanına aktarılır. Bu sayede manuel veri girişi ihtiyacı azalır, işlem süresi kısalır ve veri doğruluğu artar.

Barcode Input elementi; stok yönetimi, ürün kabul, envanter sayımı ve satış süreçleri gibi barkod bazlı iş akışlarında yaygın olarak kullanılır.

Barcode Input elementi hem web hem de mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Stok ve envanter yönetimi: Ürünlerin barkod okutularak hızlıca sisteme eklenmesi veya güncellenmesi
• Satış ve kasa ekranları: Barkod okutarak ürün bilgisinin otomatik doldurulması ve satış işlemlerinin hızlandırılması
• Depo ve lojistik süreçleri: Koli, paket veya palet takibinin barkod üzerinden yapılması
• Ürün kabul ve sevkiyat: Gelen veya çıkan ürünlerin barkod ile doğrulanması
• Mobil saha uygulamaları: Sahada barkod okutarak anında veri girişi yapılması
• Kimlik, bilet veya sipariş doğrulama: QR / barkod üzerinden hızlı kontrol ve doğrulama işlemleri

2. Temel Özellikler

• Barkod ile otomatik veri girişi: Kullanıcı, barkodu taradığında değer ilgili input alanına otomatik olarak yazılır; manuel giriş ihtiyacı ortadan kalkar.
• Kamera ve harici tarayıcı desteği: Mobil cihaz kameraları veya harici barkod okuyucular ile uyumlu şekilde çalışır.
• Dinamik veriyle çalışma: Okunan barkod değeri, aksiyonlara, filtrelere veya form alanlarına kolayca aktarılabilir.
• İş akışlarına entegrasyon: Barkod okutulduktan sonra liste filtreleme, ürün bilgisi getirme veya kayıt oluşturma gibi süreçler tetiklenebilir.

2.1. Barcode Input Elementi Özellikleri

Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:

• Value: Barcode Input elementinin mevcut değerini gösterir. Kullanıcı bir barkodu taradığında veya manuel olarak girdiğinde bu alan otomatik olarak güncellenir.
• Placeholder: Kullanıcıya barkod girişi yapılması gereken alanı belirtmek için kullanılan geçici bir metni görüntüler. Barkod taraması yapılmadığında veya alan boşken bu metin görünür. Örneğin, “Barkodu tarayın” veya “Barkod girin” gibi yönlendirici metinler ekleyebilirsiniz.

Bu kılavuzu takip ederek Barcode Input elementini uygulamanızda etkili bir şekilde kullanabilirsiniz.

2.2. Barcode Input Elementine Eklenebilen Aksiyonlar

Barcode Input elementi, kullanıcı barkod okuttuğunda veya manuel giriş yaptığında tetiklenebilen olaylar (event’ler) üzerinden aksiyon eklenmesine olanak tanır. Element seçildiğinde ADD ACTION alanında aşağıdaki tetikleyiciler kullanılabilir:

• onChange: Barkod değeri değiştiğinde tetiklenir. Barkod okutulduğu anda veya kullanıcı manuel olarak değeri düzenlediğinde çalışır. Kullanım örnekleri: Ürün bilgisini getirme, liste filtreleme, form alanlarını otomatik doldurma.
• onPressEnter: Kullanıcı barkod okuttuktan sonra veya manuel giriş yaptıktan sonra Enter tuşuna bastığında tetiklenir. Kullanım örnekleri: Arama başlatma, ürün detay sayfasına yönlendirme, kayıt kontrolü yapma.
• onBlur: Barcode Input alanı odak kaybettiğinde (kullanıcı input’tan çıktığında) çalışır. Kullanım örnekleri: Girilen barkodu doğrulama, eksik veya hatalı barkod uyarısı gösterme.
• Form veya süreç tetikleme senaryoları: Bu event’ler üzerinden Managed DB, REST API veya UI Control aksiyonları bağlanarak iş akışları başlatılabilir.
• Filtreleme ve veri yenileme: Barkod okutulduğunda bağlı tablo, liste veya grid elementlerinin veri kaynağı yeniden çağrılabilir.
• Hızlı işlem senaryoları: Özellikle depo, stok ve satış ekranlarında barkod okut → Enter → işlem tamamla akışı için kullanılır.

3. Barcode Input Elementi Nasıl Kullanılır? 

Bu bölümde Barcode Input elementinin uçtan uca kullanımını, bir market uygulaması üzerinden örnek bir senaryo ile ele alacağız.

Senaryo: Market Uygulamasında Ürün Barkodu Okutma

Bir market uygulamasında kasiyer, ürünleri hızlı ve hatasız bir şekilde sepete eklemek için Barcode Input elementini kullanır. Barkod okutulduğunda ürün bilgileri sistem tarafından otomatik olarak getirilir ve ekranda gösterilir.

Senaryoda:

• Barkod değeri Barcode Input üzerinden alınır.
• SQL Action, barkoda karşılık gelen ürünü döner.
• Ürün adı, fiyat ve stok bilgileri ekranda gösterilir.
• Kullanıcı ürünü sepete ekleyebilir.

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “MarketProducts” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:
  

• Önemli Alan adları:
  
  • ProductName: Barkodu okutulan ürünün ekranda görüntülenen ad bilgisini tutar.
  • Barcode: Ürüne ait Code 128 formatındaki barkod değerini saklar ve Barcode Reader tarafından okutulan veriyle eşleştirilir.
  • Price: Ürünün satış fiyatı bilgisini tutar ve sepet hesaplamalarında kullanılır.
  • Stock: Ürünün mevcut stok miktarını gösterir ve satış sırasında stok kontrolü yapılmasını sağlar.

Adım 2 - Gerekli Aksiyonları Tanımlama

Arayüzde verileri göstermek ve kaydetmek için: 

• Bu senaryoda iki aksiyon kullanılacaktır.
• Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

• Verileri Getiren Aksiyon (InsertMarketProducts): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO MarketProducts (Id, ProductName, Barcode, Price, Stock)
VALUES
(NEWID(), 'Süt 1L',           '869000100001', 24.50, 120),
(NEWID(), 'Ekmek Tam Buğday','869000100002', 12.00, 80),
(NEWID(), 'Çikolata 80g',    '869000100003', 18.75, 60),
(NEWID(), 'Makarna 500g',    '869000100004', 21.90, 95),
(NEWID(), 'Kola 1L',         '869000100005', 29.99, 110);

Uygularken MarketProducts kısmını silip tekrar MarketProducts yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir. Şema adını aşağıdaki aksiyon içerisinde de kullanacaksınız.

• Taranan Barkoda Göre Ürün Getiren Aksiyon(GetMarketProductsByBarcode):
  

SELECT
    ProductName,
    Price,
    Stock
FROM dbo.MarketProducts
WHERE Barcode = @Barcode;

Uygularken MarketProducts kısmını silip tekrar MarketProducts yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir. Şema adını aşağıdaki aksiyon içerisinde de kullanacaksınız.

Adım 3 – Ana Sayfa Element Ekleme ve Aksiyon Bağlama

• UI Design modülünü açın.
  

• Sayfaya Elements > Display > Label elementini sürükleyip bırakın.
• Label içeriğini Label > Properties > Value > “Ürünü Tara” olarak güncelleyin.
• Label yazı stilini Label > Styling > Text > Style > Heading 2 olarak ayarlayın.
  

• Altına Elements > Display > Label elementi daha ekleyin.
• Yazı içeriğini Label > Properties > Value > “Ürün Adı” olarak güncelleyin.
  

• Altına bir Elements > Display > Label elementi daha ekleyin.
• Label yazı formatını Label > Properties > Formatter > Money olarak seçin.
  

• Yazıların altına sayfaya Elements > Input > Barcode Input elementini sürükleyip bırakın.
•  Altına Elements > Navigation > Button elementini sürükleyip bırakın.
•  Button yazısını Button > Properties > Label > “Tara” olarak güncelleyin.
  

•  Button elementine Button > Properties > Add Action > onClick > Device > Scan Barcode aksiyonunu ekleyin.
  

•  Button elementine bir aksiyon daha ekleyin Add Action > Custom > Managed DB > GetMarketProductsByBarcode aksiyonunu ekleyin.
  

•  GetMarketProductsByBarcode aksiyonunun Barcode parametresine Action Results > Scan Barcode alanını tanımlayın.
  

•  Barcode Input elementine tıklayın ve BarcodeInput > Properties > Value > Action Results > Scan Barcode aksiyonunu bağlayın.

•  Ürün adı Label elementine Label > Properties > Value > Action Results > GetMarketProductsByBarcode > First > ProductName tanımlamasını yapın.
  

•  Tanımlama sonrası Value alanının altında oluşan Design Placeholder alanına “Ürün Adı” eklemesini yapın.
•  Fiyatlandırma için fiyat Label elementinde Label > Properties > Value > Action Results > GetMarketProductsByBarcode > First > Price > To String tanımlamasını yapın.
  

• Tanımlama sonrası Value alanının altında oluşan Design Placeholder alanına “0.00” eklemesini yapın.
•  Son durumda sayfa yapısı aşağıdaki gibi olmalıdır.

Preview

Uygulama test edildiğinde, Tara butonuna tıklandığında barkod tarama ekranı açılır. Kullanıcı, ilgili ürüne ait barkodu okuttuğunda barkod değeri Barcode Input elementi üzerinden otomatik olarak alınır.

Okutulan barkoda karşılık gelen ürünün isim ve fiyat bilgileri sistem tarafından getirilerek ekranda görüntülenir. Aynı zamanda, okutulan barkod numarası Barcode Input alanı üzerinde takip edilebilir şekilde gösterilir.

‍

4. Ortak Özellikler (Properties)

Barcode Input elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Barcode Input elementini mümkün olduğunca tarama odaklı kullanın. Manuel girişe izin verilecekse, kullanıcıyı yönlendiren bir Placeholder metni ekleyin.
• Barkod okutma işlemi sonrası onChange tetikleyicisini kullanarak otomatik aksiyonlar çalıştırın. Böylece kullanıcı ekstra bir butona basmak zorunda kalmaz.
• Doğrulama gerektiren senaryolarda onPressEnter veya onBlur tetikleyicileri ile ek kontroller uygulayın. Bu yöntem, hatalı barkod girişlerini erken aşamada yakalamanızı sağlar.
• Barkod değeri ile veri çekilecekse (ürün, stok, sipariş vb.), aksiyon sonucunda tablo veya form alanlarını otomatik doldurarak kullanıcı deneyimini hızlandırın.

6. Kısıtlamalar

• Barcode Input elementi, kamera veya tarayıcı desteği olmayan ortamlarda yalnızca manuel girişle çalışır.
• Otomatik tarama davranışı, kullanılan cihaz ve tarayıcıya bağlı olarak farklılık gösterebilir.