Skip to content

MesutYilmazJS/randevu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Randevu / Sinema Koltuk Rezervasyon Demo Projesi

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.

Özellikler

  • Ç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ç

Kullanılan Teknolojiler

  • HTML
  • CSS
  • JavaScript
  • Node.js
  • Express
  • Socket.IO
  • Tailwind CSS (CDN)

Proje Yapısı

randevu/
├── index.html
├── css/
│   └── styles.css
├── js/
│   ├── main.js
│   └── server.js
├── package.json
└── README.md

Gereksinimler

  • 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.

Kurulum

Proje klasöründe bağımlılıkları yükleyin:

npm install

Back-End Çalıştırma

Arka uç sunucusu js/server.js dosyasındadır ve varsayılan olarak 5000 portunda çalışır.

cd js
node server.js

Sunucu açıldıktan sonra aşağıdaki adreste çalışır:

http://localhost:5000

Front-End Çalıştırma

Front-end dosyası kökteki index.html dosyasıdır.

Yöntem 1: VS Code Live Server

  1. Projeyi VS Code ile açın.
  2. index.html dosyasına sağ tıklayın.
  3. Open with Live Server seçeneğini çalıştırın.

Yöntem 2: Basit statik sunucu

Proje kök klasöründe:

python3 -m http.server 5500

Daha sonra tarayıcıdan şu adresi açın:

http://localhost:5500

Uygulama Akışı

  1. Film seçimi yapılır.
  2. Kullanıcı koltuk seçme ekranına geçer.
  3. Koltuklar gerçek zamanlı olarak diğer kullanıcılara yansır.
  4. Seçilen koltuklar önizleme ekranında gösterilir.
  5. Son adımda ödeme bilgileri formu görüntülenir.

Önemli Notlar

  • Front-end, socket bağlantısı için http://localhost:5000 adresine bağlanır.
  • Back-end çalışmıyorsa koltuk seçimi düzgün çalışmaz.
  • server.js içinde bazı koltuklar demo amaçlı önceden satın alınmış olarak tanımlanmıştır.

Geliştirme Notu

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.