Screens (Ekranlar)

A. Blank Screen

Blank ekran şablonları, başlangıçta üzerinde herhangi bir element bulunmayan temel ekranlardır. Bu şablonlar, üç farklı çeşitte sunulur:

1. 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.
2. Blank With Header
   
   • Sadece Header elementi bulunan bir ekran şablonudur.
   • Yalnızca web uygulamalarında kullanılabilir.
3. 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?

1. Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın. 
2. Sol kenardaki Screens panelini açın.
3. "+" ikonuna tıklayın.
4. Açılan menüden New Screen seçeneğini seçin.
5. Blank ekran türlerinden birini seçin.
6. 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?

1. Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın. 
2. Screens Panelini açın.
3. "+" ikonuna tıklayın.
4. New Screen seçeneğini seçin.
5. CRUD Wizard seçeneğine tıklayın.
6. 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?

1. Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın. 
2. Screens paneline gidin.
3. "+" ikonuna tıklayın.
4. Screen seçeneğini seçin.
5. 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.

D. Image To Screen 

1. Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın. 
2. Screens Panelini açın.
3. "+" ikonuna tıklayın.
4. New Screen seçeneğini seçin.
5.  Image to Screen seçeneğine tıklayın.

• Drag & drop here or: Görselleri sürükleyip bırakabileceğiniz alandır. Alternatif olarak dosya yüklemek için butonlar kullanılabilir.
• SELECT: Bilgisayardan .jpg veya .png formatındaki bir görsel seçmek için kullanılır.
• PASTE FROM CLIPBOARD: Panoya kopyalanmış bir görseli yapıştırarak yükleme yapmanızı sağlar.
• Enter image URL: İnternetten bir görseli doğrudan URL girerek yüklemenize olanak tanır.
• Screen name: Oluşturulacak ekran için bir isim girilen alan.

       6. CREATE butonu ile yüklenen görsel doğrultusunda ekranı oluşturmayı başlatabilirsiniz.

Dashboard Şablonları 

1. 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.
2. 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.
3. 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.
     
     • İlk Row'da Bar Chart yer alır.
     • İkinci Row'da ise Donut Chart bulunur.
4. 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.
5. Marketing Dashboard
   
   • Hazır bir Header yapısı bulunur.
   • Kalan alan, pazarlama verilerini görselleştirmek için çeşitli grafik ve tablo elemanları içerir. Genellikle Bar Chart, Line Chart ve KPI Kartları gibi bileşenler kullanılır.
6. Marketing Dashboard with Left Menu 
   
   • Hazır bir Header yapısı ve sol tarafta bir menü bulunur.
   • Menü, farklı pazarlama metriklerine hızlı erişim sağlar. Ana alan, grafikler, metrik kartları ve tablolarla pazarlama performansını analiz etmeye uygun bir düzen içerir.
7. Sales Dashboard
   
   • Hazır bir Header yapısı bulunur.
   • Kalan alan, satış verilerini analiz etmek için Bar Chart, Line Chart, Donut Chart ve satış tabloları gibi bileşenlerden oluşur. Satış performansı, ürün trendleri ve gelir takibi gibi göstergeleri içerir.
8. Sales Dashboard with Left Menu 
   
   • Hazır bir Header yapısı ve sol tarafta bir menü bulunur.
   • Menü, farklı satış metriklerine ve raporlarına erişim sağlar. Ana alan, satış analizine yönelik tablolar, grafikler ve KPI kartları ile zenginleştirilmiştir.

Ekran Oluşturma

1. Oluşturulacak ekran için bir Screen Name belirleyin.
2. 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ı

1. Single Column
   
   • Form yapısı tek kolon şeklindedir.
2. Two Columns
   
   • Form yapısı iki kolondan oluşur.
3. Image Gallery
   
   • Form yapısı iki kolondan oluşur.
   • İkinci kolonda Image Gallery elementi yer alır.
4. Location Picker
   
   • Form yapısı iki kolondan oluşur.
   • İkinci kolonda Google Maps elementi bulunur.

Ekran Oluşturma

1. Oluşturulacak ekran için bir Screen Name belirleyin.
2. Tüm ayarları yaptıktan sonra CREATE butonuna tıklayarak ekranı oluşturun.

Liste Şablonları

1. Two Columns
   
   • Form yapısı iki kolondan oluşur.
   • Birinci kolonda tablo elementi yer alır.
2. Detailed
   
   • Form yapısı, tablo, search ve selectbox elementlerinden oluşur.
3. Detailed and Search
   
   • Form yapısı, tablo ve selectbox elementlerinden oluşur.
4. Detailed with Location Picker
   
   • Form yapısı, tablo ve Google Maps elementlerinden oluşur.

Ekran Oluşturma

1. Oluşturulacak ekran için bir Screen Name belirleyin.
2. 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ı EklemeAuthentication ekranı şablonunu uygulamanıza eklemek ve düzenlemek için aşağıdaki adımları takip edebilirsiniz:

1. Screens panelini açın.
2. Ekranlar panelinde, +New Screen ikonuna tıklayın.
3. 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

1. Screen Name: Oluşturduğunuz ekran için bir isim belirleyin.
2. Tüm ayarları yaptıktan sonra CREATE butonuna tıklayarak ekranı oluşturun.

Authorization Şablonları  

• Access Role: Kullanıcılara belirli erişim izinleri tanımlamak için kullanılır. Uygulamanızın güvenlik gereksinimlerine uygun olarak farklı erişim rolleri belirleyebilirsiniz. 

Screen Group Şablonları

1. Grid Card with Search
   
   • Grid kart yapısı ve search (arama) fonksiyonunun bulunduğu şablondur.
2. Personal Grid Card with Search
   
   • Kişisel Grid Kart yapısı ve search (arama) fonksiyonunun bulunduğu şablondur.

Ekran Oluşturma

1. Screen Name: Oluşturduğunuz ekran için bir isim belirleyin.
2. Tüm ayarları yaptıktan sonra CREATE butonuna tıklayarak ekranı oluşturun. 

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.