Έξυπνο Τουριστικό Λεωφορείο

Συγγραφέας: Χρήστος Πολυπαθέλης (P24251)
Μάθημα: Αλληλεπίδραση Ανθρώπου και Υπολογιστή
Ακαδημαϊκό Έτος: 2025-2026
Καθηγήτρια: Μαρία Βίρβου - Δρ. Δημήτρης Παναγούλιας

---

Τι είναι αυτό;

Αυτή είναι μια web εφαρμογή που έφτιαξα για το μάθημα Αλληλεπίδραση Ανθρώπου και Υπολογιστή. Πρόκειται για ένα σύστημα διεπαφής για ένα έξυπνο τουριστικό λεωφορείο όπου οι επιβάτες, ο οδηγός και οι υπάλληλοι μπορούν να αλληλεπιδρούν μέσω οθονών αφής.

Τι μπορεί να κάνει;

Για τους επιβάτες:

• Βλέπουν τη διαδρομή σε πραγματικό χρόνο
• Παίρνουν πληροφορίες για αξιοθέατα (με ήχο!)
• Παραγγέλνουν από καφετέριες
• Χρησιμοποιούν GPS για πλοήγηση όταν κατεβαίνουν

Για τον οδηγό:

• Προειδοποιήσεις για ταχύτητα, λωρίδα, κούραση
• Έλεγχος κλιματισμού
• Ειδοποιήσεις για επιβάτες

Για τους υπαλλήλους:

• Διαχείριση οροφής (αυτόματο κλείσιμο όταν βρέχει)
• Παρακολούθηση ενέργειας από φωτοβολταϊκά
• Έλεγχος ρομπότ καθαρισμού
• Διαχείριση βρεθέντων αντικειμένων

---

Τι χρειάζεται;

Χρειάζεσαι Node.js (18.0 ή πιο νέο) και npm (έρχεται με το Node.js).

Πώς το τρέχω;

1. Άνοιξε terminal στο φάκελο του project:

   cd "c:\Users\xrist\Documents\University Shi\cs_unipi\Αλληλεπίδραση Ανθρώπου και Υπολογιστή"

2. Εγκατάστησε τα dependencies:

   npm install

3. Τρέξε τον development server:

   npm run dev

4. Άνοιξε το browser στο http://localhost:5173 (ή όποια θύρα σου πει το terminal)

---

Build για production

Αν θες να φτιάξεις production build:

npm run build

Το build θα βγει στον φάκελο dist/.

Για να το δεις:

npm run preview

---

Πώς είναι οργανωμένος ο κώδικας;

smart-tourist-bus/
├── src/
│   ├── components/          # Τα React components
│   │   ├── UserSelection.jsx      # Αρχική οθόνη
│   │   ├── PassengerInterface.jsx  # Για τους επιβάτες
│   │   ├── DriverInterface.jsx    # Για τον οδηγό
│   │   ├── StaffInterface.jsx     # Για τους υπαλλήλους
│   │   ├── Help.jsx               # Βοήθεια
│   │   ├── Navbar.jsx             # Navigation
│   │   ├── MapComponent.jsx       # Χάρτες
│   │   ├── Icons.jsx              # Icons
│   │   └── Loader.jsx             # Loading
│   ├── App.jsx             # Κύριο component
│   ├── main.jsx            # Entry point
│   └── index.css           # Global styles
├── package.json            # Dependencies
├── vite.config.js          # Vite config
├── tailwind.config.js      # Tailwind config
├── README.md               # Αυτό εδώ
├── Εγχειρίδιο_Χρήστη.md   
└── Εγχειρίδιο_Ανάλυσης_και_Σχεδιασμού.md

---

Τι τεχνολογίες χρησιμοποίησα;

Χρησιμοποίησα React για το frontend, Tailwind CSS για styling, και Leaflet για τους χάρτες. Επίσης χρησιμοποίησα τα Web Speech API και Web Audio API για τους ήχους και τις προειδοποιήσεις.

• React 18.2.0
• React Router DOM 6.20.0
• Vite 5.0.8
• Tailwind CSS 3.4.1
• Leaflet 1.9.4
• Web Speech API (για text-to-speech)
• Web Audio API (για προειδοποιήσεις)
• Browser Geolocation API (για GPS)

---

Πώς το χρησιμοποιώ;

Επιβάτες: Επίλεξε "Επιβάτης" και μετά μπορείς να δεις τη διαδρομή, τα αξιοθέατα, να παραγγείλεις από καφετέρια ή να χρησιμοποιήσεις GPS.

Οδηγός: Επίλεξε "Οδηγός" και θα δεις gauges για ταχύτητα, RPM, μπαταρία κτλ. Το σύστημα σε προειδοποιεί αν υπερβείς ταχύτητα, ξεφύγεις από τη λωρίδα ή φαίνεσαι κουρασμένος.

Υπάλληλος: Επίλεξε "Υπάλληλος" για να διαχειριστείς την οροφή, την ενέργεια, το ρομπότ καθαρισμού και τα βρεθέντα αντικείμενα.

---

Βοήθεια

Υπάρχει online βοήθεια στην εφαρμογή. Πάτα "Βοήθεια" στο navigation bar.

Εγχειρίδια

• Εγχειρίδιο Χρήστη - Πώς να χρησιμοποιήσεις την εφαρμογή
• Εγχειρίδιο Ανάλυσης και Σχεδιασμού - Τεχνικές λεπτομέρειες

Scripts

• npm run dev - Τρέχει τον dev server
• npm run build - Κάνει build για production
• npm run preview - Προεπισκόπηση του build

Σημαντικά

Η εφαρμογή είναι προσομοίωση - όλα τα δεδομένα είναι simulated. Για GPS χρειάζεται να επιτρέψεις πρόσβαση στη τοποθεσία στο browser. Για Web Speech API χρειάζεται browser που το υποστηρίζει.

Browsers

Δουλεύει καλύτερα σε Chrome/Edge, Firefox και Safari.

---

Συγγραφέας: Χρήστος Πολυπαθέλης (P24251)