Web project for Internet & Applications Appathon
Ο χρήστης θα αναζητεί δύο πόλεις του κόσμου και θα του εμφανίζονται δεδομένα για τον καιρό στις δύο πόλεις αυτές, καθώς και πληροφορίες για την οδική μετάβαση από τη μία στην άλλη. Τα δεδομένα του καιρού θα περιέχουν τη θερμοκρασία, την υγρασία και τις τρέχουσες συνθήκες που θα συλλέγονται εκείνη τη στιγμή από το API του https://openweathermap.org, ενώ η εύρεση της διαδρομής μεταξύ των δύο πόλεων θα γίνεται μέσω του API του https://openrouteservice.org/. Η εφαρμογή θα παρουσιάζει επίσης στον χρήστη ημερήσια πρόβλεψη για τις επόμενες 7 ημέρες για την πόλη προορισμού του, προκειμένου να μπορεί να προετοιμαστεί κατάλληλα.
Το Project αναπτύχθηκε εξ ολοκλήρου στη βιβλιοθήκη React της JavaScript. Επιπλέον από τη React, χρησιμοποιήθηκε η βιβλιοθήκη Bootstrap 3 για την ευκολότερη και αποτελεσματικότερη μορφοποίηση των περιεχομένων, η βιβλιοθήκη Leaflet της JavaScript για την εμφάνιση και προσαρμογή του χάρτη, καθώς επίσης και η βιβλιοθήκη Moment της Javascript για την λήψη της τρέχουσας ημερομηνίας και τον υπολογισμό της ημερομηνίας των 7 επόμενων ημερών. Στην παράγραφο Installation φαίνεται ο τρόπος στησίματος ενός Ubuntu μηχανήματος προκειμένου να μπορέσει να τρέξει η εφαρμογή.
Η παρακάτω εικόνα περιέχει έναν σύνδεσμο με το βίντεο ανεβασμένο στο YouTube.
Σε περίπτωση που για κάποιο λόγο δεν οδηγεί η παραπάνω εικόνα στο YouTube, παρέχεται και ο σύνδεσμος του βίντεο.
Στο αρχείο presentation.pptx περιέχεται η παρουσίαση της εργασίας που επιδεικνεύει μερικά παραδείγματα χρήσης της εφαρμογής, τις εξαρτήσεις της, καθώς και έναν τρόπο (εκ των δύο που φαίνονται παρακάτω) setup του συστήματος εκτέλεσης της. Για λόγους ασφάλειας, έχει προστεθεί η ίδια παρουσίαση και σε μορφή pdf, προκειμένου να αποφευχθεί οποιαδήποτε παραμόρφωση κατά το άνοιγμα της μεταξύ συστημάτων.
Για να τρέξει η εφαρμογή, αρχικά χρειάζεται να εγκαταστήσουμε την πλατφόρμα NodeJS και το npm.
sudo apt install nodejs npmΣτη συνέχεια, μεταφερόμαστε στον φάκελο application/ του project μας και μέσω του npm εγκαθιστούμε τις απαιτούμενες βιβλιοθήκες.
git clone https://github.com/manosvek/internet-and-applications.git
cd internet-and-applications/applicationΕγκατάσταση της React.
npm install --save reactΕγκατάσταση της Bootstrap.
npm install --save react-bootstrap bootstrap@3Εγκατάσταση της Leaflet.
npm install --save leaflet react-leafletΕγακτάσταση της Moment.
npm install --save momentΤέλος, εκτέλεση της εφαρμογής.
npm startΕίναι επίσης δυνατό το χτίσιμο της τελικής εφαρμογής και το σερβίρισμα του μέσω κάποιας υπηρεσίας σε ένα συγκεκριμένο port. Έτσι, μετά την εγκατάσταση του Node.JS και τη μετάβαση στο φάκελο της εφαρμογής, μπορούμε να κάνουμε build την εφαρμογή ως εξής:
npm run buildΈπειτα, σε περιβάλλον Ubuntu 20.04, εγκαθιστούμε το serve, με το οποίο σερβίρουμε την εφαρμογή σε κάποιο port (τυχαίο ή της επιλογής μας).
sudo snap install serveserve -d build