DEV Community

Yayin
Yayin

Posted on

Trafik Cezaları Platformları Geliştirirken Öğrendiğim Teknik Dersler

#trafik #ceza #auto

İlk bakışta trafik denetimleri ve trafik kameraları üzerine bir platform geliştirmek oldukça basit görünüyor:

Kamera noktaları
Denetim bilgileri
Konum verileri
Yol bilgileri
Kullanıcıya hızlı erişim

Ancak işin teknik tarafına girildiğinde veri hacmi ve sürekli değişen bilgiler düşündüğümden daha karmaşık hale geldi.

Özellikle konum bazlı sistemler, performans optimizasyonları ve mobil kullanıcı davranışları birleşince küçük görünen proje farklı bir boyuta taşındı.

Bu yazıda trafik denetimleri, kamera noktaları ve canlı veri odaklı projelerde karşılaştığım teknik konuları paylaşacağım.

*1. Konum Verileri Beklediğimden Daha Dinamikti
*
Başlangıçta verileri basit bir liste olarak düşünmüştüm:

[
 {
   "city":"İstanbul",
   "location":"E-5",
   "camera":"Aktif"
 }
]
Enter fullscreen mode Exit fullscreen mode

Ancak zamanla veriler büyüdü:

yeni denetim noktaları
değişen lokasyonlar
geçici kontroller
farklı kamera türleri
yol bazlı güncellemeler

Statik veri modeli kısa sürede yetersiz kalmaya başladı.

Daha sonra verileri yapılandırılmış alanlara ayırdım:

{
"id":124,
"city":"İstanbul",
"lat":41.0082,
"lng":28.9784,
"type":"mobese",
"status":"active"
}
Enter fullscreen mode Exit fullscreen mode

Bu yapı filtreleme ve performans tarafında ciddi avantaj sağladı.

*2. Haritalar Sayfa Performansını Beklenenden Fazla Etkiliyor
*
İlk sürümde bütün kamera noktalarını aynı anda yüklemeyi denedim.

Mantık basitti:

locations.forEach(location=>{

new Marker(location);

});
Enter fullscreen mode Exit fullscreen mode

Başlangıçta çalışıyordu.

Fakat veri arttıkça:

yüksek bellek kullanımı
uzun ilk yükleme süresi
mobil cihazlarda takılmalar
harita gecikmeleri

ortaya çıkmaya başladı.

Sonrasında yalnızca görünür alandaki verileri yüklemeye başladım:

const visibleLocations =
allLocations.filter(item=>{

return mapBounds.contains(item);

});
Enter fullscreen mode Exit fullscreen mode

Kullanıcının görmediği verileri işlememek ciddi performans kazancı sağladı.

*3. Mobil Kullanıcılar Beklediğimden Daha Baskındı
*
Trafik içerikleri çoğunlukla hareket halindeki kullanıcılar tarafından ziyaret ediliyor.

Bu yüzden masaüstü düşünerek geliştirilen birçok çözüm mobilde bekleneni vermedi.

Örneğin:

ağır haritalar
yüksek boyutlu görseller
büyük JavaScript paketleri
gereksiz animasyonlar

ilk yükleme süresini artırdı.

Basit optimizasyon:

<img
loading="lazy"
src="kamera.jpg"
alt="trafik kamera noktası">
Enter fullscreen mode Exit fullscreen mode

Küçük görünmesine rağmen toplam yükü ciddi şekilde azaltabildi.

*4. Çok Fazla DOM Öğesi Gizli Bir Sorun Oluşturabiliyor
*
Bir şehirde yüzlerce kamera veya kontrol noktası olabiliyor.

İlk yaklaşım:

<div class="camera">
Kamera Noktası
</div>

<div class="camera">
Kamera Noktası
</div>

<div class="camera">
Kamera Noktası
</div>
Enter fullscreen mode Exit fullscreen mode

Veri arttıkça DOM büyümeye başladı.

Sonrasında yalnızca gerekli öğeleri oluşturdum:

const visibleItems=
items.slice(start,end);
Enter fullscreen mode Exit fullscreen mode

Bu yaklaşım özellikle mobil cihazlarda daha akıcı bir deneyim sağladı.

*5. SEO Tarafında Konum Verileri Ayrı Yaklaşım Gerektiriyor
*
Konum tabanlı projelerde kullanıcı niyeti çok değişiyor.

Örnek:

"Trafik kamerası"

ve

"Yakınımdaki trafik denetimi"

aynı arama davranışı değil.

Bu yüzden:

anlamlı URL yapıları
şehir bazlı içerik yapısı
yapılandırılmış veri kullanımı
hızlı yükleme süreleri

önemli hale geldi.

Örnek:

<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"Place",
"name":"Trafik Denetim Noktası"
}
</script>
Enter fullscreen mode Exit fullscreen mode

Yapısal veri küçük görünse de arama motorlarına içerik hakkında daha net sinyal gönderebiliyor.

*6. Bazen Daha Az Özellik Daha İyi Sonuç Veriyor
*
Başta daha fazla özellik eklemenin kullanıcı deneyimini artıracağını düşünmüştüm:

canlı sayaçlar
animasyonlar
karmaşık filtreler
detaylı paneller

Fakat çoğu kullanıcı yalnızca hızlı bilgi istiyordu.

Sonrasında sade yapı daha iyi sonuç verdi:

daha az JavaScript
daha az DOM
daha düşük ağ yükü
daha hızlı açılış

özellikle mobil tarafta fark oluşturdu.

Sonuç

Trafik denetimi ve kamera odaklı projeler ilk bakışta veri listesi gibi görünse de ölçek büyüdüğünde farklı sorunlar ortaya çıkabiliyor:

performans
harita yönetimi
konum verileri
mobil optimizasyon
SEO

Küçük görünen sistemler bazen düşündüğümden daha fazla optimizasyon gerektirebiliyor.

*Kullanılan Kaynaklar:
*
• OpenStreetMap Documentation: https://wiki.openstreetmap.org/wiki/Main_Page
• Leaflet Documentation: https://leafletjs.com/reference.html
• Örnek Çalışma: Trafik Cezaları
• Schema.org — Place: https://schema.org/Place

Top comments (0)