Gerçek bir CMS'e sahip küçük işletme sitesi

Gerilim Elektrik, Balıkesir Dursunbey'de faaliyet gösteren bir elektrik ve enerji taahhüt firması. Alçak ve orta gerilim işleri, güneş enerjisi kurulumları, tarımsal sulama sistemleri ile inşaat ve iç mekân projeleri yapıyorlar. Bu hizmetleri tanıtan Türkçe bir siteye ve her iş bittiğinde kendilerinin güncelleyebileceği bir galeriye ihtiyaçları vardı.

Ziyaretçiye açık site

Frontend, Tailwind ile stillendirilmiş, React ve TypeScript ile yazılmış bir single-page app:

• Beş sayfa: ana sayfa, hakkımızda, hizmetler, projeler ve iletişim; bunlara ek olarak gizlilik, çerez ve yasal bilgilendirme sayfaları.
• Tıklama, dokunma, ok tuşları ve Escape ile çalışan lightbox'lı bir proje galerisi.
• İletişim formu yerine telefon ve WhatsApp bağlantıları.
• Yerel aramalar için structured data ve sayfa bazında metadata.
• Siteyi açan kısa bir splash animasyonu.

Tek API, iki runtime

İçerik ve galeri bir Node.js API'si üzerinden sunuluyor. Lokalde normal bir sunucu olarak çalışıyor; production'da ise aynı kod serverless olarak çalışıyor. Böylece senkron tutulması gereken ikinci bir kod yolu olmuyor.

Depolama katmanı da aynı fikri izliyor. API küçük bir storage arayüzüyle konuşuyor; bu arayüzün arkasında ise geliştirme ve testler için lokal bir dosya ya da production'da Postgres bulunuyor. Aralarında geçiş yapmak tek bir ayar meselesi.

Admin paneli

Site sahibi bir admin paneline giriş yapıp sayfa bölümlerini düzenleyebiliyor, bunları yayına alıp yayından kaldırabiliyor, galeriye görsel yükleyip sıralayabiliyor ve açıklama ekleyebiliyor.

Tek bir işletmeye ait bir CMS'in bile atlanması kolay iki güvenlik önlemine ihtiyacı var.

Çakışan düzenlemeler

Her içerik parçasının bir versiyonu var. Bir güncelleme hangi versiyondan başladığını belirtmek zorunda; arada başka biri kaydetmişse API, onun değişikliğinin üzerine sessizce yazmak yerine isteği reddediyor.

Tekrarlanan gönderimler

Tekrar denenen bir istek, örneğin mobil bağlantı koptuktan sonra, galeride iki ayrı öğe oluşturmamalı. Her değişiklik benzersiz bir anahtar taşıyor; aynı istek tekrar geldiğinde iki kez çalıştırılmak yerine ilk sonuç döndürülüyor.

Görseller

Yüklenen görseller sunucunun dosya sistemine değil, object storage'a gidiyor; çünkü serverless bir kurulumda dosya sistemi kalıcı değil. Yüklemeler kaydedilmeden önce doğrulanıyor ve API üzerinden geri sunuluyor.

En çok uğraştıran kısım burası oldu. Depolama lokalde çalışıyordu ama deploy ettikten sonra hata vermeye başladı; çünkü serverless runtime, storage credential'larını fonksiyona lokal geliştirme ortamındaki gibi iletmiyordu. Düzeltmek birkaç deneme sürdü. Artık yükleme akışı bu context eksik olduğunda anlaşılır bir hata logluyor, böylece bir sonraki hata kendini açıklıyor.

Güvenlik önlemleri

• API'de rate limiting ve her çağrıda bir request ID; böylece tek bir isteğe ait loglar takip edilebiliyor.
• İstek gövdeleri herhangi bir iş mantığına ulaşmadan önce doğrulanıyor.
• CMS akışları, yetkilendirme kuralları ve yükleme doğrulaması için integration testleri.

Site sahibi galeriyi bir geliştiriciyi aramadan güncelleyebiliyor; projenin amacı da buydu.