Συμμετέχοντες:
- Βασίλειος Τσίμπος (Αριθμός Μητρώου: 1700172)
- Ιωάννης Σεκαδάκης (Αριθμός Μητρώου: 1800250)
- Εισαγωγικό Κεφάλαιο
- Σχεδιαστικές Αποφάσεις
- Λεπτομέρειες Υλοποίησης, Εγκατάστασης και Εκτέλεσης
- Επίλογος
Στόχος της εργασίας μας είναι αρχικά η εξοικείωση μας με χρήσιμα και σύγχρονα εργαλεία και τεχνολογίες στον τομέα της ανάπτυξης εφαρμογών διαδικτύου. Για τον σκοπό αυτό αναπτύχθηκε η παρουσα εφαρμογή ενοικιάσεων δωματίων και κατοικιών βασισμένη στα πλέον διαδεδομένα πρότυπα των RESTful apis.
Για την επικοινωνία ανθρώπου - εφαρμογής επιλέξαμε πλέον δημοφιλή Angular. H Angular είναι ένα δημοφιλές πλαίσιο εργασίας για την ανάπτυξη δυναμικών εφαρμογών ιστού (web applications) με χρήση της γλώσσας προγραμματισμού TypeScript. Η Angular Material, από την άλλη, είναι μια βιβλιοθήκη που παρέχει ένα πλήρες σύνολο στοιχείων διεπαφής χρήστη (UI components). Χρησιμοποιήθηκαν ένα μεγάλο εύρος από modules και δυνατότητες όπως interceptors, authguards, observables, app-routing, services κλπ με αποτέλεσμα να πετύχουμε την αρμονική επικοινωνία μεταξύ των components και τον συγχρονισμό αυτών με το Backend
Για την λογική επεξεργασία των δεδομένων και την επικοινωνία της εφαρμογής με την βάση δεδομένων επιλέξαμε την Spring Boot. Το Spring Boot είναι ένα ισχυρό πλαίσιο ανάπτυξης για τη δημιουργία εφαρμογών Java, το οποίο προσέφερε πολλά πλεονεκτήματα για το backend της εφαρμογής σας. Γρήγορη Ανάπτυξη: Το Spring Boot παρέχει ένα εύκολο και γρήγορο τρόπο για τη δημιουργία εφαρμογών REST. Επίσης παρέχονται εύκολες δυνατότητες διαχείρισης εξαρτήσεων των δεδομένων με αποτέλεσμα να χρειάζεται ελάχιστος κώδικας για την "Λογιγή" της εφαρμογής. Εύκολη Διαχείριση Ρυθμίσεων: Οι ρυθμίσεις της εφαρμογής μπορούν να διαχειριστούν εύκολα μέσω αρχείων properties. Ενσωματωμένος Web Server: Το Spring Boot περιλαμβάνει ενσωματωμένους web servers όπως το Tomcat, εξοικονομώντας έτσι την ανάγκη για ξεχωριστή διαμόρφωση και διαχείριση. Αυτόματη Διαχείριση Εξαρτήσεων: Το Spring Boot χρησιμοποιεί τον Maven για τη διαχείριση εξαρτήσεων, πράγμα που διευκολύνει την προσθήκη και την ενημέρωση βιβλιοθηκών τρίτων. Ενσωματωμένη Ασφάλεια: Το Spring Boot διαθέτει ενσωματωμένη υποστήριξη για την ασφάλεια των εφαρμογών, συμπεριλαμβανομένης της διαχείρισης ταυτοποίησης και εξουσιοδότησης με τη χρήση του Spring Security.
To Spring Security είναι ένα ισχυρό πλαίσιο για την ασφάλεια των εφαρμογών Java και προσφέρει πολλά θετικά πλεονεκτήματα για την ανάπτυξη ασφαλών εφαρμογών: Ευέλικτη Διαχείριση Ταυτοποίησης και Εξουσιοδότησης: Το Spring Security επιτρέπει την εύκολη διαχείριση ταυτοποίησης (authentication) και εξουσιοδότησης (authorization), συμπεριλαμβανομένης της δυνατότητας προσαρμογής των ρόλων και των δικαιωμάτων των χρηστών. Ενσωματωμένη Υποστήριξη για Πρόσθετα Χαρακτηριστικά: Το Spring Security προσφέρει υποστήριξη για πρόσθετα χαρακτηριστικά όπως η διαχείριση συνεδριών, τα JWT (JSON Web Tokens). Διαφοροποιημένη Ασφάλεια: Το Spring Security επιτρέπει την εφαρμογή διαφοροποιημένων κανόνων ασφαλείας για διάφορα τμήματα της εφαρμογής, όπως URLs, μεθόδους, και πόρους. Στην εργασία μας εκμεταλλευτήκαμε σε μεγάλο βαθμό το Spring Security καθώς αποτέλεσε το σύστημα αυθεντικοποιησης μας, διαχειρίστηκε την αξιοπιστία της κάθε κλήσης στο Backend ελέγχοντας με Bearer authentication την δυνατότητα κλήσεων των webservice του Backend, διαχειρίστηκε την κατάσταση του χρήστη μέσω του παραγόμενου JSON WEB TOKEN.
Τα JWT, ή JSON Web Tokens, είναι ένα πολύ δημοφιλές πρότυπο για την ασφαλή μεταφορά πληροφοριών ανάμεσα σε δύο συστήματα. Χρησιμοποιούνται ευρέως στον κόσμο του προγραμματισμού και του διαδικτύου για την αυθεντικοποίηση και την εξουσιοδότηση χρηστών, καθώς και για την ασφαλή ανταλλαγή δεδομένων. Αυθεντικοποίηση (Authentication): Χρησιμοποιούνται για να αποδείξουν την ταυτότητα του χρήστη και να επιτρέψουν την πρόσβασή του σε ασφαλή περιοχές μιας εφαρμογής. Μεταφορά Πληροφοριών Χρήστη (User Information Transfer): Το φορτίο του JWT μπορεί να περιέχει πληροφορίες για τον χρήστη, όπως τον αριθμό επεξεργασίας (subject) και άλλα στοιχεία.Ένα από τα βασικά πλεονεκτήματα των JSON Web Tokens (JWTs) είναι η δυνατότητά τους να διατηρούν το session σε περιπτώσεις stateless εφαρμογών. Αυτό είναι ένα σημαντικό πλεονέκτημα για την ανάπτυξη εφαρμογών στις οποίες δεν αποθηκεύονται πληροφορίες σχετικά με την κατάσταση (state) του χρήστη στον διακομιστή. Στα jwts της εργασίας μας επιλέξαμε να ανταλλάσονται πληροφορίες του συνδεόμενου χρήστη προκειμένου να μην απαιτούνται δευτεύοντες κλήσεις στο BackEnd.
Για βάση Δεδομένων μας χρησιμοποιήσαμε την MySQL. H MySQL είναι ένα ανοικτού κώδικα σύστημα διαχείρισης σχεσιακών βάσεων δεδομένων (DBMS). Σχεδιάσαμε το σχήμα της εφαρμογής με τρόπο ώστε να αποφεύγεται η επανάληψη πληροφορίας (πχ. Stings) εντός της Βάσης. Χρησιμοποιήσαμε sequencers για την παραγωγή των ids των entities. Επίσης, για την αποθήκευση φωτογραφιών χρησιμοποίησαμε την Βάση Δεδομένων και όχι το file system.
Για την επίτευξη της κρυπτογράφησης τόσο μεταξύ FrontEnd και BackEnd όσο και του FrontEnd προς τον χρήστη χρησιμοποιήθηκαν Self Signed Certificates τα οποία κατέστησαν δυνατό να σερβίρονται οι σελίδες και WerServices με προτόκολλο https. Τα πιστοποιητικά παράχθηκαν με αλγόριθμο RSA και είναι μεγέθους 2048. Είναι αποθηκευμένα στο filesystem της εφαρμογής. Για να μπορέσει ο χρήστης να συνδεθει στην εφαρμογή πρέπει να κατεβάσει το πιστοποιητικό που του σερβίρει το frontEnd και να το εγκατάσταση στον Χρήστη του υπολογιστή του.
Βασικό στοιχείο του Front End είναι ο AuthService στο οποίο γίνεται η διαχείρηση των jwt και των στοιχείων του συνδεδεμένου χρήστη καθόλη την διάρκεια του SESSION.
H main Nav Bar είναι η βασική σελίδα του app-routing η οποία λειτουργεί και υπάρχει πάνω από όλες σαν γονέας. Σε Αυτήν υπάρχει αρχικά το κουμπί εμφάνισης αναδυόμενου παράθυρου εντός του οποίου βρίσκονται οι φόρμες εγγραφής και σύνδεσης Χρήστη. Όταν ο χρήστης συνδεθεί το εν λόγω κουμπί εξαφανίζεται και την θέση του παίρνει ένα κουμπί που εμφανίζει το menu δυνατοτήτων του συνδεδεμένου χρήστη. Σε αυτό το menu υπάρχουν, τα βασικά στοχεία χρήστη, οι ρόλοι του χρήστη οι οποίοι αποτελούν κουμπιά που σε παραπέμπουν είτε στην αναζήτηση είτε στην σελίδα του οικοδεσπότη (Ενα εκ τον οποίων έιναι default έχοντας μπει στην εφαρμογή με σειρά προτεταιότητας admin,χρήστης και ιδιοκτήτης), κουμπί που σε παραπέμπει στην επεξεργασία στοιχείων του χρήστη, κουμπί που σε παραπέμπει στο ιστορικό κρατήσεων κουμπί που εμφανίζει τους χρήστες που έχετε έρθει σε επικοινωνία και στην συνέχεια τα δωμάτια για οποία συζητήσατε (με την επιλογή του δωματίου ο χρήστης παραπέμπετε στην συνομιλία για το δωμάτιο) και το κουμπί έξοδος στο οποίο ο χρήστης αποσυνδέεται. Αν ο διαχειριστής δεν έχει εγκρίνει ακόμα τον χρήστη ως οικοδεσπότη το κουμπί του ρόλου Ιδιοκτήτης εμφανίζει σχετικό μήνυμα.
Αποτελεί το pop up που περιέχει δυο sections, ένα για τη σύνδεση του χρήστη και ένα για την εγγραφή του. Όταν ο χρήστης επιλέξει μόνο ιδιοκτήτης κατά την εγγραφή εμφανίζεται σχετικό μήνυμα αναμονής προς έγκριση αλλιώς αν επιλέξει και τους δύο ρόλους συνδέεται αυτόματα ως χρήστης.
Για την δημιουργία συνομιλίας με τον ιδιοκτήτη πρέπει να έχεις συνδεθεί ως χρήστης και να μπεις στο δωμάτιο που επιθυμείς να ενοικισεις. Αν για το συγκεκριμένο δωμάτιο υπάρχει προγενέστη συνομιλία αυτή συνεχίζει από εκεί που τελείωσε. Το σύνολο των συνομιλιών βρίσκονται κάτων από την main nav bar όταν επιλεχθούν οι "Συνομιλίες". Με την είσοδό μας εμφανίζεται ένα μικρό chat επιμελώς φτιαγμένο για να διαχωρίζονται τα μηνύματα των δύο συμμετεχόντων. Το chat component κάνει συνεχείς κλήσεις στο backend κάθε ένα δευτερόλεπτο για να πάρει τα μηνύματα της συνομιλίας. Το μήνυμα μπορεί να αποσταλεί είτε πατόντας το σχετικό κουμπί είτε το enter. Σε κάθε μήνυμα αναγράφεται η ώρα του μηνύματος. Επίσης υπάρχει κουμπί για την έξοδο από την συνομιλία.
Στο συγκεκριμένο component ο χρήστης μπορεί αν έχει επιλέξει ρόλος ιδιοκτήτης να ανεβάσει και να αλλάξει την φωτογραφία του. Επίσης μπορεί να αλλάξει τα βασικά του στοιχεία τα οποία πλέον είναι υποχρεωατικά. Ακόμα μπορεί να αλλάξει το κωδικό του πατώντας το νέο κωδικό δυο φορές προς επιβεβαίωση.
Στην σελίδα του διαχειριστή, εμφανίζονται σε μορφή πίνακα, τα βασικά στοιχεία όσως έχουν αιτηθεί ρόλο ιδιοκτήτη. Μπορεί να επιλέξει όσους θέλει απο αυτούς, για να εγκρίνει το αίτημά τους. Στην πάνω δεξιά γωνία, υπάρχει εικονίδιο menu, από το οποίο μπορεί να επιλέξει να εκτυπώσει τα δεδομένα της εφαρμογής (δωμάτια, κρατήσεις, αξιολογήσεις) σε μορφή json ή csv.
Στην σελίδα αυτή, ένας χρήστης μπορεί να δει όλες τις κρατήσεις που έχει κάνει, σε μορφή πίνακα. Παρουσιάζονται όλα τα βασικά δεδομένα μιας κράτησης. Για κάθε κράτηση, υπάρχει επιλογή για να κάνει αξιολόγηση το δωμάτιο που έμεινε, το οικοδεσπότη του δωματίου, καθώς και επίσης να ακυρώσει την κράτησή του. Πατώντας το κουμπί για μια αξιολόγηση, ανοίγει ένα αναδυώμενο παράθυρο, όπου επιλέγεται η βαθμολογία από 1 μέχρι 5 αστέρια, ένας τίτλος της κριτικής και ένα κείμενο για λεπτομέριες. Για τις ενέργειες που μπορεί να κάνει ο χρήστης, πρέπει να πληρούνται κάποιες προϋποθέσεις ανα περίπτωση. Για παράδειγμα, η ακύρωση μπορεί να γίνει μέχρι μια μέρα πριν ξεκινήσει η κράτηση. Για να καταχωρήσει μια αξιολόγηση, πρέπει να έχει τελείωσει το διάστημα της κράτησης (δηλαδή να έχει ολοκληρωθεί η εμπειρία του), ωστε να εξασφαλιστεί ότι η κριτική ανταποκρίνεται στην συνολική εικόνα. Επίσης, κάθε χρήστης, μπορεί να κάνει μόνο μια αξιολόγηση σε κάθε δωμάτιο και κάθε οικοδεσπότη. Συνεπώς, αν στον πίνακα υπάρχουν περισσότερες από μια εγγραφές που αφορούν το ίδιο δωμάτιο ή τον ίδιο οικοδεσπότη, η δυνατότητα είναι απενεργοποιημένη.
Στη σελίδα host, εισέρχεται μόνο όποιος έχει ρόλο ιδιοκτήτη στην εφαρμοή. Πρόκειται για ένα εργαλείο για τους ιδιοκτήτες για να μπορούν να διαχειρίζονται τα δωμάτια που διαθέτουν προς ενοικίαση. Όταν εισέρχονται, αρχικά βλέπουν μια άδεια φόρμα όπου μπορούν να καταχωρήσουν ένα νέο δωμάτιο. Αρχικά επιλέγουν τα βασικά στοιχεία του δωματίου, όπως χώρα, πόλη, διεύθυνση, περιγραφή. Από τον χάρτη μπορούν να επιλέξουν την ακριβή τοποθεσία του δωματίου. Όταν επιλέξουν ένα σημείο πάνω του, τα πεδία των συντεταγμένων συμπληρώνονται αυτόματα. Στη συνέχεια, μπορούν να επιλέξουν άλλα στοιχεία για το δωμάτιο, όπως τον τύπο του χώρου, τις ημέρες που θέλει ο ίδιος να είναι διαθέσιμο προς ενοικίαση, αριθμό δωματιών, κρεβατιών και άλλα. Πιο κάτω, υπάρχουν check boxes, για παροχές που διαθέτει το δωμάτιο. Τέλος, καταχωρεί φωτογραφίες του χώρου. Είναι υποχρεωτικό να βάλει κύρια φωτογραφία, η οποία είναι η αντιπροσωπευτική φωτογραφία που εμφανίζεται στην αναζήτηση δωματίων. Στα δεξιά της σελίδας, υπάρχει κουμπί το οποίο ανοίγει ένα πλαίσιο, όπου υπάρχουν όλοι οι χώροι που διαχειρίζεται ο ιδιοκτήτης, με την κύρια φωτογραφία του και κάποιες βασικές πληροφορίες. Υπάρχει δυνατότητα επιλογής δωματίου, για επεξεργασία. Μόλις επιλέξει δωμάτιο, η κεντρική φόρμα γεμίζει με τα στοιχεία του δωματίου και ο ιδιοκτήτης μπορεί να αλλάξει ότι θέλει.
Είναι η κεντρική σελίδα της εφαρμογής. Εδώ μπορεί και ανώνυμος χρήστης να κάνει αναζήτηση δωματίων και να δει τα διαθέσιμα για τις ημερομηνίες που επιθυμεί. Στη συνέχεια έχει την δυνατότητα να φιλτράρει τα αποτελέσματα, από ένα αναδυόμενο παράθυρο στα δεξιά της οθόνης. Στα αποτελέσματα, μπορεί να δει την κύρια φωτογραφία του δωματίου και τα βασικά στοιχεία, όπως η τιμή ενοικίασης και η μέση βαθμολογία του δωματίου, από τις αξιολογήσεις των χρηστών. Αν ο χρήστης είναι συνδεδεμένος, μπορεί να πατήσει στο κουμπί 'Λεπτομέριες', οδηγείται στη σελίδα κρατήσεων, όπου μπορεί να δει αναλυτικά τα στοιχεία του δωματίου και αν επιθυμεί, να κάνει κράτηση για τις ημέρες που έκανε αναζήτηση.
To backend της εν λόγω εφαρμογής είναι maven project αναπτύχθηκε σε intellij με java 17 και χρησιμοποιήθηκε ο ενσωματωμένος application server tomcat για το deploy.
Για το front End χρησιμοποιήθηκε το npm εκτελόντας το script ng serve --ssl true --ssl-key "../src/main/resources/tedi_booking.crt"..
Επίσης απαιτείται η εγκατάσταση του tedi_booking.crt πιστοποιητικού στον υπολογιστή σας και η αποδοχή του πιστοποιητικού από τον browser καθώς αποτελεί self signed Cartificate.
Έχουμε δημιουργήσει το model για την αντιστοίχιση των database tables σε java κλάσεις. Για να μην επαναλαμβάνουμε κώδικα, για τις βασικές συναλλαγές με την βάση, δημιουργήσαμε 3 generic κλάσεις. Συγκεκριμένα την GenericRepository, GenericService και GenericController. Έτσι, για κάθε entity, δημιουργούμε την αντίστοιχη κλάση EntityRepository, EntityService, EntityController οι οποίες κληρονομούν τις πιο πάνω generic κλάσεις και έχουν όλα πρόσβαση στις βασικές συναρτήσεις για αλληλεπίδραση με την βάση (δημιουργία, αναζήτηση/αναζήτηση όλων, επεξεργασία, διαγραφή).
Επάνω στο entity User εφαρμόστηκαν συναρτήσεις αυθεντικοποίησης χρηστών των βιβλιοθηκών του SPRING SECURITY. Επίσης στο φάκελο config δημιουργήθηκαν κλάσεις φίλτρων των εισερχόμενων μηνυμάτων προκειμένου να εξακριβωθεί μέσω του jwt ως Bearer token αν ο χρήστης είναι πιστοποιημένος να καλέσει τα webservices. Ακόμα δημιουργήθηκε δυνατότητα επέκτασης ισχύος του token προκειμένου ο χρήστης να παραμένει συνδεδεμένος στην εφαρμογή χωρίς να χάνει το session του.
Στην παρούσα εργασία υλοποιήθηκαν όλες οι απαιτήσεις της εκφώνησης πλην του συστήματος προτάσεων. Για την άριστη συνεργασία των δύο συμμετεχόντων χρησιμοποιήθηκε το version control system GitHub.