Bu proje, çok adımlı bir sinema koltuk rezervasyon akışını örnekleyen basit bir demo uygulamasıdır. Arayüz tarafında film seçimi, koltuk seçimi, önizleme ve ödeme adımları bulunur. Arka planda ise Socket.IO ile gerçek zamanlı koltuk durumu senkronizasyonu yapılır.
- Çok adımlı rezervasyon akışı
- Gerçek zamanlı koltuk seçimi
- Başka kullanıcı tarafından seçilen koltukları anlık gösterme
- Önceden satın alınmış koltukları kilitli gösterme
- Koltuk seçimi için 5 dakikalık sayaç
- HTML
- CSS
- JavaScript
- Node.js
- Express
- Socket.IO
- Tailwind CSS (CDN)
randevu/
├── index.html
├── css/
│ └── styles.css
├── js/
│ ├── main.js
│ └── server.js
├── package.json
└── README.md
- Node.js
- npm
- Front-end'i açmak için bir statik sunucu
Not: Front-end tarafını en kolay VS Code Live Server eklentisi ile çalıştırabilirsiniz. İsterseniz python3 -m http.server gibi farklı bir statik sunucu da kullanabilirsiniz.
Proje klasöründe bağımlılıkları yükleyin:
npm installArka uç sunucusu js/server.js dosyasındadır ve varsayılan olarak 5000 portunda çalışır.
cd js
node server.jsSunucu açıldıktan sonra aşağıdaki adreste çalışır:
http://localhost:5000
Front-end dosyası kökteki index.html dosyasıdır.
- Projeyi VS Code ile açın.
index.htmldosyasına sağ tıklayın.Open with Live Serverseçeneğini çalıştırın.
Proje kök klasöründe:
python3 -m http.server 5500Daha sonra tarayıcıdan şu adresi açın:
http://localhost:5500
- Film seçimi yapılır.
- Kullanıcı koltuk seçme ekranına geçer.
- Koltuklar gerçek zamanlı olarak diğer kullanıcılara yansır.
- Seçilen koltuklar önizleme ekranında gösterilir.
- Son adımda ödeme bilgileri formu görüntülenir.
- Front-end, socket bağlantısı için
http://localhost:5000adresine bağlanır. - Back-end çalışmıyorsa koltuk seçimi düzgün çalışmaz.
server.jsiçinde bazı koltuklar demo amaçlı önceden satın alınmış olarak tanımlanmıştır.
Bu proje şu anda demo/prototip yapısındadır. Film verileri ve ödeme adımı gerçek bir veritabanı veya ödeme sistemi ile bağlı değildir.