İçeriğe geç
Yasir Uslu
Tüm işler

Perakende iş aracı

Afiş Oluşturucu

Mağaza personelinin Siemens, Philips ve LG ürünleri için kampanya afişlerini dakikalar içinde hazırladığı web aracı. Ürün kodu girilir; başlık, görsel, teknik özellikler ve fiyat afişe kendiliğinden gelir, çıktı PNG, JPG ya da PDF olarak alınır.

Durum
Canlıda
Araçlar
Next.js · React · Zustand · cheerio · SheetJS · html-to-image · jsPDF · Upstash
Uygulamayı aç
Afiş Oluşturucu ekran görüntüsü

Problem

Afişler elle hazırlanıyordu: ürün bilgisi üretici sitesinden, fiyat ayrı bir Excel listesinden kopyalanıyor, her afiş tasarım programında tek tek düzenleniyordu. Yavaştı ve fiyat hatalarına açıktı.

Rolüm

Tek geliştirici: ihtiyaç analizi, veri toplama, afiş tasarım sistemi, yönetim paneli.

Yaklaşım

  1. 01

    Ürün kodundan veri

    Sunucu, üretici ürün sayfalarındaki JSON-LD yapılandırılmış veriyi cheerio ile okur: başlık, görsel ve teknik özellikler. Gelen kaydın model kodu aranan kodla eşleşmiyorsa ürün kabul edilmez. İstekler hız sınırlıdır (Upstash) ve dış görseller, adresi her yönlendirmede denetlenen kendi proxy’mizden geçer.

  2. 02

    Excel fiyat listesi

    Fiyat ve kampanya listeleri tarayıcıda SheetJS ile okunur. Türkçe sayı biçimleri (1.234,56), yüzdeler ve boşluklu ürün kodları normalize edilir.

  3. 03

    Tarayıcıda görsel işleme

    LG ürün fotoğraflarının açık arka planı canvas üzerinde piksel piksel temizlenir; ürün afiş zeminine doğal oturur.

  4. 04

    Personel için sade editör

    Solda adım adım ilerleyen form, sağda noktalı bir tuvalde gerçek boyutunda ölçeklenen canlı afiş; vurgu rengi seçili markanın rengi. Telefonda önizleme en üstte durur ve afiş sıkıştırılmadan küçültülür, böylece telefondan indirilen dosya da tasarım boyutunda çıkar.

  5. 05

    Bağımlılıksız QR ve baskı çıktısı

    QR kodları kendi yazdığım üreteçle (Reed–Solomon hata düzeltme, GF(256) aritmetiği) saf SVG olarak üretilir. Afiş html-to-image ile PNG/JPG’ye, jsPDF ile PDF’e çevrilir.

Zorlu an

Güvenilmez kaynaklar

Üretici sayfaları zaman zaman yapı değiştiriyor, ürün doğrudan adresinde bulunmuyor ya da arama benzer ama başka bir ürünü döndürüyor. Fetcher önce ürün sayfasını, sonra aramayı dener; kod eşleşmezse “bulunamadı” der, uydurma bir başlık üretmez. Sayfa hiç yanıt vermiyorsa bu durum ayrı bir mesajla bildirilir. Fiyat Excel’den ya da elle girilir; tek bir görsel alınamazsa afiş yine iner ve o görsel boş bırakılır.