Kuika ile uygulama geliştirme sürecinde, yeni ekranlar oluşturarak uygulamanızı genişletebilir ve özelleştirebilirsiniz. Ekran oluşturmak için Screens Paneli başlığındaki "+" ikonuna tıklayın ve açılan menüden New Screen seçeneğini seçin. Karşınıza çıkan New Screen modalında, ihtiyacınıza göre:
Boş bir ekran (Blank) oluşturabilirsiniz.
Şablon ekranlardan faydalanarak hızlı bir başlangıç yapabilirsiniz.
CRUD Wizard ile veri tabanınıza bağlı ekranlar oluşturabilirsiniz.
From Excel seçeneğiyle, Excel dosyasındaki verilerden ekranlar hazırlayabilirsiniz.
Şablonlar ve araçlar sayesinde, ekran tasarımlarınızı hızla hayata geçirebilir ve geliştirme sürecinizi kolaylaştırabilirsiniz. Bu eğitim içeriğinde, ihtiyacınıza uygun ekranları nasıl oluşturabileceğinizi öğreneceksiniz.
Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:
Ekran oluşturma ve yönetme araçları,
Ekran şablonları ve oluşturma,
Screen paneli name/duplicate/delete işlemleri.
Ekran Oluşturma ve Yönetme Araçları
A. Blank Screen
Blank ekran şablonları, başlangıçta üzerinde herhangi bir element bulunmayan temel ekranlardır. Bu şablonlar, üç farklı çeşitte sunulur:
Blank
Tamamen boş bir ekrandır; üzerinde hiçbir element bulunmaz.
Bu ekrana erişim kontrollerini Anonymous Access (herkes erişebilir) veya All Roles Access (tüm roller erişebilir) seçenekleriyle ayarlayabilirsiniz.
Blank With Header
Sadece Header elementi bulunan bir ekran şablonudur.
Yalnızca web uygulamalarında kullanılabilir.
Blank With Header For Mobile
Sadece Header elementi bulunan bir ekran şablonudur.
Yalnızca mobil uygulamalar için tasarlanmıştır.
Blank Ekran Nasıl Oluşturulur?
Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın.
Sol kenardaki Screens panelini açın.
"+" ikonuna tıklayın.
Açılan menüden New Screen seçeneğini seçin.
Blank ekran türlerinden birini seçin.
Ekranınıza bir isim verin ve CREATE butonuna tıklayın.
B. CRUD Wizard
CRUD Wizard, veritabanınıza bağlı Create (Oluştur), Read (Oku), Update (Güncelle) ve Delete (Sil) işlemlerini kolayca tanımlayarak, birkaç saniyede ekranlar oluşturmanızı sağlayan bir araçtır. Bu yapı, özellikle hızlı geliştirme süreçleri ve standart CRUD işlemleri için ideal bir çözümdür.
CRUD Wizard ile Ekran Nasıl Oluşturulur?
Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın.
Screens Panelini açın.
"+" ikonuna tıklayın.
New Screen seçeneğini seçin.
CRUD Wizard seçeneğine tıklayın.
Gerekli ayarları yaparak ekran oluşturma sürecine devam edin.
CRUD Wizard Ayarları
1. Datasources
Ekranların hangi veri kaynağına bağlı olacağını seçtiğiniz bölümdür.
Burada, ilgili veri kaynağı ve veri tablosu tanımlanır.
2. Screen Type
Oluşturulacak ekranın nasıl görüntüleneceğini belirler.
Drawer: Ekran, sayfanın sağ, sol, üst veya alt kenarından animasyonla açılır.
Modal Box: Ekran, mevcut sayfanın ortasında bir pop-up gibi görünür.
Current Page: Ekran, mevcut sayfayı kapatıp yeni bir sayfa olarak açılır.
3. Layout Design
Ekranın masaüstü, tablet veya telefon gibi cihazlarda nasıl görüneceğini ayarlarsınız.
Kolon düzeni, farklı cihaz türlerine uygun şekilde seçilebilir.
4. Choose Screen and Properties
Oluşturulacak ekranın işlevlerini ve özelliklerini seçtiğiniz bölümdür:
List Screen: Veri tablosunu listelemek için bir Table elementi ile ekran oluşturur.
Search: Liste ekranına bir arama alanı ekler.
Pagination: Liste ekranına bir sayfalama kontrolü ekler.
Create: Yeni veri eklemek için bir form ekranı oluşturur.
View: Tablodaki bir öğenin detaylarının görüntülenmesini sağlar (Göz ikonu eklenir).
Update: Verilerin güncellenmesini sağlayan bir form ekranı ekler (Kalem ikonu eklenir).
Delete: Liste ekranından veri silmeye yarayan bir buton ve fonksiyon ekler.
5. Screen Name
Oluşturulan ekran için bir isim belirlenir.
Tüm ayarları yaptıktan sonra "CREATE" butonuna tıklayarak ekran oluşturabilirsiniz.
CRUD ile oluşturulan ekranların Header bölümüne, otomatik olarak bir "Navigate" aksiyonu eklenir. Bu aksiyon, menü ikonuna tıklandığında Left Menu ekranını açar. CRUD ekranları, daha sonra Left Menu'ya bağımsız öğeler olarak eklenebilir.
CRUD Wizard sayesinde, veritabanı işlemleriyle tam uyumlu ve kullanıcı dostu ekranlar oluşturmak hem hızlı hem de kolaydır.
C. From Excel
From Excel özelliği, cihazınızdaki Excel dosyalarını uygulamanızın Database bölümüne aktararak, verileri doğrudan veritabanına import etmenizi sağlar. Yüklediğiniz Excel dosyasının her bir sayfası bir tablo olarak, her bir kolon başlığı ise tablo kolonu olarak kabul edilir. Kolon altındaki veriler, belirtilen tabloya eklenir. Bu sayede, Excel dosyasındaki verilerle kolayca CRUD ekranları oluşturabilirsiniz.
From Excel Ekranı Nasıl Oluşturulur?
Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın.
Screens paneline gidin.
"+" ikonuna tıklayın.
Screen seçeneğini seçin.
From Excel seçeneğine tıklayın.
From Excel Ayarları
1. Datasources
Ekranlar için kullanılacak veriyi seçmek için Choose from computer seçeneğine tıklayın.
Cihazınızda bulunan Excel dosyasını seçerek verilerinizi import edebilirsiniz.
2. Screen Name
Oluşturulan ekran için bir isim belirleyin.
Tüm ayarları yaptıktan sonra CREATE butonuna tıklayarak ekranı oluşturun.
Excel dosyanızdaki verileri doğrudan uygulamanıza entegre ederek, bu verilerle CRUD işlemlerini hızla gerçekleştirebilirsiniz.
Ekran Şablonları Oluşturun
Dashboard Şablonları
Dashboard
Hazır bir Header yapısı bulunur.
Kalan alanda 1 Row ve 1 Table elementi yer alır.
Row içerisinde iki kolon bulunur.
Birinci kolonda Bar Chart ve Donut Chart grafik elemanları, ikinci kolonda ise bir tablo yer alır.
Card and List
Hazır bir Header yapısı bulunur.
Kalan alanda 1 Row ve 1 Table elementi yer alır.
Row elementinin yapısı tek kolon şeklindedir.
Two Columns
Hazır bir Header yapısı bulunur.
Kalan alan iki kolondan oluşur.
İlk kolonda bir Table elementi yer alırken, ikinci kolonda iki Row bulunur.some text
İlk Row'da Bar Chart yer alır.
İkinci Row'da ise Donut Chart bulunur.
Blank (Three Columns)
Hazır bir Header yapısı bulunur.
Kalan alanda 1 Row ve 1 Table elementi yer alır.
Row içerisinde üç kolon bulunur.
Ekran Oluşturma
Oluşturulacak ekran için bir Screen Name belirleyin.
Tüm ayarları yaptıktan sonra CREATE butonuna tıklayarak ekranı oluşturabilirsiniz.
Bu şablonlar, kullanıcı dostu ve düzenli veri görselleştirmesi için ideal olup, çeşitli ihtiyaçlara yönelik esnek ekran yapılarını kolayca oluşturmanıza olanak tanır.
Form Şablonları
Single Column
Form yapısı tek kolon şeklindedir.
Two Columns
Form yapısı iki kolondan oluşur.
Image Gallery
Form yapısı iki kolondan oluşur.
İkinci kolonda Image Gallery elementi yer alır.
Location Picker
Form yapısı iki kolondan oluşur.
İkinci kolonda Google Maps elementi bulunur.
Ekran Oluşturma
Oluşturulacak ekran için bir Screen Name belirleyin.
Tüm ayarları yaptıktan sonra CREATE butonuna tıklayarak ekranı oluşturun.
Liste Şablonları
Two Columns
Form yapısı iki kolondan oluşur.
Birinci kolonda tablo elementi yer alır.
Detailed
Form yapısı, tablo, search ve selectbox elementlerinden oluşur.
Detailed and Search
Form yapısı, tablo ve selectbox elementlerinden oluşur.
Detailed with Location Picker
Form yapısı, tablo ve Google Maps elementlerinden oluşur.
Ekran Oluşturma
Oluşturulacak ekran için bir Screen Name belirleyin.
Tüm ayarları yaptıktan sonra CREATE butonuna tıklayarak ekranı oluşturun.
Bu şablonlar, listeleme ve arama gibi işlevsellikleri hızlıca oluşturmanıza yardımcı olur ve farklı düzen seçenekleri sunar.
Authentication Şablonları
Kuika, uygulama geliştirme sürecini hızlandırmak amacıyla çeşitli Authentication (kimlik doğrulama) ekran şablonları sunmaktadır. Bu şablonlar, kullanıcı giriş, kayıt, şifre sıfırlama ve doğrulama işlemleri gibi yaygın kimlik doğrulama süreçlerini kolaylaştırır. Geliştirdiğiniz uygulamanın ihtiyaçlarına uygun olarak bu şablonları kullanabilir ve düzenleyebilirsiniz.
Şablon Authentication Ekranı Ekleme
Authentication ekranı şablonunu uygulamanıza eklemek ve düzenlemek için aşağıdaki adımları takip edebilirsiniz:
Screens panelini açın.
Ekranlar panelinde, +New Screen ikonuna tıklayın.
Açılan pop-up penceresinde, sol menüdeki Authentication seçeneğine tıklayın.
Authentication Ekran Şablonları
Authentication ekran şablonları farklı türlerde sunulmaktadır. Uygulamanızın ihtiyacına uygun olanı seçebilir ve gerekli düzenlemeleri yapabilirsiniz. Her şablon, varsayılan metin içerikleriyle gelir, ancak bu içerikler uygulamanıza özel olarak güncellenebilir.
1. Progressive User
Kullanıcı listesinin bulunduğu hazır bir şablon sunar.
2. Reset Password
Kullanıcıların şifrelerini sıfırlamalarını sağlayacak hazır şablonlar sunar.
3. Sign In
Kullanıcıların giriş yapabileceği hazır Sign In ekran şablonu sağlar.
4. Sign Up
Kullanıcıların kayıt olabileceği hazır Sign Up ekran şablonu sunar.
5. User Template
Kullanıcıdan gerekli bilgilerin alınabileceği bir şablon sunar.
6. Verification Code
Reset Password işleminde, doğrulama kodu alınmasına olanak tanır.
Ekran Oluşturma
Screen Name: Oluşturduğunuz ekran için bir isim belirleyin.
Tüm ayarları yaptıktan sonra CREATE butonuna tıklayarak ekranı oluşturun.
Screen Group Şablonları
Grid Card with Search
Grid kart yapısı ve search (arama) fonksiyonunun bulunduğu şablondur.
Personal Grid Card with Search
Kişisel Grid Kart yapısı ve search (arama) fonksiyonunun bulunduğu şablondur.
Ekran Oluşturma
Screen Name: Oluşturduğunuz ekran için bir isim belirleyin.
Tüm ayarları yaptıktan sonra CREATE butonuna tıklayarak ekranı oluşturun.
Screens Paneli Name/Duplicate/Delete İşlemleri
Kuika platformunda ekran oluşturmak için UI Design modülünde Screens Paneli başlığındaki "+" ikonuna tıkladıktan sonra açılan menüden "New Screen" seçeneğini seçin.
New Screen modalında, boş bir ekran oluşturabileceğiniz gibi şablon ekranlar veya CRUD Wizard ve From Excel gibi araçları kullanarak birkaç tıklama ile ekranlar oluşturabilirsiniz. Ekran oluşturduktan sonra, ekranınıza bir isim verin.
Ekran İsimlendirme ve Yönetim İşlemleri:
Oluşturduğunuz ekranın isminin karşısında bulunan üç nokta simgesine tıklayarak aşağıdaki işlemleri gerçekleştirebilirsiniz:
Rename: Ekranın ismini değiştirebilirsiniz.
Duplicate: Ekranı çoğaltarak yeni bir ekran oluşturabilirsiniz.
Delete: Ekranı silebilirsiniz.
Bu işlemler, ekran yönetimini kolaylaştırarak daha düzenli bir geliştirme süreci sağlar.
