fuelgr Desktop Τιμές Υγρών Καυσίμων και Ιστοσελίδα Διαχείρισης Δεδομένων Ντέμος Δημήτριος (ΑΜ: Τ03347)

Transcript

1 ΑΤΕΙ ΘΕΣΣΑΛΙΑΣ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ Τμήμα Μηχανικών Πληροφορικής ΤΕ fuelgr Desktop Τιμές Υγρών Καυσίμων και Ιστοσελίδα Διαχείρισης Δεδομένων ΠΤΥ ΧΙΑΚΗ ΕΡΓΑΣΙΑ Ντέμος Δημήτριος (ΑΜ: Τ03347) Επιβλέπων: Κόκκορας Φώτιος, Καθηγητής Εφαρμογών ΛΑΡΙΣΑ 2015

2

3 «Εγώ ο Ντέμος Δημήτριος, δηλώνω υπεύθυνα ότι η παρούσα Πτυχιακή Εργασία με τίτλο "fuelgr Desktop - Τιμές Υγρών Καυσίμων και Ιστοσελίδα Διαχείρισης Δεδομένων" είναι δική μου και βεβαιώνω ότι: Σε όσες περιπτώσεις έχω συμβουλευτεί δημοσιευμένη εργασία τρίτων, αυτό επισημαίνεται με σχετική αναφορά στα επίμαχα σημεία. Σε όσες περιπτώσεις μεταφέρω λόγια τρίτων, αυτό επισημαίνεται με σχετική αναφορά στα επίμαχα σημεία. Με εξαίρεση τέτοιες περιπτώσεις, το υπόλοιπο κείμενο της πτυχιακής αποτελεί δική μου δουλειά. Αναφέρω ρητά όλες τις πηγές βοήθειας που χρησιμοποίησα. Σε περιπτώσεις που τμήματα της παρούσας πτυχιακής έγιναν από κοινού με τρίτους, α- ναφέρω ρητά ποια είναι η δική μου συνεισφορά και ποια των τρίτων. Γνωρίζω πως η λογοκλοπή αποτελεί σοβαρότατο παράπτωμα και είμαι ενήμερος(-η) για την επέλευση των νομίμων συνεπειών» Ντέμος Δημήτριος

4 Εγκρίθηκε από την τριμελή εξεταστική επιτροπή Τόπος: Ημερομηνία: ΕΠΙΤΡΟΠΗ ΑΞΙΟΛΟΓΗΣΗΣ 1. Κόκκορας Φώτιος, Καθ.Εφαρμογών 2. Κακαρόντζας Γεώργιος, Καθ.Εφαρμογών 3. Ιατρέλλης Όμηρος, Καθ.Εφαρμογών

5 Περίληψη Κατά την εκπόνηση της πτυχιακής εργασίας, παράχθηκε μια εφαρμογή προβολής τιμών υγρών καυσίμων για το λειτουργικό σύστημα Windows 8.1, καθώς και ένα web interface για τη διαχείριση και ενημέρωση των δεδομένων τα οποία χρησιμοποιεί η εφαρμογή. Έπρεπε η εφαρμογή που θα παραχθεί να είναι απλή ως προς τη χρήση, καλαίσθητη χρησιμοποιώντας τα design guidelines των Windows 8.1 Apps, αξιόπιστη αλλά και α- σφαλής. Μέσω της εφαρμογής όχι μόνο θα γινόταν ενημέρωση των χρηστών για τις τιμές καυσίμων αλλά και οι ίδιοι οι χρήστες θα μπορούσαν να συμμετέχουν στην επέκταση της εφαρμογής, αποστέλλοντας διορθώσεις σχετικά με τις γεωγραφικές θέσεις των πρατηρίων. Επίσης, το web interface της διαχείρισης έπρεπε να εκτελεί τις εργασίες εύκολα και αξιόπιστα, ώστε να είναι δυνατή η άμεση ανταπόκριση σε οποιοδήποτε θέμα προκύψει και επηρεάζει την εφαρμογή. Η εφαρμογή προγραμματίστηκε με γλώσσα προγραμματισμού C# και σχεδιάστηκε με γλώσσα σχεδιασμού XAML. Η παραγωγή της έγινε μέσα από το Microsoft Visual Studio Το διαχειριστικό web interface, προγραμματίστηκε με γλώσσα προγραμματισμού PHP, χρησιμοποιώντας τα τελευταία guidelines της HTML5 και CSS3. Η φιλοξενία του web interface πραγματοποιείται σε Apache Web Server με βάση δεδομένων MySQL. Το τελικό προϊόν αποτελείται από μια εφαρμογή, χαμηλή σε απαιτήσεις πόρων και αποτελεσματική ως προς τη λειτουργία της. Επίσης, αποτελείται από το διαχειριστικό web interface μέσω του οποίου δίνεται η δυνατότητα για ενημέρωση των τιμών καυσίμων, διόρθωση θέσεων πρατηρίων, αποδοχή διορθώσεων θέσης που υποβάλλουν οι χρήστες, αποστολή μηνυμάτων στους χρήστες καθώς και προβολή στατιστικών χρήσης της εφαρμογής. -iii-

6

7 Ευχαριστίες Θα ήθελα να ευχαριστήσω την οικογένειά μου για τη στήριξη στις σπουδές μου όλα αυτά τα χρόνια, καθώς και τον κ. Φώτη Κόκκορα για την πολύτιμη καθοδήγηση και βοήθειά του, κατά τη διάρκεια της πτυχιακής μου εργασίας. Ντέμος Δημήτριος ημερομηνία -v-

8

9 Περιεχόμενα ΠΕΡΙΛΗΨΗ... III ΕΥΧΑΡΙΣΤΙΕΣ... V ΠΕΡΙΕΧΟΜΕΝΑ... VII 1 ΕΙΣΑΓΩΓΗ ΑΝΟΙΚΤΑ ΔΕΔΟΜΕΝΑ ΔΗΜΟΣΙΑ ΔΕΔΟΜΕΝΑ ΤΗΣ ΕΛΛΗΝΙΚΗΣ ΚΥΒΕΡΝΗΣΗΣ DATA.GOV.GR ΔΙΑΓΩΝΙΣΜΟΙ ΚΑΙ ΒΡΑΒΕΙΑ ΠΑΡΑΤΗΡΗΤΗΡΙΟ ΤΙΜΩΝ ΥΓΡΩΝ ΚΑΥΣΙΜΩΝ ΠΡΟΒΛΗΜΑ ΚΑΙ ΑΝΤΙΜΕΤΩΠΙΣΗ ΠΕΡΙΓΡΑΦΗ ΠΡΟΒΛΗΜΑΤΟΣ ΠΡΟΤΑΣΗ FUELGR ΕΦΑΡΜΟΓΕΣ WINDOWS FUELGR ΓΙΑ WINDOWS 8.1 DESKTOP ΕΡΓΑΛΕΙΑ ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΥ ΠΑΡΟΥΣΙΑΣΗ ΧΑΡΑΚΤΗΡΙΣΤΙΚΩΝ ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ ΕΦΑΡΜΟΓΗΣ FUELGR DESKTOP FUELGR BACK END ΕΡΓΑΛΕΙΑ ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΥ ΠΑΡΟΥΣΙΑΣΗ ΧΑΡΑΚΤΗΡΙΣΤΙΚΩΝ ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ FUELGR BACKEND ΣΥΝΟΨΗ ΚΑΙ ΕΠΕΚΤΑΣΕΙΣ ΒΙΒΛΙΟΓΡΑΦΙΑ vii-

10

11 1 Εισαγωγή Στη σημερινή εποχή, η τεχνολογία έχει εισέλθει και αλλάξει τη ζωή μας σε μεγάλο βαθμό. Χρησιμοποιούμε το internet για ενημέρωση, ψυχαγωγία, επικοινωνία αλλά και εργασία. Η αναζήτηση πληροφοριών είναι κομμάτι της καθημερινότητάς μας και μας διευκολύνει αρκετά ώστε να προβούμε σε συμφέρουσες αγορές, να γνωρίζουμε όλες τις πληροφορίες για κάποιο προϊόν ακόμη και να το αξιολογήσουμε. Η ολοένα και αυξανόμενη διείσδυση των φορητών συσκευών, όπως κινητά τηλέφωνα και tablets, δημιουργούν προοπτικές ανάπτυξης εφαρμογών που επιλύουν βασικά προβλήματα και οχλήσεις της καθημερινότητας, βοηθώντας τους ανθρώπους να εστιάσουν στη ζωή τους χωρίς να πρέπει να αφιερώνουν χρόνο για ασήμαντα προβλήματα και να τους κυριεύει το άγχος. Πολλές από αυτές τις εφαρμογές έχουν να κάνουν με την εύκολη ενημέρωση, με on-line συναλλαγές χωρίς να απαιτείται φυσική παρουσία του χρήστη στο κατάστημα, με μηδενισμό των αποστάσεων μεταξύ των ανθρώπων χρησιμοποιώντας την επικοινωνία μέσω internet αλλά και την εύκολη αναζήτηση πληροφοριών εν κινήσει, όπως τιμές καυσίμων, εφημερεύοντα φαρμακεία, τράπεζες κλπ. Όλες οι παραπάνω εφαρμογές απαιτούν δεδομένα για να λειτουργήσουν. Αυτά τα δεδομένα παρέχονται είτε από ιδιώτες είτε από το δημόσιο. Χρησιμοποιώντας κοινά πρότυπα με τις εφαρμογές, τα δεδομένα μπορούν να ενσωματωθούν στις εφαρμογές και να παρέχουν χρήσιμες πληροφορίες προς τον χρήστη. Επίσης, μπορούν να συνδυαστούν με τα δεδομένα του χρήστη ώστε να παραχθεί μια πιο εξατομικευμένη εμπειρία. Όλες οι σύγχρονες συσκευές έχουν πρόσβαση στην φυσική τοποθεσία του χρήστη (εφόσον ο χρήστης το επιθυμεί) η οποία μπορεί να χρησιμοποιηθεί στις εφαρμογές διευκολύνοντας την εμφάνιση των πληροφοριών. Για παράδειγμα εμφάνιση των πιο κοντινών πρατηρίων στην τοποθεσία του χρήστη. Τα τελευταία χρόνια γίνεται προσπάθεια από το Ελληνικό Δημόσιο, στα πλαίσια των οδηγιών της Ευρωπαϊκής Ένωσης, για την επέκταση της Διαφάνειας και της Ελεύθερης Πρόσβασης στην Ανοικτή Πληροφορία. Ήδη έχουν αναρτηθεί στο internet αρκετά datasets που ενθαρρύνουν την ανάπτυξη εφαρμογών παροχής πληροφοριών προς -1-

12 τους χρήστες, τα λεγόμενα Ανοικτά Δεδομένα. Τα Ανοικτά Δεδομένα είναι πολύ χρήσιμα στην εποχή μας καθώς παρέχονται από όλους τους φορείς του δημοσίου και με αυτό τον τρόπο μεταφέρονται οι πληροφορίες στους πολίτες εύκολα και γρήγορα. Επίσης, παρατηρείται μείωση της γραφειοκρατίας και το δημόσιο εξοικονομεί χρόνο διανέμοντας τα δεδομένα ώστε να μπορεί ο καθένας να τα προσπελάσει. Μια κατηγορία ανοικτών δεδομένων είναι και τα δεδομένα τιμών υγρών καυσίμων για τα πρατήρια της ελληνικής επικράτειας. Τα δεδομένα συγκεντρώνονται από το Υ- πουργείο Ανάπτυξης και Ανταγωνιστικότητας και παρέχονται ελεύθερα στους χρήστες. Με αυτά τα δεδομένα θα αναπτυχθεί μια εφαρμογή προβολής υγρών καυσίμων, αρκετά απλή στη χρήση και με αξιόπιστα δεδομένα. Σκοπός της εφαρμογής είναι να προβληθούν με απλό τρόπο τα δεδομένα τιμών καυσίμων, σε φορητές συσκευές που έχουν πρόσβαση στο ίντερνετ. Στα επόμενα κεφάλαια της πτυχιακής εργασίας θα παρουσιαστούν οι λεπτομέρειες των ανοικτών δεδομένων καθώς και τα προβλήματα και οι ελλείψεις τους. Στη συνέχεια θα παρουσιαστεί η ιδέα της εφαρμογής fuelgr, η παρουσίασή της και η διαδικασία προγραμματισμού της. Επίσης, μαζί με την εφαρμογή fuelgr δημιουργήθηκε και το διαχειριστικό περιβάλλον fuelgr backend το οποίο διευκολύνει τη διαχείριση της βάσης δεδομένων τιμών καυσίμων. Θα παρουσιαστεί η λειτουργία του αλλά και η διαδικασία προγραμματισμού του. Τέλος, θα προταθούν τρόποι βελτίωσης της εφαρμογής και επέκτασής της. -2-

13 2 Ανοικτά Δεδομένα 2.1 Δημόσια Δεδομένα της Ελληνικής Κυβέρνησης Τα τελευταία χρόνια, η Ελληνική Κυβέρνηση ξεκίνησε να διαθέτει διάφορα δεδομένα στο κοινό προς ενημέρωση αλλά και περαιτέρω αξιοποίησή τους. Δίνοντάς τα μηχαναγνώσιμα και με ανοικτές άδειες, μπορούν να αξιοποιηθούν εύκολα από οποιονδήποτε επιθυμεί να τα αξιοποιήσει για κατασκευή εφαρμογών. Κάθε υπουργείο συλλέγει δεδομένα που αφορούν την κοινωνική και οικονομική ζωή των πολιτών. Με τη δυνατότητα για αξιοποίηση αυτών των δεδομένων αναδεικνύεται η αξία τους και δημιουργούνται συνθήκες για οικονομική ανάπτυξη. Με την πρόοδο της τεχνολογίας, τα δεδομένα αυτά είναι ιδιαίτερα εύκολο να συλλεχθούν και να διαμοιρασθούν. Μετά τη συλλογή τους αποτελούν τα λεγόμενα datasets, τα οποία αναρτώνται στους ιστοχώρους της Ελληνικής Κυβέρνησης (όπως data.gov.gr) απ όπου μπορούν οι ενδιαφερόμενοι να τα μεταφορτώσουν και να τα α- ξιοποιήσουν στη δουλειά τους. Πρόσφατα, υποχρεώθηκαν όλοι οι φορείς του δημοσίου να παρέχουν όλα τους τα δεδομένα, τις πληροφορίες και τα έγγραφά τους ανοικτά για περαιτέρω χρήση, εκτός αν αυτά τα δεδομένα είναι απόρρητα βάσει νόμου (π.χ. ευαίσθητα προσωπικά δεδομένα). Επίσης, τα δεδομένα έχουν μια συγκεκριμένη μορφή ώστε να υπάρχει ομοιογένεια μεταξύ των δεδομένων των διάφορων φορέων. Κάθε αρχείο δεδομένων περιέχει διάφορα μεταδεδομένα τα οποία καθιστούν εύκολη και γρήγορη την αναζήτησή του από τους ενδιαφερόμενους. Επιπρόσθετα, η διάρθρωσή του είναι σε τέτοια μορφή ώστε οι εφαρμογές λογισμικού να μπορούν να εντοπίσουν, να αναγνωρίσουν και να εξάγουν συγκεκριμένα δεδομένα από αυτό. 2.2 Data.gov.gr Στο data.gov.gr καταχωρούνται όλα τα δημόσια ανοιχτά δεδομένα τα οποία κατηγοριοποιούνται ανάλογα με το περιεχόμενό τους και δίνονται στους χρήστες για ελεύθερη χρήση. Τα δεδομένα διανέμονται με μορφή Microsoft Excel ώστε να καταστεί δυνατή η -3-

14 γρήγορη και αποτελεσματική εύρεση των πληροφοριών μέσα σε αυτά και επίσης φέρουν ημερομηνία μεταφόρτωσης ώστε να είναι γνωστή η παλαιότητά τους. Οι φορείς έχουν τέσσερις τρόπους για να αναρτήσουν τα δεδομένα τους στο διαδίκτυο μέσω του data.gov.gr: 1. Όταν υπάρχει κάποιο web service στις υποδομές του φορέα τότε δημοσιεύονται μόνο τα βασικά μεταδεδομένα και το url του web service στο data.gov.gr. Με αυτό τον τρόπο υπεύθυνος για την ανανέωση/επικαιροποίηση των δεδομένων είναι ο φορέας και δεν εμπλέκεται καθόλου το data.gov.gr. 2. Όταν υπάρχει κάποιο αρχείο excel/csv/xml στον ιστοχώρο του φορέα τότε στο data.gov.gr δημοσιεύονται μόνο τα βασικά δεδομένα και το url του αρχείου. Οπότε και πάλι υπεύθυνος είναι ο φορέας για την ανανέωση/επικαιροποίηση των δεδομένων. 3. Όταν το σύνολο των δεδομένων βρίσκεται σε κάποιο αρχείο excel/csv/xml, α- ναρτάται μαζί με τα μεταδεδομένα στο data.gov.gr. Τότε υπεύθυνος για την α- νανέωση/επικαιροποίηση των δεδομένων είναι ο φορέας και απαιτείται παράλληλη ανανέωση του αρχείου δεδομένων και στο data.gov.gr. 4. Όταν υπάρχει ένα μη δομημένο αρχείο όπως html/docx/pdf το οποίο αναρτάται στο data.gov.gr μαζί με τα μεταδεδομένα του. Την ευθύνη για την ανανέωση/επικαιροποίηση των δεδομένων έχει ο φορέας και απαιτείται και παράλληλη ανανέωση του αρχείου δεδομένων και στο data.gov.gr. Τα σύνολα δεδομένων πρέπει να: a) Δημοσιεύονται στην αρχική μορφή τους, χωρίς τροποποιήσεις για να πραγματοποιείται έγκαιρη δημοσιοποίηση. b) Δημοσιεύονται και να επικαιροποιούνται έπειτα από ανάλυση ώστε να είναι πλήρη ως προς τις πληροφορίες που προσφέρουν. c) Δημοσιεύονται και να είναι προσβάσιμα από σταθερή τοποθεσία ώστε να μπορεί να υπάρχει εύκολη και γρήγορη πρόσβαση καθώς και να είναι μακροπρόθεσμη η διαθεσιμότητά τους. d) Δημοσιεύονται σε ανοικτά πρότυπα όπως csv/json/xml για να είναι εύκολη η προσβασιμότητα και η ανάγνωσή τους. e) Περιγράφονται σύμφωνα με τυποποιημένα λεξιλόγια ώστε να είναι πιο εύκολη η αναζήτησή τους. -4-

15 f) Είναι διαθέσιμα μέσω μαζικής εξαγωγής δεδομένων καθώς και μέσω APIs για να είναι πιο εύκολη η αυτόματη επεξεργασία. Μερικά δεδομένα είναι ανοικτά αλλά λόγω της φύσης τους πρέπει να δοθεί πρόσβαση στον ενδιαφερόμενο μόνο κατόπιν αίτησης προς τον φορέα. Άλλα δεδομένα είναι μεν προσβάσιμα αλλά επιβάλλονται όροι για τη χρήση τους ή τέλη ώστε να αποκτηθεί η άδεια χρήσης. Τέλος, υπάρχουν και τα δεδομένα τα οποία είναι κλειστά και απαγορεύεται η πρόσβαση σε αυτά από τον οποιονδήποτε. 2.3 Διαγωνισμοί και Βραβεία Βάσει νόμου καθιερώθηκαν διαγωνισμοί και βραβεία που θα ενθαρρύνουν την χρήση των δεδομένων ώστε να παραχθούν λειτουργικές εφαρμογές τόσο στον ιδιωτικό όσο και στον δημόσιο τομέα. Διαγωνισμοί Κάθε χρόνο πραγματοποιείται διαγωνισμός ανάπτυξης εφαρμογών ώστε να αξιοποιηθούν αποδοτικά τα ανοικτά δεδομένα των δημόσιων φορέων. Ο διαγωνισμός απευθύνεται σε οποιονδήποτε ενδιαφερόμενο με στόχο να προσελκύσει το ενδιαφέρον του ώστε να ενισχυθεί η συνεργασία και να αναδειχθεί η καινοτομία. Βραβεία Τα βραβεία προσφέρονται στους δημόσιους φορείς για επιβράβευσή τους μετά από ε- φαρμογή αποτελεσματικών διαδικασιών σχετικά με την ανοιχτή διάθεση και χρήση της δημόσιας πληροφορίας. 2.4 Παρατηρητήριο τιμών Υγρών Καυσίμων To fuelprices.gr είναι ο δικτυακός τόπος του Υπουργείου Ανάπτυξης και Ανταγωνιστικότητας για την καταχώρηση και προβολή τιμών υγρών καυσίμων σε όλη την Ελλάδα. Όλοι οι ιδιοκτήτες πρατηρίων πρέπει βάσει νόμου να καταχωρούν τουλάχιστον μία φορά το μήνα τις τιμές των προϊόντων τους στο fuelprices.gr. Μέσα στην ιστοσελίδα ο επισκέπτης μπορεί να επιλέξει την περιοχή που τον ενδιαφέρει και μάθει τις τιμές καυσίμων για αυτή με μέγιστη παλαιότητα τιμών μίας εβδομάδας. 1o Βήμα: Επιλέγουμε την εικόνα «Καταναλωτές» και επιλέγουμε το νομό που μας ενδιαφέρει όπως φαίνεται στην Εικόνα

16 Εικόνα 1: Επιλογή νομού 2 ο Βήμα: Επιλέγουμε Δήμο και Δημοτικά Διαμερίσματα ανάλογα με τις προτιμήσεις μας, όπως στην Εικόνα 2. 3 ο Βήμα: Επιλέγουμε καύσιμο και πατώντας «Επόμενο», εμφανίζεται η λίστα με τις τιμές καυσίμων ανά πρατήριο για τα Δημοτικά Διαμερίσματα και για τον τύπο καυσίμου που επιλέξαμε, όπως φαίνεται στην Εικόνα 3. Η λίστα είναι ταξινομημένη σε αύξουσα σειρά βάσει τιμής και εμφανίζονται όσα πρατήρια ενημέρωσαν τις τιμές τους το πολύ μια ε- βδομάδα πριν. -6-

17 Εικόνα 2: Επιλογή Δημοτικών Διαμερισμάτων Εικόνα 3: Προβολή τιμών αμόλυβδης 95 οκτανίων για την περιοχή του δήμου Σερβίων του νομού Κοζάνης. -7-

18

19 3 Πρόβλημα και Αντιμετώπιση Στο κεφάλαιο αυτό περιγράφεται το πρόβλημα που αντιμετωπίζει η πτυχιακή καθώς και η γενική προσέγγιση στην αντιμετώπισή του. 3.1 Περιγραφή Προβλήματος Στο site του Παρατηρητηρίου Τιμών Υγρών Καυσίμων, εκτός από έλλειψη γεωγραφικών μεταδεδομένων (Γεωγραφικό Μήκος-Πλάτος), παρατηρείται μια μάλλον χρονοβόρα διαδικασία αναζήτησης τιμών που επιπλέον καταλήγει και σε έναν μη εποπτικό τρόπο παρουσίασης των αποτελεσμάτων. Όσο αφορά σε παλαιότερα δεδομένα τιμών καυσίμων, αυτά βρίσκονται μεν στο opendata.gov.gr, πλην όμως δεν είναι άμεσα αξιοποιήσιμα. Σε εφαρμογές παρόμοιας φύσης, συνήθως χρησιμοποιείται κάποιο API το οποίο παρέχεται από τον φορέα και δίνει όλα τα δεδομένα της εφαρμογής του φορέα, σε μορφή xml/json. Έπειτα ο προγραμματιστής, χρησιμοποιεί τα δεδομένα του API στην ε- φαρμογή του, τα οποία μπορούν να ποικίλλουν, όπως για παράδειγμα, σε μια εφαρμογή τιμών καυσίμων, πρέπει να έχουμε διαφορετικά δεδομένα ανάλογα με την περιοχή, τον τύπο καυσίμου, την εταιρία, την παλαιότητα των τιμών κ.α. Κάνοντας κλήση στο API με κάποια συγκεκριμένα ορίσματα, γίνεται να ληφθούν μόνο τα δεδομένα που ενδιαφέρουν τον τελικό χρήστη, χωρίς να απαιτείται να ληφθεί ολόκληρο το dataset του φορέα και έπειτα να αναλυθεί, κερδίζοντας σε χρόνο αλλά και σε όγκο δεδομένων, κάτι πολύ σημαντικό για εφαρμογές που προορίζονται για χρήση σε smartphones. Στην περίπτωσή μας, παρόλο που το fuelprices.gr είναι υποχρεωμένο βάσει νόμου να αναρτά τα datasets του στο opendata.gov.gr, παρατηρούμε ότι κάτι τέτοιο γίνεται με χρονική καθυστέρηση κάτι που περιορίζει την αξία και τη χρησιμότητα των δεδομένων. Μια λύση θα ήταν η χρήση κάποιου λογισμικού αποδελτίωσης ιστού (web scrapping) το οποίο μπορεί να εξάγει τα δεδομένα του fuelprices.gr, στο χρόνο που επιθυμούμε καθώς και στην κλίμακα που ενδιαφέρει. Ένα τέτοιο λογισμικό συνήθως παράγει ένα αρχείο σε ανοικτή μηχαναγνώσιμη μορφή (π.χ. xml). Αν τα δεδομένα αυτά ενσωματωθούν σε μια database, τότε μπορεί να δημιουργηθεί ένα API που να τροφοδοτεί -9-

20 εφαρμογές που επιθυμούν να χρησιμοποιήσουν αυτά τα δεδομένα. Ένα τέτοιο λογισμικό αποδελτίωσης ιστού DEiXTo και, χρησιμοποιήθηκε στην πτυχιακή για να γίνει εμπλουτισμός της εφαρμογής με τιμές και στοιχεία πρατηρίων και πρατηριούχων. 3.2 Πρόταση fuelgr Client App Η ιδέα είναι να κατασκευαστεί μια εφαρμογή Windows 8.1 Store, ώστε να δώσει εύκολη πρόσβαση σε όλους τους χρήστες σε τιμές υγρών καυσίμων. Επίσης, πρέπει να κατασκευαστεί ένα διαχειριστικό εργαλείο για τη βάση δεδομένων που φιλοξενεί τα δεδομένα του fuelgr. Μια εφαρμογή προβολής τιμών υγρών καυσίμων πρέπει να είναι ιδιαίτερα φιλική προς τον χρήστη, με απλή σχεδίαση, εύκολη περιήγηση και γρήγορη λειτουργία. Ο τελικός χρήστης επιθυμεί να μάθει τις τιμές καυσίμων γρήγορα και με ευκολία. Επίσης, καθώς η πλειοψηφία των χρηστών τέτοιων εφαρμογών είναι συνήθως μεγαλύτερης ηλικίας, πρέπει να υπάρχει καθοδήγηση κατά τη χρήση της εφαρμογής και οι επιλογές να είναι όσο πιο απλές γίνεται ώστε να αποφευχθεί η σύγχυση. Επομένως, ένα ιδανικό σενάριο θα ήταν η σχεδίαση να περιέχει έναν μεγάλο και ευανάγνωστο χάρτη, με τα πρατήρια επάνω σε αυτόν, έτσι ώστε ο χρήστης να έχει μια εικόνα σχετικά με την τοποθεσία των πρατηρίων καθώς και τις τιμές των καυσίμων τους. Back End Εκτός από την εφαρμογή προβολής τιμών υγρών καυσίμων, υπάρχει η ανάγκη για κατασκευή συστήματος διαχείρισης των δεδομένων στον server του fuelgr. Καθώς τα δεδομένα από το fuelprices.gr είναι ελλιπή και σε δύσκολα αναγνώσιμη μορφή, πρέπει να υπάρχει κάποιο εργαλείο ώστε να μπορούν να διορθωθούν τα δεδομένα, να προστεθούν γεωγραφικές θέσεις στα πρατήρια, λόγω του ότι δεν δίνει το παρατηρητήριο τέτοια δυνατότητα. Επιπρόσθετα, μπορεί να ενσωματωθεί λειτουργία αποστολής μηνυμάτων στους χρήστες μέσω του dataset, μια μορφή επικοινωνίας απλή και χωρίς απαιτήσεις από τη συσκευή του τελικού χρήστη. -10-

21 Άλλη μια χρήσιμη λειτουργία του back end είναι η αξιολόγηση και υιοθέτηση των διορθώσεων που αποστέλλουν οι χρήστες σχετικά με τη γεωγραφική θέση των πρατηρίων. Επειδή, όπως αναφέρθηκε, δεν δίνονται δεδομένα γεωγραφικής θέσης από το fuelprices.gr, ο γεωγραφικός εντοπισμός των πρατηρίων γίνεται μέσω Google Geolocation API, στο οποίο αποστέλλεται η διεύθυνση του πρατηρίου και επιστρέφονται οι γεωγραφικές συντεταγμένες του. Καθώς πρόκειται για αυτοματοποιημένη υπηρεσία, ορισμένες φορές επιστρέφονται λάθος τοποθεσίες ή και καθόλου λόγω εσφαλμένων η δυσανάγνωστων διευθύνσεων. Σε αυτό το πρόβλημα μπορούν να βοηθήσουν οι χρήστες, προτείνοντας τις σωστές θέσεις για τα πρατήρια που δεν έχουν θέση στο χάρτη ή ειδοποιώντας για εσφαλμένες θέσεις πρατηρίων που έχουν θέση στο χάρτη. Τέλος, θα μπορούσε να υλοποιηθεί ένας μηχανισμός άθροισης των χρηστών ώστε να υπάρχουν χρήσιμα στατιστικά σχετικά με τη χρήση και την απήχηση της εφαρμογής. Τα χαρακτηριστικά της εφαρμογής Προβολή των πρατηρίων σε χάρτη, με εικονίδιο που απεικονίζει μάρκα και τιμή Πλήρης ενημέρωση των χρηστών για τις λεπτομέρειες του καυσίμου, τις πληροφορίες του πρατηρίου, το αν είναι φθηνή η ακριβή η τιμή του καυσίμου, καθώς και το πότε ενημερώθηκε από τον πρατηριούχο Προβολή του πρατηρίου σε Google Streetview Δυνατότητα αποθήκευσης του πρατηρίου στα «Αγαπημένα» Προβολή των πρατηρίων σε αύξουσα λίστα βάσει τιμής Προβολή των τριών φθηνότερων πρατηρίων της περιοχής σε pop-up παράθυρο Σήμανση των τριών φθηνότερων πρατηρίων στον χάρτη με ειδικό σύμβολο για εύκολη εύρεση Δυνατότητα χειροκίνητης ενημέρωσης για συνδέσεις ογκοχρέωσης Δυνατότητα αποστολής διορθώσεων για πρατήρια χωρίς θέση στο χάρτη Δυνατότητα αποστολής ειδοποιήσεων για πρατήρια με λανθασμένη θέση στο χάρτη Εμφάνιση ενημερωτικών μηνυμάτων από το server backend του fuelgr Χρήσιμη λειτουργία zoom για ζουμάρισμα σε όλη την περιοχή με τα πρατήρια, στο κοντινότερο πρατήριο ή στην τοποθεσία του χρήστη Παροχή πληροφοριών πλοήγησης από την τοποθεσία του χρήστη προς το πρατήριο. -11-

22 Οικογένεια fuelgr Εκτός από την εφαρμογή fuelgr Desktop, έχουν αναπτυχθεί και άλλες fuelgr εφαρμογές όπως fuelgr για Windows Phone, fuelgr Web, fuelgr Widget και fuelgr Android που βρίσκεται υπό ανάπτυξη. Πρόκειται για ποιοτικές εφαρμογές που αναπτύχθηκαν με μεράκι από νέους ανθρώπους, βάζοντας σε δοκιμασία τις γνώσεις τους και παράγοντας κάτι το άρτιο τόσο λειτουργικά όσο και σχεδιαστικά. Αυτό που ξεχωρίζει τις εφαρμογές fuelgr από τον ανταγωνισμό είναι το πλήθος των λειτουργιών που έχουν σε συνδυασμό με το πληρέστερο dataset τιμών υγρών καυσίμων. Υπάρχει μεγάλη απήχηση από τους χρήστες και οι αξιολογήσεις είναι επίσης υψηλές. Οι εφαρμογές δεν έχουν κάποιο οικονομικό κέρδος ούτε από τη διάθεσή τους ούτε από διαφημίσεις. 3.3 Εφαρμογές Windows 8.1 Τα Windows 8 [Εικόνα 4] κυκλοφόρησαν στην αγορά στις 26 Οκτωβρίου του Πρόκειται για το λειτουργικό σύστημα που διαδέχτηκε τα Windows 7 και βασίζεται πάνω στη γνωστή αρχιτεκτονική NT. Με την ολοένα και αυξανόμενη διείσδυση των tablets καθώς και των συσκευών με οθόνη αφής στην αγορά, η Microsoft τολμά να ανασχεδιάσει ριζικά την εμφάνιση και τη λειτουργικότητα των Windows, χωρίς όμως να φέρνει τα επιθυμητά αποτελέσματα. Αναμφίβολα, η πιο αμφιλεγόμενη αλλαγή ήταν η πλήρης διαγραφή του μενού «Έναρξη», τόσο ως οντότητα αλλά όσο και σαν κουμπί στην κάτω αριστερή γωνία της ο- θόνης. Πλέον, «Έναρξη» είναι μια οθόνη που περιέχει πλακίδια τα οποία αντιστοιχούν σε εφαρμογές ή διάφορες συντομεύσεις. Εικόνα 4: Η νέα «Έναρξη» Για τους χρήστες tablet ή οθονών αφής φαίνεται να είναι μια όμορφη και τακτοποιημένη λύση, διευκολύνοντας τη χρήση με διάφορες εντολές swipe, drag κλπ. Όμως, κα- -12-

23 θώς η συντριπτική πλειοψηφία των χρηστών Windows χρησιμοποιεί desktops ή laptops, αμέσως συνειδητοποιούμε ότι δεν είναι κατάλληλο το περιβάλλον για χρήση με ποντίκι και πληκτρολόγιο. Παρακάτω μπορείτε να δείτε την εμφάνιση του νέου μενού «Έναρξη». Η Microsoft, σύντομα διαθέτει στην αγορά την έκδοση 8.1 [Εικόνα 5] η οποία φέρνει πίσω το πολυπόθητο κουμπί της «Έναρξης» αλλά και βελτιώνει κατά πολύ την λειτουργικότητα καθώς ορισμένες λειτουργίες απλοποιούνται όπως πλέον υπάρχει κουμπί για απενεργοποίηση του υπολογιστή χωρίς να χρειάζεται μια σειρά από swipes ώστε να βρεθεί η κατάλληλη επιλογή. Εικόνα 5: Η νέα διαρρύθμιση στα Windows 8.1 Καθώς όμως ούτε αυτό ήταν αρκετό να ικανοποιήσει τους παραδοσιακούς χρήστες, η Microsoft επέστρεψε δυναμικά με τα Windows 10, δημιουργώντας ένα περιβάλλον χρήστη που κατά πολλούς έπρεπε να ήταν εξαρχής έτσι από τα Windows 8 ώστε να μην θεωρηθούν αποτυχημένα. Με τα Windows 10 [Εικόνα 6] η Microsoft όχι μόνο αλλάζει το λειτουργικό σύστημα αλλά δημιουργεί μια ενιαία πλατφόρμα πάνω στην οποία όλες οι συσκευές, από υ- πολογιστές μέχρι κινητά τηλέφωνα, τρέχουν το ίδιο λειτουργικό σύστημα και τις ίδιες εφαρμογές χωρίς αλλαγές στον κώδικα ή την εμφάνιση. Εικόνα 6: Τα Windows 10. Αναμένονται μέσα στο

24 Αρχιτεκτονική εφαρμογών Windows 8.1 Στα Windows 8.1 έχουμε δύο επιλογές σχετικά με την ανάπτυξη εφαρμογών, όπως μπορούμε να δούμε στην Εικόνα 7: Εικόνα 7: Η αρχιτεκτονική της πλατφόρμας Windows 8.1 Windows Desktop Apps Πρόκειται για τις παραδοσιακές εφαρμογές των Windows που κυκλοφορούν τόσα χρόνια. Μπορούν να προγραμματιστούν είτε σε HTML για εφαρμογές διαδικτύου, είτε σε C, C#, C++ για τοπικές εφαρμογές Win32. Τα εργαλεία ανάπτυξης και η μέθοδος προγραμματισμού είναι η ίδια με τις προγενέστερες εκδόσεις των Windows όπως επίσης και οι παλιότερες εφαρμογές Win32 μπορούν να εκτελεστούν στο περιβάλλον Desktop των Windows 8.1. Windows Store Apps Οι εφαρμογές αυτού του είδους έχουν εντελώς διαφορετική εμφάνιση και φιλοσοφία από τις παραδοσιακές εφαρμογές Win32. Ακόμη και ο τρόπος διάθεσής τους είναι διαφορετικός. Ο προγραμματισμός γίνεται σε C#/Javascript και η σχεδίαση του γραφικού περιβάλλοντος σε XAML/CSS. Υπάρχουν πολλές βιβλιοθήκες για προσπέλαση δεδομένων GPS, Κάμερας, σύνδεσης στο internet κλπ. Κάθε εφαρμογή, απαιτεί διάφορες εγκρίσεις σχετικά με τη λειτουργία της. Στη δική μας περίπτωση, πρέπει να ζητήσουμε την άδεια του χρήστη για να έχουμε πρόσβαση στη γεωγραφική θέση του, όπως επίσης και να δηλώσουμε ότι κάνουμε χρήση της σύνδεσής του στο ίντερνετ. -14-

25 Αφού δημιουργηθεί η εφαρμογή, ο μόνος τρόπος διάθεσης είναι μέσω του Windows Store. Εκεί, κάθε εφαρμογή που διατίθεται, έχει περάσει από αυστηρό έλεγχο από τη Microsoft σχετικά με την ασφάλεια και τη λειτουργικότητά της. Επίσης, οι χρήστες μπορούν να αξιολογήσουν την εφαρμογή που κατέβασαν, διευκολύνοντας έτσι τους άλλους χρήστες να διαλέξουν ποια εφαρμογή να κατεβάσουν. Το store παρουσιάζεται στην Εικόνα 8. Εικόνα 8: Το Store των Windows

26

27 4 fuelgr για Windows 8.1 Desktop Σε αυτή την ενότητα θα παρουσιαστεί η διαδικασία προγραμματισμού των επιμέρους λειτουργιών του fuelgr καθώς και οι τρόποι επίλυσης προβλημάτων που υπάρχουν στο dataset του fuelprices.gr. 4.1 Εργαλεία προγραμματισμού Οι εφαρμογές Windows 8.1 Store προγραμματίζονται με χρήση του Microsoft Visual Studio 2013, καθώς απαιτούνται οι τελευταίες βιβλιοθήκες και SDKs ώστε να δημιουργηθεί μια τέτοια εφαρμογή. Το περιβάλλον παρουσιάζεται στην Εικόνα 9. Εικόνα 9: To fuelgr σε περιβάλλον προγραμματισμού Visual Studio Επίσης, το Visual Studio δημιουργεί το τελικό εκτελέσιμο αρχείο και προσθέτει τα κατάλληλα μεταδεδομένα ώστε η εφαρμογή να είναι έτοιμη να ανέβει στο Store. 4.2 Παρουσίαση χαρακτηριστικών Bing Maps Η μόνη λύση για κατασκευή εφαρμογής με χρήση χαρτών σε Windows 8.1 είναι η ενσωμάτωση των bing maps της Microsoft. Είναι εμπλουτισμένοι με πληροφορίες και ει- -17-

28 κόνες της Nokia, παρέχουν διάφορες ευκολίες όπως σχεδίαση με canvas, προσθήκη α- ντικειμένων στον χάρτη, προσθήκη διάφορων event handlers όπως για παράδειγμα κατά την πραγματοποίηση «κλικ» στον χάρτη, κατά τη φόρτωσή του κλπ. Επίσης, οι bing maps [Εικόνα 10] έχουν τη δυνατότητα να κρατούν τα δεδομένα στην cache του προγράμματος, οπότε δεν χρειάζεται να γίνει ξανά λήψη των περιοχών που έχει περιηγηθεί ο χρήστης. Με αυτό τον τρόπο μειώνεται ο χρόνος αναμονής για τη φόρτωση του προγράμματος και ελαχιστοποιείται η χρήση δεδομένων ίντερνετ. Εικόνα 10: Οι χάρτες Bing της Microsoft Offline Χρήση Λόγω του ότι η εφαρμογή απευθύνεται και σε χρήστες mobile συσκευών όπως tablets, μπορεί να μην υπάρχει συνεχής σύνδεση στο internet. Στην περίπτωση αυτή πρέπει η εφαρμογή να λειτουργεί σωστά και να παρέχει τις απαραίτητες πληροφορίες. Μία λύση είναι να πραγματοποιείται λήψη του dataset και να αποθηκεύεται στην συσκευή. Με τον τρόπο αυτό μπορούμε να προσπελάσουμε τα δεδομένα οποιαδήποτε στιγμή ακόμα και όταν δεν υπάρχει διαθέσιμη σύνδεση στο internet. Επίσης, ελαχιστοποιείται η χρήση δεδομένων καθώς η εφαρμογή δεν διατηρεί κάποια ανοιχτή σύνδεση με τον server παρά μόνο κατά τη λήψη του dataset. Έτσι, ακόμη και χωρίς internet, ο χρήστης θα μπορεί να προβάλλει τις τιμές για την περιοχή που έκανε τελευταία φορά αναζήτηση χωρίς να υπάρχει κάποιο πρόβλημα σχετικά με τη λειτουργία της εφαρμογής. -18-

29 Ασφάλεια Ένα πολύ σημαντικό κομμάτι της σχεδίασης μιας εφαρμογής είναι η ασφάλεια. Ειδικά όταν αυτή τη εφαρμογή χρησιμοποιεί τη σύνδεση στο internet και μεταδίδει δεδομένα. Πρέπει να υπάρχει ασφαλής σύνδεση στον server με κρυπτογραφημένες κλήσεις HTTPS χρησιμοποιώντας πιστοποιητικό ασφαλείας SSL. Με αυτό τον τρόπο, οι κακόβουλοι χρήστες δεν μπορούν να αναγνωρίσουν την κλήση που γίνεται στον server, ούτε το dataset που αποστέλλεται. Έτσι, τα δεδομένα δεν μπορούν να υποκλαπούν και υπάρχει απαραβίαστη σύνδεση μεταξύ εφαρμογής και server. Επίσης, θα πρέπει τα δεδομένα που αποθηκεύονται στην εφαρμογή να είναι επίσης κρυπτογραφημένα ώστε να μην μπορούν να υποκλαπούν αλλά ούτε και να αλλοιωθούν με κάποιο τρόπο. Λειτουργίες Εικόνα 11: Screenshot από την εφαρμογή fuelgr Η εφαρμογή πρέπει να μπορεί να προσφέρει διάφορες ευκολίες στους χρήστες και όχι μόνο να προβάλλει απλά τις τιμές των πρατηρίων όπως το fuelprices.gr Πινέζες Μια λύση είναι να υπάρχουν διάφορες πινέζες (pins) πάνω στο χάρτη, που να υποδεικνύουν τη θέση του πρατηρίου στο χάρτη, την μάρκα του καυσίμου καθώς και την τιμή του, όπως στο στοιχείο 1 στην Εικόνα

30 Η πινέζα χωρίζεται σε δύο τομείς. Στο λογότυπο και τον δείκτη. Το λογότυπο ποικίλλει ανάλογα με τη μάρκα του καυσίμου. Ο δείκτης, περιέχει την τιμή του καυσίμου και «δείχνει» πάνω στο χάρτη σε ποιο ακριβώς σημείο βρίσκεται το πρατήριο. Το μέγεθος πρέπει να είναι τόσο όσο να είναι ευανάγνωστο αλλά να μην δημιουργεί προβλήματα εμφάνισης λόγω του μεγέθους του. Infoboxes Εκτός από τις πινέζες, μια καλή λύση είναι να εμφανίζονται παράθυρα πληροφοριών (infoboxes) έπειτα από κλικ πάνω σε κάποια πινέζα. Ένα παράθυρο πληροφοριών θα πρέπει να δίνει τις πληροφορίες στο χρήστη με εύκολο τρόπο, να είναι ευανάγνωστο και να αποκρύπτεται εύκολα όταν δεν το χρειαζόμαστε. Το infobox στο στοιχείο 2 στην Εικόνα 11, χωρίζεται σε έξι τομείς: 1. Στις πληροφορίες καυσίμου πάνω αριστερά, όπου υπάρχει ο τύπος του καυσίμου, η μάρκα καθώς και το λογότυπο της μάρκας. 2. Πάνω δεξιά όπου βρίσκεται το κουμπί αποστολής ειδοποίησης για λάθος θέση καθώς και το κουμπί κλεισίματος του infobox. 3. Στο μέσο αριστερό μέρος όπου υπάρχει η ημερομηνία καταχώρησης τιμής από τον πρατηριούχο, η επωνυμία του πρατηρίου και η διεύθυνσή του. 4. Στο μέσο δεξιό μέρος όπου εμφανίζεται η τιμή του καυσίμου. 5. Κάτω αριστερά όπου μπορούμε να δούμε την ακρίβεια των συντεταγμένων (Μέτρια, Καλή, Άριστη) καθώς και την εκτίμηση της απόστασης του πρατηρίου από τη θέση μας, σε ευθεία γραμμή. 6. Τέλος, κάτω δεξιά, όπου μπορούμε να δούμε το πρατήριο σε Google Streetview, να λάβουμε οδηγίες πλοήγησης προς αυτό καθώς και να το προσθέσουμε στα αγαπημένα ώστε να μπορούμε να το διακρίνουμε αργότερα με ευκολία. Μπάρα Πληροφοριών Ακόμη μια χρήσιμη λειτουργία είναι να υπάρχει κάποια μπάρα όπου να εμφανίζονται διάφορες πληροφορίες σχετικά με το τι δεδομένα εμφανίζονται στον χάρτη. Όπως για παράδειγμα στο στοιχείο 3 στην Εικόνα 11. Μας δίνονται χρήσιμες πληροφορίες όπως ο αριθμός των τιμών καυσίμων που υπάρχουν στο χάρτη, η ελάχιστη τιμή, η μέγιστη τιμή καθώς και ο μέσος όρος των τιμών. Για περισσότερη ευκολία, υπάρχει χρωματική κωδικοποίηση των τιμών. Για παράδειγμα όσες τιμές είναι κοντά στην ελάχιστη τιμή, έχουν πράσινο χρώμα, όσες κυμαίνονται στον μέσο όρο της περιοχής έχουν μπλε χρώμα και όσες είναι υψηλές έχουν κόκκινο χρώμα. -20-

31 Μπάρα Ρυθμίσεων Σύμφωνα με τις οδηγίες της Microsoft, καλό θα είναι να υλοποιήσουμε το μενού ρυθμίσεων σε μορφή αποκρύψιμης μπάρας, ώστε και να μπορούμε να έχουμε γρήγορη πρόσβαση σε αυτές χωρίς να διαταράσσεται η εργασία μας, αλλά και να μπορούμε να τις αποκρύψουμε εύκολα όταν δεν τις χρειαζόμαστε πια. Στα Windows 8.1, κάνοντας δεξί κλικ ή swipe up σε οποιοδήποτε σημείο μιας Windows Store εφαρμογής, εμφανίζεται τη μπάρα ρυθμίσεων, συνήθως στο κάτω μέρος της εφαρμογής. Χωρίζεται στο αριστερό και δεξί μέρος, με το αριστερό να φιλοξενεί λειτουργίες που χρησιμοποιούμε πιο σπάνια σε σχέση με τις λειτουργίες του δεξιού μέρους. Στο fuelgr έχουμε την παρακάτω μπάρα ρυθμίσεων. Το αριστερό μέρος της μπάρας, όπως φαίνεται στην Εικόνα 12, φιλοξενεί τις επιλογές: Zoom, για ζουμάρισμα του χάρτη στην περιοχή με τα πρατήρια, στο κοντινότερο πρατήριο ή στην τοποθεσία μας Προβολή σε Λίστα, για προβολή όλων των πρατηρίων σε αύξουσα λίστα βάσει τιμής Τα Φθηνότερα Πρατήρια, για εμφάνιση των τριών φθηνότερων πρατηρίων στην περιοχή Υπόμνημα, για εμφάνιση επεξηγηματικού κειμένου σχετικά με τα εικονίδια που υπάρχουν στην εφαρμογή Πληροφορίες, για εμφάνιση πληροφοριών και συνδέσμων σχετικά με το πρόγραμμα Εικόνα 12: Κάτω αριστερή μπάρα ρυθμίσεων Το δεξί μέρος της μπάρας φιλοξενεί τις παρακάτω επιλογές όπως φαίνονται στην Εικόνα 13: Περιοχή, για επιλογή της περιοχής για την οποία θέλουμε να εμφανίσουμε τιμές Εταιρία, για επιλογή των εταιριών καυσίμων που μας ενδιαφέρουν Καύσιμο, για επιλογή του τύπου καυσίμου -21-

32 Παλαιότητα, για την επιλογή της μέγιστης παλαιότητας των τιμών Ανανέωση, για χειροκίνητη ανανέωση των τιμών τη στιγμή που επιθυμούμε Εικόνα 13: Κάτω δεξιά μπάρα ρυθμίσεων Όλες οι επιλογές πραγματοποιούνται άμεσα και επίσης αποθηκεύονται ώστε να μη χρειαστεί να τις αλλάζουμε κάθε φορά που εκτελείται το πρόγραμμα. Διόρθωση Θέσης Μερικά πρατήρια, λόγω της δύσκολης διεύθυνσής τους ή της ελλιπούς χαρτογράφησης, δεν είναι δυνατόν να εντοπιστούν στον χάρτη. Σε αυτή την περίπτωση, ζητείται βοήθεια από τους χρήστες ώστε να υποδείξουν τη σωστή θέση του πρατηρίου, εάν το γνωρίζουν. Αρχικά, εάν υπάρχουν πρατήρια χωρίς θέση, αυτά δεν εμφανίζονται στον χάρτη αλλά εμφανίζεται ένα κουμπί που ειδοποιεί τον χρήστη για την ύπαρξή τους. Το κουμπί εμφανίζεται στο κάτω δεξί μέρος της εφαρμογής και περιέχει τον αριθμό των πρατηρίων που δεν έχουν θέση στον χάρτη. Κάνοντας «κλικ» στο κουμπί, ο χρήστης μεταβαίνει στην λειτουργία διόρθωσης, όπως φαίνεται στην Εικόνα 14. Εικόνα 14: Η λειτουργία διόρθωσης -22-

33 Έτσι, ο χρήστης, μπορεί να τοποθετήσει την πινέζα στον χάρτη και να αποστείλει στον server του fuelgr τη σωστή τοποθεσία, ώστε να αξιολογηθεί και να υιοθετηθεί εφόσον είναι σωστή, μέσω του web backend της εφαρμογής. Ειδοποιήσεις Η επικοινωνία με τους χρήστες είναι πολύ σημαντική καθώς δίνει τη δυνατότητα στους προγραμματιστές να ενημερώσουν τους χρήστες σχετικά με κάποιο πρόβλημα ή να τους προσφέρουν γενικές πληροφορίες. Με τη μέθοδο των ειδοποιήσεων μπορούμε να στείλουμε το κείμενο που επιθυμούμε στην εφαρμογή, χωρίς να χρησιμοποιήσουμε κάποιο service του συστήματος και να δεσμεύσουμε τους πόρους του όπως επεξεργαστική ισχύ, σύνδεση στο internet ή μπαταρία. Το μήνυμα εμφανίζεται μία φορά στον χρήστη κατά τη διάρκεια που λάβει τιμές. Το μήνυμα καταχωρείται στο backend της εφαρμογής και συγχωνεύεται με το dataset οπότε η εφαρμογή μπορεί να το διαβάσει όπως διαβάζει τα δεδομένα των καυσίμων, χωρίς να απαιτείται άλλη μέθοδος ή υπηρεσία ειδοποιήσεων. Google Streetview Έπειτα από την προσθήκη φωτογραφιών της Ελλάδας στο Google Streetview, μπορούμε εύκολα να προσθέσουμε σε κάποια εφαρμογή μας αυτές τις φωτογραφίες. Καθώς ήδη είναι γνωστές οι τοποθεσίες των πρατηρίων στο fuelgr, μπορούμε να τις χρησιμοποιήσουμε για να βρούμε τις εικόνες του πρατηρίου στο Streetview. Ο χρήστης, μπορεί να πατήσει το αντίστοιχο κουμπί στο infobox του πρατηρίου και να ανοίξει την προβολή streetview. Εκεί, μπορεί να κάνει zoom και να περιηγηθεί στην γύρω περιοχή, όπως παρουσιάζεται στην Εικόνα 15. Πρόκειται για μια αρκετά χρήσιμη λειτουργία, μιας και δίνει τη δυνατότητα στον χρήστη να οικειοποιηθεί με την περιοχή του πρατηρίου έτσι ώστε να το αναγνωρίσει και να εξυπηρετηθεί γρηγορότερα και ευκολότερα. Πλοήγηση προς το Πρατήριο Σε άγνωστες τοποθεσίες, ο χρήστης μπορεί να διευκολυνθεί και να λάβει πληροφορίες πλοήγησης προς το πρατήριο, αρκεί να έχει ενεργοποιημένες τις υπηρεσίες τοποθεσίας GPS στη συσκευή του. Όταν υπάρχει διαθέσιμη η τοποθεσία του χρήστη, ενεργοποιείται το κουμπί «Πλοήγηση» στο infobox του πρατηρίου. Κάνοντας κλικ στο κουμπί, ανοίγουν οι χάρτες της Microsoft, δεξιά από το fuelgr, με έτοιμη τη διαδρομή και τις οδηγίες από την τοποθεσία του χρήστη προς το πρατήριο, όπως μπορείτε να δείτε στην Εικόνα

34 Εικόνα 15: Προβολή Google Streetview για κάποιο πρατήριο Εικόνα 16: Πληροφορίες πλοήγησης προς το πρατήριο Με αυτό τον τρόπο και μπορούμε να προβάλλουμε πληροφορίες πλοήγησης προς το πρατήριο αλλά και διατηρούμε ανοικτές τις πληροφορίες του πρατηρίου έτσι ώστε να μπορέσουμε να το αναγνωρίσουμε ευκολότερα. -24-

35 4.3 Προγραμματισμός εφαρμογής fuelgr Desktop Λήψη και ανάγνωση dataset Το κυριότερο μέρος του προγραμματισμού της εφαρμογής fuelgr είναι ο μηχανισμός λήψης dataset. Η μορφή του είναι σε xml το οποίο περιέχει cdata σε ορισμένα «παιδιά». Η ασφάλεια σε μια τέτοια εφαρμογή που επικοινωνεί στο internet είναι πολύ σημαντική. Αρχικά πρέπει οι κλήσεις μας να πραγματοποιούνται με HTTPS κρυπτογραφημένη σύνδεση, ώστε να αποτραπεί η οποιαδήποτε υποκλοπή του dataset ή των δεδομένων του χρήστη της εφαρμογής. HttpRequestMessage req = new HttpRequestMessage(HttpMethod.Get, uri); HttpResponseMessage message = await client.sendrequestasync(req); StorageFile datafile = await myfolder.createfileasync("data.xml", CreationCollisionOption.ReplaceExisting); message.dispose(); req.dispose(); Εικόνα 17: Κώδικας επικοινωνίας με τον server Στον παραπάνω κώδικα στην Εικόνα 17, βλέπουμε τη διαδικασία επικοινωνίας με τον server. Τοποθετούμε το uri της κλήσης με https μπροστά και πραγματοποιούμε την κλήση ανάλογα με τα ορίσματα που επιθυμούμε. Εάν το μήνυμα επιστροφής είναι θετικό, τότε αποθηκεύουμε την απάντηση του server (xml dataset) σε κάποιο αρχείο μέσα στον αποθηκευτικό χώρο της συσκευής. Εάν όχι, ενημερώνουμε τον χρήστη ότι υπάρχει κάποιο πρόβλημα με την επικοινωνία με τον server και τον προτρέπουμε να δοκιμάσει ξανά. Έπειτα από την λήψη του dataset, πραγματοποιούμε την ανάγνωσή του. Αρχικά, αρχικοποιούμε τον χάρτη και καθαρίζουμε τα layers του δηλαδή σβήνουμε τα pins, infoboxes κλπ. Στη συνέχεια, διαβάζουμε όλα τα στοιχεία του xml. Η μέθοδος εύρεσης του μέσου όρου καθώς και της μέγιστης και της ελάχιστης τιμής είναι πολύ απλή. Για τον μέσο όσο αθροίζουμε όλες τις τιμές και τις διαιρούμε με το πλήθος των τιμών. Για την ελάχιστη τιμή, χρησιμοποιούμε μια μεταβλητή την οποία ελέγχουμε σε κάθε επανάληψη. Εάν είναι μικρότερη η τιμή που διαβάζουμε από την καταχωρημένη, τότε καταχωρείται η τρέχουσα τιμή ως η ελάχιστη. Ομοίως και με τη μέγιστη τιμή. Pins και χάρτης Υπάρχουν 5 διαφορετικές κλίμακες ακρίβειας. -25-

36 ROOFTOP, υψηλή ακρίβεια θέσης συνήθως με σφάλμα μερικών μέτρων RANGE_INTERPOLATED, καλή ακρίβεια θέσης με σφάλμα αρκετών μέτρων APPROXIMATE, μέτρια ακρίβεια θέσης με σφάλμα μερικών εκατοντάδων μέτρων GEOMETRIC_CENTER, κακή ακρίβεια θέσης με μεγάλο σφάλμα. Συνήθως υπολογίζει αυτόματα τη θέση στο γεωμετρικό κέντρο της διεύθυνσης που του δώσαμε ZERO_RESULTS, δεν υπάρχουν δεδομένα θέσης Όταν διαβάζουμε το dataset μπορούμε να δούμε τι ακρίβεια έχει το πρατήριο. Στην περίπτωση ROOFTOP, τοποθετούμε pin γνωρίζοντας ότι η θέση του είναι απόλυτα σωστή. Στις περιπτώσεις RANGE_INTERPOLATED και APPROXIMATE, τοποθετούμε pin με επιφύλαξη και δίνουμε δυνατότητα στον χρήστη να μας στείλει ειδοποίηση ότι υπάρχει σφάλμα με τη θέση του πρατηρίου. Στις περιπτώσεις GEOMETRIC_CENTER και ZERO_RESULTS δεν τοποθετούμε το pin στον χάρτη. Αντιθέτως, ειδοποιούμε τον χρήστη ότι το πρατήριο δεν έχει θέση στον χάρτη και τον προτρέπουμε να μας αποστείλει την σωστή θέση του, εφόσον τη γνωρίζει. Location Rectangle Πριν τοποθετηθούν στον χάρτη τα pins, πρέπει να υπολογίσουμε το location rectangle δηλαδή το ορθογώνιο στον χάρτη μέσα στο οποίο περιλαμβάνονται όλα τα pins. Έτσι, μόλις φορτώσει το dataset, γνωρίζουμε σε ποια περιοχή του χάρτη να κάνουμε zoom χωρίς να αναγκάσουμε τον χρήστη να μετακινηθεί. Η διαδικασία έχει ως εξής και ο κώδικάς της βρίσκεται στην Εικόνα 18: 1. Ελέγχουμε αν η Boolean firstpin είναι ψευδής. Αν είναι τότε δεν έχουμε διαβάσει κανένα pin. Αν δεν είναι, μεταβαίνουμε στο 3 ο βήμα. 2. Αρχικοποιούμε 4 μεταβλητές, minlat για ελάχιστο γεωγραφικό μήκος, maxlat για μέγιστο γεωγραφικό μήκος, minlog για ελάχιστο γεωγραφικό πλάτος και maxlog για μέγιστο γεωγραφικό πλάτος. Στις μεταβλητές εισάγουμε τις συντεταγμένες του πρώτου pin. Έπειτα κάνουμε true την Boolean και συνεχίζουμε μέσα στο loop. 3. Μετατρέποντας σε μορφή double τις τιμές του γεωγραφικού μήκους από τις συντεταγμένες του πρατηρίου στο xml, τις συγκρίνουμε με τις ήδη αποθηκευμένες. 4. Εάν κάποια τιμή είναι μικρότερη από την ελάχιστη τότε αυτή γίνεται ελάχιστη. Αν κάποια τιμή είναι μεγαλύτερη από τη μέγιστη γίνεται αυτή μέγιστη. -26-

37 5. Τέλος, στις 4 μεταβλητές υπάρχουν οι συντεταγμένες για 2 σημεία στον χάρτη. Βόρειο-Δυτικά και Νότιο-Ανατολικά. if (firstpin == false) { minlat = Convert.ToDouble(ele.Element("lt").Value); maxlat = Convert.ToDouble(ele.Element("lt").Value); minlog = Convert.ToDouble(ele.Element("lg").Value); maxlog = Convert.ToDouble(ele.Element("lg").Value); firstpin = true; } else { if (Convert.ToDouble(ele.Element("lt").Value) < minlat) { minlat = Convert.ToDouble(ele.Element("lt").Value); } if (Convert.ToDouble(ele.Element("lt").Value) > maxlat) { maxlat = Convert.ToDouble(ele.Element("lt").Value); } if (Convert.ToDouble(ele.Element("lg").Value) < minlog) { minlog = Convert.ToDouble(ele.Element("lg").Value); } if (Convert.ToDouble(ele.Element("lg").Value) > maxlog) { maxlog = Convert.ToDouble(ele.Element("lg").Value); } } Εικόνα 18: Κώδικας υπολογισμού location rectangle Μόλις γίνει ο υπολογισμός του location rectangle, καλούμε τη μέθοδο που ορίζει το ορθογώνιο στον χάρτη και κάνει zoom σε αυτό. correct = new LocationRect(new Location(maxlat , minlog ), new Location(minlat , maxlog )); mymap.setview(correct); Εικόνα 19: Κώδικας δημιουργίας location rectangle Στον κώδικα στην Εικόνα 19, βλέπουμε ότι ένα location rectangle αποτελείται από 2 τοποθεσίες δηλαδή 4 διαφορετικές συντεταγμένες. Στην πρώτη τοποθεσία τοποθετούμε τις συντεταγμένες με το μέγιστο γεωγραφικό μήκος και το ελάχιστο γεωγραφικό πλάτος και στην δεύτερη τοποθεσία τοποθετούμε τις συντεταγμένες με το ελάχιστο γεωγραφικό μήκος και το μέγιστο γεωγραφικό πλάτος. Τέλος, ορίζουμε την προβολή του χάρτη στο location rectangle που δημιουργήσαμε. Μετά από κάθε γεωγραφικό μήκος/πλάτος προσθέτουμε ή αφαιρούμε ανάλογα λίγες μοίρες ώστε να προσθέσουμε μερικά χιλιοστά κενού χώρου στον χάρτη. Με αυτό -27-

38 τον τρόπο τα pins δεν εφάπτονται με τα άκρα της οθόνης αλλά έχουν ένα μικρό περιθώριο μεταξύ τους. Προσθήκη Pins Για την προσθήκη των pins χρησιμοποιούμε μια βοηθητική μέθοδο για να απλοποιήσουμε τη διαδικασία. Καλούμε τη μέθοδο AddPushpin με τα παρακάτω ορίσματα όπως φαίνονται στον κώδικα στην Εικόνα 20. Τοποθεσία πρατηρίου Μάρκα καυσίμου Τύπος καυσίμου Επωνυμία πρατηρίου Ημερομηνία καταχώρησης τιμής Διεύθυνση πρατηρίου Τιμή καυσίμου Χρωματικός κώδικας τιμής καυσίμου Boolean φθηνότερης τιμής Ακρίβεια τοποθεσίας πρατηρίου AddPushpin(new Location(Convert.ToDouble(ele.Element("lt").Value), Convert.ToDouble(ele.Element("lg").Value)), ele.element("br").value, ele.element("br").attribute("id").value, ele.element("ft").value, ele.element("ow").value, "Καταχωρήθηκε: " + ele.element("dt").value.remove(16), ele.element("ad").value, DataLayer, ele.element("pr").value, color, ele.attribute("id").value, cheapprice, stationacc); Εικόνα 20: Κώδικας κλήσης μεθόδου προσθήκης pins Αρχικά, ορίζουμε την πηγή του λογότυπου της εταιρίας. Στην προκριμένη περίπτωση αποτελείται από τον κωδικό της εκάστοτε εταιρίας μαζί με την κατάληξη png. Έπειτα καλούμε τη μέθοδο που υπολογίζει την απόσταση μεταξύ δύο σημείων σε ευθεία γραμμή. Σειρά έχει η αποθήκευση των δεδομένων σε metadata ώστε να τα φορτώσουμε στα κατάλληλα πεδία του infobox όταν γίνει κλικ στο pin. Η διαδικασία είναι ιδιαίτερα α- πλή καθώς αποθηκεύουμε τα δεδομένα (τιμή, χρωματικός κώδικας, επωνυμία κλπ.) σε ένα tag το οποίο θα προσπελάσουμε μελλοντικά μέσω του infobox για να αντλήσουμε τα δεδομένα του. -28-

39 Τέλος, ορίζουμε τη θέση του pin στο χάρτη χρησιμοποιώντας τις συντεταγμένες του πρατηρίου από το dataset. Αφού οριστεί η θέση, το προσθέτουμε στο layer του χάρτη το οποίο περιλαμβάνει τα pins, όπως στην Εικόνα 21. imagesource = "Assets/infologos/" + pid + ".png"; closedist = DistanceBetweenCoords(latlong.Latitude, latlong.longitude, userloc.latitude, userloc.longitude); closeloc.latitude = latlong.latitude; closeloc.longitude = latlong.longitude; userdis = "Εκτίμηση Απόστασης: " + distbetween.tostring() + "km"; pin pintext = new pin() { Tag = new Metadata() { Name = pname, Owner = powner, Type = ptype, Update = pupdate, Price = price + " ", Color = new SolidColorBrush(color), Address = paddress, Imgsrc = imagesource, Tooltip = stationid, ID = stationid, ButtonCont = buttoncont, ButtonImage = brush, Accuracy = stationacc, Distance = userdis, RouteLat = latlong.latitude.tostring(), RouteLong = latlong.longitude.tostring(), StrVisible = StrVisibility, LocerrorVisible = LocerrorVisibility } }; coords.add(latlong.latitude.tostring() + latlong.longitude.tostring()); MapLayer.SetPosition(pintext, latlong); pintext.tapped += PinTapped; layer.children.add(pintext); Εικόνα 21: Κώδικας εισαγωγής pins στον χάρτη και αποθήκευσης μεταδεδομένων infobox Υπολογισμός Απόστασης Μια χρήσιμη λειτουργία είναι η εμφάνιση της απόστασης του πρατηρίου από τον χρήστη έτσι ώστε να υπάρχει μια εικόνα σχετικά με ποια πρατήρια είναι πιο κοντά στον χρήστη. Αρχικά καλούμε τη μέθοδο DistanceBetweenCoords όπου δίνουμε σαν ορίσματα τις συντεταγμένες του πρατηρίου και τις συντεταγμένες του χρήστη. Έπειτα, υπολογίζουμε την χιλιομετρική απόσταση από τα δύο σημεία σε ευθεία γραμμή, ορίζουμε τα δεκαδικά ψηφία και επιστρέφουμε το αποτέλεσμα έτσι ώστε να το εμφανίσουμε στο infobox. Ο κώδικας παρουσιάζεται στην Εικόνα

40 public double DistanceBetweenCoords(double lat1, double long1, double lat2, double long2) { lat1 = DegToRad(lat1); long1 = DegToRad(long1); lat2 = DegToRad(lat2); long2 = DegToRad(long2); double earthradius = 6371; double deltalat = lat2 - lat1; double deltalong = long2 - long1; double a = Math.Sin(deltaLat / 2.0) * Math.Sin(deltaLat / 2.0) + Math.Cos(lat1) * Math.Cos(lat2) * Math.Sin(deltaLong / 2.0) * Math.Sin(deltaLong / 2.0); double c = 2 * Math.Atan2(Math.Sqrt(a), Math.Sqrt(1 - a)); double distance = earthradius * c; return Math.Round(distance, 1); } Infobox Εικόνα 22: Κώδικας υπολογισμού απόστασης Το infobox είναι πολύ σημαντικό στο πρόγραμμά μας καθώς εμφανίζει λεπτομερείς πληροφορίες για το πρατήριο. Αφού τοποθετήσουμε τα δεδομένα σε ένα metadata tag στο pin, ορίζουμε έναν event handler ώστε όταν κάνουμε κλικ στο pin, να ανοίξει το infobox και να εμπλουτιστεί με τα δεδομένα του πρατηρίου. Με τη σχεδίασή μας, υπάρχει μόνο ένα infobox το οποίο ανοίγει και κλείνει, γεμίζοντας κάθε φορά με τα μεταδεδομένα του εκάστοτε pin. Έτσι, μειώνονται οι πόροι που δεσμεύει η εφαρμογή για να κατασκευάσει το infobox αφού δημιουργεί και χρησιμοποιεί μόνο ένα. Σχεδίαση Όπως όλα τα elements στις εφαρμογές Windows 8.1 Store, έτσι και το infobox πρέπει να σχεδιαστεί με XAML. Αρχικά, ορίζουμε ένα νέο layer στον χάρτη, το οποίο είναι ένα επίπεδο πάνω από το layer με τα pins έτσι ώστε το infobox να εμφανίζεται επάνω από τα pins. Έπειτα, με τη χρήση canvas ορίζουμε το μέγεθος τόσο του ίδιου του infobox όσο και των κειμένων που τοποθετούμε μέσα. Το φόντο του infobox μπορούμε να το σχεδιάσουμε σε κάποια εφαρμογή επεξεργασίας εικόνων ώστε να καταλήξουμε με την εμφάνιση της αρεσκείας μας. Στη συνέχεια, τοποθετούμε τα πεδία κειμένου τα οποία τα κάνουμε bind με τα αντίστοιχα πεδία στο metadata tag του pin. Τοποθετούμε ενδεχομένως διάφορα κουμπιά που θέλουμε να επιτελούν κάποιες λειτουργίες, όπως στην περίπτωσή μας να τοποθετεί το πρατήριο στα αγαπημένα κλπ όπως στην Εικόνα

41 <bm:maplayer Name="InfoLayer"> <Canvas x:name="infobox" Height="185" Width="360" Margin="-51,-185,0,0"> <Image Width="360" Height="185" Source="Assets/tooltip.png" Stretch="Fill"/> <TextBlock Canvas.Left="70" Canvas.Top="10" Text="{Binding Type}"/> <TextBlock Canvas.Left="70" Canvas.Top="42" x:name="title" Text="{Binding Name}"/> <TextBlock Canvas.Left="10" Canvas.Top="67" x:name="update" Text="{Binding Update}"/> <Button Canvas.Left="315" Canvas.Top="5" x:name="close" Content="X"/> <TextBlock Canvas.Left="291" Canvas.Top="64" x:name="price" Text="{Binding Price}"/> <TextBlock Canvas.Left="10" Canvas.Top="147" x:name="distance"/> <Button Canvas.Left="236" Canvas.Top="123" x:name="strview" RequestedTheme="Light"/> <Button Canvas.Left="276" Canvas.Top="123" x:name="routebtn" RequestedTheme="Light"/> Εικόνα 23: Ο κώδικας για την σχεδίαση του infobox Handler Για να εμφανιστεί το infobox καθώς και να γεμίσουν τα πεδία με τα μεταδεδομένα, πρέπει να ορίσουμε έναν handler που αρχικά θα γεμίζει τα πεδία του infobox, θα τοποθετεί το infobox στη θέση που βρίσκεται το pin και τέλος θα το εμφανίζει. Ο κώδικας βρίσκεται στην Εικόνα 24: private void PinTapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e) { pin p = sender as pin; Metadata m = (Metadata)p.Tag; Infobox.DataContext = m; Infobox.Visibility = Visibility.Visible; MapLayer.SetPosition(Infobox, MapLayer.GetPosition(p));} Google Streetview Εικόνα 24: Κώδικας εμπλουτισμού και εμφάνισης infobox Για να εμφανίσουμε εικόνες από το Google Streetview, πρέπει να επικοινωνήσουμε με τον server της Google και να αποστείλουμε τις συντεταγμένες που μας ενδιαφέρουν. Αρχικά, απαιτείται το κλειδί authentication το οποίο μπορούμε να αποκτήσουμε δωρεάν από το Google Developers Console και μας δίνει τη δυνατότητα να πραγματοποιούμε κάποιον αριθμό κλήσεων χωρίς χρέωση. Μπορούμε να ορίσουμε διάφορες παραμέτρους όπως: fov, δηλαδή field of view. Το ζουμ το οποίο θέλουμε να εφαρμόσουμε στην εικόνα heading, δηλαδή το σημείο στο οποίο δείχνει η κάμερα. Εκφράζεται σε μοίρες και μπορεί να είναι από 0 μέχρι 360 με 90 μοίρες να μεταφράζεται σε ανατολικά και 180 μοίρες σε νότια. Εάν αφήσουμε κενή την παράμετρο, τότε εμφανίζεται εικόνα με heading προς το σημείο των συντεταγμένων pitch, δηλαδή την κατακόρυφη γωνία της κάμερας σε μοίρες από 90 μέχρι -90 key, το κλειδί του API για κλήσεις με αυξημένο όριο -31-

42 Στην Εικόνα 25 παρουσιάζεται ένα παράδειγμα κλήσης για πρατήριο η οποία επιστρέφει εικόνα με διαστάσεις 600x250: strimg = new BitmapImage { UriSource = new Uri(" , &fov=90&heading=0&pitch=0}; Εικόνα 25: Κλήση στο Google Streetview Ειδοποίηση Λανθασμένης Θέσης Κατά την παρουσίαση του infobox, στα επιμέρους στοιχεία του, αναφέρθηκε το κουμπί αποστολής ειδοποίησης για λανθασμένη θέση του πρατηρίου στο χάρτη. Το κουμπί έχει σχεδιαστεί ώστε να είναι ορατό μόνο εάν το πρατήριο δεν έχει «Άριστη» ακρίβεια θέσης. Μόλις γίνει κλικ στο εικονίδιο, εμφανίζεται ένα παράθυρο επιβεβαίωσης. Εάν ο χρήστης απαντήσει καταφατικά τότε η ειδοποίηση αποστέλλεται στο backend του fuelgr. Με αυτό τον τρόπο ελαχιστοποιούμε τις ακούσιες αποστολές ειδοποιήσεων. Στην Εικόνα 26, παρουσιάζεται ο μηχανισμός επιβεβαίωσης κλικ του χρήστη. Ο μηχανισμός αποστολής της κλήσης έχει ίδια φιλοσοφία με τον μηχανισμό κλήσης για λήψη του dataset. private async void locerror_click(object sender, RoutedEventArgs e) { var messagedialog = new MessageDialog("Θα σταλεί ειδοποίηση στο fuelgr ότι το πρατήριο είναι σε λάθος θέση. Ο έλεγχος και τυχόν αλλαγή θα γίνει στις επόμενες ώρες. Ευχαριστούμε!", "Αναφορά λάθους"); messagedialog.commands.add(new UICommand("Αποστολή", new UICommandInvokedHandler(commandhandler))); messagedialog.commands.add(new UICommand("Άκυρο", new UICommandInvokedHandler(commandhandler))); await messagedialog.showasync();} Εικόνα 26: Κώδικας επιβεβαίωσης αποστολής ειδοποίησης Κοντινότερο Πρατήριο Εφόσον γνωρίζουμε την τοποθεσία του χρήστη από τις πληροφορίες GPS της συσκευής, μπορούμε να βρούμε άμεσα το κοντινότερο πρατήριο και να του το παρουσιάσουμε. Βάσει της λογικής που υπάρχει στην Εικόνα 27 μπορούμε να συγκρίνουμε όλες τις συντεταγμένες των πρατηρίων που βρίσκονται στον χάρτη και όταν βρούμε την μικρότερη απόσταση να κεντράρουμε την οθόνη μας στο πρατήριο με τέτοιο τρόπο ώστε να είναι ορατή και η τοποθεσία του χρήστη. -32-

43 private void closeststation_click(object sender, RoutedEventArgs e) { double lata, longa, latb, longb; lata = closeloc.latitude; longa = closeloc.longitude; latb = userloc.latitude; longb = userloc.longitude; double D = Math.Max(Math.Abs(latA - latb), Math.Abs(longA - longb)); Location topleft = new Location(); Location bottomright = new Location(); topleft.latitude=lata + 1.5*D; topleft.longitude=longa - 1.5*D; bottomright.latitude= lata - 1.5*D; bottomright.longitude = longa + 1.5*D; actioncorrect = new LocationRect(topleft, bottomright); mymap.setview(actioncorrect); } Οδηγίες Πλοήγησης Εικόνα 27: Υπολογισμός κοντινότερου πρατηρίου Στο infobox του πρατηρίου υπάρχει το κουμπί «Πλοήγηση» το οποίο παρέχει χρήσιμες πληροφορίες πλοήγησης προς το πρατήριο. Η υλοποίηση της λειτουργίας είναι ιδιαίτερα απλή καθώς χρησιμοποιεί το πρωτόκολλο επικοινωνίας μεταξύ εφαρμογών Windows Store της Microsoft. Με αυτό τον τρόπο μπορούμε να καλέσουμε κάποια άλλη εφαρμογή με διάφορα ορίσματα, όπως τοποθεσία χρήστη και πρατηρίου και η εφαρμογή να παρουσιάσει έ- τοιμη τη διαδρομή που χρειαζόμαστε. Επίσης, οι εφαρμογές με αυτό τον τρόπο εκτελούνται σε παράθεση με την αρχική εφαρμογή ώστε να είναι ορατές και οι δύο χωρίς κάποια να καλύπτει την άλλη. Η κλήση για εκκίνηση της εφαρμογής Bing Maps με ορίσματα παρουσιάζεται στην Εικόνα 28. private async void routebtn_click(object sender, RoutedEventArgs e) { string mybingmapsuri = "bingmaps:?rtp=pos." + userloc.latitude + "_" + userloc.longitude + "~pos." + routelat.text + "_" + routelong.text; await Windows.System.Launcher.LaunchUriAsync(new Uri(myBingMapsUri)); } Ειδοποιήσεις από backend Εικόνα 28: Η κλήση στην εφαρμογή Bing Maps Όταν κάποια ειδοποίηση αποστέλλεται από το backend, ενσωματώνεται στο dataset απ όπου μπορεί να αναγνωσθεί και να εμφανιστεί στην εφαρμογή. Το μήνυμα εμφανίζεται και όταν το κλείσει ο χρήστης δεν ξαναεμφανίζεται ώστε να μην ενοχλείται ο χρήστης για μηνύματα που έχει ήδη διαβάσει. -33-

44 Μόλις ολοκληρωθεί η ανάγνωση του dataset, το μήνυμα εισάγεται σε έναν pop up παράθυρο το οποίο εμφανίζεται στο κάτω αριστερό μέρος της εφαρμογής, διακριτικό και χωρίς να αποσπά τον χρήστη. Ο κώδικας ανάγνωσης παρουσιάζεται στην Εικόνα 29. StorageFile datafile = await myfolder.getfileasync("data.xml"); string text = await Windows.Storage.FileIO.ReadTextAsync(dataFile); XDocument xml = XDocument.Parse(text); var message = xml.element("gss"); if ((message.attribute("msg").value!= "") && (message.attribute("msg").value!= localsettings.values["msg"].tostring())) { servermessagetext.text = message.attribute("msg").value.tostring(); servermessage.isopen = true; localsettings.values["msg"] = message.attribute("msg").value; } if (message.attribute("msg").value == "") { localsettings.values["msg"] = ""; } Διορθώσεις Θέσης Εικόνα 29: Κώδικας ανάγνωσης και εμφάνισης ειδοποίησης Για τα πρατήρια που δεν έχουν θέση στο χάρτη, προτείνεται από την εφαρμογή η διόρθωση των θέσεων τους από τους χρήστες οι οποίοι γνωρίζουν την σωστή τοποθεσία τους. Αρχικά προβάλλεται ένα μήνυμα το οποίο γνωστοποιεί στον χρήστη ότι στην περιοχή του υπάρχουν μερικά πρατήρια τα οποία δεν έχουν θέση στο χάρτη. Ο χρήστης, κάνοντας κλικ στο μήνυμα μεταφέρεται στη λειτουργία διόρθωσης θέσης πρατηρίων. Εκεί, μπορεί να επιλέξει από τη λίστα κάποιο πρατήριο, να μετακινήσει την πινέζα στο χάρτη και να αποστείλει τη διόρθωση. Η διόρθωση αποστέλλεται μόνο μετά από μετακίνηση πινέζας ώστε να ελαχιστοποιηθούν οι ακούσιες αποστολές. Επίσης, από τη στιγμή που κάποιος χρήστης στείλει διόρθωση για κάποιο πρατήριο, τότε δεν μπορεί να ξαναστείλει διόρθωση για το ίδιο. Πρόκειται για μια προσπάθεια ελαχιστοποίησης των κακόβουλων spam διορθώσεων. Κατά την εκκίνηση της λειτουργίας διόρθωσης, φορτώνονται μόνο όσα πρατήρια έχουν χαμηλή ακρίβεια θέσης στο χάρτη ή καθόλου θέση. Έπειτα, προβάλλονται σε λίστα βάσει επωνυμίας ή μπορεί να αλλάξει η προβολή σε λίστα βάσει διεύθυνσης. Στο κάτω μέρος του προγράμματος εμφανίζονται περισσότερες λεπτομέρειες για το πρατήριο. Στην Εικόνα 30 παρουσιάζεται ο κώδικας αρχικοποίησης του pin και του χάρτη. -34-

45 submit.isenabled = false; PinLayer.Children.Clear(); if (hascorrected == false) { Dragpin pin = new Dragpin(correctpin); pin.draggable = true; pin.drag += Pin_Dragged; PinLayer.Children.Add(pin); MapLayer.SetPosition(pin, correct.center); } correctpin.center = correct.center; correctpin.setview(correct); Εικόνα 30: Κώδικας αρχικοποίησης pin και χάρτη Μετά την αρχικοποίηση του pin και του χάρτη, ορίζουμε μια μέθοδο που εκτελείται έπειτα από τη μετακίνηση του pin. Ορίζει ένα Boolean σε true ώστε να γνωρίζουμε εάν έχει μετακινηθεί το pin και προσπαθήσουμε να κλείσουμε τη λειτουργία διόρθωσης. Έτσι, ειδοποιούμαστε εάν θέλουμε να αποστείλουμε τη διόρθωση ή να την απορρίψουμε. Επίσης, αποθηκεύονται οι συντεταγμένες του pin σε μεταβλητές που χρησιμοποιούνται αργότερα στην κλήση διόρθωσης. Η διαδικασία περιγράφεται στην Εικόνα 31. private void Pin_Dragged(Location location) { submit.isenabled = true; isdirty = true; lat = location.latitude.tostring().remove(10); log = location.longitude.tostring().remove(10); } Εικόνα 31: Μέθοδος που εκτελείται έπειτα από την μετακίνηση του pin Τέλος, η διόρθωση αποστέλλεται κάνοντας κλήση στον server και εισάγοντας ως ορίσματα τη νέα τοποθεσία και τον κωδικό του πρατηρίου. Ο μηχανισμός αποστολής διόρθωσης έχει ίδια φιλοσοφία με τον μηχανισμό κλήσης για λήψη του dataset. Λίστα Πρατηρίων Σε περίπτωση που κάποιος χρήστης δυσκολεύεται με την προβολή χάρτη ή θέλει να συγκρίνει γρήγορα τα πρατήρια, μπορεί να χρησιμοποιήσει τη λειτουργία λίστας πρατηρίων. Πρόκειται για ένα GridView οι διαστάσεις του οποίου είναι 4xY όπου το Y προκύπτει από τον αριθμό των πρατηρίων/4. Μέσα στο GridView, υπάρχουν στοιχεία Canvas πάνω στα οποία εισάγουμε τα στοιχεία των πρατηρίων. Ο προγραμματισμός των στοιχείων έχει ίδια φιλοσοφία με τον προγραμματισμό και την σχεδίαση των infoboxes. -35-

46 Ένα χρήσιμο χαρακτηριστικό είναι η δυνατότητα με κλικ πάνω σε κάποιο πρατήριο να μετακινηθούμε αμέσως στην τοποθεσία του στον χάρτη. Η δυνατότητα αυτή παρουσιάζεται στην Εικόνα 32. Ένας handler παρακολουθεί τις κινήσεις του κέρσορα και όταν γίνει κλικ πάνω σε κάποιο πρατήριο, αποθηκεύει σε δύο μεταβλητές τις συντεταγμένες του πρατηρίου, ο- ρίζει μια μεταβλητή Boolean σε true και μετακινεί τον χρήστη στον χάρτη. Εκεί ελέγχεται η Boolean waspressed. Εάν είναι true τότε σημαίνει ότι ο χρήστης έκανε κλικ στο πρατήριο άρα πρέπει να εκκινηθεί η μέθοδος ζουμαρίσματος στην τοποθεσία του πρατηρίου. private void statcanv_tapped(object sender, TappedRoutedEventArgs e, double lat, double lon) { locpass pass = new locpass() { selectedlat = lat, selectedlong = lon, waspressed=true }; this.frame.navigate(typeof(home), pass); } Εικόνα 32: Μετακίνηση μεταβλητών ανάμεσα σε διαφορετικά Views της εφαρμογής Offline Mode Άλλη μια λειτουργία της λίστας πρατηρίων, είναι η χρήση της για την λειτουργία εκτός σύνδεσης της εφαρμογής. Όταν η εφαρμογή αντιληφθεί ότι δεν υπάρχει σύνδεση στο internet, ορίζει ένα ενημερωτικό μήνυμα και φορτώνει το τελευταίο dataset που έχει ληφθεί. Τα πρατήρια στη συνέχεια προβάλλονται σε λίστα. Όπως μπορούμε να δούμε στον κώδικα στην Εικόνα 33, πραγματοποιείται έλεγχος για σύνδεση στο internet, απενεργοποιείται η δυνατότητα εμφάνισης χάρτη και φορτώνονται τα πρατήρια σε μορφή λίστας. if (hasinternet()==false) { backbutton.visibility = Visibility.Collapsed; StorageFile datafile = await myfolder.getfileasync("data.xml"); string text = await Windows.Storage.FileIO.ReadTextAsync(dataFile); XDocument xml = XDocument.Parse(text); var stations = xml.element("gss"); errortext.text = "Επειδή δεν υπάρχει σύνδεση στο Internet, σας προβάλλονται τα πρατήρια που κάνατε λήψη στις " + stations.attribute("qdate").value + " για το δημοτικό διαμέρισμα " + stations.attribute("mun").value + " του νομού " + sta tions.attribute("cnt").value; } Εικόνα 33: Κώδικας ενεργοποίησης offline mode -36-

47 Ρυθμίσεις Ενημέρωσης Ένα πολύ χρήσιμο χαρακτηριστικό του fuelgr είναι η δυνατότητα αυτόματης λήψης δεδομένων έπειτα από κάποια αλλαγή στις προτιμήσεις όπως δήμος, καύσιμο, εταιρία κλπ. Ορισμένοι χρήστες ίσως επιθυμούν να απενεργοποιήσουν αυτή τη δυνατότητα και να κάνουν λήψη δεδομένων, χειροκίνητα, αφότου ολοκληρώσουν τις αλλαγές στις προτιμήσεις τους. Έτσι, ελαχιστοποιείται και η χρήση δεδομένων στις συνδέσεις ογκοχρέωσης. Αυτή η λειτουργία, πραγματοποιείται με την υλοποίηση ρύθμισης της κατηγορίας Toggle η οποία ανάλογα με τη θέση της (on/off) θα ενεργοποιεί ή αντίστοιχα θα απενεργοποιεί την αυτόματη ενημέρωση. Έπειτα από κάθε αλλαγή στη ρύθμιση, η ρύθμιση αποθηκεύεται στο χώρο «ρυθμίσεων» της εφαρμογής, απ όπου μπορεί να προσπελαστεί και βάσει του περιεχομένου της να αλλάξει η συμπεριφορά της λήψης δεδομένων. Στην Εικόνα 34 παρουσιάζεται η αποθήκευση της προτίμησης στο χώρο «ρυθμίσεων» της εφαρμογής. private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e) { if (updatetoggle.ison == true) { localsettings.values["updatesetting"] = "on"; } else { localsettings.values["updatesetting"] = "off"; } } Μπάρα Ρυθμίσεων Εικόνα 34: Αποθήκευση της προτίμησης ενημέρωσης δεδομένων Η μπάρα ρυθμίσεων στο fuelgr κάνει χρήση των οδηγιών σχεδίασης της Microsoft και υλοποιείται μέσω του αντικειμένου BottomAppBar. Αποτελείται από κουμπιά τα οποία χρησιμοποιούν έτοιμα resources της Microsoft, τα οποία ανταποκρίνονται ανάλογα με το μέγεθος και την ανάλυση της οθόνης. Επίσης, όταν ο χώρος είναι περιορισμένος γίνεται απόκρυψη του βοηθητικού κειμένου και ελαχιστοποιείται αυτόματα το μέγεθος των κουμπιών. Κάθε κουμπί έχει έναν handler ο οποίος εκτελείται έπειτα από κλικ στο κουμπί. Ε- πίσης, εκτός από λειτουργίες μπορεί να εμφανιστεί ένα popup πάνω από το κουμπί, στο οποίο μπορούμε είτε να εισάγουμε στοιχεία canvas (όπως στη λειτουργία «Τα φθηνότε- -37-

48 ρα Πρατήρια») είτε στοιχεία ελέγχου όπως combo boxes, listviews (όπως στην επιλογή δήμου ή εταιρίας καυσίμου) ακόμη και περισσότερα κουμπιά. Η μπάρα μπορεί να αλλάξει χρώμα ή φόντο, να αλλάξει σε μέγεθος καθώς και να αλλάξει το χρώμα και η γραμματοσειρά του κειμένου. Περιοχή Για την επιλογή περιοχής χρησιμοποιούμε δύο comboboxes μέσα στο Flyout που εμφανίζεται. Τα comboboxes γεμίζουν προγραμματιστικά με τα δεδομένα Νομών και Δήμων ανάλογα με την επιλογή μας. Παρακάτω παρουσιάζεται ο κώδικας σχεδίασης στην Εικόνα 35. <StackPanel Orientation="Vertical"> <ComboBox x:name="nomos" PlaceholderText="Επιλέξτε νομό" Margin="0,0,0,5" SelectionChanged="nomos_SelectionChanged" /> <ComboBox x:name="dimos" PlaceholderText="Επιλέξτε δήμο" IsEnabled="False" Margin="0,5,0,0" SelectionChanged="dimos_SelectionChanged" /> </StackPanel> Εικόνα 35: Comboboxes επιλογής Νομού και Δήμου Εταιρία Όταν θέλουμε να επιλέξουμε εταιρία, πρέπει να χρησιμοποιήσουμε ListView με πολλαπλή επιλογή ώστε να μπορούμε να διαλέξουμε παραπάνω από μια εταιρία. Δίπλα από κάθε επιλογή υπάρχει και το λογότυπο της εταιρίας. Στον κώδικα στην Εικόνα 36 υ- πάρχει ο ενδεικτικός κώδικας (για δύο εταιρίες) σχεδίασης της πολλαπλής επιλογής ε- ταιριών. <StackPanel Orientation="Vertical" Margin="0,30,0,0"> <Image Source="Assets/infologos/7.png" Stretch="Fill" Width="40" Height="40"/> <Image Source="Assets/infologos/6.png" Stretch="Fill" Width="40" Height="40"/> </StackPanel> <StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <CheckBox x:name="selectall" Checked="CheckBox_Checked" Unchecked="selectall_Unchecked" IsThreeState="True"/> <TextBlock Text="Επιλογή όλων" FontFamily="Segoe WP" FontSize="16"/> </StackPanel> <ListBox x:name="brands" SelectionMode="Multiple" SelectionChanged="brands_SelectionChanged" Loaded="brands_Loaded"> <ListBoxItem Content="AEGEAN" Tag="7"/> <ListBoxItem Content="AVIN" Tag="6"/> </ListBox> </StackPanel> Εικόνα 36: Κώδικας πολλαπλής επιλογής εταιριών -38-

49 Καύσιμο Για επιλογή καυσίμου πρέπει να υλοποιήσουμε ένα Combobox μονής επιλογής. Οι τύποι καυσίμου είναι 7 οπότε πρέπει να αποτελείται από 7 επιλογές με τον αντίστοιχο κωδικό σε κάθε επιλογή που θα συμβολίζει το καύσιμο, όπως στην Εικόνα 37. <Flyout> <ComboBox x:name="fueltype" PlaceholderText="Επιλέξτε τύπο καυσίμου" SelectionChanged="fueltype_SelectionChanged"> <ComboBoxItem Content="Αμόλυβδη 95" Tag="1"/> <ComboBoxItem Content="Αμόλυβδη 100" Tag="2"/> <ComboBoxItem Content="Super" Tag="3"/> <ComboBoxItem Content="Diesel Κίνησης" Tag="4"/> <ComboBoxItem Content="Diesel Θέρμανσης" Tag="5"/> <ComboBoxItem Content="Υγραέριο Κίνησης" Tag="6"/> <ComboBoxItem Content="Diesel Θέρμανσης κατ'οίκον" Tag="7"/> </ComboBox> </Flyout> Εικόνα 37: Κώδικας επιλογής καυσίμου Παλαιότητα Μία ακόμα παράμετρος που απαιτείται για την σύνθεση του dataset είναι η παλαιότητα των τιμών καυσίμων, δηλαδή μέχρι πόσες ημέρες από σήμερα να είναι παλιές οι τιμές. Η παλαιότητα εκφράζεται με αριθμό ο οποίος συμβολίζει το πλήθος των ημερών. Στην Εικόνα 38 φαίνεται ο κώδικας κατασκευής της επιλογής παλαιότητας με Combobox μονής επιλογής. <Flyout> <ComboBox x:name="age" PlaceholderText="Επιλέξτε παλαιότητα τιμών" SelectionChanged="age_SelectionChanged"> <ComboBoxItem Content="Καταχωρημένες χθες-σήμερα" Tag="1"/> <ComboBoxItem Content="Τιμές έως 2 ημέρες παλιές" Tag="2"/> <ComboBoxItem Content="Τιμές έως 3 ημέρες παλιές" Tag="3"/> <ComboBoxItem Content="Τιμές έως 4 ημέρες παλιές" Tag="4"/> <ComboBoxItem Content="Τιμές έως 5 ημέρες παλιές" Tag="5"/> <ComboBoxItem Content="Τιμές έως 6 ημέρες παλιές" Tag="6"/> <ComboBoxItem Content="Τιμές έως 7 ημέρες παλιές" Tag="7"/> <ComboBoxItem Content="Μέγιστη δυνατή" Tag="30"/> </ComboBox> </Flyout> Εικόνα 38: Κώδικας επιλογής παλαιότητας Ανανέωση Για να δώσουμε πλήρη έλεγχο των ενημερώσεων στον χρήστη, απαιτείται ένα κουμπί που με το που γίνει κλικ να εκκινηθεί ο handler για λήψη του τελευταίου dataset. Η κατασκευή είναι ιδιαίτερα απλή και παρουσιάζεται στον κώδικα στην Εικόνα 39. <AppBarButton x:name="refreshbutton" Label="Ανανέωση" Icon="Sync" ToolTipService.ToolTip="Λήψη δεδομένων, τώρα" Click="refreshbutton_Click"/> Εικόνα 39: Κώδικας δημιουργίας κουμπιού ανανέωσης -39-

50 Αγαπημένα Μια ιδιαίτερα χρήσιμη λειτουργία είναι η προσθήκη πρατηρίων στα αγαπημένα. Αυτά τα πρατήρια έχουν μια ειδική σήμανση (αστεράκι πάνω αριστερά του pin) με την οποία ο χρήστης μπορεί εύκολα να τα διακρίνει στον χάρτη. Η προσθήκη ή αφαίρεση ενός πρατηρίου στα αγαπημένα πραγματοποιείται από το κουμπί Προσθαφαίρεσης Αγαπημένου μέσα στο infobox του πρατηρίου. Στην Εικόνα 40 παρουσιάζεται ο κώδικας προσθήκης και αφαίρεσης αγαπημένου. private void fav_click(object sender, RoutedEventArgs e) { if (fav.content.tostring() == "+") { localsettings.values["favorites"] += id.text + ","; } else { localsettings.values["favorites"] = localsettings.values["favorites"].tostring().replace(id.text + ",", ""); } favclick = true; addmap(); } Εικόνα 40: Κώδικας προσθαφαίρεσης αγαπημένων Όπως φαίνεται στον κώδικα, η αποθήκευση γίνεται χρησιμοποιώντας μια «θέση» στις ρυθμίσεις της εφαρμογής και εισάγοντας εκεί τον κωδικό του πρατηρίου χωρισμένο με κόμμα. Κατά την διαγραφή του αγαπημένου γίνεται αναζήτηση και διαγράφεται ο κωδικός του πρατηρίου. Για να εμφανιστεί το σύμβολο αγαπημένου στο pin του πρατηρίου ακολουθείται η διαδικασία του κώδικα στην Εικόνα 41. string[] favorites = localsettings.values["favorites"].tostring().split(','); foreach (string favorite in favorites) { if (favorite == ele.attribute("id").value) { favoriteimage.source = new BitmapImage { UriSource = new Uri("ms-appx:///Assets/favstar.png") }; } } Εικόνα 41: Μηχανισμός προσθήκης εικονιδίου «αγαπημένου» -40-

51 Μπάρα Πληροφοριών Στο κάτω μεσαίο μέρος της εφαρμογής υπάρχει η μπάρα πληροφοριών η οποία προφέρει χρήσιμες πληροφορίες στον χρήστη για τα πρατήρια και τις τιμές που υπάρχουν στον χάρτη. Αποτελείται από 1 εικόνα, 3 πεδία κειμένου και 4 πεδία δυναμικού κειμένου. Όταν προστίθενται τα pins στον χάρτη, αθροίζονται και εμφανίζονται δίπλα στο λογότυπο του fuelgr υποδηλώνοντας τον αριθμό των τιμών καυσίμων που υπάρχει στον χάρτη. Επίσης, υπολογίζεται η μέγιστη τιμή, η ελάχιστη τιμή και ο μέσος όρος τιμής της περιοχής. Στη συνέχεια χρωματίζονται ανάλογα με την κατηγορία της τιμής όπως πράσινο, μπλε και κόκκινο για φθηνή τιμή, κοντά στο μέσο όρο και ακριβή αντίστοιχα. Οι μεταβλητές είναι: cheapprice, για την φθηνότερη τιμή expensiveprice, για την ακριβότερη τιμή sum, για το πλήθος τιμών pricecount, για το άθροισμα όλων των τιμών mo, για τον μέσο όρο των τιμών Στον κώδικα στην Εικόνα 42 παρουσιάζεται η μέθοδος αποθήκευσης δεδομένων σε αυτές τις τιμές. Το κομμάτι του κώδικα εκτελείται σε επανάληψη για όσα πρατήρια υ- πάρχουν στον χάρτη. sum = sum + Convert.ToDouble(eleprice.Element("pr").Value); pricecount++; if (Convert.ToDouble(eleprice.Element("pr").Value) < cheapprice) { cheapprice = Convert.ToDouble(eleprice.Element("pr").Value); } if (Convert.ToDouble(eleprice.Element("pr").Value) > expensiveprice) { expensiveprice = Convert.ToDouble(eleprice.Element("pr").Value); } mo = sum / pricecount; Διπλά Πρατήρια Εικόνα 42: Κώδικας αποθήκευσης τιμών για τη μπάρα πληροφοριών Ορισμένες φορές, επειδή κάποια εταιρία έχει περισσότερα από ένα προϊόντα της ίδιας κατηγορίας, ή η κατηγορία απαιτεί διαβαθμίσεις, ενδέχεται να υπάρχουν περισσότερες από μια τιμές για κάποιο πρατήριο σε ένα καύσιμο. Μια λύση είναι η ανίχνευση αυτής της περίπτωσης και η προσθήκη της δεύτερης τιμής κοντά στην πρώτη. Δηλαδή εάν τοποθετήσουμε ένα pin στον χάρτη που συμβολί- -41-

52 ζει μια τιμή, όταν βρούμε και δεύτερη τιμή για το ίδιο πρατήριο, μπορούμε να εισάγουμε την τιμή λίγα εκατοστά στον χάρτη πιο μακριά από την πρώτη. Με αυτό τον τρόπο έχουμε λύση για τις πολλαπλές τιμές χωρίς να μετακινείται το pin μακριά από την αρχική του θέση. Περίπτωση Shell Σε ορισμένα καύσιμα της εταιρίας Shell, έχουμε δύο τιμές. Μία για το απλό καύσιμο και μια για το ενισχυμένο «V-Power» καύσιμο. Σε αυτή την περίπτωση πρέπει να τοποθετήσουμε την δεύτερη τιμή λίγο πιο μακριά από την πρώτη Περίπτωση Diesel Θέρμανσης Κατ οίκον Πολλά πρατήρια διαφοροποιούν τις τιμές του diesel θέρμανσης όταν πρόκειται να γίνει διανομή κατ οίκον. Για παράδειγμα υπάρχει άλλη τιμή για ποσότητες κάτω από 500 λίτρα, άλλη από 500 μέχρι 1000 λίτρα κ.ο.κ. Για να επιλύσουμε αυτό το πρόβλημα πρέπει αρχικά να αποθηκεύσουμε σε έναν πίνακα τις συντεταγμένες κάθε pin που προστίθεται στον χάρτη. Έπειτα, πριν προστεθεί κάποιο pin, ελέγχουμε στον πίνακα αν υπάρχουν ήδη αυτές οι συντεταγμένες. Εάν υπάρχουν τότε το pin που θα προσθέσουμε θα έχει διαφορετικές συντεταγμένες, αλλαγμένες κατά μερικές μοίρες. Με αυτό τον τρόπο, το pin δεν θα υπερκαλύψει αυτό το pin που προστέθηκε ήδη στον χάρτη. Εάν δεν υπάρχουν οι συντεταγμένες τότε το pin προστίθεται στο χάρτη με τις συντεταγμένες που έχει. Πρόκειται για μια μέθοδο που λειτουργεί για όσες όμοιες τιμές θελήσουμε καθώς εάν έχουμε πάνω από δύο ίδια πρατήρια, εξακολουθεί να προσθέτει μοίρες στις συντεταγμένες οπότε όλα τα ίδια pins ισαπέχουν το ένα από το άλλο και δεν υπάρχει κάποιο που υπερκαλύπτει κάποιο άλλο. Ο κώδικας βρίσκεται στην Εικόνα 43. foreach (var coorditem in coords) { if (coorditem == latlong.latitude.tostring() + latlong.longitude.tostring()) { latlong.latitude += ; latlong.longitude += ; } } coords.add(latlong.latitude.tostring() + latlong.longitude.tostring()); Εικόνα 43: Ο κώδικας ανίχνευσης διπλότυπων τιμών -42-

53 5 fuelgr Back End Σε αυτή την ενότητα θα παρουσιαστούν τα χαρακτηριστικά του fuelgr Back End καθώς και ο τρόπος με τον οποίο προγραμματίστηκαν και σχεδιάστηκαν. 5.1 Εργαλεία Προγραμματισμού Δεδομένου ότι το back-end έπρεπε να είναι προσβάσιμο από το web, για την ανάπτυξή του επιλέχθηκε ο συνδυασμός PHP και mysql, που είναι ιδιαίτερα διαδεδομένος για ανάπτυξη τέτοιων εφαρμογών. Ένα εργαλείο προγραμματισμού σε PHP είναι το Netbeans της Oracle, το οποίο και χρησιμοποιήθηκε καθώς προσφέρει debugging και λεπτομέρειες σχετικά με τον κώδικα σε πραγματικό χρόνο (Εικόνα 44). Εικόνα 44: Το fuelgr Back End σε περιβάλλον προγραμματισμού Netbeans 5.2 Παρουσίαση Χαρακτηριστικών Η διαχειριστική εφαρμογή πρέπει να είναι ιδιαίτερα φιλική προς τη χρήση με απλό περιβάλλον χρήσης ώστε να βελτιστοποιηθεί η πρόσβαση στις ρυθμίσεις των δεδομένων. Στην Εικόνα 45 παρουσιάζεται η σχεδίαση της εφαρμογής backend. -43-

54 Εικόνα 45: Screenshot από την εφαρμογή fuelgr Backend Ενημέρωση Τιμών Αυτή η λειτουργία μας δίνει τη δυνατότητα να ξεκινήσουμε τη διαδικασία αποδελτίωσης ώστε να λάβουμε τα πιο πρόσφατα δεδομένα από το fuelprices.gr. Στο στοιχείο 2 στην Εικόνα 45 μπορούμε να δούμε πότε ενημερώθηκαν οι τιμές μας τελευταία φορά καθώς και να εκκινήσουμε χειροκίνητα τη διαδικασία ενημέρωσης. Ειδοποιήσεις Με την παρακάτω λειτουργία μπορούμε να καταχωρήσουμε κάποιο μήνυμα ώστε να προβληθεί στις οθόνες των χρηστών. Η καταχώρηση γίνεται έπειτα από τη μετάβαση στη λειτουργία «Μηνύματα». Η μετάβαση πραγματοποιείται μέσω του κεντρικού μενού, στο στοιχείο 1 στην Εικόνα 45. Αξιολόγηση Διορθώσεων Έπειτα από την υποβολή διόρθωσης θέσης από κάποιον χρήστη, πρέπει μέσω του backend να αξιολογήσουμε τη διόρθωση και να αποφασίσουμε εάν ανταποκρίνεται στην πραγματικότητα και να την αποδεχτούμε ή αν είναι λανθασμένη και να την απορρίψουμε. Πάνω στον χάρτη εμφανίζεται η διόρθωση που έστειλε ο χρήστης και μπορούμε να δούμε τη θέση της, να κάνουμε μικροδιορθώσεις μετακινώντας την πινέζα καθώς και να αλλάξουμε την ακρίβεια της τοποθεσίας. Τέλος την αποθηκεύουμε ή την απορρίπτουμε. Η λειτουργία διόρθωσης παρουσιάζεται στην Εικόνα

55 Εικόνα 46: Η λειτουργία αξιολόγησης διόρθωσης Στατιστικά Στην ενότητα των στατιστικών μας δίνονται χρήσιμες πληροφορίες σχετικά με την απήχηση των εφαρμογών fuelgr καθώς και με το ποσοστό των πρατηρίων ανάλογα με την ακρίβεια της γεωγραφικής τους θέσης. Εικόνα 47: Στατιστικά σε μορφή γραφήματος -45-

56 Τα στατιστικά προκύπτουν βάσει των κλήσεων δεδομένων από τους χρήστες και από τα επιμέρους αθροίσματα των κατηγοριών ακρίβειας γεωγραφικής θέσης. Μπορούμε να προβάλλουμε συνοπτικά στατιστικά όπως στο στοιχείο 3 στην Εικόνα 45 αλλά και να παρουσιάσουμε τα στατιστικά με γραφήματα όπως φαίνονται στην Εικόνα 47. Επεξεργασία Πρατηρίων Ορισμένες φορές απαιτείται χειροκίνητη επεξεργασία της θέσης κάποιου πρατηρίου. Με αυτή τη λειτουργία μπορούμε να έχουμε εύκολη πρόσβαση σε όλα τα πρατήρια που υπάρχουν στη βάση δεδομένων. Μπορούμε να τα χωρίσουμε βάσει ακρίβειας τοποθεσίας και να τα δούμε σε αύξουσα σειρά βάσει του κωδικού τους. Επίσης, για εύκολη λειτουργία, μπορούμε απλά εισάγοντας τον κωδικό τους να επεξεργαστούμε γρήγορα κάποιο πρατήριο Η λειτουργία είναι παρόμοια με την λειτουργία αξιολόγησης διόρθωσης, καθώς υ- πάρχει στον χάρτη το pin του πρατηρίου το οποίο μετακινούμε στη θέση που μας ενδιαφέρει και έπειτα πατάμε αποθήκευση. Νέα Πρατήρια Επειδή με χρήση συστήματος αποδελτίωσης δεν είναι δυνατή η καταχώρηση κωδικού για κάθε πρατήριο (καθώς αυτή η δυνατότητα δεν δίνεται από το fuelprices.gr), πρέπει κάθε φορά που ενημερώνεται η τιμή για κάποιο πρατήριο, να γίνεται έλεγχος εάν το πρατήριο υπάρχει ήδη μέσα στη βάση ώστε να ενημερωθεί μόνο η τιμή ή να αποθηκευτεί ως νέο σε περίπτωση που δεν υπάρχει στη βάση δεδομένων. Καταχώρηση ως Νέο Στην περίπτωση που δεν βρεθεί αντιστοιχία στη βάση δεδομένων, το πρατήριο πρέπει να αποθηκευτεί ως νέο. Καθώς δεν υπάρχουν πληροφορίες τοποθεσίας στο fuelprices.gr, πρέπει να βρούμε χειροκίνητα την θέση του στον χάρτη. Μόλις πατήσουμε το κουμπί αποθήκευσης, μεταβαίνουμε σε ένα χάρτη με όμοια φιλοσοφία με τη λειτουργία διόρθωσης θέσης. Εκεί, αρχικά γίνεται μια προσπάθεια να βρεθεί αυτόματα η τοποθεσία του πρατηρίου με χρήση Google Geolocation API. Σε περίπτωση που δεν βρεθεί αποτέλεσμα, μπορούμε να αλλάξουμε τη διεύθυνση, να διαγράψουμε περιττές πληροφορίες (π.χ. πολλοί πρατηριούχοι γράφουν και το τηλέφωνό τους ή κάποιο σλόγκαν στο πεδίο διεύθυνσης) καθώς δημιουργούν σύγχυση στο Geolocation API. -46-

57 Τέλος, επιβεβαιώνουμε την τοποθεσία. Εάν είναι σωστή, διαλέγουμε την ακρίβεια που έχει η τοποθεσία και πατάμε αποθήκευση. Αλλιώς, προσπαθούμε να το βρούμε στον χάρτη και έπειτα να το αποθηκεύσουμε. Συγχώνευση Υπάρχουν ορισμένες περιπτώσεις που το πρατήριο αλλάζει επωνυμία, είτε λόγω ορθογραφικού λάθους είτε λόγω αλλαγής ιδιοκτήτη. Επίσης, η διεύθυνση μπορεί να αλλάξει λόγω ορθογραφικού λάθους ή παράλειψης. Σε αυτές τις περιπτώσεις το πρατήριο φαίνεται ως νέο στο σύστημα καθώς δεν υπάρχει αντιστοιχία, όμως στην πραγματικότητα το πρατήριο υπάρχει ήδη, απλά πρέπει να το βρούμε και να το συγχωνεύσουμε με το υπάρχον. Αρχικά, στη φόρμα αναζήτησης, προσπαθούμε να βρούμε κάποιο πρατήριο που να μοιάζει, είτε με παρόμοια επωνυμία ή διεύθυνση. Στη συνέχεια, μπορούμε μέσω pop-up παραθύρου να ελέγξουμε πότε ενημερώθηκαν τελευταία φορά οι τιμές των καυσίμων του. Για παράδειγμα εάν οι τιμές ενημερώθηκαν μόλις τώρα τότε δεν πρόκειται για διπλότυπο πρατήριο αλλά προφανώς για συνωνυμία. Εάν υπάρχει μεγάλο χρονικό διάστημα από την ενημέρωση τιμών τότε μάλλον το πρατήριο άλλαξε ιδιοκτήτη άρα πρέπει να το συγχωνεύσουμε. Η λειτουργία παρουσιάζεται στην Εικόνα 48. Εικόνα 48: Συγχώνευση πρατηρίων Πατώντας το κουμπί συγχώνευσης, τότε οι πληροφορίες του νέου πρατηρίου (επωνυμία, διεύθυνση, εταιρία κλπ.) αντικαθιστούν αυτές του παλιού και στη συνέχεια το νέο πρατήριο διαγράφεται. Με αυτό τον τρόπο μπορούμε να διατηρήσουμε τον κωδικό του πρατηρίου αλλά και κυρίως τη θέση του στο χάρτη χωρίς να χρειάζεται να το εντοπίσουμε ξανά. -47-