Ανάλυση, σχεδιασμός & υλοποίηση μιας PWA: «Προσωπικό Εβδομαδιαίο Πρόγραμμα Μαθημάτων»

Ζαραχάνης, Δημήτριος

Analysis, design & implementation of a PWA: “Personal Weekly Lessons’ Schedule”

Πτυχιακή εργασία

Author

Ζαραχάνης, Δημήτριος

Date

2021-03-18

Advisor

Triantafyllou, Ioannis

Thesis file (1.975Mb)

Application source code (2.648Mb)

Keywords

Λογισμικό ; React ; Ανάπτυξη εφαρμογών στον παγκόσμιο ιστό ; Firestore ; Progressive Web Application ; Software

Abstract

Στην παρούσα εργασία παρουσιάζεται η ανάλυση, ο σχεδιασμός και η υλοποίηση μιας διαδικτυακής εφαρμογής. Η εφαρμογή αναπτύχθηκε σε 3 κύρια επίπεδα. Το Back-End που βασίζεται στην υπηρεσία Firestore της Google Cloud Platform, το Middle Layer που έχει υλοποιηθεί με το NodeJS και την βιβλιοθήκη ExpressJS, και το Front-End που αναπτύχθηκε με βάση την βιβλιοθήκη React. Τα τρία αυτά επίπεδα λειτουργούν συνεργατικά ώστε να παρέχεται στους φοιτητές μια διαδραστική εφαρμογή μέσω browser όπου μπορούν διαμορφώσουν το εβδομαδιαίο πρόγραμμα των μαθημάτων τους. Επιπλέον, με τη χρήση των νεότερων δυνατοτήτων που προσφέρουν οι web browsers, η εφαρμογή γίνεται να εγκατασταθεί σε συσκευές απευθείας από τον browser, χωρίς να χρειάζεται να μεσολαβεί κάποιο αποθετήριο εφαρμογών. Η εργασία χωρίζεται σε τρία μέρη, ανάλυση, σχεδιασμός, υλοποίηση και σε κάθε μέρος αναλύεται το αντίστοιχο μέρος της ανάπτυξης της εφαρμογής, από τη σύλληψη μέχρι την υλοποίηση. Περεταίρω στόχοι της εργασίας ήταν η εξερεύνηση και χρήση των πιο σύγχρονων τεχνολογιών που είναι διαθέσιμες στο χώρο του web-development και η πρακτική εφαρμογή εννοιών και γνώσεων που προσφέρονται από μαθήματα της τμήματος, όπως η Ανάλυση και Σχεδιασμός Συστημάτων και οι Εφαρμογές στον Παγκόσμιο Ιστό.

Abstract

The focus of this thesis is the analysis, the design and the implementation of a web-based application. The application is implemented in three layers. The Back-End layers is based on the Firestore service, offered by the Google Cloud Platform, the Middle Layers is implemented with the NodeJS runtime along with the ExpressJS web framework. Finally, the Front-End of the application is implemented with the ReactJS library. The combination of these three layers provides the students/users of the app with an interactive web-based application where they are able to plan their weekly lessons’ schedule. What is more, using the latest features offered by modern web browsers the app can be directly installed on a user’s device, without using an app store. The thesis is divided into three parts, analysis, design and implementation. In each part the corresponding part of the application’s development is described in detail, from the application’s conception to the development of the source code. Some additional goals of this thesis were the exploration and usage of some of the latest web-development technologies and the practical application of the knowledge offered by some of the Department’s Courses.