ΑΤΕΙ ΘΕΣΣΑΛΙΑΣ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ Τμήμα Μηχανικών Πληροφορικής ΤΕ Γεωγραφικά δεδομένα για την ανάπτυξη εφαρμογής για τους χρήστες του κοινωνικού δικτύου ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ Haj Husien Maan (ΑΜ: T-1331) Παπαγιάννης Αναστάσιος (ΑΜ: Τ-1953) Επιβλέπων: <Βλάχος Βασίλειος> ΛΑΡΙΣΑ 2014
«Εμείς οι Haj Husien Maan και Παπαγιάννης Αναστάσιος, δηλώνουμε υπεύθυνα ότι η παρούσα Πτυχιακή Εργασία με τίτλο " Γεωγραφικά δεδομένα για την ανάπτυξη εφαρμογής για τους χρήστες του κοινωνικού δικτύου" είναι δική μας και βεβαιώνουμε ότι: Σε όσες περιπτώσεις έχουμε συμβουλευτεί δημοσιευμένη εργασία τρίτων, αυτό επισημαίνεται με σχετική αναφορά στα επίμαχα σημεία. Σε όσες περιπτώσεις μεταφέρουμε λόγια τρίτων, αυτό επισημαίνεται με σχετική αναφορά στα επίμαχα σημεία. Με εξαίρεση τέτοιες περιπτώσεις, το υπόλοιπο κείμενο της πτυχιακής αποτελεί δική μας δουλειά. Αναφέρουμε ρητά όλες τις πηγές βοήθειας που χρησιμοποιήσαμε. Σε περιπτώσεις που τμήματα της παρούσας πτυχιακής έγιναν από κοινού με τρίτους, α- ναφέρουμε ρητά ποια είναι η δική μας συνεισφορά και ποια των τρίτων. Γνωρίζουμε πως η λογοκλοπή αποτελεί σοβαρότατο παράπτωμα και είμαστε ενήμεροι για την επέλευση των νομίμων συνεπειών» Haj Husien Maan Παπαγιάννης Αναστάσιος
Εγκρίθηκε από την τριμελή εξεταστική επιτροπή Τόπος: Ημερομηνία: ΕΠΙΤΡΟΠΗ ΑΞΙΟΛΟΓΗΣΗΣ 1. 2. 3.
Περίληψη Καθημερινά οι χρήστες στο facebook καταχωρούν στην προσωπική τους σελίδα πολλές και διάφορες πληροφορίες. Ουσιαστικά οι χρήστες μοιράζουν αυτές τις πληροφορίες χωρίς να αντιληφθούν την αξία ή τον κίνδυνο τους. Ο στόχος της εφαρμογής που αναπτύχθηκε για την ολοκλήρωση αυτής της πτυχιακής είναι να διαβάζει και να χρησιμοποιεί όλα τα δεδομένα που αφορούν τις τοποθεσίες από τις οποίες έγιναν κοινοποιήσεις, ενημερώσεις και μέρη που οι χρήστες έχουν κοινοποιήσει ότι επισκέφτηκαν. Με την χρήση αυτών των πληροφοριών και της εφαρμογής μπορούν οι χρήστες να έχουν μια γενική άποψη για μέρη που οι φίλοι τους επισκέπτονται σε καθημερινή, εβδομαδιαία και μηνιαία βάση. Έτσι μπορούν να προβλέψουν κατά κάποιο τρόπο που θα βρίσκονται οι φίλοι τους. -1-
Ευχαριστίες Από αυτή τη θέση, θα θέλαμε να ευχαριστήσουμε τον υπεύθυνο καθηγητή της πτυχιακής μας εργασίας Ph.D Βασίλειο Βλάχo, για την εμπιστοσύνη και την άψογη συνεργασία που είχαμε, τον Ιωάννη Τσίνα για την πολύτιμη βοήθεια που μας προσέφερε ως φιλόλογος, για την ορθογραφική και συντακτική διόρθωση και επιμέλεια των κειμένων, την Μαρία Παυλοπούλου για την πολύτιμη συμβολή της στην σύνταξη και την μετάφραση των κειμένων και τους Σοφία Παπαπέτρου, Έλενα Γουναρά και Χρυσοβαλάντη Αραμπατζή για της εποικοδομητικές συζητήσεις και την υπομονή τους. Τέλος θα θέλαμε να ευχαριστήσουμε τους γονείς μας και τα αδέρφια μας, για την υποστήριξη τους καθ' όλη τη φοιτητική μας πορεία. Haj Husien Maan Παπαγιάννης Αναστάσιος Λάρισα 24/05/2014-3-
Περιεχόμενα ΠΕΡΙΛΗΨΗ... 1 ΕΥΧΑΡΙΣΤΙΕΣ... 3 ΠΕΡΙΕΧΟΜΕΝΑ... 5 1 ΕΙΣΑΓΩΓΗ... 7 2 ΘΕΩΡΗΤΙΚΟ ΥΠΟΒΑΘΡΟ... 9 2.1 ΚΟΙΝΩΝΙΚΑ ΔΙΚΤΥΑ... 9 2.2 ΗΛΕΚΤΡΟΝΙΚΟΣ ΧΑΡΤΗΣ... 11 2.3 ΔΙΑΔΙΚΤΥΑΚΕΣ ΕΦΑΡΜΟΓΕΣ... 12 2.4 PHP... 14 2.5 JAVASCRIPT... 14 2.6 MYSQL ΚΑΙ PHPMYADMIN... 15 2.7 HTML5 ΚΑΙ CSS3... 15 2.8 ΔΥΝΑΜΙΚΕΣ ΙΣΤΟΣΕΛΙΔΕΣ... 16 2.9 SSL ΚΑΙ HTTPS... 16 2.10 CPANEL... 17 3 ΣΧΕΔΙΑΣΜΟΣ ΕΦΑΡΜΟΓΗΣ... 18 3.1 ΈΡΕΥΝΑ ΓΙΑ ΤΗΝ ΔΗΜΙΟΥΡΓΙΑ ΤΗΣ ΕΦΑΡΜΟΓΗΣ... 18 3.2 ΣΥΝΔΕΣΗ ΚΑΙ ΜΕΤΑΦΟΡΑ ΔΕΔΟΜΕΝΩΝ ΜΕΤΑΞΥ ΕΦΑΡΜΟΓΗΣ, FACEBOOK ΚΑΙ GOOGLE MAPS... 19 4 ΥΛΟΠΟΙΗΣΗ ΚΑΙ ΛΕΙΤΟΥΡΓΙΑ ΤΗΣ ΕΦΑΡΜΟΓΗΣ... 21 4.1 ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΡΥΘΜΙΣΗ ΤΗΣ ΕΦΑΡΜΟΓΗΣ... 21 4.2 ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΛΕΙΤΟΥΡΓΙΑ ΚΩΔΙΚΑ... 24 4.2.1 Δημιουργία εφαρμογής... 24 4.2.2 Κώδικας λειτουργίας... 28 5 ΣΥΜΠΕΡΑΣΜΑ... 39-5-
ΒΙΒΛΙΟΓΡΑΦΙΑ... 40 ΠΑΡΑΡΤΗΜΑ... 41-6-
1 Εισαγωγή Στα μέσα της δεκαετίας του '90 η βιομηχανία του web έγινε μια από τις πιο γρήγορα εξελισσόμενες. Εκείνη την περίοδο στην Αμερική υπήρχαν λιγότερες από χίλιες εταιρείες που ειδικεύονταν στην ανάπτυξη του web. Αργότερα στα μέσα της δεκαετίας του '00 ο αριθμός των ανάλογων εταιρειών έφτασε να είναι πάνω από 30.000 μόνο στην Αμερική. Το '90 το κόστος δημιουργίας και φιλοξενίας μιας απλής ιστοσελίδας ανέρχονταν σε χιλιάδες δολάρια, ενώ τώρα έχει ελαχιστοποιηθεί. Επιπλέον ένας απλός χρήστης μπορεί να δημιουργήσει δωρεάν μια δικιά του ιστοσελίδα με την χρήση πολλών και απλών εργαλείων σαν αυτά που προσφέρονται από την Google. Η πιο μικρή εταιρεία α- νάπτυξης ιστοσελίδων μπορεί να μπει στην αγορά και να προσφέρει τις υπηρεσίες της σε μικρές εταιρείες και άτομα. Εδώ αντικατοπτρίζεται η ταχύτητα της εξέλιξης της βιομηχανίας του web. Υπάρχει ακόμα κόστος το οποίο επιβαρύνεται ο χρήστης, όμως υπάρχουν και επιλογές δωρεάν εργαλείων και ανοιχτού λογισμικού π.χ. localhost LAMP ( MySQL, PHP, Apache που λειτουργούν σε περιβάλλον Linux). Με αυτόν τον τρόπο και οι πιο απλοί άνθρωποι μπορούν να συμμετέχουν στην ανάπτυξη web. Με την πάροδο του χρόνου αναπτύχθηκαν πολλά λογισμικά για την σχεδίαση ιστοσελίδας, π.χ. Dreamweaver, και με την χρήση τους ο χρήστης έχει την δυνατότητα να δημιουργήσει γρήγορα και με ελάχιστες γνώσεις δική του ιστοσελίδα. Αυτό που απαιτείται είναι να υπάρχουν γνώσεις των βασικών κανονισμών γλωσσών προγραμματισμού, όπως HTML ή οποιαδήποτε άλλης γλώσσας, που σχετίζεται με αυτόν τον τομέα. Οι γνώσεις μπορούν να αποκτηθούν πολύ εύκολα και γρήγορα από tutorials, βιβλία και εξειδικευμένα on line μαθήματα. Η γρήγορη ανάπτυξη του LAMP και διαφόρων άλλων τεχνολογιών εφαρμόζεται ευρέως στην δημιουργία νέων διαδικτυακών εφαρμογών. Η ταχεία εξέλιξη της ψηφιακής αγοράς αποτελεί ένα ισχυρό παράδειγμα της ανάπτυξης των διαδικτυακών εφαρμογών, όπως επίσης και των αλλαγών στην λειτουργία των ιστοσελίδων. Η εξέλιξη του web δεν έμεινε μόνο στην δημιουργία ιστοσελίδων και -7-
εφαρμογών για εμπορικούς λόγους αλλά οδήγησε και στην δημιουργία των social media (Facebook, Twitter) που χρησιμοποιούνται από εκατομμύρια χρήστες σ' όλο τον κόσμο δωρεάν. Όσον αφορά, τώρα, στην συγκεκριμένη εργασία, αυτή έχει δομηθεί ως εξής: Στο 2 ο κεφάλαιο αναπτύσσεται το θεωρητικό υπόβαθρο που χρησιμοποιήθηκε για την ολοκλήρωση της εργασίας. Στο 3 ο κεφάλαιο γίνεται μια παρουσίαση της έρευνας που έγινε για την δημιουργία εφαρμογής facebook και η μεταφορά δεδομένων. Στο 4 ο κεφάλαιο παρουσιάζονται αναλυτικά τα βήματα δημιουργίας, προγραμματισμού της εφαρμογής και της λειτουργίας της. Στο 5 ο κεφάλαιο αναφέρονται τα συμπεράσματα της εργασίας. Τέλος, στο παράρτημα παρατίθενται οι κώδικες της εφαρμογής. -8-
2 Θεωρητικό Υπόβαθρο Σε αυτό το κεφάλαιο γίνεται αναφορά των εξής εννοιών: κοινωνικά δίκτυα, ηλεκτρονικός χάρτης και διαδικτυακές εφαρμογές. Επίσης αναλύεται η χρήση των εργαλείων που χρησιμοποιήθηκαν για να υλοποιηθεί η εφαρμογή και οι γλώσσες προγραμματισμού. 2.1 Κοινωνικά δίκτυα Με τον όρο κοινωνικό δίκτυο εννοείται μια κοινωνική δομή που αποτελείται από ένα σύνολο παραγόντων όπως άτομα ή οργανισμούς, οπού ο χρήστης μπορεί να έχει μια σειρά από βασικές και δωρεάν υπηρεσίες. Μια από αυτές είναι η διαμόρφωση προφίλ, δηλαδή προσθέτει φίλους (είτε είναι γνωστοί του είτε κοντινοί του άνθρωποι) δημιουργώντας ένα δίκτυο ανθρώπων προκειμένου να επικοινωνεί πιο εύκολα μαζί τους. Επίσης, άλλες βασικές υπηρεσίες που παρέχει είναι το ανέβασμα εικόνων και βίντεο, ο σχολιασμός σε ενέργειες που γίνονται από άλλα μελή του δικτύου ή μιας ομάδας, η ά- μεση ανταλλαγή μηνυμάτων και πολλά άλλα. Η μορφή ενός κοινωνικού δικτύου μπορεί να προσδιορίσει το μέγεθος της ωφέλειας ενός μέλους του. Τα μικρά σε έκταση και κλειστά κοινωνικά δίκτυα θεωρούνται λιγότερο ωφέλιμα για τα μελή τους σε σχέση με τα πιο ανοικτά δίκτυα με χαλαρούς δεσμούς μεταξύ των μελών τους στα οποία είναι πιο εύκολη η διακίνηση ιδεών και η δημιουργία ευκαιριών (π.χ. εργασίας) στα άτομα που τα ακολουθούν. Εν τέλει, όταν σε ένα ευρύ δίκτυο δημιουργούνται μεγάλες ομάδες με έστω χαλαρούς δεσμούς υπάρχει μεγαλύτερη πιθανότητα διακίνησης πλήθους πληροφοριών από ένα μικρό σε εύρος δίκτυο μεταξύ μιας μικρής ομάδας φίλων. -9-
Το πιο δημοφιλές κοινωνικό δίκτυο παγκοσμίως σήμερα είναι το Facebook, το οποίο κατάφερε να προσελκύσει εκατομμύρια χρήστες. Δημιούργησε μια μεγάλη ψηφιακή αγορά που τράβηξε το ενδιαφέρον πολλών προγραμματιστών και εταιρειών προγραμματισμού για τη δημιουργία εφαρμογών οι οποίες χρησιμοποιούν κάποιες από τις λειτουργίες του, π.χ. τη λειτουργία σύνδεση χρήστη ( login Facebook ), για την προσθήκη καινούργιων μελών στη βάση δεδομένων της ιστοσελίδας τους ή της εφαρμογής τους, παίρνοντας τα στοιχεία του χρήστη (όνομα, ηλεκτρονικό ταχυδρομείο, ηλικία... κλπ ) από την βάση δεδομένων του Facebook ή για την ταυτοποίηση ήδη υπαρχόντων χρηστών. Έτσι το Facebook άρχισε να προσφέρει δωρεάν εργαλεία για ανάπτυξη εφαρμογών στους προγραμματιστές και στις εταιρίες πληροφορικής τα οποία υποστηρίζουν διάφορες πλατφόρμες και γλώσσες προγραμματισμού. Από την στιγμή που οι προγραμματιστές έχουν την δυνατότητα να αντλούν δεδομένα από τους χρήστες του Facebook άρχισε να τίθεται το θέμα ασφάλειας και προστασίας των χρηστών από τα διάφορα κακόβουλα λογισμικά. Με αφορμή αυτό το γεγονός το Facebook κατά κάποιο τρόπο ανάγκασε τους προγραμματιστές να αναφέρουν ποιά δεδομένα θα παίρνουν, με ποιον τρόπο θα τα χρησιμοποιούν, πρωταρχικά όμως να παίρνουν έγκριση από τον κάθε χρήστη. Στις 30 Απριλίου του 2014 το Facebook για να προσφέρει περισσότερη ασφάλεια και προστασία στα προσωπικά δεδομένα του κάθε χρήστη μείωσε ή κατάργησε κάποιες λειτουργίες που επέτρεπαν την πρόσβαση σε αυτά τα δεδομένα π.χ. οι καινούργιες ε- φαρμογές που δημιουργήθηκαν μετά τις 30\04\2014 δεν μπορούν να διαβάσουν προσωπικά δεδομένα των ''φίλων'' του χρήστη της εφαρμογής. Όσον αφορά τις παλιές ε- φαρμογές που είναι σε λειτουργία (πριν τις 30/04) δόθηκε διορία ενός έτους στους προγραμματιστές ώστε να αναβαθμίσουν τον κώδικα των εφαρμογών τους σύμφωνα με την νέα πολιτική, επιτρέποντάς τους έτσι να λειτουργούν γι αυτό το χρονικό διάστημα με την προηγούμενη. -10-
2.2 Ηλεκτρονικός χάρτης Με την εξέλιξη της τεχνολογίας και με την εισαγωγή της πληροφορικής σε διάφορες επιστήμες γεννήθηκε η ανάγκη να γίνει η ψηφιοποίηση των γεωγραφικών χαρτών. Πολλές μεγάλες εταιρίες ξεκίνησαν να δημιουργούν εφαρμογές με ηλεκτρονικούς χάρτες όπως π.χ. η Google δημιούργησε το ευρέως γνωστό πρόγραμμα google maps. Ό- ταν πρωτοδημιουργήθηκαν οι ηλεκτρονικοί χάρτες διατέθηκαν κυρίως σε επιστημονικές εφαρμογές και σε εφαρμογές για τον στρατό, όμως με την πάροδο του χρόνου άρχισε η χρήση τους να εξαπλώνεται διευκολύνοντας την καθημερινότητα των ανθρώπων π.χ. οι οδηγοί οχημάτων με τη χρήση GPS μπορούν να βρουν τον προορισμό τους πολύ γρήγορα και εύκολα. Με την αναβάθμιση του διαδικτύου οι ιστοσελίδες των εταιρειών άρχισαν να χρησιμοποιούν ηλεκτρονικούς χάρτες για να δείξουν την τοποθεσία της ε- κάστοτε εταιρίας. Με αυτόν τον τρόπο τα κοινωνικά δίκτυα παρουσίασαν μεγάλο ενδιαφέρον για την χρησιμοποίηση των ηλεκτρονικών χαρτών ώστε να δώσουν στους χρήστες τους την δυνατότητα να μοιραστούν με τους φίλους τους το μέρος όπου βρίσκονται ή να προβάλουν τοποθεσίες και μέρη στα οποία θέλουν να πάνε ή απλά τους αρέσουν και θέλουν να τα διαφημίσουν. Σε αυτόν τον τομέα οι καλύτεροι ηλεκτρονικοί χάρτες που χρησιμοποιούνται από τα κοινωνικά δίκτυα είναι οι google maps και bing. Για να υλοποιηθεί η συγκεκριμένη εργασία έγινε η χρήση της υπηρεσίας google maps που προσφέρεται δωρεάν από την εταιρία Google. -11-
2.3 Διαδικτυακές Εφαρμογές Η διαδικτυακή εφαρμογή είναι λογισμικό που εκτελείται από προγράμματα περιήγησης χρησιμοποιώντας γλώσσες προγραμματισμού, όπως JavaScript, HTML, CSS. Σε παλαιότερα μοντέλα υπολογιστών π.χ. σε client-server, το φορτίο για την εφαρμογή μοιραζόταν μεταξύ του κώδικα που προερχόταν από τον διακομιστή και τον κώδικα που ήταν εγκατεστημένος σε κάθε πελάτη σε τοπικό επίπεδο. Μια αναβάθμιση στον κώδικα του διακομιστή τυπικά απαιτεί επίσης μια αναβάθμιση του κώδικα του πελάτη και εγκατάσταση σε κάθε σταθμό εργασίας του χρήστη. Έτσι όμως υπάρχει μεγάλο κόστος τεχνικής υποστήριξης. Σε αντίθεση με τα παλαιά μοντέλα οι διαδικτυακές εφαρμογές είναι γραμμένες σε γλώσσες όπως HTML και JavaScript, οι οποίες υποστηρίζονται από μια ποικιλία προγραμμάτων περιήγησης. Κάθε φορά που ο πελάτης επισκέπτεται ιστοσελίδες χρησιμοποιώντας τυποποιημένες διαδικασίες όπως το HTTP γίνονται αυτόματα ενημερώσεις. Στόχος των περισσότερων προγραμματιστών έχουν γίνει σήμερα οι διαδικτυακές εφαρμογές οι οποίες βοηθούν τόσο τους αρχάριους όσο και τους επαγγελματίες χρήστες, παρέχοντάς τους interface αντίστοιχα των δυνατοτήτων τους. Επίσης είναι διαθέσιμες με τεχνικά ανώτερη και γρήγορη σύνδεση στο διαδίκτυο και μπορούν όλοι να έ- χουν πρόσβαση ανά πάσα στιγμή και από οποιοδήποτε μέρος. Με αυτόν τον τρόπο λοιπόν, οι επιδόσεις των περισσότερων διαδικτυακών εφαρμογών άρχισαν να βελτιώνονται ώστε παρέχουν άριστες υπηρεσίες. Ενώ οι περισσότερες διαδικτυακές εφαρμογές είναι δωρεάν και χρειάζεται μόνο η σύνδεση σ' αυτές, ορισμένες εταιρίες προσφέρουν πιο εξεζητημένες διαδικτυακές εφαρμογές, με μηνιαία συνήθως συνδρομή, οι οποίες έχουν την δυνατότητα να τρέξουν από οποιαδήποτε συσκευή. Ορισμένες από αυτές είναι εφαρμογές λογισμικού για επαγγελματίες και ορισμένες για επεξεργασία εικόνας. -12-
Διαδικτυακές εφαρμογές Κυρίως δωρεάν. Ένας μικρός αριθμός από αυτές είναι επί πληρωμή. Συνήθως μπορεί να είναι προσβάσιμη εύκολα από οποιαδήποτε συσκευή. Δεν χρειάζεται να ενημερωθούν τα εργαλεία, όλες οι ενημερώσεις των διαδικτυακών εφαρμογών είναι διαθέσιμες στον ίδιο σύνδεσμο. Η ανάπτυξη τέτοιων εφαρμογών δεν χρειάζεται μεγάλη εμπειρία, δεδομένου ότι δεν απαιτεί τεράστια χρηματικά ποσά Λογισμικά ηλεκτρονικών υπολογιστών Οι περισσότεροι δεν είναι δωρεάν και οι δωρεάν εφαρμογές συχνά έχουν προβλήματα ή δεν καταλήγουν να ικανοποιούν αρκετά τον χρήστη σε σύγκριση με εκείνους που πλήρωσαν το τίμημα. Συνήθως πρέπει να εγκατασταθεί στη συσκευή που χρησιμοποιείται για να είναι σε θέση να υπάρχει πρόσβαση. Θα πρέπει να γίνει εγκατάσταση των ενημερώσεων και στις περισσότερες περιπτώσεις οι ενημερώσεις δεν είναι δωρεάν. Απαιτούν από τις εταιρείες να αναπτύξουν ισχυρά προγράμματα και θα πρέπει να πληρώσουν τεράστια ποσά, έτσι ώστε να γίνει η διάδοση των προγραμμάτων. -13-
2.4 PHP Η PHP είναι μια γλώσσα προγραμματισμού που αναπτύχθηκε από μια ομάδα εθελοντών υπό την άδεια PHP και σχεδιάστηκε για την δημιουργία διαδικτυακών εφαρμογών με δυναμικό περιεχόμενο και για την παραγωγή αυτόνομων προγραμμάτων. Υποστηρίζει αντικειμενοστραφή προγραμματισμό και οι εντολές που χρησιμοποιούνται για την ανάπτυξη κώδικα είναι παρόμοιες με αυτές της γλώσσας C. Επίσης λειτουργεί σε πολλαπλά λειτουργικά συστήματα όπως το Linux και τα Windows. Ο κώδικας PHP εκτελείται από τον διακομιστή σε πραγματικό χρόνο και το τελικό περιεχόμενο στέλνεται στον χρήστη σε μορφή κώδικα HTML. 2.5 JavaScript Η JavaScript είναι διερμηνευμένη γλώσσα προγραμματισμού για ηλεκτρονικούς υπολογιστές. Αναπτύχθηκε από την Netscape και από την Sun Microsystems και αρχικά αποτέλεσε μέρος της υλοποίησης των φυλλομετρητών ιστού, ώστε τα σενάρια από την πλευρά του πελάτη να μπορούν να επικοινωνούν με του χρήστη, να ανταλλάσσουν δεδομένα και να αλλάζουν το περιεχόμενο του εγγράφου που εμφανίζεται. Η JavaScript διαφέρει από την γλώσσα Java της εταιρίας Sun Microsystems και η ομοιότητα στο ό- νομα δεν συνεπάγεται σε καμία περίπτωση ομοιότητα των δύο γλωσσών. Χρησιμοποιείται για την δημιουργία δυναμικών ιστοσελίδων και σε εφαρμογές εκτός ιστοσελίδων για παράδειγμα στα έγγραφα PDF στους εξειδικευμένους φυλλομετρητές και στις μικρές εφαρμογές της επιφάνειας εργασίας. Η εκτέλεση των κωδικών JavaScript γίνεται με δύο τρόπους: Στον χρήστη φορτώνεται ο JavaScript κώδικας μέσω HTML ιστοσελίδας στο πρόγραμμα πλοήγησης και ύστερα γίνεται η εκτέλεση των εντολών. Το μειονέκτημα αυτού του τρόπου είναι η αργή φόρτωση της ιστοσελίδας για πρώτη φορά. Το πλεονέκτημα είναι ότι στην συνέχεια η ταχύτητα της εκτέλεσης εντολών είναι γρήγορη. Στο διακομιστή αναγκάζει το πρόγραμμα πλοήγησης να συνδεθεί με αυτόν για να εκτελεσθούν οι εργασίες και έπειτα η αποστολή των αποτελεσμάτων -14-
στον χρήστη. Το πλεονέκτημα αυτού του τρόπου είναι η γρήγορη φόρτωση της σελίδας από την πρώτη επίσκεψη. Το μειονέκτημα είναι ότι η εκτέλεση των εντολών είναι αργή εξαιτίας της σύνδεσης πολλών χρηστών με το διακομιστή. Η γλώσσα JavaScript έχει καθιερωθεί να λειτουργεί εξ ολοκλήρου μέσω του προγράμματος περιήγησης, έτσι ώστε να μην μπορεί να χρησιμοποιηθεί για την παραγωγή προγραμμάτων που τρέχουν μόνα τους όπως το δίκτυο των άλλων γλωσσών π.χ. HTML. Με την πρόσφατη κυκλοφορία των Windows 8 οι προγραμματιστές μπορούν να φτιάχνουν εφαρμογές Metro Style Apps με JavaScript και HTML5 και εκτελούνται μέσω WinRT interface όχι μέσω προγράμματος πλοήγησης. Αυτές οι εφαρμογές λειτουργούν σαν Standalone εφαρμογές στο λειτουργικό σύστημα Windows8. 2.6 MySQL και phpmyadmin Η MySQL είναι ένα σύστημα διαχείρισης βάσης δεδομένων και αποτελεί προϊόν ανοιχτού λογισμικού. Συνήθως χρησιμοποιείται από έργα ανοιχτού λογισμικού που α- παιτούν σύστημα διαχείρισης βάσεων δεδομένων. Παράδειγμα τέτοιων έργων αποτελεί η WorldPress, PHP όπως και πολλές ιστοσελίδες π.χ. η Wikipedia, η Google search και το Facebook. Λειτουργεί σε διάφορες πλατφόρμες όπως το IBM ALL X, FreeDSD, Linux και Mac OS. Επιπλέον πολλές γλώσσες προγραμματισμού προσφέρουν βιβλιοθήκες για δημιουργία και διαχείριση των βάσεων δεδομένων MySQL. Η phpmyadmin είναι ένα εργαλείο ανοιχτού λογισμικού που επιτρέπει στους διαχειριστές του συστήματος να έχουν ελεύθερη πρόσβαση για την δημιουργία και διαχείριση των βάσεων δεδομένων MySQL στο διαδίκτυο. 2.7 HTML5 και CSS3 Η HTML5 είναι τρέχουσα έκδοση ης γλώσσας HTML. Σε αυτήν την έκδοση προσφέρεται μια σειρά από νέα στοιχεία που διευκολύνουν την ιδέα της δημιουργίας σελίδων. Κάνει πιο εύκολο για τις μηχανές αναζήτησης να διαβάζουν τον κώδικα ιστοσελίδων και να ξεχωρίζουν τα τμήματα του κώδικα (header, menu...κλπ). Η HTML5 παρέ- -15-
χει επίσης μια σειρά νέων εντολών που βοηθούν στο σχηματισμό των γραφικών, βίντεο και πολλών άλλων χαρακτηριστικών. Η Cascading Style Sheets (CSS) είναι γλώσσα που αφορά την διαμόρφωση και εμφάνιση των ιστοσελίδων (χρώμα, γραμματοσειρά... κλπ) που είναι γραμμένες με γλώσσες όπως η HTML. Η τελευταία έκδοση της CSS είναι η CSS3. Η CSS3 σχεδιάστηκε για να διαμορφώσει ιστοσελίδες που είναι γραμμένες σε HTML5. Υπάρχουν προγράμματα που διευκολύνουν την διαδικασία της γραφής αυτής, όπως το DreamWeaver, τα οποία δίνουν επιλογές για αυτόματη δημιουργία CSS. Οι περισσότεροι προγραμματιστές ιστοσελίδων προτιμούν να γράφουν το δικό τους CSS παρά να χρησιμοποιούν προγράμματα που δίνουν την επιλογή για αυτόματη δημιουργία CSS. 2.8 Δυναμικές ιστοσελίδες Οι ιστοσελίδες του διαδικτύου χωρίζονται σε δύο κατηγορίες, στις στατικές ιστοσελίδες που αποτελούνται από στατικές σελίδες που αποθηκεύονται σε τελική μορφή στον διακομιστή, και στις δυναμικές ιστοσελίδες που αποτελούνται από δυναμικές σελίδες. Κάποιο μέρος του κώδικα των δυναμικών σελίδων είναι γραμμένο όπως στις στατικές σελίδες, ενώ το υπόλοιπο είναι γραμμένο με γλώσσες προγραμματισμού για δημιουργία της τελικής εμφάνισης σελίδων με βάση τον χρήστη. Η έννοια της δυναμικής ιστοσελίδας ξεκίνησε με την ανάπτυξη του παγκόσμιου ιστού γνωστού ως Web2.0. Μετά το Web2.0 υπάρχει περισσότερο ενδιαφέρον για ανάπτυξη διαδικτυακών εφαρμογών με την τεχνολογία AJAX που άλλαξε την έννοια της αλληλεπίδρασης με το πρόγραμμα πλοήγησης. Για την δημιουργία δυναμικών ιστοσελίδων πρώτα κατασκευάζεται πρότυπη ιστοσελίδα και ύστερα διαχωρίζονται τα στατικά μέρη της ιστοσελίδας από τα μέρη που επιθυμείται να είναι δυναμικά. Για τα δυναμικά μέρη χρησιμοποιούνται γλώσσες προγραμματισμού όπως PHP. 2.9 SSL και HTTPS Το Secure Socket Layer (SSL) είναι πρωτόκολλο ασφαλείας. Προσφέρει ασφάλεια κατά την χρήση χωρίς να το αντιληφθεί ο χρήστης. Η λειτουργία του SSL ξεκινάει όταν -16-
ο υπολογιστής του χρήστη ζητάει ασφαλή σύνδεση από τον διακομιστή και τότε το SSL δημιουργεί ένα ασφαλές κανάλι με χρήση αλγορίθμων κρυπτογράφησης. Έτσι όλα τα δεδομένα που ανταλλάσσονται μεταξύ του ηλεκτρονικού υπολογιστή του χρήστη και τον διακομιστή κρυπτογραφούνται όλα από το SSL. Το Hypertext Transfer Protocol Secure είναι ένας συνδυασμός των πρωτόκολλων Hypertext Transfer Protocol με SSL/TLS για να παρέχεται κρυπτογραφημένη και ασφαλή επικοινωνία. Συχνά χρησιμοποιείται για συναλλαγές πληρωμών για το Παγκόσμιο Ιστό (World Wide Web) και για τα ευαίσθητα συστήματα πληροφοριών των επιχειρήσεων. Η κύρια ιδέα είναι η δημιουργία ενός ασφαλούς καναλιού σε ένα μη ασφαλές δίκτυο. Αυτό εξασφαλίζει επαρκή προστασία από υποκλοπές και επιθέσεις hacker. Σε περίπτωση που η σύνδεση γίνει με ιστοσελίδα που έχει ελεγμένη πιστοποίηση τα προγράμματα πλοήγησης προειδοποιούν τον χρήστη δίνοντας πληροφορίες για τον κίνδυνο και τον συμβουλεύουν να μην συνεχίσει την χρήση της ιστοσελίδας ούτε και να δώσει σημαντικές προσωπικές πληροφορίες. 2.10 cpanel Το cpanel είναι ένας πίνακας ελέγχου και χρησιμεύει στη διαχείριση ιστοσελίδων που φιλοξενούνται από διακομιστές που λειτουργούν με λογισμικό Linux. Δεν αποτελεί εργαλείο ανοιχτού λογισμικού και έτσι απαιτείται εμπορική άδεια χρήσης η οποία δίνεται μόνο σε εταιρίες για φιλοξενία ιστοσελίδων. Παρ' όλα αυτά, οι μη κερδοσκοπικοί οργανισμοί, όπως εκπαιδευτικοί και φιλανθρωπικοί οργανισμοί, μπορούν να ζητήσουν δωρεάν άδεια χρήσης ή άδεια με μειωμένο κόστος. -17-
3 Σχεδιασμός Εφαρμογής Στο μέρος 3.1 του κεφαλαίου αυτού αναπτύσσεται η ιδέα της εφαρμογής, ο τρόπος υλοποίησης, τα εργαλεία που χρειάστηκαν και ο τρόπος που χρησιμοποιήθηκαν για την ολοκλήρωση της. Στο μέρος 3.2 αναλύεται το πως συνδέεται η εφαρμογή με το facebook και πως μεταφέρονται τα δεδομένα από το facebook στην βάση δεδομένων της εφαρμογή μας, όπως επίσης και η εμφάνιση των αποτελεσμάτων στο google maps. 3.1 Έρευνα για την δημιουργία της εφαρμογής Για πετύχει η εργασία τον στόχο της έπρεπε να διερευνηθεί το κατά πόσο είναι δυνατή η υλοποίηση της εργασίας αναφορικά με το θέμα άδειας ανάπτυξης εφαρμογών facebook, την πολιτική που ακολουθείται στο facebook, την απόκτηση δεδομένων από χρήστες του facebook και ποιές γλώσσες προγραμματισμού υποστηρίζει επίσημα το facebook και ποιες μη επίσημα. Η έρευνα είχε τα εξής αποτελέσματα: Πολιτική του Facebook: το facebook προσφέρει δωρεάν άδεια για ανάπτυξη εφαρμογών σε διάφορες πλατφόρμες (διαδικτυακές εφαρμογές, κινητές... κ.λ.π) Πρόσβαση στα δεδομένα: όσον αφορά τα δημόσια δεδομένα δεν απαιτείται ζήτηση άδειας μέσω του κώδικα της εφαρμογής, ενώ όσον αφορά τα ιδιωτικά δεδομένα θα χρειαστεί η ζήτηση άδειας μέσω του κώδικα με ένα ειδικό τρόπο που αναφέρεται αναλυτικά στα εγχειρίδια των γλωσσών προγραμματισμού που υποστηρίζει το facebook (επίσημα και μη επίσημα). Επίσης απαιτείται να αναφέρεται αναλυτικά γραπτά ο λόγος για τον οποίο η εφαρμογή χρειάζεται την πρόσβαση σε αυτά τα δεδομένα από τον χρήστη του facebook ώστε ο χρήστης να αναγνωρίσει τον λόγο και τον στόχο της εφαρμογής και να έχει το δικαίωμα αποδοχής ή απόρριψης. Φιλοξενία εφαρμογής: το facebook δεν προσφέρει χώρο φιλοξενίας στις εφαρμογές όμως δίνει το δικαίωμα να εκτελούνται μέσω του facebook's canvas εφόσον το επιθυμεί ο προγραμματιστής. Έτσι έγινε επέκταση της έ- ρευνας στο πεδίο εύρεσης χώρου φιλοξενίας. Αποτέλεσμα είναι ότι, για να έχουν οι διαδικτυακές εφαρμογές την καλύτερη λειτουργία μέσω του face- -18-
book's canvas, ο διακομιστής πρέπει να λειτουργεί σε περιβάλλον Linux. Η σύνδεση για την μεταφορά δεδομένων από το διακομιστή του facebook προς το διακοσμιστή της εφαρμογής γίνεται μέσω HTTPS. Γλώσσα προγραμματισμού: η εργασία ήταν δυνατό να γίνει με γλώσσα Python ή PHP.Η γλώσσα Python δεν υποστηρίζεται επισήμως από το facebook. Μια από τις γλώσσες που υποστηρίζει επίσημα το facebook είναι η γλώσσα PHP και προσφέρει δωρεάν εργαλεία ανάπτυξης κώδικα και πολλά παραδείγματα από αντιστοίχους κώδικες, επίσης υποστηρίζει την γλώσσα JavaScript που έχει την δυνατότητα να εκτελείται μέσω του κώδικα του PHP. Ηλεκτρονικός χάρτης: η εμφάνιση των δεδομένων της εφαρμογής έπρεπε να γίνεται και σε ηλεκτρονικό χάρτη. Δεν βρέθηκε τίποτα για χρήση σε η- λεκτρονικό χάρτη στα εργαλεία που προσφέρει το facebook για ανάπτυξη εφαρμογών, γι' αυτό τον λόγο έγινε δεύτερη έρευνα για να βρεθεί εταιρεία που προσφέρει δωρεάν ηλεκτρονικούς χάρτες στους προγραμματιστές. Η εφαρμογή θα χρησιμοποιήσει την υπηρεσία Google maps της Google όπου οι προγραμματιστές έχουν δωρεάν πρόσβαση και δωρεάν λογαριασμό για ανάπτυξη εφαρμογής της Google. 3.2 Σύνδεση και μεταφορά δεδομένων μεταξύ εφαρμογής, Facebook και Google maps Η σύνδεση μεταξύ της εφαρμογής μας, του facebook και του Google maps γίνεται με την χρήση του πρωτοκόλλου SSL & HTTPS ώστε να επιτευχθεί η ασφαλής σύνδεση μεταξύ του διακομιστή στον οποίο φιλοξενείται η εφαρμογή και τον διακομιστή του facebook. 'Έτσι δημιουργείται ασφαλές κανάλι για την μεταφορά των προσωπικών δεδομένων των χρηστών του facebook χωρίς να υπάρχει κίνδυνος κλοπής από hackers. Με τον ίδιο τρόπο έγινε και η σύνδεση μεταξύ του διακομιστή της εφαρμογής και του διακομιστή του Google maps για να επιτευχτεί ασφαλής σύνδεση και μεταφορά των δεδομένων τοποθεσίας των φίλων του χρήστη της εφαρμογής μας και η εμφάνιση -19-
του χάρτη μέσω του canvas του facebook, ώστε να έχει ότι δεδομένο χρειάζεται για την λειτουργία της. Έπειτα στέλνονται ορισμένα δεδομένα που αφορούν τις τοποθεσίες ενός φίλου του χρήστη από τον διακομιστή της εφαρμογής στον διακομιστή του Google maps ώστε να εμφανιστούν σωστά στον ηλεκτρονικό χάρτη. Εν τέλει, στέλνεται ο χάρτης με τις σωστές τοποθεσίες στην εφαρμογή και μετά όλα τα δεδομένα στο canvas της εφαρμογής στο facebook. -20-
4 Υλοποίηση και λειτουργία της εφαρμογής Στην ανάλυση της υλοποίησης της εφαρμογής θα γίνει παρουσίαση των βημάτων: δημιουργίας και ρύθμισης της εφαρμογής δημιουργίας κώδικα και λειτουργίας της εφαρμογής βήμα - βήμα. 4.1 Δημιουργία και ρύθμιση της εφαρμογής Για να γίνει η απόκτηση λογαριασμού ανάπτυξης εφαρμογής facebook (facebook developer) χρειάστηκε η εγγραφή στο http://developers.facebook.com/.μετά την εγγραφή έγινε η δημιουργία και ρύθμιση νέας εφαρμογής. Δημιουργία εφαρμογής -21-
Η ρύθμιση της εφαρμογής έγινε ως εξής: δόθηκε όνομα εφαρμογής όνομα χώρου (μοναδικό) ώστε να χρησιμοποιηθεί για την απευθείας δημιουργία link για την εφαρμογή στο facebook App domains και e-mail επικοινωνίας επιλογή πλατφόρμας λειτουργίας της εφαρμογής. Εδώ έγινε επιλογή "εφαρμογή στο facebook". Facebook Platform Για τον λογαριασμό Google developers δεν χρειάστηκε ειδικός τρόπος εγγραφής επειδή υπήρχαν ήδη Google email accounts αλλά έπρεπε να γίνει ενεργοποίηση της υ- πηρεσίας google maps. -22-
Google maps Με βάση την έρευνα που έγινε στο προηγούμενο κεφάλαιο δημιουργήθηκε ένας λογαριασμός για φιλοξενία ιστοσελίδας που προσέφερε: διακομιστή που λειτουργεί σε περιβάλλον Linux βάση δεδομένων MySQL πιστοποίηση SSL Εν συνεχεία πραγματοποιήθηκαν τα βήματα για την ρύθμιση πιστοποίησης SSL και ενεργοποίησης HTTPS και μετά δόθηκαν τα canvas URL και secure canvas URL. πιστοποίησης SSL -23-
4.2 Δημιουργία και λειτουργία κώδικα Οι γλώσσες προγραμματισμού που χρησιμοποιήθηκαν για την δημιουργία της ε- φαρμογής είναι : HTML5/CSS για σχεδίαση interface. PHP κώδικας λειτουργίας της εφαρμογής σε ότι έχει να κάνει με τα δεδομένα που παίρνει η εφαρμογή από το facebook μέχρι να εμφανίσει το τελικό αποτέλεσμα. JavaScript κώδικας ηλεκτρονικού χάρτη. Η βάση δεδομένων δημιουργήθηκε με την χρήση phpmyadmin όμως λόγο ανάγκης σωστής λειτουργίας της εφαρμογής χρησιμοποιήθηκε PHP κώδικας για δημιουργία του πίνακα στην βάση δεδομένων. Η ιστοσελίδα της εφαρμογής είναι τύπου dynamic. 4.2.1 Δημιουργία εφαρμογής <?php Για την δημιουργία δυναμικής ιστοσελίδας χρησιμοποιήθηκε PHP κώδικας. include("includes/header.html"); if($_get['page']=="friends"){ include("includes/friends.html"); else if($_get['page']=="find_location"){ include("includes/find_location.html"); else{ include("includes/home.html"); include("includes/footer.html");?> <κωδικας δημιουργιας δυναμικης ιστοσελιδας> Για το interface χρησιμοποιήθηκαν δύο κώδικες CSS3 ο ένας αφορά: background εφαρμογής μέγεθος, χρώμα και τύπος γραμματοσειράς -24-
θέση μηνυμάτων και εκτύπωση δεδομένων (welcome messages, φωτογραφία προφίλ facebook..κλπ) ρύθμιση διαστάσεων και θέσης του ηλεκτρονικού χάρτη. Το δεύτερο CSS3 αφορά τα κουμπιά του μενού (θέση, μέγεθος, γραμματοσειρά κειμένου..κλπ). body{ background : url("img/wall_background.jpg") repeat; #navbar{ position: absolute; padding-top: 20px; padding-left: 50px; padding-right: 50px; padding-bottom: 50px; margin: 0 5px; left: 20%; right: 25%; width: 800px; height: 20px; #App{ position: absolute; padding-top: 50px; padding-left: 50px; padding-right: 50px; padding-bottom: 50px; margin: 25px 50px; top: 10%; left: 20%; right: 25%; width: 800px; height: 450px; color:white; background: url("img/board_wallpaper.jpg"); background-repeat: no-repeat; background-size: 100% 100%; #map{ position: absolute; top: 45%; left: 65%; width: 300px; -25-
height: 250px; <Application CSS3>.cbdb-menu li { display: block; float: left; line-height: 35px; list-style:none; margin: 25px 5px; top: 5%; left: 20%; right: 25%;.cbdb-menu li a { background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgba(255,255,255,.5)), color-stop(1, rgba(0,0,0,.1)) ); background-image: -moz-linear-gradient( center top, rgba(255,255,255,.5) 0%, rgba(0,0,0,.1) 100% ); color: #f4f4f4; /* IE */ color: rgba(255, 255, 255, 0.8); display: block; font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif; outline:none; padding: 5px 15px; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);.cbdb-menu li a:active { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0,rgba(255,255,255,.5)), color-stop(.1,rgba(255,255,255,.2)), color-stop(.85, rgba(0,0,0,.2)), color-stop(100, rgba(0,0,0,.4)) ); background-image: -moz-linear-gradient( center bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 10%, rgba(0,0,0,.2) 85%, -26-
rgba(0,0,0,.4) 100% ); /* Dark Text */.cbdb-menu li a.dark { color: #333; /* IE */ color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);.red { background: #B80202; border: #B80202 1px solid.red:hover,.red:focus{ background-color:#e30606.green { background: #46c431; border: #46c431 1px solid.green:hover,.green:focus { background-color:#44e329.yellow { background: #D9CE1C; border: #D9CE1C 1px solid.yellow:hover,.yellow:focus { background-color:#eee117 <Menu buttons CSS3> Όπως προαναφέρθηκε οι δυναμικές ιστοσελίδες περιέχουν και κώδικα στατικών σελίδων. Οι στατιστικές σελίδες που υπάρχουν στην εφαρμογή είναι: <!doctype html> <html> <head> 1. header.html <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/app_stylesheet.css" type="text/css" /> <link rel="stylesheet" href="css/cbdb-btn.css" /> <script src="https://maps.google.com/maps/api/js?key=aizasydvrgavzqb2inecs5tm9_wkci3yini5y2y &sensor=true"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.1.min.js"></script> </head> <body> <div id=navbar> <ul class="cbdb-menu"> <li><a href="index.php" class="red">home</a> </li> -27-
<li><a href="index.php?page=friends" class="green">friends</a></li> <li><a href="index.php?page=find_location" class="yellow">find location</a></li> </ul> <br clear="left" /> </div> <header.html> 2. home.html, friends.html & find_location.html. Αποτελούν το δυναμικό μέρος της ιστοσελίδας 3. footer HTML. 4.2.2 Κώδικας λειτουργίας Πριν από τη δημιουργία κώδικα PHP για την εφαρμογή χρειάζεται το PHP SDK που μας δίνεται από το facebook. Το PHP SDK έχει δύο σημαντικoύς PHP κώδικες για σωστή λειτουργία και απόκτηση δεδομένων από το facebook και πρέπει να περιέχονται στον PHP κώδικα της εφαρμογής. <sample from base_facebook.php> -28-
<Sample from facebook.php> Πρώτο βήμα μετά την εισαγωγή των δύο πρώτων αυτών αρχείων είναι η δημιουργία σύνδεσης μεταξύ του διακομιστή της εφαρμογής και του διακομιστή facebook με τα στοιχεία της εφαρμογής που δόθηκαν από το facebook. $facebook = new Facebook(array( 'appid' => FACEBOOK_APP_ID, 'secret' => FACEBOOK_SECRET, )); <connect code with facebook application> Μετά την σύνδεση πρέπει να γίνει έλεγχος αν υπάρχει ήδη συνδεδεμένος χρήστης από το facebook και η εκτέλεση κατάλληλων εντολών. $user = $facebook->getuser(); if ($user) { try { $user_profile = $facebook->api('/v1.0/me'); catch (FacebookApiException $e) { error_log($e); $user = null; <check code> -29-
Αν ο έλεγχος έχει θετικό αποτέλεσμα και υπάρχει χρήστης που είναι ταυτοποιημένος από το facebook, τότε γίνεται η ζήτηση και η μεταφορά δεδομένων που αφορούν τον χρήστη (όνομα χρήστη, facebook id... κλπ). $user_profile = $facebook->api('/v1.0/me'); $friendslists = $facebook->api('v1.0/me/friends'); <code for getting User info and friend list> Πρέπει να επισημαίνεται ότι οι παραπάνω κώδικες απαιτείται να είναι στο αρχείο index.php που είναι static. Αυτό γίνεται για να μην χαθεί η σύνδεση με το facebook λόγο φόρτωσης των δυναμικών σελίδων (home.html, friend.html... κλπ). Ο σκοπός του αρχείου home.html της εφαρμογής είναι να καλωσορίζει τον χρήστη, να εμφανίζει την φωτογραφία προφίλ και να προσθέτει τους καινούργιους χρήστες στον πίνακα App_Users της βάσης δεδομένων της εφαρμογής. $link= mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name", $link)or die("cannot select DB"); $name=$user_profile['name']; $facebook_id= $user; $sql="insert INTO $tbl_name(name, facebook_id)values('$name', '$facebook_id')"; $result=mysql_query($sql); echo'welcome '.$name; <connect and insert data to database with welcome message> <Home page> -30-
Friend.html Σε αυτό το μέρος του κώδικα της εφαρμογής γίνεται ζήτηση της λίστας φίλων του χρήστη, η δημιουργία καινούργιου πίνακα στον μη υπάρχον χρήστη και η πρόσθεση των φίλων στον αντίστοιχο πίνακα. Στον υπάρχοντα χρήστη γίνεται απλά πρόσθεση των καινούργιων φίλων που δεν ήταν στον πίνακα από την τελευταία φορά που χρησιμοποιήθηκε η εφαρμογή. $sql = "CREATE TABLE IF NOT EXISTS ".$name."( ". "id INT NOT NULL AUTO_INCREMENT, ". "name VARCHAR(100) NOT NULL, ". "facebook_id BIGINT(64) NOT NULL UNIQUE, ". "PRIMARY KEY ( id ))ENGINE=InnoDB DEFAULT CHARACTER SET=utf8; "; $retval = mysql_query( $sql, $conn ); if(! $retval ) { die('could not create table: '. mysql_error()); foreach ($friendslists as $friends) { foreach ($friends as $friend) { $id = $friend['id']; $f_name = $friend['name']; $sql="insert INTO $name(name, facebook_id)values('$f_name', '$id')"; $result=mysql_query($sql); < δημιουργία πίνακα και πρόσθεση φίλων > Μετά τον έλεγχο δίνεται στον χρήστη η δυνατότητα να κάνει αναζήτηση στον πίνακα που έχει τους φίλους του με χρήση απλού κώδικα PHP για αναζήτηση με MySQL. if (strlen($search_name)>=4){ $query = "SELECT `name`,`facebook_id` FROM ".$name." WHERE `name` LIKE '%".$search_name."%' "; $query_run = mysql_query($query); if (mysql_num_rows($query_run)>=1){ echo "<table >"; while($query_row = mysql_fetch_array($query_run)){ $friend_name = $query_row['name']; $friend_id = $query_row['facebook_id']; echo "<tr>"; echo "<img src=\"https://graph.facebook.com/".$friend_id."/picture\" />"; echo " ". $friend_name. " "; echo "</tr>"; -31-
echo "</table>"; else { echo 'No Friends found.'; <αναζήτησης φίλων> Στην περίπτωση που η αναζήτηση δεν βρίσκει κανένα φίλο στην λίστα εμφανίζει ανάλογο μήνυμα προειδοποίησης. Η επιτυχής αναζήτηση επιστρέφει όλους τους φίλους που έχουν το όνομα που εισήγαγε ο χρήστης, εμφανίζεται η φωτογραφία προφίλ του κάθε φίλου και δίπλα το όνομα. <επιτυχημένη ή μη αναζήτηση> Με την επιτυχή ολοκλήρωση της αναζήτησης φίλου προσθέτονται τα στοιχεία του στην ανάλογη θέση της βάσης δεδομένων ώστε να έχει στο τελευταίο βήμα η εφαρμογή εύκολη πρόσβαση στα στοιχεία. -32-
Find_location.html Είναι το τελευταίο βήμα λειτουργίας της εφαρμογής. Δουλεύει ζητώντας αρχικά από το facebook όλα τα δεδομένα που αφορούν κοινοποιήσεις που έγιναν από τον φίλο. $check_in = $facebook->api('/v1.0/'.$friend_id.'/checkins'); $f_status = $facebook->api('/v1.0/'.$friend_id.'/statuses'); <κωδικας ζήτησης κοινοποιήσεων> Παίρνοντας αυτά τα δεδομένα η εφαρμογή δίνει στον χρήστη να διαλέξει με βάση τα κριτήρια που επιθυμεί να δει το αποτέλεσμα. Τα κριτήρια είναι με βάση ημέρας ή ώρας κοινοποίησης ή ημέρας και ώρας κοινοποίησης ταυτόχρονα. <form action="index.php?page=find_location" method="post"> Choose day: <select name="day"> <option value="">select...</option> <option value="monday">monday</option> <option value="tuesday">tuesday</option> <option value="wednesday">wednesday</option> <option value="thursday">thursday</option> <option value="friday">friday</option> <option value="saturday">saturday</option> <option value="sunday">sunday</option> </select> <input type="submit" value="submit Day" /> <code εισαγωγής κριτηρίων με βάση ημέρας> if($day == $p_day ){ echo $day." "; echo $time." "; Λαμβάνοντας τα επιθυμητά κριτήρια που διάλεξε ο χρήστης γίνεται η αναζήτηση για όλες τις κοινοποιήσεις που έγιναν με βάση αυτά αλλά ταυτόχρονα ελέγχονται αν υπάρχουν στοιχεία τοποθεσίας στις κοινοποιήσεις. echo $places['name']." "; echo "</br>"; echo $location['city']." "; echo $location['country']." "; $mark_name = $places['name']; $map_lat = $location['latitude']; $map_lon = $location['longitude']; -33-
$locations[$i] = array($mark_name,$map_lat,$map_lon); ++$i; echo "</br>"; echo "</br>"; <έλεγχος με βάση τα κριτήρια> Αποθηκεύοντας τα στοιχεία που αφορούν την τοποθεσία (όνομα τοποθεσίας, συντεταγμένες) σε ένα πίνακα με τον κατάλληλο τρόπο ώστε να γίνει η χρήση αυτών των δεδομένων στον ηλεκτρονικό χάρτη. Όταν ο έλεγχος ολοκληρώνεται με επιτυχία παίρνοντας όλες τις τοποθεσίες, ο πίνακας που έχει τα δεδομένα στέλνεται στο JavaScript κώδικα του ηλεκτρονικού χάρτη μαρκάροντας πάνω του την θέση κάθε τοποθεσίας. <div id="map"></div> <script type="text/javascript"> // Define your locations: HTML content for the info window, latitude, longitude <?php $js_array = json_encode($locations); echo "var locations = ".$js_array.";";?> // Setup the different icons and shadows var iconurlprefix = 'http://maps.google.com/mapfiles/ms/icons/'; var icons = [ iconurlprefix + 'red-dot.png', iconurlprefix + 'green-dot.png', iconurlprefix + 'blue-dot.png', iconurlprefix + 'orange-dot.png', iconurlprefix + 'purple-dot.png', iconurlprefix + 'pink-dot.png', iconurlprefix + 'yellow-dot.png' ] var icons_length = icons.length; var shadow = { anchor: new google.maps.point(22,39), url: iconurlprefix + 'msmarker.shadow.png' ; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 1, center: new google.maps.latlng(39.75, 22.85), maptypeid: google.maps.maptypeid.roadmap, maptypecontrol: false, streetviewcontrol: false, pancontrol: false, zoomcontroloptions: { position: google.maps.controlposition.left_bottom -34-
); var infowindow = new google.maps.infowindow({ maxwidth: 160 ); var marker; var markers = new Array(); var iconcounter = 0; // Add the markers and infowindows to the map for (var i = 0; i < locations.length; i++) { marker = new google.maps.marker({ position: new google.maps.latlng(locations[i][1], locations[i][2]), map: map, icon : icons[iconcounter], shadow: shadow ); markers.push(marker); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(locations[i][0]); infowindow.open(map, marker); )(marker, i)); iconcounter++; // We only have a limited number of possible icon colors, so we may have to restart the counter if(iconcounter >= icons_length){ iconcounter = 0; function AutoCenter() { // Create a new viewpoint bound var bounds = new google.maps.latlngbounds(); // Go through each... $.each(markers, function (index, marker) { bounds.extend(marker.position); ); // Fit these bounds to the map map.fitbounds(bounds); AutoCenter(); </script> <code Google maps> Στο τέλος εμφανίζονται οι τοποθεσίες με τα εξής στοιχεία: ημέρα, ώρα, όνομα τοποθεσίας, πόλη, χώρα και στο πλάι εμφανίζεται ο ηλεκτρονικός χάρτης με τις αντίστοιχες τοποθεσίες (). -35-
Τελικό αποτέλεσμα Το Facebook προσφέρει για κάθε εφαρμογή δωρεάν διαγράμματα που δείχνουν πόσοι χρήστες χρησιμοποιούν την εφαρμογή με βάση την ημέρα, εβδομάδα και μήνα. Επίσης δίνει και ένα άλλο διάγραμμα που δείχνει πόσες κλήσεις γίνονται από την εφαρμογή στο Facebook, πόσα λάθη δεδομένων γίνονται στην μεταφορά και τον μέσο όρο χρόνου ολοκλήρωσης διαδικασίας μεταφοράς δεδομένων. Application Users -36-
<API calls> <API Errors> -37-
-38- <Average Reuest Time>
5 Συμπέρασμα Όπως προκύπτει από όσα αναφέρθηκαν παραπάνω, οι χρήστες των κοινωνικών δικτύων κοινοποιούν πολλές προσωπικές και σημαντικές λεπτομέρειες χωρίς να αντιλαμβάνονται την αξία που μπορεί να έχουν για κάποιον άλλο. Με την αλλαγή της πολιτικής του facebook, για την οποία έγινε λόγος προηγουμένως, αυτές οι πληροφορίες απέκτησαν ένα "πλέγμα προστασίας" από την 30η Απριλίου και μετά. Η εργασία μας όμως κατέδειξε ότι μια υπό ανάπτυξη εφαρμογή, μπορεί να δουλεύει με την παλιά πολιτική για έναν χρόνο, χωρίς να γίνεται αντιληπτή από τους χρήστες, παρόλο που δεν έχει πάρει έγκριση από το facebook πριν τις 30 Απριλίου. Εφόσον υπάρξει η επιθυμία η εφαρμογή αυτή να λειτουργήσει μέσα στα πλαίσια της νέας πολιτικής του facebook, θα πρέπει να γίνουν ορισμένες αλλαγές. Πιο συγκεκριμένα: Δημιουργία πίνακα στη βάση δεδομένων της εφαρμογής, για κάθε έναν από τους χρήστες της, όπου θα αποθηκεύονται τα δεδομένα με τις τοποθεσίες του καθενός από αυτούς. Έλεγχος κάθε φορά αν οι εκάστοτε χρήστες της εφαρμογής είναι μεταξύ τους φίλοι στο facebook. Τέλος, εφόσον ο παραπάνω έλεγχος είναι επιτυχής, τότε θα δίνεται η άδεια στον χρήστη της εφαρμογής να κάνει αναζήτηση δεδομένων τοποθεσίας στον αντίστοιχο πίνακα του φίλου του. -39-
Βιβλιογραφία [1] https://developers.facebook.com/docs/ [2] https://developers.facebook.com/docs/reference/php/3.2.3 [3] PHP και HTML5/CSS3 tutorials http://thenewboston.org/tutorials.php [4] http://www.php.net/ [5] http://www.w3schools.com/ [6] https://developers.google.com/maps/documentation/javascript/tutorial [7] http://stackoverflow.com/ -40-
Παράρτημα <?php require 'src/facebook.php'; define('facebook_app_id','198476713684309'); define('facebook_secret','65393c843afcc9e08a6ba9c2460206c9'); $facebook = new Facebook(array( 'appid' => FACEBOOK_APP_ID, 'secret' => FACEBOOK_SECRET, )); $user = $facebook->getuser(); if ($user) { try { $user_profile = $facebook->api('/v1.0/me'); catch (FacebookApiException $e) { error_log($e); $user = null; if ($user) { $logouturl = $facebook->getlogouturl(); else { $loginurl = $facebook->getloginurl(); $friendslists = $facebook->api('v1.0/me/friends');?> <?php include("includes/header.html"); if($_get['page']=="friends"){ include("includes/friends.html"); else if($_get['page']=="find_location"){ include("includes/find_location.html"); else{ include("includes/home.html"); include("includes/footer.html");?> index.php -41-
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="css/app_stylesheet.css" type="text/css" /> <link rel="stylesheet" href="css/cbdb-btn.css" /> <script src="https://maps.google.com/maps/api/js?key=aizasydvrgavzqb2inecs5tm9_wkci3yini5y2y &sensor=true"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.1.min.js"></script> </head> <body> <div id=navbar> <ul class="cbdb-menu"> <li><a href="index.php" class="red">home</a> </li> <li><a href="index.php?page=friends" class="green">friends</a></li> <li><a href="index.php?page=find_location" class="yellow">find location</a></li> </ul> <br clear="left" /> </div> header.html <div id="app"><h1> <?php if ($user):?> <?php $host="localhost"; $username="facebook"; $password="xttx!ox,tii"; $db_name="application"; $tbl_name="app_users"; $link= mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name", $link)or die("cannot select DB"); $name=$user_profile['name']; $facebook_id= $user; $sql="insert INTO $tbl_name(name, facebook_id)values('$name', '$facebook_id')"; $result=mysql_query($sql); echo'welcome '.$name;?> <?php else:?> You are not Connected. </h1> <?php endif?> <h2><?php if ($user):?><img src="https://graph.facebook.com/<?php echo $user;?>/picture?type=large" height="250" /><?php endif?></h2> -43-
<h4><?php if ($user):?><?php else:?><a href="<?php echo $loginurl;?>">login with Facebook</a><?php endif?></h4> </div> home.html <?php if ($user):?> <?php $name='n_'.$user_profile['id']; $namef='s_'.$user_profile['id']; $host="localhost"; $username="facebook"; $password="xttx!ox,tii"; $db_name="application"; $conn = mysql_connect($host, $username, $password); if(! $conn ) { die('could not connect: '. mysql_error()); mysql_select_db("$db_name", $conn)or die("cannot select DB"); $sql = "CREATE TABLE IF NOT EXISTS ".$name."( ". "id INT NOT NULL AUTO_INCREMENT, ". "name VARCHAR(100) NOT NULL, ". "facebook_id BIGINT(64) NOT NULL UNIQUE, ". "PRIMARY KEY ( id ))ENGINE=InnoDB DEFAULT CHARACTER SET=utf8; "; $retval = mysql_query( $sql, $conn ); if(! $retval ) { die('could not create table: '. mysql_error()); foreach ($friendslists as $friends) { foreach ($friends as $friend) { $id = $friend['id']; $f_name = $friend['name']; $sql="insert INTO $name(name, facebook_id)values('$f_name', '$id')"; $result=mysql_query($sql);?> <div id="app"> <form action="index.php?page=friends" method="post"> Friends name: <input type="text" name="search_name"><input type="submit" value="find"> </form> <br> <?php $i=0; if(isset($_post['search_name'])){ $search_name = $_POST['search_name']; if(!empty($search_name)){ -44-
if (strlen($search_name)>=4){ $query = "SELECT `name`,`facebook_id` FROM ".$name." WHERE `name` LIKE '%".$search_name."%' "; $query_run = mysql_query($query); if (mysql_num_rows($query_run)>=1){ echo "<table >"; while($query_row = mysql_fetch_array($query_run)){ $friend_name = $query_row['name']; $friend_id = $query_row['facebook_id']; echo "<tr>"; echo "<img src=\"https://graph.facebook.com/".$friend_id."/picture\" />"; echo " ". $friend_name. " "; echo "</tr>"; echo "</table>"; else { echo 'No Friends found.'; $sql1 = "CREATE TABLE IF NOT EXISTS ".$namef."( ". "id INT NOT NULL AUTO_INCREMENT, ". "name VARCHAR(100) NOT NULL, ". "facebook_id BIGINT(64) NOT NULL, ". "PRIMARY KEY ( id ))ENGINE=InnoDB DEFAULT CHARACTER SET=utf8; "; $retval1 = mysql_query( $sql1, $conn ); if(! $retval1 ) { die('could not create table: '. mysql_error()); $sql1="insert INTO $namef(name, facebook_id)values('$friend_name', '$friend_id')"; $result1=mysql_query($sql1);?> <?php else:?> You are not Connected. <?php endif?> </div> friends.html -45-
<?php if ($user):?> <?php $namef='s_'.$user_profile['id']; $host="localhost"; $username="facebook"; $password="xttx!ox,tii"; $db_name="application"; $link = mysql_connect($host, $username, $password); if(! $link ) { die('could not connect: '. mysql_error()); mysql_select_db("$db_name", $link)or die("cannot select DB"); $query = "SELECT * FROM ".$namef.""; $query_run = mysql_query($query); if (mysql_num_rows($query_run)>=1){ while($query_row = mysql_fetch_array($query_run)){ $friend_id = $query_row['facebook_id']; $friend_name = $query_row['name']; $check_in = $facebook->api('/v1.0/'.$friend_id.'/checkins'); $f_status = $facebook->api('/v1.0/'.$friend_id.'/statuses');?> <div id="app"> <p>find your Friend location by choosing day or Hour</p> <p><form action="index.php?page=find_location" method="post"> Choose day: <select name="day"> <option value="">select...</option> <option value="monday">monday</option> <option value="tuesday">tuesday</option> <option value="wednesday">wednesday</option> <option value="thursday">thursday</option> <option value="friday">friday</option> <option value="saturday">saturday</option> <option value="sunday">sunday</option> </select> <input type="submit" value="submit Day" /> <u>or</u> -46-
<form action="index.php?page=find_location" method="post"> Choose Hour: <select name="hour"> <option value="">select...</option> <option value="0">00</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> </select> <input type="submit" value="submit Time" /> </form> </p> <?php $i=0; if($_post['day']){ $p_day = $_POST['Day']; $friend = $p_day.'_'.$friend_id; echo "<b>your friend:<u>".$friend_name."'s</u> location based on ".$p_day." is:</b>"; echo "</br>"; foreach ($f_status as $statuses){ foreach ($statuses as $status){ $places = $status['place']; $location = $places['location']; if($places['name']){ $day = date('l',strtotime($status['updated_time'])); $time = date('h:i:s',strtotime($status['updated_time'])); if($day == $p_day ){ -47-
echo $day." "; echo $time." "; echo $places['name']." "; echo "</br>"; echo $location['city']." "; echo $location['country']." "; $mark_name = $places['name']; $map_lat = $location['latitude']; $map_lon = $location['longitude']; $locations[$i] = array($mark_name,$map_lat,$map_lon); ++$i; echo "</br>"; echo "</br>"; foreach ($check_in as $checkins){ foreach ($checkins as $checkin){ $places = $checkin['place']; $location = $places['location']; $day = date('l',strtotime($checkin['created_time'])); $time = date('h:i:s',strtotime($checkin['created_time'])); if($day==$p_day){ echo $day." "; echo $time." "; echo $places['name']." "; -48-
echo "</br>"; echo $location['city']." "; echo $location['country']." "; $mark_name = $places['name']; $map_lat = $location['latitude']; $map_lon = $location['longitude']; $locations[$i] = array($mark_name,$map_lat,$map_lon); ++$i; echo "</br>"; echo "</br>"; if($_post['hour']){ $p_hour = $_POST['Hour']; $friend = 'H_'.$p_Hour.'_'.$friend_id; echo "<b>your friend:<u>".$friend_name."'s</u> location based on ".$p_hour." is:</b>"; echo "</br>"; foreach ($f_status as $statuses){ foreach ($statuses as $status){ $places = $status['place']; $location = $places['location']; if($places['name']){ $day = date('l',strtotime($status['updated_time'])); $time = date('h:i:s',strtotime($status['updated_time'])); $H_time = date('h',strtotime($status['updated_time'])); if($h_time == $p_hour){ echo $day." "; echo $time." "; echo $places['name']." "; -49-