1. Kuika platformuna giriş yapın.
2. Apps ekranından çalışacağınız projeyi seçin.
3. UI Design modülüne girin.

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

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.

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.

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.

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.

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:

1. Ekrandaki elementi seçin.
2. Sağ kenardaki Properties panelini açın.
3. 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.