Rota Kargo operasyon paneli
Günde on binlerce gönderinin izlendiği operasyon ekranını klavyeyle kullanılabilir ve takılmadan kayan bir tabloya dönüştürdük.
- Yıl
- 2025
- Rol
- Ön yüz lideri
- Müşteri
- Rota Kargo (kurgusal)
- Teknoloji
- React, TypeScript
Bağlam
Rota Kargo'nun operasyon ekibi, şubelerdeki gönderileri gün boyunca tek bir tablodan izliyordu. Tablo her filtre değişiminde bütün satırları yeniden çiziyor, kalabalık saatlerde kaydırma takılıyor ve ekip çoğu işi fareyle yapmak zorunda kalıyordu. Benden istenen, ekranı yeniden tasarlamadan hızlandırmak ve klavyeyle kullanılabilir hale getirmekti.
Kısıtlar
- Arka uç değişmeyecekti; filtreleme sunucuda yapılıyordu ve cevap biçimi sabitti.
- Operasyon ekibi yeni bir arayüz öğrenmek için zaman ayıramayacaktı.
- Ekran, şubelerdeki eski dizüstü bilgisayarlarda da açılacaktı.
Yaklaşım
Önce ölçtüm: performans kaydında sürenin çoğunun satır bileşenlerinin gereksiz yeniden çiziminde ve tarih biçimlendirmesinde geçtiğini gördük. Tabloyu sanal listeye çevirdik, yani yalnız ekranda görünen satırlar çiziliyor. Tarih ve durum biçimlendirmesini bir Web Worker'a taşıdık. Ardından j ve k ile satır seçme, Enter ile ayrıntı açma ve Ctrl K ile komut menüsü ekledik; her kısayolun fareyle yapılan bir karşılığı da duruyor.
Sonuç
Kalabalık saatlerde de kaydırma akıcı kaldı ve operasyon ekibi ilk iki haftada kısayolları kendiliğinden kullanmaya başladı. Bu demo sitede müşteri onaylı bir ölçüm olmadığı için yüzde ya da süre yazmıyorum; gerçek bir vaka çalışmasında bu bölüme müşterinin onayladığı rakamlar gelir.
Yazan: Ece Tunalı. Son güncelleme: