← Portfolio'ya dön
PWA Multi-tenant Tek kişi

Noticeboard

Okul Bilgi Ekranı Sistemi

Tamamen tek başıma tasarladığım, geliştirdiğim ve yayına aldığım çok kiracılı bir Progressive Web App. Okullar, LCD ekranlarını admin dashboard üzerinden yönetiyor; Vue.js 3 tek sayfalı uygulama, REST API'den canlı veri çekiyor ve 20+ modülü gerçek zamanlı render ediyor.

CodeIgniter 4 Vue.js 3 PHP 8 MySQL Bootstrap 5 REST API Service Worker PWA PhpSpreadsheet Open-Meteo API

LCD Ekran — Canlı Simülasyon

Bu Vue.js 3 simülasyonu, okulların LCD ekranlarında gördüklerini yansıtır. Üretim uygulaması tüm verileri /api/{school_code}'dan çeker ve modülleri bayrak tabanlı bir sistem ile bağımsız olarak günceller.

{{ school.name }} {{ clock }}
Hava Durumu
{{ weather.icon }}
{{ weather.temp }}°C
{{ weather.desc }}
Nöbet Öğretmeni
{{ t.name }}
{{ t.location }}
Bugün Doğum Günü
{{ b.name }}
{{ b.class }}
Günün Sözü
"{{ quote.text }}"
— {{ quote.author }}
{{ ticker }}

20+ bağımsız yapılandırılabilir modül

Her okul yalnızca ihtiyaç duyduğu modülleri etkinleştirir; özel başlıklar ve görüntüleme ayarları okul başına JSON olarak depolanır.

01
Hava Durumu

Open-Meteo API ile 10 günlük tahmin. 6 saatte bir otomatik yenileme, Türkçe açıklamalar.

02
Öğretmen Nöbet Listesi

Konum bazında günlük öğretmen nöbet atamaları. Excel import destekli.

03
Öğrenci Nöbet Listesi

Ad, sınıf ve görev yeri ile öğrenci nöbet atamaları. Excel import destekli.

04
Bugünün Doğum Günleri

Canvas tabanlı konfeti animasyonuyla öğrenci doğum günleri. Aynı gün çok doğum günü için sayfalanmış.

05
Okul Haberleri

Görsellerle haber karuseli. Toplu içerik için RSS feed import.

06
Duyuru Bant Yazısı

Ekranın altına sabitlenmiş kayan duyuru. Öncelik bazlı sıralama.

07
Fotoğraf Galerisi

Yapılandırılabilir geçiş aralıkları ve başlık desteğiyle otomatik dönen galeri.

08
Ders Programı

Sonraki ders için canlı geri sayımlı tam ders programı. Aktif ders gerçek zamanlı vurgulanan.

09
Tarihte Bugün

Karüselde günün tarihi olayları. Harici API aracılığıyla toplu import.

10
Günün Sözü

Günde bir motivasyonel söz. Yıl boyunca ön yükleme için JSON ile toplu import.

11
Ayın Öğrencisi

Fotoğraf yükleme ve canvas konfeti ile animasyonlu kutlama sekansıyla aylık takdir.

12
Okul Kimliği

Okul adı, logosu ve canlı saat sürekli görünür. Şablon konfigürasyonu ile okul başına markalama.

Mimari öne çıkanlar

Multi-Tenant Isolation

Tüm veriler school_code'a göre kapsanmış. Tek dağıtım sınırsız okula hizmet eder. Okul başına JSON şablonlar modül görünürlüğünü ve temayı kontrol eder.

PWA + Service Worker

Statik varlıklar kurulumda önbelleğe alınmış. API, eski geri dönüşlü network-first kullanır. Ekran terminalleri, ağ kaybında çalışmaya devam eder.

Modül Bayrak Sistemi

Her modül bir flag_updated_at zaman damgası takip eder. Vue frontend /api/.../flags'i yoklar ve yalnızca değişen modülleri yeniden getirir.

REST API Tasarımı

Temiz endpoint'ler: tüm veriler için /api/{school_code}, bireysel modüller için /api/{school_code}/{module}. Durumsuz, yalnızca JSON.

Veri Import Pipeline'ı

PhpSpreadsheet ile Excel (nöbet listeleri, ders saatleri). Haberler için RSS. Hava durumu ve tarihsel veriler için harici API'ler. Alıntılar için JSON toplu import.

Admin Dashboard

20+ modül için tam CRUD arayüzü. Sunucu tarafı işleme ile DataTables, modal tabanlı formlar, rol bazlı erişim, e-posta/SMS doğrulama.

Noticeboard ilginizi çekti mi?

Demo, dağıtım ya da bu tür mühendisliğin kurumunuzda nasıl görünebileceğini konuşmak için iletişime geçin.

İletişime Geç Portfolio'ya Dön