Chat

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. Chat elementini çalışma alanına sürükleyip bırakın.

• Boş bir alana sürüklerseniz, element bir Row elementi ile birlikte eklenir.‍
• Column içerisine sürüklerseniz yalnızca Chat elementi eklenir.

• Datasource
  • Yukarıda oluşturulan chatHistory seçilir.
  • Mesaj geçmişi buradan alınır.
  Current User Name
  • Giriş yapan kullanıcı adı bağlanır (örneğin: loggedInUser.name).
  • Chat’te gönderici bilgisini ayırt etmek için gerekir.
  Dark Mode
  • Açık/Kapalı olarak ayarlanır.
  • Gece teması isteyen kullanıcılar için kullanıcı deneyimini artırır.
  Show Profile Photo
  • Aktif hale getirilir.
  • Avatar alanı kullanılarak mesaj balonlarında profil fotoğrafı gösterilir.
  Show User Name
  • Aktif hale getirilir.
  • Farklı temsilcilerle yapılan sohbetlerde kimin yazdığı kolayca anlaşılır.
  Allow Edit Message (Yalnızca web uygulamalarda kullanılabilir.)
  • Aktif hale getirilir.
  • Kullanıcı, tüm mesajlarını düzenleyebilir (örneğin: yazım hatası düzeltmek için).
  Allow Delete Message (Yalnızca web uygulamalarda kullanılabilir.)
  • Aktif hale getirilir.
  • Kullanıcı, tüm mesajlarını silebilir (örneğin: yanlışlıkla gönderilen mesajları kaldırmak için).
  Text To Speech (Yalnızca mobil uygulamalarda kullanılabilir.)
  • Mesajların sesli olarak okunmasına izin verir.
  • Görsel engeli olan kullanıcılar için erişilebilirliği artırır, mobilde sesli etkileşim imkânı sunar.

Bu örnek senaryo, uygulama kullanıcılarının, müşteri destek temsilcileriyle gerçek zamanlı mesajlaşabildiği bir Chat ekranı tasarlamayı içerir. 

Veri Kaynağı Hazırlığı 

Kuika ile veri kaynağına hızlı bir şekilde yeni bir tablo ekleyerek Chat elementinin mesaj geçmişini tutabilirsiniz. Aşağıdaki adımları izleyin:

• Datasources modülüne gidin. 
• Sol panelde Tables başlığı yanındaki + ikonuna tıklayın.
• Açılan menüden New Table seçeneğini seçin.
• Create a New Table ekranında tabloya bir isim verin (örneğin: chatHistory) ve Next butonuna tıklayın.

Gerekli sütun bilgilerini girin:

• Column Name: ID
• Type: Guid
• Required: ✔️
• Unique: ❌
• Column Name: mesaj – Mesaj içeriği
• Type: String 
• Required: ❌
• Unique: ❌
• Column Name: userDisplayName – Gönderenin görünen adı
• Type: String 
• Required: ❌
• Unique: ❌
• Column Name: avatar – Profil fotoğrafı URL’si (isteğe bağlı)
• Type: Image
• Required: ❌
• Unique: ❌
• Column Name: mesajCreatedAt– Mesaj gönderim zamanı
• Type: DateTimeOffset
• Required: ❌
• Unique: ❌
• Column Name: mesajModifiedAt – Mesajın güncellenme zamanı
• Type: DateTimeOffset
• Required:❌
• Unique: ❌
• Column Name: username – Kullanıcının sistemsel kullanıcı adı
• Type: String (200)
• Required:  ❌
• Unique: ❌

Datasource Filtreleme:

• Mesajları yalnızca ilgili kullanıcılar görebilmelidir.
• Örnek filtre:

WHERE username = loggedInUser.username

• Her sütunu girdikten sonra ADD butonuna tıklayın.
• Tüm sütunları ekledikten sonra CREATE butonuna tıklayarak tabloyu oluşturun.

Bu veri kaynağı, Chat elementinde “Datasource” olarak seçilecektir.

Chat Elementi Ekleme 

• UI Design modülüne gidin.
• Sol panelden Special > Chat elementini seçin.
• Ekrana sürükleyip bırakın:
  
  • Eğer Column içine bırakılırsa: Sadece Chat elementi eklenir.
  • Eğer boş alana bırakılırsa: Otomatik olarak bir Row elementi ile birlikte gelir.

Chat Elementi Ayarları

Datasource

• Yukarıda oluşturulan chatHistory seçilir.
• Mesaj geçmişi buradan alınır.

Current User Name

• Giriş yapan kullanıcı adı bağlanır (örneğin: loggedInUser.name).
• Chat’te gönderici bilgisini ayırt etmek için gerekir.

Dark Mode

• Açık/Kapalı olarak ayarlanır.
• Gece teması isteyen kullanıcılar için kullanıcı deneyimini artırır.

Show Profile Photo

• Aktif hale getirilir.
• Avatar alanı kullanılarak mesaj balonlarında profil fotoğrafı gösterilir.

Show User Name

• Aktif hale getirilir.
• Farklı temsilcilerle yapılan sohbetlerde kimin yazdığı kolayca anlaşılır.

Allow Edit Message (Yalnızca web uygulamalarda kullanılabilir.)

• Aktif hale getirilir.
• Kullanıcı, tüm mesajlarını düzenleyebilir (örneğin: yazım hatası düzeltmek için).

Allow Delete Message (Yalnızca web uygulamalarda kullanılabilir.)

• Aktif hale getirilir.
• Kullanıcı, tüm mesajlarını silebilir (örneğin: yanlışlıkla gönderilen mesajları kaldırmak için).

Text To Speech (Yalnızca mobil uygulamalarda kullanılabilir.)

• Mesajların sesli olarak okunmasına izin verir.
• Görsel engeli olan kullanıcılar için erişilebilirliği artırır, mobilde sesli etkileşim imkânı sunar.

Aksiyon Tanımlama

Sayfa Yüklenirken Mesajların Getirilmesi

Chat ekranı açıldığında geçmiş mesajların otomatik olarak yüklenebilmesi için sayfaya özel bir Page Init aksiyonu tanımlanmalıdır. Bu sayede Chat elementi veri kaynağından (örneğin chatHistory tablosundan) verileri çeker ve sohbet geçmişini otomatik olarak gösterir.

PageInit Aksiyon Ekleme Adımları:

1. Chat ekranının bulunduğu sayfayı seçin.
2. Sağ panelden +ADD ACTION → pageInit → Managed DB → Get Record aksiyonunu seçin.
3. Aksiyon Adı: getChatHistory
4. Tablo: chatHistory
5. Gerekirse filtreleme (örneğin sadece oturum açmış kullanıcıya ait mesajlar) yapılabilir.
6. Bu aksiyonun sonucunda elde edilen veri, Chat elementinin Data Source ayarında kullanılır.

Bu işlem sayesinde kullanıcı sohbet ekranını her açtığında en güncel mesaj geçmişi otomatik olarak yüklenmiş olur.

Mesaj Gönderimi

Chat ekranında kullanıcıların mesaj gönderebilmesi için bir aksiyon oluşturulması gerekir. Bu aksiyon genellikle “Gönder” butonuna bağlanır ve kullanıcı mesajını veri kaynağına (chatHistory tablosuna) kaydeder.

Save Record Aksiyonu Ekleme Adımları:

1. UI Design modülünde, Chat elementinin yanına veya altına bir Button (örneğin “Gönder”) ekleyin.
2. Butonu seçin ve Properties panelinde:
   
   • + ADD ACTION menüsünden,
     onMessageSend → Managed DB → Save Record seçeneğini seçin.
3. Save Record Aksiyon Modu olarak Insert modunu seçin:
   
   • Bu mod, tabloya yeni bir kayıt ekler.
   • Eğer aynı Id’ye sahip kayıt varsa hata verir, bu yüzden yeni mesajlarda genellikle Id gönderilmez veya otomatik üretilir.
4. Tablo Seçimi: chatHistory tablosu
5. Tablo Kolonları ve Değerler:
   
   • mesaj: Chat1.message.text
   • userDisplayName: loggedInUser.name
   • avatar: loggedInUser.photo
   • username: loggedInUser.username
   • mesajCreatedAt: Now()

Özel Aksiyonlar:

Mesaj gönderimi sırasında daha fazla kontrol veya işlem gerekiyorsa, onMessageSend tetiklendiğinde aşağıdaki gibi özel aksiyonlar oluşturulup bağlanabilir:

• getUserChat → Kullanıcının bilgilerini çekmek için özel bir Get Record aksiyonu tanımlanabilir. username kolonuna göre çalışır.
• chatHistoryADD → Yeni mesajı tüm kolonlarıyla kaydeden özel bir Insert Record aksiyonu oluşturulabilir.
• getChatHistory → Sayfayı yenileyen özel bir Refresh Chat aksiyonu tanımlanabilir. Edit/Send/Delete işlemlerinden sonra çalıştırılmalıdır. Aksi halde mesajlar anlık olarak güncellenmez. Alternatif olarak Save Record aksiyonu Update modunda mesajCreatedAt kolonuna göre yapılandırılarak bu işlev sağlanabilir.

Mesaj Güncelleme

Kullanıcı bir mesajı düzenlediğinde, ilgili kayıt id'ye göre güncellenir.

Adımlar:

1. Chat1 bileşenini seçin.
2. Sağ panelden +ADD ACTION → onEditMessage → Managed DB → Save Record aksiyonunu seçin.
3. Aksiyon Modu: Update
4. Tablo: chatHistory
5. Properties:
   
   • AllowEditMessage > Components > Chat1.message.currentlyEditingMessageId
6. Güncellenecek Alanlar:
   
   • mesaj: Chat1.message.text
   • mesajModifiedAt: Now()

Özel Aksiyonlar:

• chatHistorySAVE → Güncelleme işlemi için sadece mesaj kolonuna özel bir Update Record aksiyonu oluşturulabilir.
• getChatHistory → Mesaj düzenlemeden sonra sohbetin güncellenmesini sağlayan özel bir Refresh Chat aksiyonu tanımlanabilir. Alternatif olarak, Save Record aksiyonunun Update modunda mesajCreatedAt üzerinden tetiklenmesi sağlanabilir.

Mesaj Silme

Kullanıcı mesajın yanındaki "sil" ikonuna bastığında, mesaj sistemden tamamen kaldırılır.

Adımlar:

1. Chat1 bileşenini seçin.
2. Sağ panelden +ADD ACTION → onDeleteMessage → Managed DB → Delete Record
3. Tablo: chatHistory
4. Properties:
   
   • AllowDeleteMessage > Components > Chat1.message.messageIdToBeDeleted

Özel Aksiyonlar:

• deleteChatMessage → id kolonuna göre özel bir Delete Record aksiyonu oluşturulabilir.
• getChatHistory → Silme işleminden sonra sohbetin anlık olarak güncellenmesini sağlayan özel bir Refresh Chat aksiyonu tanımlanabilir. Aksi halde silinen mesaj görünmeye devam eder. Bu ihtiyaç, Save Record aksiyonu ile Update modunda mesajCreatedAt üzerinden de çözülebilir.

Chat Elementi Kullanım Akışı

Kullanıcı tarafı:

• Uygulamaya giriş yapar.
• Chat ekranına gelir.
• Mesaj geçmişi otomatik olarak yüklenir.
• Yeni mesaj yazar ve gönderir.
• Gönderilen mesaj yanında kendi adı ve varsa profil fotoğrafı görünür.
• Son mesajını düzenleyebilir veya silebilir.

Destek temsilcisi tarafı:

• Aynı mesaj tablosunu izleyen ayrı bir Chat ekranı kullanır.
• Kullanıcıya mesaj gönderir.
• Tüm iletişim aynı veri kaynağı üzerinden anlık olarak görünü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.