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

4. Sol kenardaki Elements panelinden Special kategorisini seçin.
5. Big File Upload elementini çalışma alanına sürükleyip bırakın.

‍

‍

• Chunk Size: Büyük dosyaların sunucuya yüklenirken küçük parçalara bölünmesini sağlayan parametredir. Özellikle 100 MB ve üzerindeki dosyaların yüklenmesi sırasında bağlantı kopmaları gibi sorunları minimize eder. Örneğin, 10 MB’lık parçalar halinde yükleme ayarlanırsa, dosya 10 MB’lık bloklar şeklinde gönderilir ve yükleme sırasında yaşanabilecek kesintilerde sadece ilgili parça yeniden yüklenir. Bu sayede hem ağ trafiği dengelenir hem de yükleme daha stabil hale gelir. Chunk Size ayarı, uygulamanın performansı ve kullanıcı deneyimi için kritik bir parametredir. Dosya boyutuna ve hedef kitlenin internet hızına göre optimum değer belirlenmelidir. 
• Label: Dosya yükleme alanının ne amaçla kullanıldığını açıklayan kısa bir bilgilendirme metnidir. Yüklenmesi gereken dosyanın türünü ve sistemin beklentisini net şekilde anlar. Örneğin, “Lütfen kimlik belgenizi yükleyin” şeklinde yazılan bir label, kullanıcıyı yönlendirir ve yanlış dosya yüklemesini engeller. Label metni, uygulamanın kullanım senaryosuna göre değiştirilebilir ve kullanıcı deneyimini artıracak açıklıkta olmalıdır. 
• Hint: Dosya yükleme süreciyle ilgili ipucu veya teknik kısıtlamaları bildiren metindir. Dosya formatı, maksimum boyut veya özel yükleme talimatları yer alabilir. Örneğin, “Yalnızca .pdf veya .jpg dosyaları yükleyebilirsiniz” veya “En fazla 200 MB dosya yükleyebilirsiniz” gibi bir metin yazılabilir. Yükleme alanında ya da yükleme butonunun hemen altında görünecek şekilde konumlandırılır ve sürecin sorunsuz tamamlanmasını sağlar. 

File Upload Path (Dosya Yükleme Dizini) Ayarı

Dosya yükleme işlemleri için yükleme dizin ayarını yapmak üzere aşağıdaki adımları izleyin:

1. Configuration Manager modülüne gidin.

2. File Upload Path alanını bulun.
3. Dosyaların yükleneceği sunucu dizin yolunu yazın. (Örnek: /userUploads/)
4. Ayarları kaydedin.

Dosya yükleme dizini Configuration Manager modülündeki File Upload Path ayarı üzerinden tanımlanır. Dinamik dosya yolu ayarlama yapılmaz.

Dosya Yükleme

İstemci tarafında seçtiği veya sürükleyip bıraktığı büyük boyutlu dosyaları HTTP multipart/form-data formatında sunucuya yükler. İşlem, ağ performansını optimize etmek ve olası kesintilerde veri kaybını önlemek amacıyla chunk (parça) mantığıyla gerçekleştirilir. 

• Dosyayı doğrudan element üzerine sürükleyip bırakın.
• Sistem dosyayı Chunk Size parametresine göre parçalara böler (örnek: 10 MB). 
• Her parça sırayla sunucuya iletilir ve geçici bellekte tutulur. 

• Yükleme tamamlandığında On Upload Finish aksiyonu tetiklenir. Bu aksiyonla birlikte aşağıdaki değerler üretilir ve yönetim için kullanılmalıdır: 
  
  • File ID (GUID): Yüklenen dosyaya sistem tarafından atanan benzersiz kimlik.
  • File Name: Kullanıcının yüklediği orjinal dosya adı. 

File ID veritabanında saklanmalı ve tüm indirme-silme işlemleri bu ID üzerinden yönetilmelidir. Aksi takdirde dosya üzerinde işlem yapılamaz. 

Dosya İndirme

1. Big File Upload elementine tıklayın.
2. Sağ kenardaki Properties panelini açın.

3. +ADD ACTION menüsünden On Upload Finish → Device → Download File From Server seçeneğini seçin.
4. Aşağıdaki alanları yapılandırın:

• File ID: İndirilecek dosyanın benzersiz kimlik numarasını girin. (Örn: "{{uploadedFileId}}")
• File Name: İndirilecek dosya için bir isim belirleyin. Dosya, belirlediğiniz bu adla kullanıcının cihazına indirilecektir. (Örn: "Rapor_2024.pdf")

File ID eksik veya hatalı girilirse sistem dosyayı bulamaz ve indirme işlemi başarısız olur. ID mutlaka yükleme sırasında alınmalı ve saklanmalıdır. 

İndirme isteği tetiklendiğinde:

• Sistem belirtilen File Path ve File ID ile dosyayı doğrular. 
• MIME tipi kontrol edilerek dosya HTTP üzerinden istemciye aktarılır. 
• Tarayıcı kullanıcının ayarlarına göre dosyayı otomatik indirir veya kaydetme seçeneğini sunar. 

İndirme işlemi tetiklenmeden önce kullanıcının ilgili dosya üzerinde yetkisi olup olmadığı kontrol edilmelidir. 

Dosya Silme

1. Big File Upload elementine tıklayın.
2. Sağ kenardaki Properties panelini açın.

3. +ADD ACTION menüsünden On Upload Finish → Device → Delete File From Server seçeneğini seçin.
4. Aşağıdaki alanları yapılandırın:

• File ID: Silinecek dosyanın benzersiz kimlik numarası.

File Path ve File ID eşleşmezse dosya tespit edilemez ve işlem başarısız olur. File ID yükleme sonrası mutlaka kayıt altına alınmalıdır. 

Silme işlemi tetiklendiğinde: 

• Sistem, File Path ve File ID bilgilerine göre dosyayı doğrular. 
• Doğrulama tamamlandığında dosya sunucudan kalıcı olarak silinir. 
• Silinen dosya kurtarılamaz. 

Silme işleminden önce, dosyanın sistemde kullanılmadığı ve başka işlemler tarafından referans alınmadığı mutlaka kontrol edilmelidir. Aksi durumda sistemsel hatalar ve veri kayıpları yaşanabilir. 

Bu kılavuzu takip ederek Big File Upload elementini uygulamanızda etkili bir şekilde kullanabilirsiniz.

‍

Bir web uygulamasında kullanıcıların kimlik, diploma veya sertifika gibi belgeleri yükleyip daha sonra görüntüleyebilmesi, indirebilmesi ve gerekirse silebilmesi gerekmektedir. Belgeler kullanıcıya özel dizinlerde saklanmalı ve işlem adımları sistem üzerinden izlenebilir olmalıdır. 

Dosya yükleme 

1. Big File Upload elementine tıklayın.
2. Sağ kenardaki Properties panelinden Label alanında “Belgenizi yükleyin” yazın. 
3. Ardından Hint alanında “Yalnızca .pdf, .jpg veya .png uzantılar yükleyebilirsiniz. Max. boyut: 200 MB” yazın. 
4. Yükleme tamamlandığında aşağıdaki işlemler tetiklenir: 
   
   • File ID ve File Name sistemden alınır. 
   • Kullanıcı tablosundaki ilgili kayıtla ilişkilendirilerek veritabanına kaydedilir.

INSERT INTO user_documents (user_id, file_id, file_name, upload_date)VALUES ({{currentUser.userId}}, {{uploadedFileId}}, {{uploadedFileName}}, NOW());

‍

File ID, tüm indirme ve silme işlemleri için referans olacaktır. Kaydedilmeden işlem yapılamaz. 

Dosya indirme 

5. Sol kenardaki Elements panelinden bir Button elementi ekleyin. 
6. Properties panelinden Label alanına “Belgeyi İndir” yazın. 
7. +ADD ACTION menüsünden OnClick → Device → Download File From Server seçeneğini seçin.
8. Aşağıdaki alanı düzenleyin:
   
   • File ID: İndirilecek dosyanın benzersiz kimlik numarasını girin. (Örn: {{selectedDocument.file_id}})

Dosya silme

9. Sol kenardaki Elements panelinden bir Button elementi ekleyin. 
10. Properties panelinden Label alanına “Belgeyi Sil” yazın. 
11. +ADD ACTION menüsünden OnClick→ Device → Delete File From Server seçeneğini seçin.
12.  Aşağıdaki alanı düzenleyin:
    
    • File ID: İndirilecek dosyanın benzersiz kimlik numarasını girin. (Örn: {{selectedDocument.file_id}})

Silme işlemi öncesinde kullanıcıya onay ekranı sunulmalı. Silinen dosya geri getirilemez. 

Bu örnek senaryo ile Big File Upload kullanılarak;

• Dosya yükleme,
• Dosya bazlı veri kaydı,
• Güvenli indirme ve silme işlemleri,
• Yetki ve kullanıcı kontrolü sağlanır.

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.