Kuika'nın Chat elementi, uygulamanıza gerçek zamanlı mesajlaşma işlevselliği eklemenize olanak tanır. Müşteri destek sistemleri, sosyal platformlar veya kullanıcıların birbirleriyle etkileşime geçmesi gereken herhangi bir uygulamada kullanılabilir. Bu kılavuzda, Chat elementini nasıl entegre edeceğinizi, mesajları nasıl özelleştirebileceğinizi ve kullanıcı etkileşimlerini nasıl yöneteceğinizi öğreneceksiniz.
Chat elementi hem web hem de mobil uygulamalarda kullanılabilir.
Bu eğitim içeriği aşağıdaki başlıklardan oluşur:
Chat Elementi Ekleme
Chat Elementi Özellikleri
Element ayarları ve özelleştirme
Chat Elementi Ekleyin
Kuika platformuna giriş yapın.
Apps ekranından çalışacağınız projeyi açın.
UI Design modülüne gidin.
Sol kenardaki Elements panelinden Special kategorisini seçin.
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.
Chat Elementi Özellikleri
Datasource: Mesaj geçmişinin gösterileceği veri kaynağını seçebilirsiniz.
Current User Name: Chat elementinin kullanıldığı ekranda mevcut kullanıcı bilgisini görüntüler.
Dark Mode: Switch aktif hale getirildiğinde, chat elementini karanlık modda görüntüleyebilirsiniz.
Show Profile Photo: Kullanıcıların profil fotoğraflarını göstermek için Switch’i aktif hale getirebilirsiniz.
Show User Name: Kullanıcı isimlerini göstermek için Switch’i etkinleştirebilirsiniz.
Allow Delete Message: Kullanıcının tüm mesajlarını silmesine izin verir.
Allow Edit Message: Kullanıcının tüm mesajlarını düzenlemesine izin verir.
Bu kılavuzu takip ederek Chat elementini uygulamanızda etkili bir şekilde kullanabilirsiniz.
Chat Elementi ile Gerçek Zamanlı Mesajlaşma Entegrasyonu
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: Messages) ve Next butonuna tıklayın.
Gerekli sütun bilgilerini girin:
Column Name: message – Mesaj içeriği
Type: String
Required: ✔️
Unique: ❌
Column Name: sendername – Gönderen kullanıcının adı
Mesajları yalnızca ilgili kullanıcılar görebilmelidir.
Örnek filtre:
WHERE sender_id = CurrentUser.id OR receiver_id = CurrentUser.id
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
Nasıl Kullanılır: Yukarıda oluşturulan mesaj tablosu seçilir.
Neden Önemli: Mesaj geçmişi buradan alınır.
Current User Name
Nasıl Kullanılır: Giriş yapan kullanıcı adı bağlanır (örneğin: loggedInUser.name).
Neden Önemli: Chat’te gönderici bilgisini ayırt etmek için gerekir.
Dark Mode
Nasıl Kullanılır: Açık/Kapalı olarak ayarlanır.
Neden Önemli: Gece teması isteyen kullanıcılar için kullanıcı deneyimini artırır.
Show Profile Photo
Nasıl Kullanılır: Aktif hale getirilir.
Neden Önemli: sender_photo alanı kullanılarak mesaj balonlarında profil fotoğrafı gösterilir.
Show User Name
Nasıl Kullanılır: Aktif hale getirilir.
Neden Önemli: Farklı temsilcilerle yapılan sohbetlerde kimin yazdığı kolayca anlaşılır.
Allow Edit Message
Nasıl Kullanılır: Aktif hale getirilir.
Neden Önemli: Kullanıcı, tüm mesajlarını düzenleyebilir (örneğin: yazım hatası düzeltmek için).
Allow Delete Message
Nasıl Kullanılır: Aktif hale getirilir.
Neden Önemli: Kullanıcı, tüm mesajlarını silebilir (örneğin: yanlışlıkla gönderilen mesajları kaldırmak için).
Aksiyon Tanımlama
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 (Messages tablosuna) kaydeder.
Save Record Aksiyonu Ekleme Adımları:
UI Design modülünde, Chat elementinin yanına veya altına bir Button (örneğin “Gönder”) ekleyin.
Butonu seçin ve Properties panelinde:
+ ADD ACTION menüsünden,
OnMessageSend→ Managed DB → Save Record seçeneğini seçin.
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.
Tablo Seçimi:
Messages tablosunu seçin.
Tablo Kolonları ve Değerler: Aşağıdaki kolonlara uygun değerleri bağlayın:
message: Mesaj metin giriş alanının değeri (txtMessage.value gibi)
sendername: Giriş yapan kullanıcının adı (örneğin loggedInUser.name)
senderphoto: Giriş yapan kullanıcının profil fotoğrafı (örneğin loggedInUser.photo)
userid: Giriş yapan kullanıcının benzersiz kimliği (loggedInUser.id)
timestamp1: Now() fonksiyonu ile mesajın gönderildiği anın zamanı
Mesaj Güncelleme
Kullanıcı bir mesajı düzenlediğinde, ilgili kayıt id'ye göre güncellenir.
Adımlar:
Chat1 bileşenini seçin.
Sağ panelden +ADD ACTION → onEditMessage → Managed DB → Save Record aksiyonunu seçin.
Mesaj Gönderildikten Sonra Giriş Alanını Temizleme (Set Value Of)
Kullanıcı, “Gönder” butonuna tıkladığında mesajın veritabanına kaydedilmesinden sonra, mesaj giriş kutusunun boşaltılması gerekir. Bu işlem Set Value Of aksiyonu ile yapılır. Böylece kullanıcı her mesajdan sonra alanı manuel olarak silmek zorunda kalmaz, kullanıcı deneyimi akıcı hale gelir.
İlk aksiyon olarak daha önce eklenmiş Save Record aksiyonunun altına ikinci aksiyon olarak:
OnClick→ UI Control → Set Value Of aksiyonunu ekleyin.
Set Value Of Aksiyonunun Yapılandırılması
Açılan panelde aşağıdaki alanları doldurun:
Component to Change: Mesajın yazıldığı metin kutusunu (örnek: Chat1) seçin. Bu, kullanıcıdan mesaj girilen input bileşenidir.
Prop name to set: message
Value: Default > Empty. Böylece mesaj gönderildikten sonra kutu otomatik temizlenir.
Neden Kullanılır?
Değer Güncelleme: Kullanıcının mesaj gönderdikten sonra aynı kutuya yeni mesaj yazabilmesi için temiz bir alan sağlar.
Gelişmiş Kullanım: Gerekirse bu alana sabit değer dışında bir Symbol Picker içeriği de atanabilir (örneğin, sistemden gelen öneri mesajı gibi).
Ekstra: Dinamik Mesaj Temizleme
Eğer mesaj içeriği belirli bir karakterle başlıyorsa (örneğin: “/”), bu durumda farklı bir değer atanabilir. Bu tür senaryolarda If koşullu aksiyon yapılarıyla birlikte Set Value Of kombinasyonu kullanılabilir.
Eş Zamanlı Mesajlaşma
Chat elementi, veritabanındaki güncellemeleri anlık yansıtacak şekilde tasarlanmıştır.
Aynı Messages tablosu hem kullanıcı hem destek temsilcisi tarafından yazma/okuma için kullanılır.
Filtreleme ile her kullanıcı yalnızca kendi sohbetini görür:
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.
Element Ayarları ve Özelleştirme
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:
Ekrandaki elementi seçin.
Sağ kenardaki Properties panelini açın.
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.
