Η πρόκληση του offradio από τη σκοπιά του Drupal Developer

Η αποστολή

Τον περασμένο Νοέμβριο μου ανατέθηκε η κατασκευή του site του Offradio εξολοκλήρου σε Drupal. Το Offradio το γνώριζα και από πιο πριν, όταν ήμουν Θεσσαλονίκη, και μάλιστα θυμάμαι ότι το άκουγα κατά καιρούς. Το μέχρι τώρα σύστημα που χρησιμοποιούσαν ήταν ένα WordPress με ένα σχετικά αδιάφορο (για την εποχή τουλάχιστον) design.

Οι προκλήσεις

Η πρώτη πρόκληση και δυσκολία, ειδικά για μένα που δεν είχα εμπειρία σε μετατροή PSD σε Drupal theme, ήταν το ιδιαίτερα απαιτητικό design και τα πολλά effects σε διάφορα σημεία του site. Όσοι το επισκευθείτε και περιηγηθείτε λίγο, θα καταλάβετε αμέσως το τι εννοώ. Fade in και fade out σχεδόν σε όλα τα links και buttons, Slideshows με scrollable divs, Slideshows με HTML5 Video elements και πολλά άλλα. Σαφώς ένα design σαν κι αυτό δεν θα μπορούσε να είναι τίποτα λιγότερο από pixel perfect! Από τα προσχέδια ακόμα, ένιωθες ότι οι κανόνες που πρέπει να ακολουθήσεις ήταν αυστηροί και δεν συγχωρούν λάθη και παραλείψεις. Εικόνα Η δεύτερη πρόκληση, ήταν η διατήρηση του workflow του πελάτη ακόμα και στο νέο περιβάλλον. Έπρεπε να κρατήσουμε τις ίδιες ακριβώς διαδικασίες που ακολουθούσε με το παλιό site του ώστε να είναι ομαλή η μετάβαση στο νέο. Επιγραμματικά οι διαδικασίες έχουν ως εξής: 1. Ο ένας από τους 2 music players του πελάτη (Jazler) στέλνει σε ένα συγκεκριμένο σημείο του server, ένα xml με το όνομα του τραγουδιού και τον καλλιτέχνη που παίζει τώρα. Ο δεύτερος player, δεν μπορεί να στείλει xml αλλά ένα απλό txt αρχείο με το τι παίζει την κάθε στιγμή. Και η τρίτη περίπτωση ενημέρωσης για το τι είναι live τώρα είναι από μια φόρμα του Drupal που δίνει την δυνατότητα στον χειριστή να εισάγει αυτός ποιος είναι ο καλλιτέχνης και ποιο το τραγούδι που ακούγεται. 2. Το Drupal θα έπρεπε να εντοπίσει ότι έγινε η αλλαγή του xml ή στο txt και να ξεκινήσει την εισαγωγή των nodes στην βάση. Ένα node του καλλιτέχνη με στοιχεία και φωτογραφικό υλικό από το LastFM, και ένα node με το τραγούδι με δεδομένα όπως links για lastFM, iTunes, google Search, Amazon κλπ. 3. Παράλληλα, θα έπρεπε όλοι οι clients που είχαν συνδεθεί στον σταθμό και ακούν μουσική, να ανανεώσουν τμήματα του player τους με τα στοιχεία του νέου τραγουδιού και του καλλιτέχνη. Και όλα αυτά, σε χρόνο που να πλησιάζει στα 2-4 δευτερόλεπτα. Τα τμήματα του player είναι αυτό με το slideshow του καλλιτέχνη, το τμήμα με το τραγούδι και το τμήμα με το Playlist. Το playlist θα αποτελούσε και κάτι καινοτόμο για τον σταθμό καθώς μέχρι τότε δεν υπήρχε playlist. 4. Η χρήση ενός εβδομαδιαίου time table για τον εύκολο προγραμματισμό των εκπομπών.

Οι λύσεις

Για την παρακολούθηση του xml και του txt από το Drupal εφαρμόστηκε απλά ένα cron task που κοιτάζει κάθε δευτερόλεπτο αν υπάρχει αλλαγή. Στην αρχή ελέγχεται πιο αρχείο είναι το πιο πρόσφατα αλλαγμένο. Το txt ή το xml. Η χρήση της filetime μεθόδου της PHP μας δίνει το timestamp του αρχείου και αυτό είναι αρκετό για να επιλέξουμε με πιο θα συνεχίσουμε. Αφού διαβαστεί το αρχείο, ελέγχεται αν το τραγούδι που εστάλη από τον πελάτη, είναι ήδη καταχωρημένο σε μια απλή μεταβλητή Drupal. Αν έχουμε λοιπόν διαφορετικό τραγούδι στο xml/txt από αυτό που είχαμε αποθηκεύσει, ξεκινάμε την διαδικασία εισαγωγής των δεδομένων. Για την εισαγωγή των δεδομένων χρησιμοποιήθηκε το Feeds module του Drupal, ενώ για την εισαγωγή των multiple φωτογραφιών του κάθε καλλιτέχνη, το Feeds Tamper. Και τα δυο modules παραμετροποιήθηκαν ώστε να ανοίγουν μια συγκεκριμένη διεύθυνση ενός αρχείου PHP που αναλαμβάνει να φέρει σε μορφή CSV όλα τα απαραίτητα δεδομένα του καλλιτέχνη από το LastFM: Ονομασία (σε περίπτωση που διαφέρει από αυτή που έστειλε ο πελάτης), το μοναδικό ID του από την βάση του LastFM όπου βάσει αυτού γίνεται και η εισαγωγή στο Drupal (unique key), φωτογραφίες και κάποια links που αφορούν τον συγκεκριμένο καλλιτέχνη σε υπηρεσίες όπως Amazon, Google, iTunes και LastFM. Για την εκτέλεση των importers του Feeds μέσα από το αρχείο cron, χρησιμοποιήθηκε η feeds_source() που επιστρέφει το object του importer από όπου μπορούμε να εκτελέσουμε και το import: $importer_id = 'artists_importer'; $source = feeds_source($importer_id); $source->import(); Με αυτόν τον τρόπο γίνεται το import του καλλιτέχνη. Με παρόμοιο τρόπο, κάνουμε και την εισαγωγή και του τραγουδιού. Για την αυτόματη ενημέρωση όλων των clients, αρχικά είχε επιλεχθεί η χρήση του node.js server όπου μόλις εντόπιζε αλλαγή σε ένα από τα 2 αρχεία, έστελνε ένα action σε όλους τους clients που ήταν συνδεδεμένοι σε αυτόν, κάνοντας την αλλαγή του περιεχομένου του παραθύρου των clients, με χρήση jQuery load(). Η χρήση του node.js στηρίζεται σε 2 βασικά στοιχεία. Την εκτέλεση του node.js στον server που παρακολουθεί τυχόν αλλαγή σε δύο συγκεκριμένα αρχεία, και ένα custom module για το Drupal το οποίο αναλαμβάνει να συνδέσει τους clients στον node.js server με χρήση socket και περιμένει το event που θα του σταλεί μέσα απο το socket αυτό ώστε να εκτελεστούν τα απαραίτητα scripts για την δυναμική αλλαγή του περιεχομένου του παραθύρου του τελικού χρήστη που ακούει το ραδιόφωνο. Το πλεονέκτημα αυτής της λύσης είναι ότι το βάρος του ελέγχου της αλλαγής το επωμίζεται μόνο ο server και όχι όλοι οι clients. Κατά την ολοκλήρωση όμως του project, και επειδή το site θα λειτουργούσε υπό caching κάποιας 3ης υπηρεσίας, αποκλείστηκε η χρήση του node.js και επιλέχθηκε μια πιο "απλή" λύση. Λύση που χρησιμοποιούσε ούτως ή άλλως και στον παλιό του site. Κάθε 5 δευτερόλεπτα, όλοι οι clients κάνουν έναν έλεγχο για το αν έχει αλλάξει ένα αρχείο που περιέχει το timestamp της τελευταίας αλλαγής τραγουδιού. Αν εντοπιστεί αλλαγή, τότε ο client ζητά από το Drupal τα νέα δεδομένα και ανανεώνει το περιεχόμενό του.

Το εβδομαδιαίο πρόγραμμα

Εικόνα Για την κατασκευή του εβδομαδιαίου προγράμματος, χρησιμοποιήθηκαν τα taxonomy terms και το module editable fields για την μεταβολή του κάθε time slot, το entity reference module για την σύνδεση μεταξύ nodes και taxonomy terms και το module Views Field View που χρειάστηκε για την εμφάνιση view μέσα σε view ως πεδία. Αναλυτικότερα, φτιάχτηκαν 7 vocabularies με 24 terms το καθένα που αντιπροσωπεύει την κάθε ώρα της ημέρας ανά μέρα της εβδομάδας. Κάθε time slot έχει ως πεδίο ένα node reference προς το node τύπου show, ώρα έναρξης και ώρα λήξης. Με αυτό τον τρόπο και με την χρήση ενός view για taxonomy terms φέρνουμε όλα τα time slots για όλες τις ημέρες και με editable format το show reference του κάθε time slot. Εικόνα

It got the looks

Από θέμα εμφάνισης, αρκεί να αναφερθεί ότι μόνο ένα link ΔΕΝ έχει hover effect. Αυτό του logo! Όλα τα υπόλοιπα, έχουν κάποιο εφέ κίνησης. Είτε είναι απλό text link είτε κάποιο κουμπί με sprite, κατά 99% κάνει κάτι όταν το πλησιάζετε. Αρωγοί στο πείραγμα των links και buttons προκειμένου να έχουν ένα ή δυο span tags για την "διακόσμηση", ήταν οι theme_button(), theme_field(), theme_menu_link(), theme_form_element().

HTML5 Video

Ίσως όμως ένα από τα πιο εντυπωσιακά στοιχεία του συγκεκριμένου site είναι το background video που εμφανίζεται στην αρχική σελίδα. Για την αναπαραγωγή του Video χρησιμοποιήθηκε το HTML5 Video module. Φυσικά λόγω ασυμβατότητας των browser, κάθε video είναι σε σε 2 μορφές. Ένα mp4 και ένα ogv/webm. Σε περίπτωση που κάποιος browser ΔΕΝ υποστηρίζει κανένα από τα 2, τότε ένα screenshot του video παίρνει την θέση του. Το video banner, αποτελεί ένα μέρος του slideshow που εμφανίζεται στο πάνω μέρος της αρχικής σελίδας. Το slideshow φέρνει το background video, ένα transparent png για το λεκτικό και το link του κάθε slide. Εικόνα

Το Blog

Στην ενότητα του blog του site, οι απαιτήσεις ήταν: 1. Να χρησιμοποιηθεί infinite scroll, ΑΛΛΑ με onClick και όχι onPageScroll. 2. Να δεσμεύονται πάντα 2 θέσεις για διαφημιστικά. Οι θέσεις 5 και 8. Για το 1ο, η χρήση του Views Infinite Scroll module ελαφρώς πειραγμένο, μας έδωσε το αποτέλεσμα που θέλαμε. Για το 2ο όμως, το πρόβλημα ήταν ότι θα έπρεπε σε view από content type τύπου blog, να έρθουν σε 2 συγκεκριμένες θέσεις 2 rows άλλου τύπου, να μην επηρεάζουν την σειρά των εγγραφών και να είναι στυλιστικά διαφορετικά αφού περιέχουν εντελώς διαφορετική πληροφορία. Η λύση; Ένα content type τύπου blog και ένα τύπου blog-ad. Τα άρθρα που εισάγει ο πελάτης είναι τύπου blog και εισάγονται με τον συνήθη τρόπο ενώ υπάρχουν 2 εγγραφές σε blog-ad με sticky at top lists και συγκεκριμένο όνομα. Το view είναι ρυθμισμένο να φέρνει πρώτα τα sticky και μετά όλα τα υπόλοιπα. Άρα έτσι έχουμε ΠΑΝΤΑ ένα view με Ν εγγραφές που χρειαζόμαστε και οι θέσεις 0 και 1 θα είναι ΠΑΝΤΑ τύπου blog-ad αφού είναι sticky. Το μόνο που μένει είναι να τοποθετηθούν στην θέση τους και να αφαιρεθούν τα περιττά πεδία (τίτλοι, links κλπ). Αυτό έγινε με την χρήση του hook_views_pre_render() που μας δίνει την δυνατότητα να επεξεργαστούμε τα views και κυρίως τα rows τους! Εικόνα

Τι δεν μου άρεσε

Ότι έπρεπε να στηριχτούμε σε υπηρεσίες όπως LastFM και iTunes για τις οποίες δεν είσαι σίγουρος για την ταχύτητα των αποτελεσμάτων τους. Για παράδειγμα όταν ο server κάνει περίπου 4-8 δευτερόλεπτα να φέρει όλα τα δεδομένα του καλλιτέχνη, η εισαγωγή του θα αργήσει, και οι clients θα έβλεπαν κενά.

Τι μου άρεσε

  • Ότι συμμετείχα στην κατασκευή ενός από τα πιο όμορφα site που έχω δουλέψει. Ίσως και το πιο όμορφο.
  • Η χρήση (έστω και για λίγο) του node.js που ουσιαστικά ανοίγει μάτια και δίνει λύσεις.
  • Η μετατροπή του PSD σε Drupal Theme, που τελικά δεν ήταν τόσο δύσκολη όσο φοβόμουν.
  • Ότι ο πελάτης έμεινε ευχαριστημένος και ό,τι είχε ζητήσει, το παρέλαβε και με το παραπάνω.
  • Ότι τα στατιστικά της επισκεψιμότητας στο site εκτοξεύτηκαν λίγες μόνο ώρες από την στιγμή που βγήκε το νέο site live.

Εικόνα

Και τώρα τι;

Όπως σε κάθε site και δη τέτοιου μεγέθους, η ανάπτυξη και η βελτίωση σχεδόν επιβάλλεται. Με καθημερινό feedback από τους αναρίθμητους χρήστες καθώς και από τους διαχειριστές, συγκεντρώνονται συνεχώς βελτιώσεις που μπορούν να γίνουν προκειμένου η χρήση του site και η αποδοτικότητά τους να είναι πιο αποτελεσματική σε λιγότερο χρόνο. Ήδη υπάρχει σε κατάσταση δοκιμών μια νέα μέθοδος για τον έλεγχο του τι παίζει τώρα το ραδιόφωνο με σκοπό να εξασφαλιστεί η ομαλότητα της εισαγωγής ακόμα κι άν το cron job που εκτελεί ο server για κάποιο λόγο τερματίσει. Μία από τις βελτιώσεις - προσθήκες που θα μπουν στο σύστημα είναι και η δυνατότητα ο ακροατής να μπορεί να "ψηφίζει" ως αγαπημένο του, το τραγούδι που θα ακούει με σκοπό την συγκρότηση λίστας τραγουδιών και καλλιτεχνών των πιο αγαπημένων του κοινού. Σχεδιαστικά, είναι προγραμματισμένο να γίνει και μια πιο απλή έκδοση με responsive theme για την προβολή του site και από tablet και smartphones διατηρώντας φυσικά το 100% της λειτουργικότητάς του.

Μιχάλης

Γράφει ο Μιχάλης

Web Developer

Δημοσιεύθηκε την 13.02.2013

Σχόλια
avatar

05/03/2013 - 17:40

TheodorosPloumis

Συγχαρητήρια στην ομάδα της Netstudio! Drupal, node.js, HTML5, hooks... Ένα τέτοιο Drupal project είναι κρίμα να μην δημοσιευτεί και στα Drupal Show cases.

Γιάννης

05/03/2013 - 17:43

Γιάννης

Θοδωρή, ευχαριστούμε για τα καλά σου λόγια! Το site είναι ήδη στο Drupal Show Cases!

avatar

16/03/2013 - 18:36

lenaglt

Το πιο όμορφο σαϊτ που έχω χρησιμοποιήσει ποτέ μου. Είμαι ούτως ή άλλως μεγάλη οπαδός του off εδώ και χρόνια, ωστόσο αυτό που φτιάξατε εσείς εδώ με έχει απλά εντυπωσιάσει. Χωρίς να ξέρω πολλά-πολλά από internet ή "έξυπνα" προϊόντα, το συγκεκριμένο σαϊτ διαφοροποιείται από όλα τα άλλα για λόγους πρακτικότητας, της λειτουργικότητας για την οποία δημιουργήθηκε και αισθητικότητάς του. Μπράβο σας παιδιά.

avatar

27/04/2013 - 13:59

Vasilias Akis

Ο αγαπημένος μου σταθμός από την δημιουργία του εμπιστεύτηκε την Netstudio όπως κι εγώ. Συγχαρητήρια για την πολύ καλή δουλειά....

Σχολιάστε το άρθρο