4.2

Προβολή διαδικτυακής εφαρμογής από μικρότερες οθόνες συ‐

σκευών

Σε αυτή την ενότητα, παρουσιάζεται το ενδεχόμενο πρόσβασης στην ιστοσελίδα

από συσκευές που το μέγεθος της οθόνης τους είναι μικρότερο από ένα τυπικό μέ-

γεθος μιας οθόνης ενός Η/Υ. Είναι πολύ συχνό, το ϕαινόμενο, εν έτη 2020, να γίνεται

χρήση του διαδικτύου από κινητές συσκευές και tablet. Για το λόγο αυτό, αλλά και

για να έχει ο χρήστης καλύτερη και αποδοτικότερη περιήγηση στην συγκεκριμένη

διαδικτυακή εϕαρμογή, ήταν επιτακτική ανάγκη να καλυϕθεί η περίπτωση αυτή, η

οποία είναι γνωστή ως “responsive design” για mobile view. Ένα από τα σημαντικά

κομμάτια αυτής της υλοποίησης, είναι η αναδιαμόρϕωση της μπάρας πλοήγησης

(navigation bar), όπου υπάρχουν τα βασικά πεδία επιλογής για την πλοήγηση στην

εϕαρμογή. Έτσι, υλοποιήθηκε με τρόπο τέτοιο, κάνοντας χρήση της βιβλιοθήκης

”React Transition Group”, ώστε να μετασχηματίζεται η μπάρα αυτή σε διαστάσεις

μικρότερες από (768 x 657) και να εμϕανίζεται στην επάνω αριστερή άκρη της

οθόνης ένα drop down μενού με τις διαθέσιμες επιλογές πλοήγησης. Επίσης, για

διαστάσεις που αϕορούν την πλειοψηϕία των συσκευών προσαρμόζεται και το πε-

ριεχόμενο της εϕαρμογής. Στο σχήμα 4.37 και 4.38, παρουσιάζονται οι περιπτώσεις

αυτές.

4.3

Ανάλυση σημαντικών σημείων κώδικα

Η ενότητα αυτή, πραγματεύεται τα σημεία αυτά του κώδικα, τόσο στο front-end

όσο και στο back-end, που καθόρισαν την ορθή και επιτυχή λειτουργία του συστή-

ματος. Αρχικά, παρουσιάζονται και αναλύονται τα κομμάτια κώδικα στο front-end

και στη συνέχεια ακολουθούν αυτά στο RESTful API (back-end) της διαδικτυακής

εϕαρμογής με επιλεκτική αναϕορά και στιγμιότυπα. Τα κομμάτια αυτά είναι γραμ-

μένα στη γλώσσα προγραμματισμού JavaScript, με βασική τη χρήση της βιβλιοθήκης

React και των Components που περιλαμβάνει, καθώς επίσης και χρησιμοποιώντας

την βιβλιοθήκη Expressjs στο Nodejs του back-end server.

81