1. Countdown Elementine Genel Bakış 

Kuika’nın Countdown elementi, belirli bir zaman aralığını geriye doğru saymak için kullanılan bir zamanlayıcı elementtir. Uygulama içinde kullanıcıya yaklaşan bir etkinlik, kampanya bitiş tarihi, teslim süresi, sınav başlangıcı gibi kritik zamanları net ve görsel olarak belirtmek için kullanılır. Countdown, kullanıcıların dikkatini çekmek, aciliyet duygusu yaratmak ve zaman yönetimini kolaylaştırmak amacıyla sıkça tercih edilir.

Countdown elementi, web ve mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Kampanya veya İndirim Süresi Göstermek: E-ticaret uygulamalarında, bir kampanyanın bitmesine kalan süreyi göstererek kullanıcıların satın alma kararını hızlandırmak için kullanılır.
• Etkinlik / Webinar Başlangıç Sayacı: Bir etkinliğin, eğitim oturumunun veya canlı yayın başlangıcına kadar ne kadar zaman kaldığını kullanıcıya net şekilde gösterir.
• Teslim / Gönderim Süresi Takibi: Sipariş, kargo veya proje teslim tarihlerine kalan süreyi göstermek için idealdir. Kullanıcılar yaklaşan teslim süresini anlık olarak takip edebilir.
• Sınav, Başvuru veya Kayıt Süreçleri: Bir başvuru formunun kapanışına, sınav başlangıcına veya son teslim tarihine kalan süreyi göstermek için kullanılır.
• Oyun veya Uygulama İçi Zamanlayıcılar: Görev süresi, ödül süresi gibi zamanlı mekaniklerde geri sayım işlevi görür.
• Sistem Bakım Bildirimi: Planlanan bakım çalışmalarının başlamasına kalan süreyi göstererek kullanıcıyı bilgilendirir.
• Stok Yenileme veya Flash Sale Başlangıcı: Bir ürün stok yenilemesine veya kısa süreli “flash sale” başlangıcına kadar geri sayım oluşturmak için kullanılabilir. 

2. Temel Özellikler

• Hedef Zaman Tanımlama: Kullanıcıya gösterilecek geri sayımın bitiş zamanı dinamik veya statik olarak belirlenebilir. Örneğin; bir kampanya bitiş tarihi, teslim tarihi veya etkinlik başlangıç zamanı.
• Otomatik Geri Sayım Mekanizması: Countdown elementi, belirtilen hedef zamana kadar her saniye kendini otomatik güncelleyerek kullanıcıya canlı bir geri sayım sunar.
• Dinamik Veri Desteği: Hedef zaman, Symbol Picker üzerinden bir aksiyon sonucuna, kullanıcı girişine veya veritabanı alanına bağlanabilir. Böylece geri sayım tamamen dinamik hale gelir.
• Süre Dolduğunda Özel Mesaj veya Değişim: Süre tamamlandığında kullanıcıya özel bir mesaj gösterilebilir veya başka bir UI elementi ile birlikte kullanılarak "Süre doldu" gibi durumlar yönetilebilir.

2.1. Countdown Elementi Özellikleri

Countdown elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.

• Value: Geri sayımın başlangıç süresini saniye cinsinden belirler. Statik bir değer girebilir veya Symbol Picker kullanarak dinamik bir değer atayabilirsiniz.
• Format: Geri sayımın nasıl görüntüleneceğini belirler. Formatter seçeneği, verileri aşağıdaki standart formatlardan birine göre gösterir:
  
  • HH:mm:ss: Saat, dakika ve saniyeleri gösterir.
    
    • HH: 24 saatlik saat biçimini kullanır (00-23).
    • mm: Dakikaları gösterir (00-59).
    • ss: Saniyeleri gösterir (00-59).
    • Örnek: 14:30:45 (Saat 14, 30 dakika, 45 saniye)
  • HH:mm: Saat ve dakikaları gösterir.
    
    • HH: 24 saatlik saat biçimini kullanır (00-23).
    • mm: Dakikaları gösterir (00-59).
    • Örnek: 14:30 (Saat 14, 30 dakika)
  • mm:ss: Dakika ve saniyeleri gösterir.
    
    • mm: Dakikaları gösterir (00-59).
    • ss: Saniyeleri gösterir (00-59).
    • Örnek: 05:30 (5 dakika, 30 saniye)

Bu saat, dakika ve saniye biçimleri, geri sayımın doğru bir şekilde gösterilmesi için standart bir yapı sunar. Uygulamanızın ihtiyaçlarına göre uygun formatı seçebilirsiniz.

2.2. Elemente Eklenebilen Aksiyonlar

Countdown elementi, geri sayım sürecine bağlı olarak iki farklı tetikleyici (event) destekler. Bu tetikleyiciler, geri sayım devam ederken veya süre tamamlandığında aksiyon çalıştırmanıza olanak tanır. Aksiyonlar, element seçildiğinde sağ panelde bulunan ADD ACTION butonu üzerinden eklenebilir.

onChange

Geri sayım sırasında her değer değiştiğinde tetiklenen aksiyondur. Bu event, saniyelik güncellemeler gerektiren senaryolarda kullanılabilir.

Olası kullanım senaryoları:

• Geri sayım her değiştiğinde bir Label elementine kalan süreyi farklı formatta yazmak
• Progress Bar gibi bir öğeyi geri sayım süresine göre güncellemek
• Geri sayım devam ederken belirli bir eşik değerde (ör. 10 saniye kala) uyarı vermek
• Süre azalırken UI üzerinde dinamik animasyonlar veya renk değişiklikleri yapmak

onFinish

Countdown tamamen bittiğinde (00:00:00 olduğunda) tetiklenen aksiyondur. Zamanlayıcı tabanlı tüm iş akışlarında en sık kullanılan eventtir.

Olası kullanım senaryoları:

• Süre dolduğunda bir modal/popup açmak
• Kullanıcıyı otomatik olarak başka bir sayfaya yönlendirmek
• Bir işlemi otomatik başlatmak (ör. formu kilitlemek, sınavı bitirmek, oturumu kapatmak)
• Bitiş süresi geldiğinde API çağrısı yapmak (örn. kampanya bitiş bildirimi)
• Buton veya inputları devre dışı bırakmak / aktif hale getirmek

3. Countdown Elementi Nasıl Kullanılır? 

Bu bölümde Countdown elementinin uçtan uca kullanımını, örnek bir senaryo üzerinden ele alacağız.

Senaryo: Kampanya Geri Sayımı

Bir e-ticaret uygulamasında, indirim kampanyasının başlangıç süresinin kullanıcıya görünür şekilde gösterilmesi satın alma davranışını destekler. Kullanıcı ürün detay sayfasına girdiğinde kampanyanın başlangıcına kadar kalan süreyi canlı olarak görür.

Senaryoda:

• Kampanya başlangıç zamanı veritabanından alınır.
• Kalan süre saniye cinsinden hesaplanır.
• Countdown elementi bu değeri canlı geri sayım olarak gösterir.
• Süre sıfıra ulaştığında kampanya ekranı güncellenebilir veya süreç tetiklenebilir.

Bu yapı sayesinde kullanıcı, “Kampanya bitişine 33:1:22 kaldı” bilgisini anlık takip eder ve satın alma kararını daha hızlı verir.

Adım 1 – Dinamik Kullanım İçin Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• Tables başlığı yanındaki + ikonuna tıklayın.
• “Campaigns” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:

• ​​Önemli alan adları:
• CampaignId: Kampanyayı sistem genelinde temsil eden ana referans ID’dir.
• CampaignName: Kampanyanın kullanıcıya gösterilen ad bilgisidir.
• CampaignStartTime: Kampanyanın aktif olmaya başladığı tarih ve saati ifade eder.
• CampaignEndTime: Kampanyanın sona erdiği tarih ve saati belirtir.
• DiscountRate: Kampanya kapsamında uygulanan indirim oranını temsil eder.

Adım 2 - Dinamik Kullanım için Gerekli Aksiyonları Tanımlama

Arayüzde verileri göstermek ve veri eklemek için: 

1. Üç aksiyon tanımlamanız gerekir.
2. Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

• Örnek Verileri Ekleyen Aksiyon (InsertCampaigns): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO dbo.Campaigns
(
    Id,
    CampaignId,
    CampaignName,
    CampaignStartTime,
    CampaignEndTime,
    DiscountRate
)
VALUES
(
    NEWID(),                          -- Id
    NEWID(),                          -- CampaignId
    N'Kış İndirimi',            -- CampaignName
    '2026-01-28 00:00:00',             -- CampaignStartTime
    '2026-01-29 23:59:59',             -- CampaignEndTime
    15.00                             -- DiscountRate
);

Uygularken Campaigns kısmını silip tekrar Campaigns yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Örnek Verileri Ekleyen Aksiyon (GetCampaigns):

SELECT
    Id,
    CampaignName,
    DATEDIFF(SECOND, GETDATE(), CampaignEndTime) AS RemainingSeconds
FROM Campaigns
WHERE CampaignEndTime > GETDATE();

Uygularken Campaigns kısmını silip tekrar Campaigns yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

Adım 3 – Ana Sayfa Element Ekleme (Countdown)

• UI Design modülünü açın.
• Sayfaya ADD ACTION butonundan Initial Actions > Custom > Managed Db > GetCampaigns aksiyonunu ekleyin. 

• Sol panelden Elements bölümüne gidin ve Elements > Container > VerticalStack elementini sayfaya sürükleyip bırakın.
• Vertical Stack elementini VerticalStack > Styling > Layout > Align > Yatayda Ortala olarak ayarlayın.
  

• Vertical Stack içerisine Elements > Display > Icon elementini sürükleyip bırakın.
• İkon şeklini Icon > Properties > Icon > “local_mall” olarak ayarlayın.
  

• Icon boyutunu Icon > Styling > Text > Size > 100 px olarak ayarlayın.
• Icon rengini  Icon > Styling > Text > Color > HEX > D84293 olarak ayarlayın.
  

• Icon altına Vertical Stack içerisine Elements > Display > Countdown elementini sürükleyip bırakın.
•  Sayaca saniye türünde olan Countdown > Properties > Value > Action Result > GetCampaigns > First > RemainingSeconds tanımlamasını yapın.
  

•  Yazı boyutunu Countdown > Styling > Text > Weight > Bold olarak ayarlayın.
•  Yazı kalınlığını Countdown > Styling > Text > Size > 75 px olarak ayarlayın.
  

Preview

Uygulama test edildiğinde, aktif kampanyanın bitiş süresine kalan zamanın Countdown elementi üzerinde saat:dakika:saniye formatında anlık olarak geri sayım şeklinde görüntülendiği görülür. Kampanya süresi ilerledikçe sayaç otomatik olarak azalır ve süre tamamlandığında geri sayım sıfırlanarak kampanyanın sona erdiği kullanıcıya net bir şekilde yansıtılır.

4. Ortak Özellikler (Properties)

Countdown elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Geri sayım süresini her zaman doğru formatta verin. Countdown, sadece HH:MM:SS formatını desteklediği için farklı formatlar (örn. dakika-saniye) hatalı görüntülemeye sebep olabilir.
• Süreyi dinamik olarak yönetmek için Symbol Picker kullanın. Örneğin, API’den gelen "kalan süre" bilgisini doğrudan Countdown’a bağlayabilirsiniz.
• onFinish eventini mutlaka kullanın. Süre bittiğinde yapılacak işlemler (sayfa yönlendirme, popup açma, form gönderme) onFinish aksiyonuyla yönetilmelidir.
• Süre azalırken UI güncellemeleri gerekiyorsa onChange kullanın. Örneğin:
  
  • Son 10 saniyede geri sayımı kırmızıya çevirmek
  • Bir Progress Bar elementini süreye göre doldurmak

6. Kısıtlamalar

• Süre formatı sınırlıdır. Desteklenen format HH:MM:SS olup farklı formatlarda gelen veriler gösterilmez veya hata oluşturur.
• Geri sayım tek yönlüdür. Yani artış yönünde zaman sayımı (count-up) yapılamaz. Sadece geriye doğru çalışır.