1. QR Renderer Elementine Genel Bakış

QR Renderer elementi, uygulamanızda dinamik veya statik verilerden QR kodları oluşturmanızı sağlayan etkileşimli bir elementtir. Kullanıcılar, bu QR kodlarını mobil cihazlarıyla tarayarak bir bağlantıya yönlendirilebilir, bir işlem başlatabilir veya belirli bir içeriğe hızlıca erişebilir.

Modern uygulamalarda sık kullanılan bir bileşen olan QR Renderer, özellikle ödeme sistemleri, biletleme, etkinlik girişleri, kayıt işlemleri, veri paylaşımı ve kullanıcı doğrulama gibi senaryolarda oldukça işlevseldir. Uygulama içindeki herhangi bir metin, URL, ID veya dış kaynaktan dönen değer, Symbol Picker üzerinden QR koduna dönüştürülebilir.

QR kodunun otomatik olarak güncellenmesi, veri değişikliklerinin anında kullanıcıya yansıtılmasını sağlar. Bu da dinamik uygulamalarda hızlı ve pratik çözümler sunar.

QR Renderer elementi web ve mobil uygulamalarında desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Ödeme ve Fatura İşlemleri: Kullanıcıları bir ödeme sayfasına yönlendirmek, POS entegrasyonlarında hızlı ödeme oluşturmak veya fatura görüntüleme bağlantılarını paylaşmak için QR kodları kullanılabilir.
• Etkinlik ve Bilet Yönetimi: Etkinlik girişlerinde, konser veya seminer biletlerinde QR kod ile doğrulama yapılabilir. Her kullanıcıya özel olarak oluşturulan QR kodları tekil giriş sağlar.
• Kullanıcı Doğrulama Süreçleri: İki aşamalı doğrulama (2FA), e-posta doğrulama, hesap aktivasyonu gibi süreçlerde kullanıcıya özel üretilen QR kodları kullanılabilir.
• Hızlı Bağlantı Paylaşımı: Bir URL’nin, dokümanın veya uygulama içi sayfanın hızlı şekilde mobil cihazlarla erişilmesi için QR kodu üretilebilir.
• Form veya Kayıt Sayfalarına Yönlendirme: Webinar, etkinlik veya kayıt sayfalarına yönlendiren dinamik QR kodlar üretilebilir.
• Ürün Bilgisi Gösterimi: Bir ürün listeleme veya stok yönetim uygulamasında, her ürün için detay sayfasına yönlendiren QR kodlar kullanılabilir.
• Envanter ve Depo Yönetimi: Raf, kutu veya ürün ID'si gibi bilgiler QR koduna dönüştürülerek hızlı tarama ve işlem yapılabilir.

2. Temel Özellikler

• Statik veya Dinamik Veri Desteği: QR kodu sabit bir metin, URL veya kod içerebileceği gibi Symbol Picker üzerinden dinamik olarak da oluşturulabilir. Örneğin, sipariş numarası veya kullanıcı ID’si otomatik QR koduna dönüştürülebilir.
• Kapsayıcı Yapı ile Esnek Kullanım: QR Renderer bir görüntü elementi olarak çalışır; sadece QR çıktısını üretir. Üzerine başka element ekilmez ve kullanıcı etkileşimi gerektirmez.
• Hızlı Entegrasyon: Tek bir değer girilerek QR kodu anında oluşturulabilir. REST API, Managed DB veya kullanıcı girişlerinden alınan verilerle sorunsuz entegre olur.

2.1. QR Renderer Elementi Özellikleri

QR Renderer elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.

• Value: QR koda dönüştürülecek veriyi belirler. Statik bir değer girebilir veya Symbol Picker kullanarak bir Input elementinin içeriğini veya bir aksiyon sonucunda elde edilen değeri dinamik olarak alabilirsiniz.

2.1.1. QR Kod ile Veri Oluşturma ve Okuma

Kuika’da QR kod oluşturma işlemi, uygulamanızda kullanıcı deneyimini geliştirmenin ve verileri daha erişilebilir hale getirmenin etkili bir yoludur. QR kodlar, genellikle ürün takibi, kullanıcı doğrulama veya mobil ödeme sistemlerinde kullanılır.

• Veri Kodlama: Verilerinizi QR kod haline getirerek hızlı bilgi erişimi sağlayabilirsiniz. QR kodlar, string formatındaki verilerin (örneğin, metin veya URL) base64 formatına çevrilmesiyle oluşturulur ve tarayıcılar ya da mobil cihazlar üzerinden okunabilir.
• Özelleştirme: QR kodlar, görsel içeriklerinize entegre edilebilir. Farklı veriler için dinamik olarak QR kodlar oluşturabilir ve her kullanıcıya veya ürüne özgü kodlar yaratabilirsiniz.
• Performans: QR kodlar hızlı bir şekilde oluşturulabilir ve okunabilir. Veri boyutunun optimize edilmesiyle tarama hızı artırılabilir ve mobil cihazlarla yapılan taramalarda hızlı geri bildirim sağlanabilir.

2.1.2. QR Kod Oluşturma

QR kod oluşturmak için ilk adım, QR koduna dönüştürmek istediğiniz veriyi seçmektir. Bu veriler genellikle string formatında tutulur ve QR kod oluşturma sürecinde base64 formatına çevrilir. Bu örnekte, URL elementini kullanarak QR kod oluşturmayı öğreneceksiniz.

1. Kuika platformuna giriş yapın.
2. UI Design modülüne girin.

3. Sol kenardaki Elements panelinden Text Input kategorisi altındaki URL elementini ekrana sürükleyin.

4. Sağ kenardaki Properties panelinde Value alanına QR koda dönüştürmek istediğiniz URL’yi girin.

5. ADD ACTION açılır menüsünden On Change → Export → Generate QR Code seçimini yapın.

6. Açılan menüdeki Value alanında Symbol Picker’a tıklayarak Components → URL seçimini yapın.

Bu işlemler tamamlandıktan sonra, girilen URL’nin QR kodu otomatik olarak oluşturulacaktır.

2.1.3. QR Kod Görüntüleme

QR kodu farklı bir ekranda görüntülemek için Navigate aksiyonunu kullanarak yeni bir ekrana yönlendirme yapabilirsiniz.

1. QR kodu farklı bir ekranda göstermek için UI Design modülünün Screens panelinden + ikonuna tıklayın.

2. New Screen seçimini yapın ve ekrana “QR Code” adını verin.

3. Sol kenardaki Elements panelinden Display kategorisi altındaki Image elementini ekrana sürükleyip bırakın.
4. Generate QR Code aksiyonunu eklediğiniz ekrana geri dönün.

5. Sağ kenardaki Properties panelinde ADD ACTION açılır menüsünden On Change → Navigation → Navigate aksiyonunu ekleyin.

6. To Screen alanından “QR Code” ekranını ve açılma yöntemini seçin.
7. Sağ kenardaki Screen Input alanına tıklayarak QR kodun ID’sini tanımlayın.

Bu işlemler tamamlandıktan sonra QR kodunuz, yeni oluşturduğunuz ekranda görüntülenecektir.

2.1.4. QR Kod Okutma

QR kodu okutmak için mobil cihazlar ve tarayıcılar kullanılabilir. QR kodu okutmak istediğiniz elemente Scan Barcode aksiyonunu eklemeniz yeterlidir.

1. URL elementine geri dönün.

2. ADD ACTION açılır menüsünden On Change → Device → Scan Barcode aksiyonunu ekleyin.

Bu aksiyon sayesinde kullanıcılar, mobil cihazları veya tarayıcıları aracılığıyla QR kodu okutabilirler.

Önemli Notlar 

• QR kodlar, büyük veri setlerinde bile hızlı bir şekilde oluşturulabilir ve okunabilir.
• QR Renderer elementi, kullanıcıların belirli bir veriye veya bağlantıya anında erişmesini sağlar.
• Mobil cihazlar tarafından kolayca taranabilen QR kodlar, kullanıcı deneyimini geliştirir ve uygulamanızı daha kullanıcı dostu hale getirir.

2.2. Elemente Eklenebilen Aksiyonlar

QR Renderer elementi, yalnızca veri görselleştirme amacıyla kullanılan pasif bir bileşendir. Bu nedenle element seçildiğinde ADD ACTION butonu görüntülenmez ve QR Renderer’a herhangi bir kullanıcı etkileşimiyle tetiklenen aksiyon bağlanamaz.

QR Renderer için aksiyonlarla ilgili bilinmesi gerekenler:

• Herhangi bir onClick, onChange veya benzeri trigger desteklemez. Kullanıcı QR kodunun üzerine tıklasa bile bir aksiyon çalıştırılamaz.
  
  
• QR kodunun güncellenmesi yalnızca veri değişimiyle tetiklenir. Eğer QR kodunun değeri Symbol Picker üzerinden dinamik bir değere bağlıysa, bu değer değiştiğinde QR Renderer da otomatik olarak güncellenir.
• Her türlü işlem dış elementler üzerinden yapılmalıdır. Örneğin:
  
  • Kullanıcı bir butona basınca QR kodunun içeriği değişecekse → değişikliği buton aksiyonu yapar.
  • Bir tablo seçimiyle QR kodu güncellenecekse → seçim değişimi diğer elementlerdeki aksiyonla sağlanır.
• QR Renderer kendi içinde bir işlem başlatmaz, sadece verilen metni QR formatına dönüştürür.

Bu nedenle, QR Renderer'ın aksiyon yapısı tamamen pasif olup, uygulama içi davranışlar diğer elementler üzerinden yönetilir.

3. QR Renderer Elementi Nasıl Kullanılır? 

Bu bölümde QR Renderer elementinin uçtan uca kullanımını örnek bir senaryo üzerinden ele alacağız.

Senaryo: Analiz Dokümanına Göre QR Bazlı Belge Erişimi

Uygulamada kullanıcıların proje ya da işlemle ilişkili analiz dokümanlarına hızlı erişimi sağlamak için QR Renderer kullanılır. Bu senaryoda, her bir analiz dokümanı için dinamik olarak oluşturulan QR kodlar, ilgili dokümanın dijital sürümüne doğrudan yönlendirme yapar.

Senaryoda:

• Uygulama test edildiğinde, bir analiz veya rapor kaydı görüntülendiğinde ekranda otomatik olarak ilgili dokümana işaret eden bir QR kodu gösterilir.
• QR kodu okutulduğunda, kullanıcının mobil cihazında analiz dokümanının PDF’si doğrudan açılır veya indirilir.
• Bu yönlendirme, dokümanın versiyon bilgisi, rapor başlığı, tarih gibi meta verilerle birlikte yapılır.
• Kullanıcı ayrıca dokümanın kısa açıklamasını ve sürüm geçmişini de aynı ekranda görebilir.

Adım 1 – Örnek Veri Aksiyonunu Oluşturma

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

• Sol yan panelde Custom Actions alanından yeni SQL Action oluşturun.
  

• Editör içerisindeki alana aşağıdaki SQL sorgusunu ekleyin ve Aksiyon adını GetAnalysisDocumentForQR olarak belirleyin. 

SELECT  'https://academy.kuika.com/tr/designer-1/analiz-dokumaninin-okunmasi' AS DocumentUrl,  N'Analiz Dökümanı' AS DocumentTitle;

Adım 2 – Initial Action Ekleme

• Sol yan panelde Screens alanından elementin ekleneceği sayfaya gidin.
• Sayfaya Add Action > Initial Action > Custom > Managed DB > GetAnalysisDocumentForQR aksiyonunu ekleyin.
  

Adım 3 – Sayfaya QR Renderer Elementi Ekleme ve Bağlama

• Sayfaya Elements > Display > Label elementini sürükleyip bırakın.
• Yazıyı Label > Properties > Value > Action Result > GetAnalysisDocumentForQR > First > DocumentTitle
  

• Sayfaya Elements > Display > QRRenderer elementini sürükleyip bırakın.
• Barcode alanı içerisine yazılacak değeri QRRenderer >  Properties > Value > Action Result > GetAnalysisDocumentForQR > First > DocumentUrl tanımlayın.
  

Preview

Uygulama test edildiğinde, Analiz Dökümanı başlığı altında ilgili dokümana ait QR kod otomatik olarak oluşturularak ekranda görüntülenir. QR kod, analiz dokümanının dijital sürümüne yönlendirme yapacak şekilde yapılandırılmıştır.
Kullanıcı QR kodu mobil cihazı ile okuttuğunda, analiz dökümanı doğrudan açılır ve dokümana hızlı erişim sağlanır. Bu yapı sayesinde kullanıcı, doküman bağlantısını manuel olarak paylaşmadan veya arama yapmadan, tek adımda ilgili analize ulaşabilir.

4. Ortak Özellikler (Properties)

QR Renderer 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)

• Dinamik veri bağlarken veri değişimlerini kontrol edin. Değer sürekli değişiyorsa QR kodu da her seferinde yeniden çizileceği için performansı etkileyebilir.
• QR kodunun taranabilirliğini artırmak için yeterli boşluk bırakın. Etrafında minimum 16–24 px boşluk olması önerilir.

6. Kısıtlamalar

• Element üzerine aksiyon eklenemez. QR koduna tıklama ile herhangi bir işlem tetiklenemez; tüm işlemler dış elementler üzerinden yapılmalıdır.
• Veri boş veya geçersizse QR kodu oluşturulamaz. Özellikle Symbol Picker ile bağlanan dinamik alanların boş gelmesi QR render’ını engeller.