ΤΕΙ ΑΝΑΤΟΛΙΚΗΣ ΜΑΚΕΔΟΝΙΑΣ ΚΑΙ ΘΡΑΚΗΣ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ

Transcript

1 ΤΕΙ ΑΝΑΤΟΛΙΚΗΣ ΜΑΚΕΔΟΝΙΑΣ ΚΑΙ ΘΡΑΚΗΣ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΑΝΑΠΤΥΞΗ ΔΙΑΔΙΚΤΥΑΚΗΣ ΕΦΑΡΜΟΓΗΣ ΜΕ ΤΗ ΧΡΗΣΗ ΑΝΑΠΤΥΞΙΑΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΓΙΑ ΕΞΥΠΝΕΣ ΤΗΛΕΟΡΑΣΕΙΣ Υπό ΚΟΥΤΟΥ ΙΩΑΝΝΑ ΠΑΪΖΗ AIΚΑΤΕΡΙΝH Επίβλεψη Δρ. ΚΑΡΑΜΠΑΤΖΑΚΗΣ ΔΗΜΗΤΡΙΟΣ Καβάλα 2014

2 Η παρούσα εργασία αφιερώνεται με απεριόριστη αγάπη στους γονείς μας. Οι συγγραφείς Κουτού Ιωάννα Παΐζη Αικατερίνη

3 ΕΥΧΑΡΙΣΤΙΕΣ Η παρούσα πτυχιακή εργασία με θέμα Ανάπτυξη διαδικτυακής εφαρμογής με τη χρήση αναπτυξιακού λογισμικού για έξυπνες τηλεοράσεις, πραγματοποιήθηκε στο πλαίσιο της πτυχιακής εργασίας του τμήματος Μηχανικών Πληροφορικής του Τεχνολογικού Εκπαιδευτικού Ιδρύματος ΑΜΘ. Στο σημείο αυτό αισθανόμαστε την ανάγκη να εκφράσουμε τις ειλικρινείς και θερμές ευχαριστίες μας σε όσους συνέβαλαν στην ολοκλήρωση αυτής της προσπάθειας: Και πρώτα απ όλα, τον επιβλέποντα καθηγητή μας κ. Δ. Καραμπατζάκη για τη συνεχή καθοδήγηση, τις ουσιώδεις συμβουλές, καθώς και κατά την εκτέλεση του πειραματικού μέρους όσο και κατά τη συγγραφή της εργασίας σε όλο αυτό το διάστημα. Επίσης θα θέλαμε να ευχαριστήσουμε θερμά τον συμφοιτητή μας Δημήτρη Χατζιόγλου για τις χρήσιμες συμβουλές του στην πτυχιακής μας εργασία. Τέλος, θα θέλαμε να ευχαριστήσουμε τις οικογένειες μας για την υποστήριξη που μας επέδειξαν, οι οποίοι στήριξαν τις σπουδές μας, φροντίζοντας για την καλύτερη δυνατή μόρφωση μας καθώς και σε όλους του φίλους μας για την συμπαράσταση και την υπομονή τους.

4 ΠΕΡΙΛΗΨΗ Ο σχεδιασμός και η υλοποίηση εφαρμογών για έξυπνες τηλεοράσεις είναι ένας νέος τεχνολογικός χώρος που θα αναπτυχθεί τα επόμενα χρόνια. Η παρούσα πτυχιακή πραγματεύεται την υλοποίηση μιας διαδικτυακής εφαρμογής για το φεστιβάλ βιομηχανικής πληροφορικής (i2fest). Η προτεινόμενη εφαρμογή είναι ανοικτού κώδικα και βασίζεται σε διαδικτυακές τεχνολογίες όπως HTML, CSS, JavaScript και jquery. Το λογισμικό προσφέρει δυνατότητες προσομοίωσης των εφαρμογών με τον διαθέσιμο Samsung TV Emulator. Για τη δημιουργία της παρούσας πτυχιακής εργασίας χρησιμοποιήθηκαν το Samsung SDK 4.X, Eclipse, HTML, CSS, JavaScript και jquery.

5 ABSTRACT Design and implementation of applications for smart TVs is a new technological area that will be developed in the coming years. This work deals with the implementation of a web application for the industrial informatics festival (i2fest). The implemented application is open source and based on web technologies like HTML, CSS, JavaScript and jquery. The Samsung TV Emulator software offers simulation capabilities of the applications. To implement this app used the Samsung SDK 4.X, Eclipse, HTML, CSS, JavaScript and jquery.

6 ΠΕΡΙΕΧΟΜΕΝΑ ΠΙΝΑΚΑΣ ΕΙΚΟΝΩΝ...7 Πρόλογος...8 Κεφάλαιο 1ο: Εισαγωγή στην Έξυπνη τηλεόραση ή smart TV...9 Τι είναι η Έξυπνη τηλεόραση ή smart TV...10 Έξυπνες τηλεοράσεις & οι εφαρμογές τους...12 Έξυπνη Τηλεόραση της Samsung...13 Εφαρμογές της Samsung smart TV...13 Κεφάλαιο 2ο:Περιγραφή Υλοποίηση...19 Αντικείμενο Πτυχιακής...20 Εργαλεία ανάπτυξης...21 Γλώσσες Προγραμματισμού...21 Βοηθητικά εργαλεία, προγράμματα ή πρότυπα κώδικα...22 Προβλήματα κατά την υλοποίηση...23 Επεξήγηση εφαρμογής που υλοποιήσαμε...24 Κεφάλαιο 3ο:...32 Συμπεράσματα...33 Μελλοντικές Επεκτάσεις...33 Βιβλιογραφία...33 Παράρτημα I...35

7 ΠΙΝΑΚΑΣ ΕΙΚΟΝΩΝ Εικόνα 1: Smart Hub - Γνωρίστε το νέο κέντρο ψυχαγωγίας...13 Εικόνα 2: Samsung Smart TV Applications...14 Εικόνα 3: Web browser...15 Εικόνα 4: Social TV...15 Εικόνα 5: All share...16 Εικόνα 6: Ασύρματη σύνδεση...17 Εικόνα 7: Search all...18 Εικόνα 8: Το περιβάλλον του eclipse...21 Εικόνα 9: slideshow code...22 Εικόνα 10: video code...22 Εικόνα 11: i2fest-αρχική Σελίδα...24 Εικόνα 12: Help - Κουμπί Βοήθειας...25 Εικόνα 13: Σελίδα "Read More"...26 Εικόνα 14: Σελίδα "Εκδηλώσεις"...27 Εικόνα 15: Σελίδα "Η Έκθεση"...28 Εικόνα 16: Σελίδα "Στιγμές"...29 Εικόνα 17: Σελίδα "Χορηγοί"...30 Εικόνα 18: Σελίδα "Πως θα μας βρείτε"...31 Εικόνα 19: Κατάργηση του υπάρχον SDK...37 Εικόνα 20: Επιλογή αποθήκευσης του SDK...38 Εικόνα 21: Όταν ολοκληρωθεί η διαδικασία απεγκατάστασης επιλέξτε το κουμπί Close και κάνετε επανεκκίνηση στον υπολογιστή...38 Εικόνα 22: Επιλογή γλώσσας...39 Εικόνα 23: Επιλέγετε το κουμπί Next...39 Εικόνα 24: Επιλέγετε την αποδοχή όρων Άδειας Χρήσης και στη συνέχεια επιλέγετε το κουμπί Next...40 Εικόνα 25: Επιλέγετε τα στοιχεία που θέλετε να εγκαταστήσετε και στη συνέχεια επιλέγετε το κουμπί Next...40 Εικόνα 26: Επιλέγετε την τοποθεσία που θα θέλατε να εγκαταθεί το πρόγραμμα και στη συνέχεια επιλέγετε το κουμπί Next...41 Εικόνα 27: Επιλέγετε "Start Folder Menu"και επιλέγετε το κουμπί "Install"...41 Εικόνα 28: Επιλέγετε Yes, I want to install Apache now και στη συνέχεια επιλέγετε Next"για να ακολουθήσετε τις οδηγίες για την εγκατάσταση του Apache...42 Εικόνα 29: Επιλέγετε αν θέλετε να επανεκκινήσετε τον υπολογιστή σας τώρα ή αργότερα και πατήστε το κουμπί "Finish"για να ολοκληρώσετε την εγκατάσταση...42 Εικόνα 30: Η Samsung Smart TV SDK έχει πλέον εγκατασταθεί και στην επιφάνεια εργασίας σας θα περιέχει τα παραπάνω εικονίδια...43

8 ΠΡΌΛΟΓΟΣ Αντικείμενο της παρούσας εργασίας είναι η ανάπτυξη διαδικτυακής εφαρμογής με χρήση αναπτυξιακού λογισμικού για έξυπνες τηλεοράσεις, συγκεκριμένα η δημιουργία της ιστοσελίδας i2fest σε εφαρμογή στην έξυπνη τηλεόραση ή αλλιώς smart tv της Samsung. Η εργασία δομείται σε κεφάλαια ως εξής: Στο Πρώτο Κεφάλαιο γίνεται μια εισαγωγή στην έξυπνη τηλεόραση και αντίστοιχα στην έξυπνη τηλεόραση της Samsung smart tv. Γίνεται μια συνοπτική περιγραφή τι είναι έξυπνη τηλεόραση, ποίες είναι οι εφαρμογές της και φυσικά γίνεται αναφορά στην Samsung smart tv και τι υπηρεσίες προσφέρει στους χρήστες της. Στο Δεύτερο Κεφάλαιο αναλύεται το αντικείμενο της παρούσας πτυχιακής, ο τρόπος που είναι δομημένη η εφαρμογή, καθώς και τι επιλογές έχει ο χρήστης για να μπορέσει να περιηγηθεί σε αυτήν. Επίσης, γίνεται μια αναφορά στα εργαλεία και το περιβάλλον που έχουμε χρησιμοποιήσει, τις γλώσσες προγραμματισμού που χρησιμοποιήσαμε για την διεκπεραίωση της εφαρμογής. Επίσης παραθέτεται ότι βοηθητικό κώδικα χρησιμοποιήσαμε καθώς και ότι πρόβλημα εμφανίστηκε κατά την υλοποίηση του λογισμικού μας. Στο Τρίτο Κεφάλαιο παρουσιάζουμε τις λύσεις στα προβλήματα που αναπτύξαμε στο δεύτερο κεφάλαιο, τις πιθανές μελλοντικές επεκτάσεις της πτυχιακής μας και τέλος στο Παράρτημα I παρουσιάζεται το εγχειρίδιο δημιουργίας εφαρμογής σε έξυπνη τηλεόραση.

9 ΚΕΦΆΛΑΙΟ 1 Ο : ΕΙΣΑΓΩΓΉ ΣΤΗΝ ΈΞΥΠΝΗ ΤΗΛΕΌΡΑΣΗ Ή SMART TV

10 Τι είναι η Έξυπνη τηλεόραση ή smart TV Η έξυπνη τηλεόραση, περιγράφει μια τάση ενσωμάτωσης του Internet και των Web 2.0 χαρακτηριστικών με τις τηλεοράσεις και των set-top boxes, καθώς επίσης και μια τεχνολογική σύγκλιση μεταξύ των υπολογιστών και των τηλεοράσεων/ set-top boxes. Το Web 2.0 περιγράφει τη νέα γενιά του Παγκόσμιου Ιστού η οποία βασίζεται στην όλο και μεγαλύτερη δυνατότητα των χρηστών του Διαδικτύου να μοιράζονται πληροφορίες και να συνεργάζονται online. Είναι μια δυναμική διαδικτυακή πλατφόρμα στην οποία μπορούν να αλληλεπιδρούν χρήστες χωρίς εξειδικευμένες γνώσεις σε θέματα υπολογιστών και δικτύων. Ένα set-top box (STB) ή μονάδα set-top (ΙΤΜ) είναι μια συσκευή πληροφοριών που συνδέεται με μια τηλεόραση και μια εξωτερική πηγή σήματος, μετατρέποντας το σήμα πηγής σε μια μορφή που μπορεί στη συνέχεια να εμφανίζονται στην οθόνη της τηλεόρασης ή άλλης συσκευής προβολής. Χρησιμοποιούνται σε καλωδιακή τηλεόραση, δορυφορική τηλεόραση, και over-the-air τηλεοπτικά συστήματα (συστήματα που χρησιμοποιούν ραδιοσήματα για κεραίες και δέκτες για τη μετάδοση και λήψη τηλεόρασης), καθώς επίσης και άλλες χρήσεις. Οι συσκευές έχουν μεγαλύτερη εστίαση σε: i. Online διαδραστικά πολυμέσα, τα οποία αναφέρονται συνήθως σε προϊόντα και υπηρεσίες στην ψηφιακή υπολογιστικών συστημάτων που να ανταποκρίνονται στις ενέργειες του χρήστη με την παρουσίαση του περιεχομένου, όπως κείμενο, γραφικά, κινούμενα σχέδια, βίντεο, ήχου, παιχνίδια, κλπ. ii. Internet TV, (ή online τηλεόραση) είναι η ψηφιακή διανομή τηλεοπτικού περιεχομένου μέσω του Διαδικτύου. Τηλεόραση στο Διαδίκτυο είναι ένας γενικός όρος που καλύπτει την παράδοση των τηλεοπτικές εκπομπές και βίντεο άλλου περιεχομένου μέσω του Διαδικτύου με την τεχνολογία video streaming, συνήθως από μεγάλες παραδοσιακών τηλεοπτικών φορέων. Δεν περιγράφει μια τεχνολογία που χρησιμοποιείται για την παροχή περιεχομένου. iii. Over-the-top content το οποίο αναφέρεται στην παράδοση του βίντεο, ήχου και άλλα μέσα

11 ενημέρωσης μέσω του Internet, χωρίς πολλαπλό σύστημα χειρισμού που να εμπλέκεται στον έλεγχο ή τη διανομή του περιεχομένου. iv. On-demand streaming media που είναι πολυμέσα που συνεχώς λαμβάνονται και παρουσιάζονται σε έναν τελικό χρήστη κατά την παράδοσή τους από τον πάροχο. Μικρότερη είναι η έμφαση στα παραδοσιακά ραδιοτηλεοπτικά μέσα από τις παραδοσιακές τηλεοράσεις και set-top boxes. Παρόμοια με το διαδίκτυο, τα Web widgets (μια παροδική ή βοηθητική εφαρμογή, που καταλαμβάνει μόνο ένα τμήμα μιας ιστοσελίδας και κάνει κάτι χρήσιμο με πληροφορίες που προέρχονται από άλλες ιστοσελίδες) και οι εφαρμογές λογισμικού έχουν ενσωματωθεί στα σύγχρονα έξυπνα τηλέφωνα, έτσι και ο όρος έξυπνη τηλεόραση είναι συγγενής με το έξυπνο τηλέφωνο. Η τεχνολογία που καθιστά δυνατή την έξυπνη τηλεόραση είναι επίσης ενσωματωμένη και σε συσκευές όπως set-top boxes, Blu-ray (οπτικός δίσκος υψηλής πυκνότητας για την αποθήκευση ψηφιακών πληροφοριών, συμπεριλαμβανομένου υψηλής ευκρίνειας βίντεο), κονσόλες βιντεοπαιχνιδιών, συστήματα τηλεοράσεων για ξενοδοχεία, και άλλες συσκευές. Αυτές οι συσκευές επιτρέπουν στους χρήστες να αναζητήσουν και να βρουν βίντεο, ταινίες, φωτογραφίες και διάφορα άλλα στοιχεία στο διαδίκτυο, σε ένα τοπικό καλωδιακό κανάλι τηλεόρασης, σε ένα δορυφορικό κανάλι τηλεόρασης ή σε μια τοπική μονάδα αποθήκευσης. Μία συσκευή έξυπνης τηλεόρασης είναι είτε μια τηλεόραση με ενσωματωμένες δυνατότητες Ίντερνετ ή ένα set-top box για την τηλεόραση που προσφέρει πιο προηγμένη υπολογιστική ικανότητα και δυνατότητα σύνδεσης από μία σύγχρονη τυπική τηλεόραση. Η έξυπνη τηλεόραση μπορεί να θεωρηθεί ως μία συσκευή πληροφοριών ή το υπολογιστικό σύστημα από ένα φορητό υπολογιστή που ενσωματώνεται σε μία μονάδα τηλεόρασης, αφού συχνά επιτρέπει στο χρήστη να εγκαταστήσει και να τρέξει πιο προηγμένες εφαρμογές ή plugins/addons στοιχεία λογισμικού που προσθέτουν ένα ειδικό χαρακτηριστικό για μια υπάρχουσα εφαρμογή λογισμικού) τα οποία βασίζονται σε μια συγκεκριμένη πλατφόρμα.οι έξυπνες τηλεοράσεις τρέχουν πλήρες λειτουργικό σύστημα ή το κινητό λογισμικό του λειτουργικού συστήματος παρέχοντας μια πλατφόρμα για προγραμματιστές εφαρμογών.

12 Έξυπνες τηλεοράσεις & οι εφαρμογές τους Η έξυπνη τηλεόραση επίσης παρέχει πρόσβαση σε, user-generated content, είτε να είναι αποθηκευμένο σε έναν εξωτερικό σκληρό δίσκο είτε σε ένα αποθηκευτικό νέφος (ένα μοντέλο της δικτυακής αποθήκευσης των επιχειρήσεων όπου τα δεδομένα αποθηκεύονται σε εικονικές δεξαμενές αποθήκευσης), το οποίο καλύπτει ένα ευρύ φάσμα περιεχομένου πολυμέσων που είναι διαθέσιμα σε μια σειρά από σύγχρονες τεχνολογίες επικοινωνιών (όπως βάσεις δεδομένων ερώτησης-απάντησης, ψηφιακό βίντεο, το blogging, podcasting, forums, αναθεώρηση -sites, την κοινωνική δικτύωση, social media, το κινητό τηλέφωνο της φωτογραφίας και wikis). Επίσης, σε διαδραστικές υπηρεσίες και σε εφαρμογές διαδικτύου, όπως για παράδειγμα το YouTube. Οι συσκευές της έξυπνης τηλεόρασης διευκολύνουν την επιμέλεια του παραδοσιακού περιεχομένου συνδυάζοντας πληροφορίες από το διαδίκτυο με περιεχόμενο από τους παρόχους τηλεοράσεων. Οι υπηρεσίες προσφέρουν στους χρήστες ένα μέσο να παρακολουθούν και να λαμβάνουν υπενθυμίσεις για τις αγαπημένες τους εκπομπές ή αθλητικά γεγονότα, ή για κάποια αθλητική εκδήλωση, καθώς επίσης και την δυνατότητα να αλλάζουν κανάλια για άμεση προβολή. Τεχνολογία Η ιδέα της έξυπνης τηλεόρασης είναι ακόμη αναδυόμενη, με τα ιδιόκτητα και ανοικτού κώδικα πλαίσια λογισμικού να προωθούνται εμπορικά. Μερικά έχουν τη δυνατότητα να τρέχουν εφαρμογές (μερικές φορές διαθέσιμη μέσω της ψηφιακής πλατφόρμας διανομής εφαρμογών «app store»), διαδραστικό on-demand media, εξατομικευμένες επικοινωνίες, και χαρακτηριστικά κοινωνικής δικτύωσης. Κοινωνικά Δίκτυα Μια σειρά από έξυπνες τηλεοπτικές πλατφόρμες έρχονται προ-εγκατεστημένες, ή μπορούν προαιρετικά να επεκταθούν με δυνατότητες τεχνολογίας κοινωνικών δικτύων. Η προσθήκη του συγχρονισμού της κοινωνικής δικτύωσης στην έξυπνη τηλεόραση και στις HTPC πλατφόρμες μπορεί να παρέχει μια αλληλεπίδραση τόσο στο περιεχόμενο επί της οθόνης όσο και από άλλους θεατές από ότι είναι σήμερα διαθέσιμο για τις περισσότερες τηλεοράσεις, ενώ ταυτόχρονα παρέχει μια περισσότερο κινηματογραφική εμπειρία περιεχομένου από ότι είναι σήμερα διαθέσιμο με τους περισσότερους υπολογιστές.

13 Έξυπνη Τηλεόραση της Samsung Εφαρμογές της Samsung smart TV Smart Hub - Γνωρίστε το νέο κέντρο ψυχαγωγίας Το Smart Hub, αποτελεί το παράθυρο σε έναν καινούργιο κόσμο προηγμένων χαρακτηριστικών που αλλάζει τον τρόπο με τον οποίο παρακολουθείτε τηλεόραση. Με το Search All, έχετε τη δυνατότητα εύκολης και γρήγορης αναζήτησης εφαρμογών, περιεχομένου στο ίντερνετ και σε συνδεδεμένες συσκευές. Ο Web Browser είναι μια δυνατότητα των τηλεοράσεων Smart η οποία παρέχει στον χρήστη μια αδιάλειπτη και απόλυτα ικανοποιητική εμπειρία για πλοήγηση στο ίντερνετ. Χάρη στο Social TV, έχετε τη δυνατότητα πρόσβασης σε υπηρεσίες chatting, στο Facebook και στοtwitter και μπορείτε να σχολιάζετε καθώς βλέπετε τηλεόραση. Εικόνα 1: Smart Hub - Γνωρίστε το νέο κέντρο ψυχαγωγίας

14 Samsung Smart TV Applications Ακριβώς όπως τα τελευταίας τεχνολογίας smart phones, έτσι και οι Smart TVs της Samsung σας προσφέρουν πρόσβαση σε ένα σύνολο εφαρμογών και περιεχομένου ψυχαγωγίας μέσω του Samsung Apps, του πρώτου Application Store για τηλεοράσεις. Επιλέξτε από μια ποικιλία εφαρμογών σε κατηγορίες όπως βίντεο, παιχνίδια, σπορ, πληροφορίες, τρόπος ζωής, κ.λπ. Η πρόσβαση στο Application store είναι πολύ εύκολη και γίνεται μέσω του Smart Hub, με το πάτημα ενός κουμπιού στο τηλεχειριστήριο της τηλεόρασής σας. Ακόμα πιο εύκολο είναι να κατεβάσετε, τις εφαρμογές ώστε να μπορείτε να δείτε ταινίες, video σε high definition, 3D περιεχόμενο, να ενημερωθείτε για τον καιρό και τις τελευταίες ειδήσεις ή να μετατρέψετε την τηλεόρασή σας σε άλμπουμ ψηφιακών φωτογραφιών και να παραμείνετε σε επαφή με τους αγαπημένους σας μέσω ζωντανού video chatting. Καθώς ο αριθμός των εφαρμογών αυξάνεται συνεχώς στην, τηλεόρασή, η εμπειρία θέασης θα συνεχίσει να γίνεται πλουσιότερη και πιο ικανοποιητική. Εικόνα 2: Samsung Smart TV Applications

15 Φυλλομετρητής - Web browser Σας δίνει τη δυνατότητα να πλοηγηθείτε στο ίντερνετ από την τηλεόραση σας. Με τις τηλεοράσεις Smart της Samsung, μπορείτε να πλοηγείστε άνετα στο ίντερνετ χωρίς να ανοίξετε καν τον υπολογιστή σας. Η δυνατότητα Web Browser της τηλεόρασής σας έχει βελτιστοποιηθεί για να σας προσφέρει πραγματικές εμπειρίες πλοήγησης στο ίντερνετ, στη μεγάλη οθόνη. Ακριβώς όπως και στον υπολογιστή σας, μπορείτε να επισκεφθείτε τα αγαπημένα σας site ή να προσθέσετε ιστοσελίδες στα «Αγαπημένα» σας κάνοντας την πλοήγηση εύκολη και άνετη. Εικόνα 3: Web browser Social TV Μέσω της δυνατότητας Social TV της Samsung μείνετε συνδεδεμένοι με τους φίλους και τους συγγενείς σας. Η τηλεόραση δεν είναι πια μια μοναχική απασχόληση. Με το Social TV μπορείτε να μοιραστείτε τις τηλεοπτικές σας εμπειρίες με τους φίλους και τους συγγενείς σας μέσω social networks και υπηρεσιών chat, όπως τα Facebook, Twitter και Google Talk ενώ βλέπετε τηλεόραση! Εικόνα 4: Social TV

16 All share Η δυνατότητα AllShare είναι βασική παράμετρος της εξίσωσης για τη λειτουργία της τηλεόρασης Smart. Χάρη στο AllShare μπορείτε να συνδέετε ασύρματα τις συμβατές κινητές συσκευές σας με την τηλεόραση Smart για να μπορείτε να μεταφέρετε τα περιεχόμενά τους στην τηλεόραση Smart που υποστηρίζει DLNA. Αυτό σημαίνει ότι μπορείτε να μοιραστείτε όλα τα αγαπημένα σας περιεχόμενα, όπως ταινίες, φωτογραφίες και μουσική μέσω των ασύρματων συσκευών σας και της τηλεόρασης Smart και να τα προβάλλετε στη μεγάλη οθόνη. Μέσω της δυνατότητας AllShare, θα μπορείτε να στέλνετε και να λαμβάνετε SMS, ακόμη και να βλέπετε ποιος σας καλεί, συνδέοντας το κινητό σας τηλέφωνο με την τηλεόραση Smart. Εικόνα 5: All share Ασύρματη σύνδεση ή Wireless LAN Built-in Με το Wireless LAN Built-in, μπορείτε να απλοποιήσετε ακόμη περισσότερο τις δυνατότητες συνδεσιμότητας της τηλεόρασής σας χωρίς να προσθέσετε επιπλέον συσκευές, όπως γραμμές LAN ή συσκευές USB, διατηρώντας την ελκυστική της σχεδίαση. Χάρη στο χαρακτηριστικό «One Foot Connection» μπορείτε να ενισχύσετε ακόμη περισσότερο την εμβέλεια συνδεσιμότητας της τηλεόρασής σας, η οποία μπορεί να κάνει ανίχνευση των συμβατών ασύρματων συσκευών που βρίσκονται απόσταση 30 εκατοστών από την τηλεόραση και τον ασύρματο δρομολογητή.

17 Εικόνα 6: Ασύρματη σύνδεση Search All Με τη δυνατότητα Search All του Smart Hub απολαύστε την εύκολη αναζήτηση πληροφοριών ή περιεχομένων που σας προσφέρει. Αναζητήστε περιεχόμενο στο διαδίκτυο και αρχεία όπως video και φωτογραφίες στον υπολογιστή σας ή εξωτερικό σκληρό δίσκο και το κινητό σας τηλέφωνο. Με μερικά κλικ από το τηλεχειριστήριο Touch Control ή την εφαρμογή Samsung Remote στο Smart Phone σας, θα μπορείτε να κάνετε εύκολα αναζήτηση περιεχομένου και να έχετε πρόσβαση σε άλλες δυνατότητες όπως εφαρμογές, κοινωνικά δίκτυα και πολλές άλλες! Βρείτε άμεσα την αγαπημένη σας εφαρμογή και ανακαλύψτε μέσα από την τηλεόρασή σας περιεχόμενο στο YouTube και το Facebook, εισάγοντας απλά τον όρο αναζήτησης! Όλα τα μοντέλα τηλεοράσεων Smart διαθέτουν τη δυνατότητα αναζήτησης μέσω του δικτύου AllShare. Λόγω όμως των πολλαπλών δυνατοτήτων που παρέχουν τα προϊόντα Samsung με λειτουργία Search All, ίσως σε ορισμένα προϊόντα Samsung η αναζήτηση στο ίντερνετ να μην περιλαμβάνεται στο Search All.

18 Εικόνα 7: Search all

19 ΚΕΦΆΛΑΙΟ 2 Ο :ΠΕΡΙΓΡΑΦΉ ΥΛΟΠΟΊΗΣΗ

20 Αντικείμενο Πτυχιακής Η παρούσα πτυχιακή αναφέρετε στην Ανάπτυξη Διαδικτυακής Εφαρμογής με χρήση αναπτυξιακού λογισμικού για Έξυπνες Τηλεοράσεις. Συγκεκριμένα ο προσομοιωτής Smart TV SDK 4.0 της Samsung μας έδωσε τη δυνατότητα να απεικονίσουμε την ιστοσελίδα i2fest, που είναι η επίσημη ιστοσελίδα της διοργάνωσης του φεστιβάλ του τμήματος Μηχανικών Πληροφορικής του Τεχνολογικού Εκπαιδευτικού Ιδρύματος ΑΜΘ. Αναλυτικότερα η εφαρμογή μας θα παρέχει στους χρήστες της Έξυπνης Τηλεόρασης της Samsung να περιηγηθούν στις ενημερωτικές σελίδες όπου αναφέρετε στην δράση του φεστιβάλ. Μέσα από το μενού επιλογής οι χρήστες θα μπορούν να επιλέξουν και να ενημερωθούν αναλυτικά για τους διοργανωτές, τα εκθέματα, τις εκδηλώσεις, τους χορηγούς και φυσικά για το πως μπορούν να παραβρεθούν στο χώρο που διεξάγετε το φεστιβάλ. Επίσης η εφαρμογή περιλαμβάνει βοήθεια, όπου χρειάζεται, για να γίνει πιο εύκολη η περιήγηση του χρήστη στις σελίδες της εφαρμογής και φυσικά περιλαμβάνει και οπτικοακουστικό υλικό από τις στιγμές του φεστιβάλ.

21 Εργαλεία ανάπτυξης Για τη δημιουργία της εφαρμογής μας χρησιμοποιήσαμε το πρόγραμμα ανοικτού κώδικα Samsung TV SDK 4.0 και το Samsung TV Emulator που στηρίζεται στην πλατφόρμα του προγράμματος Eclipse που προσφέρει δυνατότητες προσομοίωσης των εφαρμογών, που μας το παρέχει η επίσημη ιστοσελίδα της Samsung Smart Tv ( Εικόνα 8: Το περιβάλλον του eclipse Γλώσσες Προγραμματισμού Το πρόγραμμα Samsung TV SDK 4.0 είναι ένα λογισμικό ανοικτού κώδικα που βασίζεται σε διαδικτυακές τεχνολογίες όπως HTML και Javascript. Έτσι μας δίνετε η δυνατότητα να δημιουργήσουμε ή να προσαρμόσουμε στον ήδη υπάρχον κώδικα, τον κώδικα μας για την υλοποίηση της εφαρμογής μας. Οι γλώσσες προγραμματισμού που χρησιμοποιήθηκαν για την υλοποίηση της εφαρμογής σε Έξυπνη Τηλεόραση ή Smart Tv είναι: HTML/HTML5 Javascript CCS και φυσικά χρησιμοποιήσαμε τις βιβλιοθήκες jquery & jquery UI.

22 Βοηθητικά εργαλεία, προγράμματα ή πρότυπα κώδικα Κατά την υλοποίηση της εφαρμογής μας δεν χρειάστηκε να χρησιμοποιήσουμε επιπλέον εργαλεία ή προγράμματα μόνο συγκεκριμένα κομμάτια κώδικα που σας παραθέτουμε παρακάτω. Για τη δημιουργία slideshow χρησιμοποιήσαμε τον παρακάτω κώδικα, βέβαια κάναμε τις απαραίτητες αλλαγές για να λειτουργήσει σύμφωνα με τα δεδομένα που εμείς θέλουμε. Εικόνα 9: slideshow code Ο συγκεκριμένος κώδικας διαχειρίζεται εικόνες που εναλλάσσονται μεταξύ τους και αυτό επιτυγχάνεται με συνεχής επανάληψη της συνάρτησης, αφού γίνεται μία καθυστέρηση των 200 χιλιοστών του δευτερολέπτου ώστε να μπορεί να είναι ευδιάκριτη και στον χρήστη αλλά και να γίνεται αντιληπτή η εναλλαγή της κάθε εικόνας. Λόγο τον προβλημάτων που αντιμετωπίσαμε με το βίντεο χρησιμοποιήσαμε την Html5 και προγραμματίσαμε τα κουμπιά διαχείρισης του βίντεο με των παρακάτω κώδικα: Εικόνα 10: video code

23 Προβλήματα κατά την υλοποίηση Η έξυπνη τηλεόραση ή Smart Tv της Samsung είναι μια νέα τεχνολογία, που τώρα και στα επόμενα χρόνια γνωρίζει ανάπτυξη επομένως κατά την υλοποίηση της εφαρμογής είναι λογικό να αντιμετωπίζουμε μερικά προβλήματα ως προς τον κώδικα. Αρχικά επειδή θέλουμε να δημιουργήσουμε την ιστοσελίδα i2fest στη οποία η περιήγηση της γίνεται από μενού επιλογής και φυσικά κάθε σελίδα απαρτίζετε από τις δικές της πληροφορίες, έτσι το πρώτο πρόβλημα ήταν πως θα απεικονίζονται όλα τα στοιχεία σε κάθε σελίδα η οποία έχει καθορισμένο μέγεθος και δεν θα πρέπει να γίνεται scroll down όπως στις ιστοσελίδες στον υπολογιστή ή στα κινητά τηλέφωνα. Στη συνέχεια είχαμε αρκετές εικόνες να διαχειριστούμε στην επιλογή των χορηγών αλλά και από τις στιγμές του φεστιβάλ που δεν ήταν εφικτό να υπάρχουν όλες μαζί σε μία σκηνή. Τέλος ένα άλλο πρόβλημα που αντιμετωπίσαμε ήταν η εισαγωγή του βίντεο στο πρόγραμμα μας, αν και δοκιμάσαμε αρχεία δοκιμών που είχαν αναρτήσει μέλη στο forum της Samsung αλλά δυστυχώς δεν λειτούργησαν έτσι όπως θέλαμε.

24 Επεξήγηση εφαρμογής που υλοποιήσαμε Η παρακάτω εικόνα είναι η αρχική σελίδα της εφαρμογής μας που εμφανίζεται μόλις ανοίξουμε την εφαρμογή μας. Εικόνα 11: i2fest-αρχική Σελίδα Επειδή ο χρήστης δεν γνωρίζει το πως λειτουργεί η εφαρμογή υπάρχει κουμπί βοήθειας κάτω δεξιά, όπου ο χρήστης πατάει την συγκεκριμένη επιλογή στο τηλεχειριστήριο και του υποδεικνύονται οδηγίες για να μπορέσει να περιηγηθεί στη εφαρμογή με μία επεξηγηματική εικόνα. Φυσικά η βοήθεια υπάρχει σε όποια σελίδα θεωρήσαμε ότι χρειάζεται.

25 Εικόνα 12: Help - Κουμπί Βοήθειας

26 Η σελίδα Read More είναι η συνέχεια της αρχικής σελίδας και μόνο από την αρχική σελίδα ο χρήστης μπορεί να μεταβεί σε αυτή και εάν είναι σε αυτή θα πρέπει να μεταβεί πάλι στην αρχική για να περιηγηθεί στις υπόλοιπες. Σε αυτή τη σελίδα υπάρχει οπτικοακουστικό υλικό που ο χρήστης για να το παρακολουθήσει θα χρειαστεί από το κουμπί βοήθειας για να λάβει τις απαραίτητες οδηγίες. Εικόνα 13: Σελίδα "Read More" Έχουμε μεταβεί στην σελίδα Εκδηλώσεις και για να διαβάσει ο χρήστης τις εκδηλώσεις του φεστιβάλ θα πρέπει να χρησιμοποιήσει τα βελάκια αριστερά ή δεξιά από το τηλεχειριστήριο. Στην επόμενη σελίδα ο χρήστης διαβάζει τους συντελεστές του φεστιβάλ.

27 Εικόνα 14: Σελίδα "Εκδηλώσεις" Για την διαχείριση της επόμενης σελίδας Η Έκθεση ο χρήστης θα πρέπει να χρησιμοποιήσει το κουμπί βοήθειας για να μπορέσει να διαβάσει το περιεχόμενο του ακορντεόν.

28 Εικόνα 15: Σελίδα "Η Έκθεση" Ο χρήστης για να περιηγηθεί στην γκαλερί του φεστιβάλ θα πρέπει να χρησιμοποιήσει το κουμπί βοήθειας. Θα πρέπει να χρησιμοποιήσει αρχικά τα βελάκια πάνω ή κάτω για να επιλέξει από το φεστιβάλ που θέλει να παρακολουθήσει φωτογραφίες και μετά τα βελάκια δεξιά ή αριστερά για να περιηγηθεί στις φωτογραφίες.

29 Εικόνα 16: Σελίδα "Στιγμές"

30 Στη σελίδα Χορηγοί ο χρήστης παρακολουθεί τις εικόνες από τους χορηγούς του φεστιβάλ που εναλλάσσονται αυτόματα. Εικόνα 17: Σελίδα "Χορηγοί" Τέλος στην σελίδα Πως θα μας βρείτε ο χρήστης μπορεί να δει που διεξάγεται και πως μπορεί να παρευρεθεί και ο ίδιος στο φεστιβάλ.

31 Εικόνα 18: Σελίδα "Πως θα μας βρείτε"

32 ΚΕΦΆΛΑΙΟ 3 Ο :

33 Συμπεράσματα Οι λύσεις στα παραπάνω προβλήματα που εμφανίστηκαν κατά την υλοποίηση της εφαρμογής μετά από πολλαπλές δοκιμές και ανεύρεση πρότυπου κώδικα αντιμετωπίστηκαν επιτυχώς. Συγκεκριμένα το πρόγραμμα της Samsung μας παρέχει και αρχείο css για κάθε σκηνή ξεχωριστό, οπότε για την διαμόρφωση και μορφοποίηση των σκηνών της κάθε επιλογής από το μενού το διαχειριστήκαμε μέσω αυτού του αρχείου. Όσο για τις εικόνες στην επιλογή Χορηγοί εφαρμόσαμε slideshow και για την επιλογή Στιγμές δημιουργήσαμε έναν πίνακα που ανάλογα με το φεστιβάλ που έχει διεξαχθεί να παρουσιάζει τις αντίστοιχες φωτογραφίες, έτσι όλα τα στοιχεία υπάρχουν στην εφαρμογή μας και δεν έχουμε πρόβλημα χώρου στις σκηνές μας. Επίσης το βίντεο λειτουργεί αφού πρώτα το έχουμε αποθηκεύσει στον φάκελο videos και το εισάγουμε με την μέθοδο της Html 5. Μελλοντικές Επεκτάσεις Η παρούσα πτυχιακή είναι η απεικόνιση της ιστοσελίδας i2fest σύμφωνα με τα πρότυπα της Samsung Smart TV, επειδή το λογισμικό της Samsung Smart TV, είναι μία πλατφόρμα ανοιχτού κώδικα μας δίνετε η δυνατότητα να επεκτείνουμε όποια στιγμή θέλουμε την εφαρμογή μας. Μία μελλοντική επέκταση θα ήταν να προστεθεί στο ήδη υπάρχον μενού της εφαρμογής μία ακόμα επιλογή για άμεση πρόσβαση στην ιστοσελίδα i2fest του κοινωνικού δικτύου facebook ( έτσι οι χρήστες θα μπορούν να επικοινωνήσουν άμεσα με τους διοργανωτές του φεστιβάλ. Επίσης ακόμα μία πρόταση μας θα ήταν για να μειωθεί το μέγεθος της εφαρμογής μας τα οπτικοακουστικά στοιχεία της πτυχιακής μας να είναι δυναμικά (η πληροφορία διαμοιράζεται σε πολλαπλές ιστοσελίδες αυτόματα) και όχι στατικά (τα στοιχεία μας ανανεώνονται μόνο μέσω του προγραμματιστή) όπως είναι στην παρούσα κατάσταση.

34 Βιβλιογραφία ΔΙΑΔΙΚΤΥΟ: [1]. Επίσημο Site Samsung Smart Tv, [2]. Διαδικτυακή εγκυκλοπαίδεια,

35 ΠΑΡΑΡΤΗΜΑ I

36 ΟΔΗΓΟΣ ΔΗΜΙΟΥΡΓΙΑΣ ΕΦΑΡΜΟΓΗΣ ΣΕ ΕΞΥΠΝΗ ΤΗΛΕΟΡΑΣΗ

37 ΕΓΚΑΤΑΣΤΑΣΗ ΠΡΟΓΡΑΜΜΑΤΟΣ SMART TV SDK SAMSUNG TV EMULATOR ΟΔΗΓΙΕΣ Για την δημιουργία εφαρμογής σε Έξυπνη Τηλεόραση πρώτα θα πρέπει να γίνει η εγκατάσταση του προγράμματος Smart Tv SDK Samsung TV Emulator. 1. Κάνουμε DownLoad από το διαδίκτυο το πρόγραμμα [2013] Samsung_TV_SDK_Setup (4.0). exe. 2. Εκτελέστε το αρχείο [2013] Samsung_TV_SDK_Setup (4.0). exe για να ξεκινήσει το πρόγραμμα εγκατάστασης (εικόνες 1.3 έως 1.11). Εάν κάνετε αναβάθμιση(το έχετε ήδη το πρόγραμμα εγκατεστημένο), παρακαλώ επιλέξτε το κουμπί Yes για να απεγκαταστήσετε την προηγούμενη έκδοση της Samsung Smart TV SDK, αλλιώς το κουμπί No (εικόνες 1,1.1,1.2). Εικόνα 19: Κατάργηση του υπάρχον SDK

38 Εικόνα 20: Επιλογή αποθήκευσης του SDK Εικόνα 21: Όταν ολοκληρωθεί η διαδικασία απεγκατάστασης επιλέξτε το κουμπί Close και κάνετε επανεκκίνηση στον υπολογιστή

39 Εγκατάσταση SDK Εικόνα 22: Επιλογή γλώσσας Εικόνα 23: Επιλέγετε το κουμπί Next

40 Εικόνα 24: Επιλέγετε την αποδοχή όρων Άδειας Χρήσης και στη συνέχεια επιλέγετε το κουμπί Next Εικόνα 25: Επιλέγετε τα στοιχεία που θέλετε να εγκαταστήσετε και στη συνέχεια επιλέγετε το κουμπί Next

41 Εικόνα 26: Επιλέγετε την τοποθεσία που θα θέλατε να εγκαταθεί το πρόγραμμα και στη συνέχεια επιλέγετε το κουμπί Next Εικόνα 27: Επιλέγετε "Start Folder Menu"και επιλέγετε το κουμπί "Install"

42 *Σημείωση: Η Smart TV SDK χρησιμοποιεί τον Apache HTTP διακομιστή. Εάν δεν έχετε ήδη εγκαταστήσει τον Apache τότε: Εικόνα 28: Επιλέγετε Yes, I want to install Apache now και στη συνέχεια επιλέγετε Next"για να ακολουθήσετε τις οδηγίες για την εγκατάσταση του Apache Εικόνα 29: Επιλέγετε αν θέλετε να επανεκκινήσετε τον υπολογιστή σας τώρα ή αργότερα και πατήστε το κουμπί "Finish"για να ολοκληρώσετε την εγκατάσταση

43 Εικόνα 30: Η Samsung Smart TV SDK έχει πλέον εγκατασταθεί και στην επιφάνεια εργασίας σας θα περιέχει τα παραπάνω εικονίδια

44 Δημιουργία εφαρμογής σε γλώσσα Html και Javascript. 1. Βήμα:Αρχικά ανοίγουμε το πρόγραμμα [Eclipse]Samsung Smart TV Apps Editor. 2. Στη συνέχεια για να δημιουργήσουμε ένα project επιλέγουμε από την οριζόντιa menu bar File, μετά New και τέλος Other. Μία άλλη πιο σύνομη διαδρομή που μπορούμε να ακολουθήσουμε είναι η εξής: Από τον κάθετο αριστερό menu δηλαδή στον Project Explorer κάνουμε δεξί κλικ, επιλέγουμε New και τέλος Other

45 3. Βήμα: Μας εμφανίζει την καρτέλα New όπου εμείς επιλέγουμε από το Samsung Smart TV Apps και να επεκτείνει αυτό. Στη συνέχεια, επιλέξτε το Samsung Smart TV JavaScript App Project και πατήστε το κουμπί Next.

46 4. Βήμα: Στη συνέχεια μας εμφανίζεται η καρτέλα όπου θα πρέπει να ονομάσουμε το project μας και να επιλέξουμε διάσταση. Τέλος κάντε κλικ στο κουμπί Finish για να ολοκληρώσετε project.

47 5. Βήμα: Στη αριστερή κάθετο menu (παρακάτω μία ενδεικτική εικόνα) έχει δημιουργηθεί το project μας, επειδή εμείς θέλουμε να δημιουργήσουμε την εφαρμογή μέσω της γλώσσας Html και JavaScript ανοίγουμε τα αρχείο Scene1.html στο συγκεκριμένο παράδειγμα αλλιώς το αρχείο.html και γράφουμε τον κώδικα μας. 6. Βήμα: Αν θελήσουμε, αφού έχουμε γράψει τον κώδικα μας ή κατά την διάρκεια της συγγραφής του, να δούμε στην προσομοίωση αν αυτό που έχουμε υλοποιήσει δουλεύει τότε πάμε στο File επιλέγουμε το Save. Στη συνέχεια ή πατάμε το κουμπί Run Samsung Smart Tv App in Emulator ή εναλλακτικά μπορείτε πάνω στο project σας να κάνετε δεξί κλίκ και να επιλέξετε Samsung Smart Tv SDK και μετά Run Project in Samsung Tv Emulator.

48 7. Βήμα: Τέλος όταν έχετε ολοκληρώσει την εφαρμογή σας για να λειτουργήσει στην Samsung θα πρέπει να κάνετε δεξί κλικ στο project σας στη συνέχεια Samsung Smart Tv SDK και μετά Packaging. Σας εμφανίζεται η παρακάτω εικόνα που καλείστε να δώσετε όνομα στο project σας, περιγραφή και τσεκάρετε Update the packaged files on the server και πατάτε Packaging.