Kuika’nın Chat elementi, uygulamanıza gerçek zamanlı mesajlaşma özelliği eklemenizi sağlar. Müşteri destek sistemleri, ekip içi iletişim panelleri veya kullanıcılar arası sohbet uygulamaları için kullanılır. Mesaj geçmişini görüntüleme, yeni mesaj gönderme, düzenleme ve silme işlemlerini tek bir arayüzde yönetmenize olanak tanır.

Hem web hem de mobil uygulamalarda kullanılabilir.

Kullanım Alanları

• Müşteri destek sistemleri
• Sosyal ağlar ve topluluk uygulamaları
• Ekip içi veya proje bazlı sohbet alanları
• Eğitmen-öğrenci ya da kullanıcı-danışman mesajlaşmaları
• Gerçek zamanlı bildirim ve destek modülleri

Kullanım Senaryosu – Destek Sohbeti

Bir müşteri destek uygulamasında, kullanıcılar ve destek temsilcileri Chat elementi üzerinden gerçek zamanlı olarak mesajlaşabilir.

Senaryoda:

• Kullanıcı, uygulama içinde Destek Sohbeti ekranını açar.
• Sayfa yüklendiğinde geçmiş mesajlar otomatik olarak görüntülenir.
• Kullanıcı yeni mesajını yazıp gönderir.
• Mesaj kutusu boşaltılır ve gönderilen mesaj, veri kaynağına kaydedilir.
• Karşı taraf (örneğin destek temsilcisi) aynı veri kaynağından mesajı anında görür.
• Kullanıcı isterse mesajını düzenleyebilir veya silebilir.

Veri Kaynağı Bağlama

• Datasources modülüne gidin.
• Ardından Tables başlığı yanındaki + ikonuna tıklayın ve tabloya “chatHistory” ismini verin. 
• Aşağıdaki tabloyu oluşturun. 

• Filtreleme (isteğe bağlı):

WHERE username = loggedInUser.username

Bu tabloyu Chat elementinde Datasource olarak seçin.

Özelliklerin Senaryo Bağlamında Kullanılması

• Datasource: Mesaj geçmişini çektiğiniz tabloyu belirtir.
• Current User Name: Aktif kullanıcı adını gösterir.
• Dark Mode: Sohbet arayüzünü koyu temada gösterir.
• Show Profile Photo: Kullanıcı avatarlarını mesajlarda gösterir.
• Show User Name: Gönderici adını balon üzerinde gösterir.
• Allow Edit Message: Kullanıcının mesajlarını düzenlemesine izin verir.
• Allow Delete Message: Mesaj silme işlemini etkinleştirir.
• Speech To Text: Kullanıcının mikrofondan konuşarak mesaj yazmasına izin verir.

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol panelden Elements > Special > Chat elementini seçin.
3. Ekrana sürükleyip bırakın.
4. Properties panelinde şu ayarları yapılandırın:

• Datasource: chatHistory
• Current User Name: loggedInUser.name
• Dark Mode: Aktif (isteğe göre aktif edilebilir)
• Show Profile Photo: Aktif
• Show User Name: Aktif
• Allow Edit Message: Aktif
• Allow Delete Message: Aktif

Mesaj Gönderme Aksiyonu

Kullanıcının yazdığı mesajı tabloya kaydetmek için:

• Chat1 → onMessageSend → Managed DB → Save Record adımlarını izleyin.
• Tablo: chatHistory
• Alanlar:
  
  • Message: Chat1.message.text
  • UserDisplayName: loggedInUser.name
  • Username: loggedInUser.username
  • Avatar: loggedInUser.photo
  • CreatedAt: Now()

Mesaj Düzenleme

• Chat1 → onEditMessage → Save Record (Update)
• Message: Chat1.message.text
• ModifiedAt: Now()

Mesaj Silme

• Chat1 → onDeleteMessage → Delete Record
• Id: Chat1.message.messageIdToBeDeleted

Senaryo Tamamlandığında

• Kullanıcı mesaj yazıp gönderir.
• Mesajlar anlık olarak sohbet ekranına eklenir.
• Kullanıcı son mesajını düzenleyebilir veya silebilir.
• Sohbet geçmişi sayfa açıldığında otomatik olarak yüklenir.

Kısıtlamalar

• Chat elementi yalnızca tek tablo üzerinden veri çeker.
• Gerçek zamanlı görünüm için otomatik yenileme (Refresh Action) tanımlanmalıdır.
• Çok yoğun mesaj trafiği olan uygulamalarda veri filtreleme performans için önemlidir.

İpuçları ve Best Practices

• Kullanıcı deneyimini artırmak için Dark Mode seçeneğini sunun.
• Avatar sütunu boşsa, kullanıcı adının ilk harfini gösterin.
• Speech to Text özelliğiyle mobil kullanıcılar için erişilebilirliği artırın.
• Sohbet geçmişini tarih bazlı gruplama ile daha okunabilir hale getirin.
• Gerektiğinde “typing...” (yazıyor...) göstergesi ekleyerek gerçek zamanlı etkileşim sağlayın.