Merhaba. Bu proje, bir açık artırma web uygulamasıdır. Node.js ve Vue.js kullanılarak geliştirilmiştir. Kullanıcıların üyelik yapabileceği, oturum açıp kapatabileceği ve teklifleri canlı olarak takip edebileceği bir yapıdadır. Uygulama çalıştırıldığında ortam değişkeni olarak verilen süreden (varsayılan 5 dakika) geri sayıma başlar. Kullanıcılara fiyat verebileceği 3 adet statik ürün sunar.
Kurulum için, ana dizinde yer alan script dosyasını çalıştırabilirsiniz.
./start.shScript, docker compose ile uygulamayı ayağa kaldıracak ve 2 adet kullanıcı ekleyecektir. 4 adet container ayağa kalkacaktır:
- name-server-1
- name-client-1
- name-db-1
- name-redis-1
Gerekli ortam değişkenleri yaml dosyasının içine dahil edilmiştir.
Öncelikle, docker-compose.yml dosyasının bulunduğu, uygulamanın ana dizinine gitmelisiniz.
docker compose upkomutu ile containerları ayağa kaldırabilirsiniz.
Dockerfile ile ayrı ayrı containerlar halinde çalıştırmak için;
# backend
cd backend
docker build -t backend .
docker run --rm -d -p 5048:5048 --name server backend
# frontend
cd frontend
docker build -t frontend .
docker run --rm -d -p 5173:80 --name client frontendBack-end in çalışabilmesi için MongoDB ve Redis containerlarının varsayılan portlarda ayağa kalkmış olması gerekiyor.
Kullanıcı oturum bilgisinin, tarayıcı üzerinde sessionid adlı cookie ile iletilmesi ve tarayıcıların bu cookileri sadece https üzerinden kabul etmesi nedeniyle back-end ve front-end tarafında SSL kullanmam gerekti. Kullandığım sertifika doğrulanmış bir sertifika olmadığı için tarayıcılar sunucu-istemci arasındaki haberleşmeyi engelleyebiliyor.
Bunun önüne geçmek için Google Chrome' da chrome://flags/#allow-insecure-localhost adresinden ilgili ayarın açılması gerekmekte.
Firefox' ta bu işlem şu şekilde yapılabilir :
- Uygulama Menüsü > Ayarlar > Gizlilik & Güvenlik
- Güvenlik > Sertifikalar > Sertifikaları Göster
- Sunucular > Ayrıcalık Tanı
- Sunucu adresini girin (https://localhost:5048) > Sertifikayı Al
- Güvenlik ayrıcalığını doğrula
SSL sertifikası olmadan tarayıcının cookie yi kabul etmesi mümkün değil. Oturum bilgisini LocalStroge' de tutmak doğru bir yöntem olmadığı için, bu ek yapılandırma gerekli hale geldi.
Bu adımlardan sonra uygulama https://localhost:7073 adresinde çalışacaktır.
Karşılama ekranından direkt olarak Ürünler sayfasına girebilirsiniz. Aktif bir oturum olmadığı için sizi Giriş Yap sayfasına atacaktır.
- Kullanıcı Adı:
user1, Şifre:123123 - Kullanıcı Adı:
user2, Şifre:123123
kullanıcıları öntanımlı olarak gelir. Kayıt Ol ekranından yeni kayıt yapılabilir.
Giriş yapıldıktan sonra Ürünler sayfasına gidilebilir, Gezinme çubuğundaki (navbar) butonların yerini Ürünler ve Çıkış Yap butonları alır.
Ürünler sayfasında 3 adet statik ürün görünecektir. Teklif ver butonu ile ürün sayfasına gidilebilir. Her ürünün sayfasında anlık olarak verilen teklifler ve teklifi yapan kişiler sıralı şekilde listelenir, yeni teklif girilebilir.
tüm fiyatların tek bir sayfaya gitmesi ve yönetilmesini doğru bulmadığım için, ürün ve teklifleri ayrı sayfalarda sundum. Böylece, istemci sadece bir ürün için websocket mesajlarını yönetecek ve, aynı şekilde, sunucuda sadece gerekli yerlere websocket mesajı gönderecek.
Gezinme çubuğunda gösterilen, kalan süre bittiğinde açık arttırma sona erer ve yeni teklif yapılamaz.