IoT veri uygulaması · Kurum içi proje
Bağlı Cihazlar İçin Kontrol Panelleri
Sahada çalışan endüstriyel cihazların durumunu, alarmlarını ve tüketim verisini müşterilerin kendi cihazları için tek ekrandan izleyip yönetebildiği; çok markalı, çok dilli ve rol tabanlı web kontrol panelleri.
- Rolüm
- Uçtan uca geliştirme · arayüz, backend, API ve veritabanı
- Durum
- Canlıda · müşteri gizliliği nedeniyle görsel paylaşılmıyor
Hangi ihtiyaçtan doğdu?
Sahada çalışan cihazların bakım, arıza ve tüketim bilgisine ulaşmak çoğu zaman saha ziyareti gerektiriyordu. Amaç, bu bilgiyi tek ekrandan erişilebilir kılmak ve müdahale süresini kısaltmaktı. Aynı panelin hem teknik bilgisi az olan son kullanıcıya hem de yönetici ve servis ekiplerine hizmet vermesi gerekiyordu.
Yaklaşımım
Sistemi önce arayüzden veritabanına kadar uçtan uca kendim kurdum; ardından paneli başka bir backend’e taşıdım ve bugün iki yapıyı da kullanıyorum. Taşıma sırasında önce keşfettim, sonra yazdım: API’yi gerçek yanıtlarla inceleyip her uç noktayı belgeledim. Yazma işlemleri gibi geri dönüşü zor adımları önce salt okunur bir test hesabıyla doğruladım, sonra kontrollü biçimde canlıya aldım. İşi fazlara böldüm; canlıya çıkış öncesinde kritik hataları öne alan bir önceliklendirmeyle ilerledim.
Çözüm
Kullanıcı kendi cihazlarının anlık durumunu görüyor, alarm ve arıza geçmişini inceliyor, tüketimi grafiklerle izliyor; yetkisi varsa cihaz ayarlarını değiştirebiliyor. Alarm ve olaylar için anlık bildirim gidiyor, raporlar PDF olarak alınabiliyor. Tek kod tabanı birden fazla markaya hizmet ediyor: renk, logo ve metinler markaya göre değişirken iş mantığı tek yerde duruyor. Arayüz çok dilli; görünüm ve işlem yetkileri kullanıcıya ve cihaza göre ayrılıyor. Kendi sunucumuzda barındırılan bir hata izleme sistemi kurdum ve ekran akışlarından otomatik üretilen, sürümlenen kullanım kılavuzları hazırladım.
Güncel aşama
Paneller canlıda kullanılıyor. Müşteri gizliliği nedeniyle ekran görüntüsü, marka ve müşteri adı paylaşılmıyor.
Teknolojiler
Uygulama
- Next.js
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- ApexCharts
- next-intl
- Zod
- Firebase Cloud Messaging
- jsPDF
Kalite ve yayın
- Vitest
- ESLint
- Sentry SDK + self-hosted GlitchTip
- Node.js self-hosted deployment