1. Stopwatch Elementine Genel Bakış

Kuika’nın Stopwatch elementi, bir işlemin veya etkinliğin başlangıcından itibaren geçen süreyi ölçmek için kullanılan bir zamanlayıcı elementtir. Kullanıcıların zamanı canlı olarak takip edebilmesini sağlayan Stopwatch, ileri yönlü zaman sayımı yaparak süreçlerin performansını değerlendirmeye yardımcı olur.

Görev tamamlama süresi takibi, çalışma zamanının ölçülmesi, aktivite sürelerinin kaydedilmesi veya zaman bazlı aksiyonların tetiklenmesi gibi pek çok senaryoda kullanılabilir. Basit ve etkili arayüzü sayesinde, kullanıcıların süre yönetimi yapmasını kolaylaştırır.

Stopwatch elementi, web ve mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Görev tamamlama süresi ölçümü: Kullanıcının bir işi ne kadar sürede tamamladığını takip etmek için kullanılabilir (örneğin; çağrı süresi, işlem gerçekleştirme süresi).
• Performans takibi: Bir aktivitenin ne kadar sürdüğünü ölçmek isteyen uygulamalarda tercih edilir (ör. spor, test, hız ölçümleri).
• Süreç zamanlama: Bir sürecin toplam çalışma süresini ölçerek raporlama veya analiz amaçlı kullanılabilir.
• Eğitim ve sınav uygulamaları: Öğrencinin bir soruyu ya da testi çözme süresini hesaplamak için kullanılabilir.
• Operasyon ve üretim takip ekranları: Üretim hattında bir adımın ne kadar sürdüğünü görselleştirmek için kullanılabilir.
• Canlı aktiviteler: Etkinlik veya yayın sırasında geçen süreyi göstermek amacıyla kullanılabilir.

2. Temel Özellikler

• İleri zaman sayımı (count-up) desteği: Stopwatch, belirlenen başlangıç noktasından itibaren sürekli artan bir zaman sayacı olarak çalışır.
• Manuel başlatma/durdurma kontrolü: Kullanıcılar sayaç üzerinde Start ve Stop işlemlerini tetikleyebilir.
• Gerçek zamanlı görüntüleme: Geçen süre saniye bazında anlık olarak güncellenir ve kullanıcıya net bir zaman takibi sunar.

2.1. Elemente Özel Ayarlar (Properties)

Stopwatch elementi, diğer pek çok UI bileşeninden farklı olarak özel bir Properties paneline sahip değildir. Bu nedenle:

• Stopwatch için yapılandırılabilir bir özellik listesi bulunmaz.
• Element eklendiği anda varsayılan çalışma mantığıyla (ileri sayım) kullanıma hazırdır.
• Başlangıç değeri, format, hız, stil vb. ayarlar Properties paneli üzerinden değiştirilemez.
• İşlevsellik; başlatma, durdurma veya sıfırlama gibi kontrollerle sağlanır ve bu kontroller genellikle başka UI elementleri (ör. Button) üzerinden yapılır.

2.2. Elemente Eklenebilen Aksiyonlar

Stopwatch elementi, zamanlayıcının çalışma durumuna göre aksiyon tetiklemeyi destekler. Elementi seçtiğinizde sağ taraftaki ADD ACTION paneli üzerinden aşağıdaki olaylar eklenebilir:

onStart

Kullanıcı zamanlayıcıyı başlattığında tetiklenir.

Kullanım senaryoları:

• Bir işlem başladığında log kaydı oluşturmak
• Sayaç başlarken başka bir UI elementi güncellemek
• Kullanıcıya bildirim göstermek

onPause

Zamanlayıcı duraklatıldığında çalışır.

Kullanım senaryoları:

• Kullanıcının ara verdiği süreyi kaydetmek
• Bir işlemin duraklatıldığını veritabanına işlemek

onStop

Zamanlayıcı tamamen durdurulduğunda tetiklenir.

Kullanım senaryoları:

• Geçen toplam süreyi kaydetmek
• Bir görevin tamamlandığını işlemek
• Sonuç ekranı veya bildirim göstermek

onResume

Duraklatılan zamanlayıcının yeniden başlatıldığı anda çalışır.

Kullanım senaryoları:

• Süre takibine kaldığı yerden devam edildiğini kaydetmek
• Arayüzde durum göstergelerini güncellemek

Stopwatch, bu aksiyonlar sayesinde zaman bazlı süreçlerinizi diğer işlemlerle entegre etmenize olanak tanır.

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

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

Senaryo: Görev Tamamlama Süresinin Ölçülmesi

Bir görev yönetimi uygulamasında, kullanıcıların bir işi ne kadar sürede tamamladığını takip edebilmesi önemlidir. Bu amaçla görev detay ekranında bir Stopwatch kullanılır.

Kullanıcı bir görevi başlattığında:

• Stopwatch manuel olarak başlatılır,
• Görev duraklatıldığında süre durur,
• Görev tamamlandığında süre sıfırlanır ve yeni görev için tekrar kullanılabilir.

Bu yapı sayesinde her görevin harcanan süresi net ve anlaşılır şekilde ölçülebilir.

Senaryoda:

• Stopwatch görev detay ekranında konumlandırılır.
• Süre ölçümü kullanıcı etkileşimiyle başlar.
• Kullanıcı, süreyi başlatabilir, duraklatabilir veya sıfırlayabilir.
• Aynı yapı farklı görevler için tekrar kullanılabilir.

Adım 1 – Ana Sayfa Element Ekleme

1. Sol yan panelden Elements > Display > Stopwatch elementini sayfaya sürükleyip bırakın.
2. Stopwatch, ekrana eklendiği anda kullanıcı etkileşimine hazır hale gelir.

Adım 2 – Stopwatch Kullanımı (Etkileşim Akışı)

Stopwatch elementinin kontrolü tamamen kullanıcıya aittir:

1. Başlat

• Yeşil ▶️ ikonuna tıklanır.
• Süre 00:00:00’dan başlayarak artar.
  

2. Duraklat

• Turuncu ⏸ ikonuna tıklanır.
• Süre bulunduğu noktada durur.
  

3. Sıfırla

• Kırmızı ⏹ ikonuna tıklanır.
• Süre sıfırlanır ve yeni ölçüm için hazır hale gelir.

Preview

Uygulama test edildiğinde, Stopwatch elementi üzerinde geçen sürenin saat:dakika:saniye formatında canlı olarak görüntülendiği görülür. Kullanıcı Başlat butonuna bastığında sayaç çalışmaya başlar, Duraklat butonu ile süre geçici olarak durdurulabilir ve tekrar Başlat ile kaldığı yerden devam eder. Durdur aksiyonu kullanıldığında ise sayaç sıfırlanarak yeni bir ölçüm için hazır hale gelir.

‍

4. Ortak Özellikler (Properties)

Stopwatch 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)

• Zamanlayıcının durumunu (başlatıldı, duraklatıldı, durduruldu) arayüzde net şekilde göstermek için Label veya Icon elementleriyle görsel geri bildirim ekleyin.
• onStart, onPause, onStop ve onResume tetikleyicilerini mantıklı şekilde kullanarak zaman takibini sistemsel işlemlerle entegre edin.
• Kullanıcı yanlışlıkla durdurursa verilerin kaybolmaması için onStop veya onPause aksiyonlarında süreyi kaydetmeyi tercih edin.

6. Kısıtlamalar

• Stopwatch elementinde sayım değerini doğrudan kontrol edebileceğiniz bir Properties paneli bulunmaz; görünüm ve işlev büyük ölçüde sabittir.
• Zamanlayıcı değeri manuel olarak değiştirilemez veya başlangıç değeri atanamaz; sayaç her zaman 0'dan başlar.
• Süre birimi özelleştirilemez (ör. yalnızca saniye gösterme gibi). Format sabittir.
• Stopwatch kendi içinde veri kaydetmez; süreyi bir veritabanına yazmak için mutlaka aksiyonlar (onStop, onPause vb.) kullanmanız gerekir.