UI Design

Screens (Ekranlar)

Kuika ile geliştirilen uygulamalarda ekran oluşturarak uygulamada bulunan ekranları çoğaltabilirsin. Ekran oluşturmak için Screens Paneli başlığındaki + ikon butonu ile açılan menüden New Screen’e tıklayın. Açılan New Screen modalda boş bir ekran (Blank) oluşturabileceğiniz gibi şablon ekranlarla da başlayabilirsiniz. CRUD Wizard ve From Excel ile de birkaç tıklamayla ekranlar oluşturabilirsiniz.

Eğer Screen paneli açık durumdayken ekrana veya ekrandaki elementlere tıklandığında otomatik olarak Elements paneline yönlendirme yapılmaktadır.

1.1 Blank Screen

Blank ekran şablonları boş ekranlardır. Blank, Blank With Header ve Blank With Header For Mobile olmak üzere üç çeşidi vardır.

Blank: Tamamen boş yani üzerinde herhangi bir element bulunmayan bir ekrandır. Bu ekrana erişim kontrollerini Anonymous Access ve All Roles Access ile yapabilirsiniz.
‍Blank With Header: Üzerinde sadece Header elementi bulunan ve sadece web uygulamalarında çalışan bir ekrandır.
‍Blank With Header For Mobile: Üzerinde sadece Header elementi bulunan ve sadece mobil uygulamalarda çalışan bir ekrandır.
Blank ekran oluşturmak için Screens → + ikonu → New Screen → Blank’e tıklayın. Blank çeşidini seçin ve ekran ismi verip CREATE butonuna tıklayın.

1.2 CRUD Wizard

CRUD Wizard, veritabanınıza bağlı Create (Oluştur), Read (Oku), Update (Güncelle) ve Delete (Sil) fonksiyonlarını kullanarak saniyeler içerisinde hızla ekranlar oluşturan bir yapıdır.

CRUD Wizard ekran oluşturmak için Screens panelinde “+” > New Screen > CRUD Wizard’a tıklayın.

Datasources: Oluşturulacak ekranların veri kaynağının seçildiği bölümdür. Bu alanlarda ilgili veri kaynağı ve veri tablosu seçilir.
Screen Type: Oluşturulacak form ekranının görüntülenme tipinin belirlendiği alandır. some text
- Drawer: Sayfanın sağ, sol, üst veya alt kenardan bir animasyonla açıldığı ekran tipidir.
- Modal Box: Açık olan sayfanın ortasında pop-up gibi navigate edilip görüntülenmesini sağlayan ekran tipidir.
- Current Page: Açık olan sayfanın kapatılıp yeni bir sayfa olarak açıldığı ekran tipidir.
Layout Design: Ekranın masaüstü, tablet ve telefon gibi cihazlarda görüntülenirken kolon düzeninin seçildiği bölümdür.
Choose screen and properties: Oluşturulan ekran ve özelliklerinin tanımlandığı bölümdür.some text
- List screen: Seçilen veri tablosunun table elementi ile yapılacak liste ekranının oluşturulmasını sağlar.
- Search: Liste ekranında arama alanının eklenmesini sağlar.
- Pagination: Liste ekranındaki table elementi altına sayfa numaratörünün eklenmesini sağlar.
- Create: Liste ekranında bulunan verilere yenisinin eklenmesini sağlayan form ekranını oluşturur.
- View: Verinin tabloda görüntülenip görüntülenmemesini sağlar. Oluşturulan tabloda göz ikonu ile gösterilir.
- Update: Verilerin güncellemesini sağlayan form özellikleri eklenir. Ayrıca Liste ekranında her bir öğeye kalem ikonu eklenerek açılacak navigasyonu da otomatik ekler.
- Delete: Liste ekranından bir verinin silinmesini sağlayan fonksiyonu ve ilgili butonu ekler.
Screen name: Oluşturulan ekranın isimlendirildiği alandır. Ardından “CREATE” butonuna tıklayarak ekran oluşturabilirsiniz.

CRUD ile oluşturulan ekranların Header bölümünde, menü ikonuna tıklandığında ekranlardan Left Menu'yu açacak bir “Navigate” aksiyonu otomatik olarak eklenir. Oluşturulan CRUD ekranlarını daha sonra Left Menu ekranından ayrı ayrı öğe olarak ekleyebilirsiniz.

1.3 From Excel

Cihazınızda yer alan excel dosyalarını uygulama içerisindeki Database içerisine tablo olarak Excel'e import ile ekleyebilirsiniz. Excel import kategorisinde yüklediğiniz Excel dosyasının her bir sayfası bir tablo olarak, her bir kolon başlığı tablo kolonu olarak ve kolon altındaki veriler tabloya yazılacak şekilde Database’e eklenir. Bu tablo ile istenilen seçeneklerle CRUD ekranları oluşturulmaktadır.

From Excel screen oluşturmak için Screens → + ikonu → Screen → From Excel’e tıklayın.

Datasources: Oluşturulacak ekranlarda Choose from computer’a tıklayarak cihazınız içerisinde bulunan Excel dosyalarını entegre edebilirsiniz.
Screen name: Oluşturulan ekranın isimlendirildiği alandır. Ardından CREATE butonuna tıklayarak ekran oluşturulur.

2.1 Dashboard Şablonları

Dashboard: Hazır Header yapısı bulunmaktadır. Kalan alanda 1 Row ve bir Table elementi bulunmaktadır. Row içerisinde iki kolon yapısı bulunmaktadır. Kolon yapısı içerisinde Bar Chart ve Donut Chart yapısının ve bir tablonun bulunduğu şablondur.

Card and List: Hazır Header yapısı bulunmaktadır. Kalan alanda 1 Row ve 1 Table elementi yer almaktadır. Row elementinin yapısı 1 kolondan oluşmaktadır.

Two Col: Hazır Header yapısı bulunmaktadır. Kalan alan iki kolondan oluşmaktadır. Birinci kolonda tablo elementi yer alırken ikinci kolon iki Row'dan oluşmuştur. İlk Row'da Bar Chart elementi yer almaktadır. İkinci row'da ise donut chart elementi yer almaktadır.

Three Col : Hazır Header yapısı bulunmaktadır. Kalan alanda 1 Row ve bir Tablo elementi bulunmaktadır. Row içerisinde üç kolon yapısı bulunmaktadır.

Screen name: Oluşturulan ekranın isimlendirildiği alandır. Ardından CREATE butonuna tıklayarak ekran oluşturulur.

2.2 Form Şablonları

Single Column: Form yapısı tek kolondan oluşmaktadır.

Two Columns: Form yapısı iki kolondan oluşmaktadır.

Image Gallery: Form yapısı iki kolondan oluşmaktadır. İkinci kolon yapısında Image Gallery elementi yer almaktadır.

Location Picker: Form yapısı iki kolondan oluşmaktadır. İkinci kolon yapısında Google Maps elementi yer almaktadır.

Screen name: Oluşturulan ekranın isimlendirildiği alandır. Ardından CREATE butonuna tıklayarak ekran oluşturulur.

2.3 Liste Şablonları

Two Columns: Form yapısı iki kolondan oluşmaktadır. Birinci kolon yapısı tablodan oluşmaktadır.

Detailed : Form yapısı tablo, search ve selectbox elementinden oluşmaktadır.

Detailed and Search: Form yapısı tablo, ve selectbox elementinden oluşmaktadır.

Detailed with Location Picker: Form yapısı tablo ve Google Maps elementinden oluşmaktadır.

Screen name: Oluşturulan ekranın isimlendirildiği alandır. Ardından CREATE butonuna tıklayarak ekran oluşturulur.

2.4 Authentication templates

Kuika'da Authentication ekran şablonlarını öğrenin.

Kuika, uygulama geliştirme sürecini hızlandırmak için çeşitli ekran şablon türlerini sunmaktadır. Uygulama geliştirme sürecinde şablon ekranları, uygulamanın ihtiyacına uygun olarak kullanabilirsiniz. Kullanabileceğin şablon ekran türlerinden biri de Authentication ekranlarıdır.

Şablon Authentication Ekranı Ekleme:

Geliştirdiğiniz uygulamaya Authentication ekran şablonu ekleyebilir, düzenleme ve güncelleme işlemlerini yapabilirsiniz.

Authentication Ekranı şablonu eklemek için şu adımları izleyin:

Authentication ekran şablonu eklemek için sol kenardan Screens (Ekranlar) panelini açın.
Açılan Screens panelinde yer alan +New Screen ikonuna tıklayın.
Açılan pop-up sol menüde Authentication öğesine tıklayın.

Şablon Authentication Ekranları:

Authentication ekran şablonları çeşitli tiplerde bulunmaktadır. Bu noktada geliştirmekte olduğun uygulamaya uygun Authentication ekranı tipini seçebilirsiniz.

Uygulamanın ihtiyacına uygun olarak Authentication ekran şablonlarını ve tüm elementleri düzenleyebilirsiniz.

Authentication ekranları varsayılan metin içerikleri ile birlikte gelmektedir. Metin içeriklerinde güncelleme ve düzenlemeleri uygulaman özelinde gerçekleştirebilirsiniz.

Progressive user: Kullanıcı listesinin yer aldığı hazır bir şablonlar sunulmuştur.
‍Reset Password: Reset password hazır şablonlar sunulmuştur.
Sign In: Sign In hazır şablonlar sunulmuştur.
Sign Up: Sign Up hazır şablonlar sunulmuştur.
User Template: Kullanıcı için gerekli olabilecek bilgilerin alınabileceği bir şablonlar sunulmuştur.
Verification Code: Reset password işleminde Verification Code’un alınabileceği bir şablonlar sunulmuştur.
Screen name: Oluşturulan ekranın isimlendirildiği alandır. Ardından CREATE butonuna tıklayarak ekran oluşturulur.