Kuika’nın QR Renderer elementi, uygulamanızda dinamik olarak QR kodları oluşturup görüntülemek için kullanılır. QR kodları, kullanıcıların belirli bir veriyi veya bağlantıyı hızlı bir şekilde tarayıp erişmelerini sağlar. Genellikle mobil cihazlar tarafından taranarak kullanıcıları belirli bir sayfaya yönlendirmek, bir bağlantıyı paylaşmak veya bir işlem başlatmak için kullanılır. Örneğin, bir ödeme sayfası veya etkinlik bileti için QR kodu gösterebilirsiniz. Bu eğitim içeriğinde, QR Renderer elementini kullanarak uygulamanızda QR kodları nasıl oluşturabileceğinizi ve görüntüleyebileceğinizi öğreneceksiniz.
QR Renderer elementi yalnızca web uygulamalarında desteklenmektedir.
Bu eğitim içeriği aşağıdaki başlıklardan oluşur:
QR Renderer elementi ekleme
QR Renderer elementi özellikleri
QR Kod oluşturma
QR Kod görüntüleme
QR Kod okutma
Element ayarları ve özelleştirme
Qr Renderer Elementi Ekleyin
Kuika platformuna giriş yapın.
Apps ekranından çalışacağınız projeyi seçin.
UI Design modülüne girin.
Sol kenardaki Elements panelinden, Display kategorisi altındaki QR Renderer elementini sürükleyerek ekranınıza bırakın.
QR Renderer elementini boş bir alana sürüklerseniz, otomatik olarak bir Row elementi içinde eklenir.
Bir Column içine sürüklerseniz, yalnızca QR Renderer elementi eklenir.
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.
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.
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.
Kuika platformuna giriş yapın.
UI Design modülüne girin.
Sol kenardaki Elements panelinden Text Input kategorisi altındaki URL elementini ekrana sürükleyin.
Sağ kenardaki Properties panelinde Value alanına QR koda dönüştürmek istediğiniz URL’yi girin.
ADD ACTION açılır menüsünden On Change → Export → Generate QR Code seçimini yapın.
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.
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.
QR kodu farklı bir ekranda göstermek için UI Design modülünün Screens panelinden + ikonuna tıklayın.
New Screen seçimini yapın ve ekrana “QR Code” adını verin.
Sol kenardaki Elements panelinden Display kategorisi altındaki Image elementini ekrana sürükleyip bırakın.
Generate QR Code aksiyonunu eklediğiniz ekrana geri dönün.
Sağ kenardaki Properties panelinde ADD ACTION açılır menüsünden On Change → Navigation → Navigate aksiyonunu ekleyin.
To Screen alanından “QR Code” ekranını ve açılma yöntemini seçin.
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.
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.
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.
Element Ayarları ve Özelleştirme
Authorization (Yetkilendirme)
Anonymous Access: Kullanıcıların hesap bilgisi girmeden erişmesini sağlar.
All Roles Access: Kullanıcıların hesap bilgileri doğrulanarak erişim sağlanır.
Element düzeyinde yetkilendirme için Properties panelinden Authorization ayarlarını düzenleyin.
Visibility (Görünürlük)
Always Visible: Element her zaman görünür.
Hidden: Element gizlenir.
Sometimes Visible: Element, belirli bir koşula bağlı olarak görünür.
Ayarı yapılandırmak için:
Ekrandaki elementi seçin.
Sağ kenardaki Properties panelini açın.
Visibility alanında ihtiyacınıza göre bir seçenek belirleyin.
Editability (Düzenlenebilirlik)
Enabled: Element düzenlenebilir.
Disabled: Element düzenlenemez.
Sometimes Enabled: Element, belirli koşullara göre düzenlenebilir veya düzenlenemez.
Style Panel ile Arayüz Tasarımı
Elementlerinizi Styling Panel ile özelleştirerek, web ve mobil uygulamalarınız için etkileyici arayüzler oluşturabilirsiniz. Bu bölümde, aşağıdaki ayarları yapılandırabilirsiniz:
Layout (Düzen): Boyutlandırma, hizalama ve iç boşluk (padding) ayarları. Ayarlar arasında Size, Min Size ve Align bulunur.
Text (Metin): Yazı tipi, stil, renk, boyut ve aralık ayarları.
Fill (Dolgu): Arka planı renk veya görsellerle özelleştirme.
Border (Kenarlık): Kenarlık ekleme ve köşe yarıçapı ayarları.
Shadow (Gölge): Elementlere derinlik katmak için gölge efekti ekleme.
Bu adımları takip ederek, Area Chart elementini ihtiyaçlarınıza uygun şekilde yapılandırabilirsiniz.
Actions (Aksiyonlar)
Kuika, aşağıdaki sistem aksiyonlarını destekler:
Arithmetic, Authorization, Condition, Device, Export, Geolocation, Invers, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration ve String Operations.
Kendi oluşturduğunuz SQL aksiyonlarını da kullanabilirsiniz.
Aksiyon eklemek için Properties panelinden +ADD ACTION butonunu kullanabilirsiniz.
Actions desteği bazı elementlerde geçerli olmayabilir.
