ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΣΕΡΡΩΝ ΣΧΟΛΗ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΩΝ ΤΟΜΕΑΣ ΑΡΧΙΤΕΚΤΟΝΙΚΗΣ ΚΑΙ ΒΙΟΜΗΧΑΝΙΚΩΝ ΕΦΑΡΜΟΓΩΝ Εφαρμογή Mashup Παρουσίασης.

Παρουσίαση με θέμα: "ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΣΕΡΡΩΝ ΣΧΟΛΗ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΩΝ ΤΟΜΕΑΣ ΑΡΧΙΤΕΚΤΟΝΙΚΗΣ ΚΑΙ ΒΙΟΜΗΧΑΝΙΚΩΝ ΕΦΑΡΜΟΓΩΝ Εφαρμογή Mashup Παρουσίασης."— Μεταγράφημα παρουσίασης:

1 ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΣΕΡΡΩΝ ΣΧΟΛΗ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΩΝ ΤΟΜΕΑΣ ΑΡΧΙΤΕΚΤΟΝΙΚΗΣ ΚΑΙ ΒΙΟΜΗΧΑΝΙΚΩΝ ΕΦΑΡΜΟΓΩΝ Εφαρμογή Mashup Παρουσίασης Γεωγραφικών Δεδομένων στο Διαδίκτυο ΠΟΛΙΤΟΥ ΣΟΦΙΑ Επιβλέπων: Γκρίνιας Ηλίας

2 Οργάνωση-Περιεχόμενα Παρουσίασης 1 ΕΞΩΦΥΛΛΟ 2 ΟΡΓΑΝΩΣΗ-ΠΕΡΙΕΧΟΜΕΝΑ 3-4 MASHUP-ΣΥΛΛΟΓΕΣ ΓΕΩΓΡΑΦΙΚΩΝ ΔΕΔΟΜΕΝΩΝ ΚΑΙ GIS 5-8 ΜΟΝΤΕΛΟΠΟΙΗΣΗ ΚΑΙ ΟΡΓΑΝΩΣΗ ΔΕΔΟΜΕΝΩΝ 9-13 ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΥΛΟΠΟΙΗΣΗ ΕΦΑΡΜΟΓΗΣ 14-16 ΤΟ PORTLET ΔΙΑΧΕΙΡΙΣΗΣ ResPortlet 17-18 ΤΟ PORTLET ΤΟΥ ΜΕΝΟΥ ΕΜΦΑΝΙΣΗΣ MenuPortlet 19-20ΤΟ PORTLET ΕΜΦΑΝΙΣΗΣ ΣΤΟ ΧΑΡΤΗ MapPortlet 21 ΕΠΙΚΟΙΝΩΝΙΑ ΤΩΝ PORTLETS 22 ΣΥΜΠΕΡΑΣΜΑΤΑ-ΕΠΕΚΤΑΣΕΙΣ

3 Mashup, Συλλογές Γεωγραφικών Δεδομένων και GIS Mashup: Nέο μοντέλο ανάπτυξης διαδικτυακών εφαρμογών. Συγκέντρωση δεδομένων από διαφορετικές πηγές, επεξεργασία και παρουσίαση με έναν νέο τρόπο. Πηγές πληροφορίας:  Άρθρα  Πολυμέσα  Χάρτες  Εφαρμογές  Στοιχεία βάσεων δεδομένων στο διαδίκτυο Στόχος: δ ιάθεση νέας πληροφορίας που δεν ήταν διαθέσιμη εξ αρχής από τις ξεχωριστές πηγές για την κάλυψη εξατομικευμένων αναγκών του εκάστοτε χρήστη.

4 Mashup, Συλλογές Γεωγραφικών Δεδομένων και GIS Mashup της εφαρμογής: συνδυασμός συλλογών επιπέδων γεωγραφικής πληροφορίας και των χαρτών που παρέχονται δωρεάν στο διαδίκτυο. Συλλογή γεωμετρικών δεδομένων: εννοιολογική ομαδοποίηση επιπέδων γεωγραφικής πληροφορίας με βάση είτε τον τύπο της πληροφορίας που περιγράφουν τα επίπεδα (για παράδειγμα τους δρόμους μιας ή περισσοτέρων πόλεων), είτε τη γεωγραφική περιοχή (π.χ. επίπεδα δρόμων, οικοδομικών τετραγώνων και σημείων ενδιαφέροντος μιας συγκεκριμένης πόλης). Χάρτες από υπηρεσίες web-χαρτογράφησης (web-mapping) όπως οι Google Maps, Bing Maps, Nokia Ovi Maps. Παρουσίαση διανυσματικών γεωγραφικών δεδομένων με υπόβαθρο χάρτες όπως στα Συστήματα Γεωγραφικής Πληροφορίας (ΣΓΠ ή GIS).

5 Μοντελοποίηση και οργάνωση δεδομένων Ενοποίηση αποθήκευσης διανυσματικών επιπέδων γεωμετρικών δεδομένων σε μορφή βάσεων PostGIS. PostGIS: Χωρική σχεσιακή βάση δεδομένων. Πρόσθετο ανοιχτού λογισμικού για τη PostgreSQL (“PostgreSQL Spatial”). Πρόσθετα: Γεωμετρίες: (πολυ-)σημεία, (πολυ-)γραμμές, (πολυ-)πολύγωνα. Χωρικά κατηγορήματα αλληλοσυσχέτισης γεωμετρικών στοιχείων. Υπολογισμός εμβαδού, απόστασης, μήκους και περιμέτρου γεωμετρίας Ένωση, τομή, (συμμετρική) διαφορά, ζώνες επιρροής (buffers). Χωρικοί δείκτες R-δένδρων (R-trees) και γενικευμένα δένδρα αναζήτησης (Generalized Search Trees – GiST).

6 Μοντελοποίηση και οργάνωση δεδομένων Χάρτες της Google (Google Maps) – Κώδικας JavaScript (JS) και XML. – JS Google Maps API v3: Προγραμματισμός: – εμφάνισης χαρτών – δυνατοτήτων ελέγχου της εμφάνισης (pan, zoom κα) και – τύπου του χάρτη. Δυνατότητα παρουσίασης γεωγραφικών δεδομένων πάνω στο χάρτη επιπέδων από: σημεία (markers), απλά πολύγωνα (polygons) και πολυγραμμές (polylines).

7 Μοντελοποίηση και οργάνωση δεδομένων geodata.gov.gr – Πηγή δωρεάν διανυσματικών δεδομένων σε μορφή αποθήκευσης ESRI Shapefile (και GML/KML για κάποια από τα επίπεδα). – Επίπεδα περιγραφής Υδάτινων πόρων Ακτών με γαλάζια σημαία Αισθητικών δασών Γεωγραφικών ενοτήτων των προγραμμάτων «Καποδίστριας» και «Καλλικράτης» κ.α. Μετατροπή επιπέδων από ESRI Shapefile σε βάσεις PostGIS με το εργαλείο γραμμής εντολών shp2pgsql της PostgreSQL. Δημιουργία κοινόχρηστων συλλογών διανυσματικών επιπέδων από το διαχειριστή του συστήματος (offline διαδικασία).

8 Μοντελοποίηση και οργάνωση δεδομένων Στην εφαρμογή: ανάσυρση και μετατροπή των γεωμετρικών δεδομένων από τις βάσεις PostGIS, αρχικά σε XML και στη συνέχεια σε JS αντικείμενα του Google Maps API.

9 Σχεδιασμός και υλοποιήση εφαρμογής Βασικές Δυνατότητες εφαρμογής: 1.Είσοδος του χρήστη στην εφαρμογή, δίνοντας όνομα χρήστη και κωδικό. 2.Εμφάνιση δημόσιων συλλογών και 3.επιλογή επιπέδων και περιγραφικών πεδίων των επιπέδων από το χρήστη. 4.Εμφάνιση των επιλεγμένων επιπέδων στο χάρτη. 5. Παρουσίαση συλλογών στο χάρτη:  Δυνατότητα εμφάνισης/απόκρυψης επιλεγμένων επιπέδων  Δυνατότητα εμφάνισης περιγραφικών δεδομένων για την επιλεγμένη γεωμετρία (σημείο/πολύγωνο/γραμμή) πάνω στο χάρτη

10 Σχεδιασμός και υλοποιήση εφαρμογής Οι προγραμματιστικές μονάδες/ενότητες (modules) της υλοποίησης είναι τα συστατικά στοιχεία πύλης ή αλλιώς portlet. Τα portlet της εφαρμογής αναπτύχθηκαν ως Java Liferay plugins στο περιβάλλον ανάπτυξης, διαχείρισης και παραγωγής portlet Liferay Portlet Container, σύμφωνα με το Liferay Portlet API και ενσωματώθηκαν σε ένα ειδικά διαμορφωμένο Liferay Portal. Πλεονεκτήματα Liferay Portlet Container: – Ευκολία στη διαχείριση χρηστών. – Οργάνωση των portlet σε σελίδες. – Διασύνδεση των portlet της ίδιας σελίδας μέσω Liferay Javascript (JS) Εvents. – Ενσωμάτωση της Alloy User Interface (AlloyUI).

11 Σχεδιασμός και υλοποιήση εφαρμογής Το portal αποτελείται από 3 portlet: “ResPortlet”: υπεύθυνο για την εμφάνιση των συλλογών και την επιλογή επιπέδων τους από το χρήστη. “MenuPortlet”: εμφάνιση του μενού με τα ονόματα των επιλεγμένων επιπέδων και των πεδίων τους. “MapPortlet”: εμφάνιση του χάρτη και των γεωμετριών των επιπέδων που έχουν επιλεγεί από το χρήστη. Οργάνωση του Liferay portal σε δύο σελίδες: Η πρώτη (“Resources”) περιλαμβάνει το “ResPortlet” ενώ η δεύτερη (“Map”) τα “MenuPortlet” και “MapPortlet”.

12 Σχεδιασμός και υλοποιήση εφαρμογής Αρχιτεκτονική Model-View-Controller (ΜVC): σαφής διάκριση των ρόλων μεταξύ τριών βασικών μερών της εκάστοτε εφαρμογής:  Έλεγχος των εργασιών (Control)  μοντελοποίηση και διαχείριση των δεδομένων (Model) και  παρουσίαση της πληροφορίας (View). Στην εφαρμογή: Μοντελοποίηση δεδομένων (Μodel): μετατροπή των γεωμετρικών δεδομένων των επιπέδων από τις βάσεις της PostGIS σε μορφή κατάλληλη για εμφάνιση πάνω στο χάρτη της Google, σύμφωνα με το Google Maps API. Έλεγχος (Control): διαχείριση και προώθηση αιτήσεων στο κομμάτι της εφαρμογής που είναι επιφορτισμένο με την εξυπηρέτησή τους. Παρουσίαση (View): εμφάνιση της γεωμετρικής και περιγραφικής πληροφορίας.

13 Σχεδιασμός και υλοποιήση εφαρμογής view.jsp edit.jsp init.jsp ResPortlet view.jsp edit.jsp init.jsp MenuPortlet Controller view.jsp edit.jsp help.jsp MapPortlet Model DBbean View PostgreSQL GIS Request Response GeometriesBean GeomDescrBean Instatiate Queries Results DBbean ResPortlet

14 To Portlet Διαχείρισης (ResPortlet) PostgreSQL DBbean ResPortlet (1) AJAX request (3) Response XML Description (2) Query/Result

15 To Portlet Διαχείρισης (ResPortlet) XML Description (4) Parsing (Javascript) view.jsp AlloyUI TreeView

16 To Portlet Διαχείρισης (ResPortlet) Εμφάνιση της ιεραρχίας με την κλάση TreeView της βιβλιοθήκης AlloyUI Επιλογή επιπέδων των συλλογών Αποστολή επιλογών στο MenuPortlet Επιλογή πεδίων επιπέδου

17 To Portlet του Μενού Εμφάνισης (MenuPortlet) Εμφάνιση του δένδρου μόνο των επιλεγμένων – επιπέδων – πεδίων στη σελίδα view.jsp του portlet.

18 To Portlet του Μενού Εμφάνισης (MenuPortlet) PostgreSQL/PostGIS GeometriesBean......................... MenuPortlet (1) AJAX request (2) Query/Result (3) Response XML Description GIS GI

19 To Portlet Εμφάνισης στο Χάρτη (MapPortlet)......................... Parsing (Google Maps Javascript API) Google Maps Markers (Polygons/Polylines) Διαχείριση αιτήσεων εμφάνισης επιπέδων στο χάρτη της Google

20 To Portlet Εμφάνισης στο Χάρτη (MapPortlet) Εμφάνιση περιγραφικής πληροφορίας: Δημιουργία ασύγχρονης αίτησης στον εξυπηρετητή Διεκπεραιώνεται από το “GeomDescrBean” Δημιουργία ενός κειμένου σε html με τις τιμές των πεδίων της γεωμετρίας. Εμφάνιση του html κειμένου σε ένα InfoWindow του Google Maps API. Αλλαγή εμφάνισης της γεωμετρίας πάνω στο χάρτη.

21 Επικοινωνία των Portlet (InterPortlet Communication-IPC) Διασύνδεση portlet διαφορετικών σελίδων- Επικοινωνία των ResPortlet και MenuPortlet της εφαρμογής – ΗΤΤP POST ανακατεύθυνση από τη σελίδα Resources στη σελίδα Map. – Αποστολή των επιλογών του χρήστη (επίπεδα και πεδία επιπέδων) σε μορφή XML με χρήση απλής html περιοχής κειμένου (text area). Διασύνδεση portlet της ίδιας σελίδας – Επικοινωνία των MenuPortlet και MapPortlet της εφαρμογής – IPC-στον-πελάτη (client-side IPC) – Συμβάντα Liferay (Liferay JS Events).

22 Συμπεράσματα-Επεκτάσεις Βάση για την ανάπτυξη ενός πλήρους συστήματος mashup: – Γεωγραφικά δεδομένα χρηστών – Χαρτών που παρέχονται δωρεάν από διάφορες υπηρεσίες χαρτογράφησης Οι λύσεις που ακολουθήσαμε είχανε σαν αποτέλεσμα: – Ελαχιστοποιήση αιτήσεων στον εξυπηρετητή – Μικρότερο μέγεθος αρχείων XML Επεκτάσεις: – Ενσωμάτωση χαρτών από τις υπόλοιπες υπηρεσίες web- χαρτογράφησης – Αναζήτηση και ανάσυρση περιγραφικής πληροφορίας των γεωμετριών που βρίσκονται εντός ενός, ορισμένου από το χρήστη, σχήματος – Υλοποίηση ενός συστήματος πολλών χρηστών καθένας από τους οποίους θα διατηρεί στις βάσεις του εξυπηρετητή και θα μπορεί να εμφανίζει πάνω στους χάρτες τις δικές του, ιδιωτικές συλλογές από γεωγραφικά επίπεδα