The King is dead! RIP 2006-2012

Ένα μεγάλο ευχαριστώ σε όλη την παρέα
Περισσότερα στο lexx.gr

Google Wave Gadgets

28 Sep 2009 by PanosJee

Guest post από τον web front developer Σάββα Γεωργίου. Συνεχίζοντας την αναφορά στις νέες τεχνολογίες αυτού του καλοκαιριού, και όπως είχαμε υποσχεθεί, θα αναλύσουμε τα βασικά ενός Google Wave Gadget. To wave gadget, είναι μία client side εφαρμογή που μπορεί να προσθέσει ένας συμμετέχων στην συνομιλία και γίνεται αυτόματα διαθέσιμη σε όλους. Σκοπός των gadgets είναι να εμπλουτίσουν την συνομιλία με χάρτες, documents, παιχνίδια και οποιαδήποτε άλλη εφαρμογή στην οποία έχει νόημα το real-time collaboration των συνομιλητών. Πρακτικά ένα wave gadget μοιάζει πολύ, για όσους έχουν ασχοληθεί, με το open social gadget. Δεν είναι τίποτα άλλο από ένα xml αρχείο, με ένα μέρος καθαρής html και με δυνατότητα κλήσης stylesheet και javascript. Ένα τυπικό παράδειγμα είναι το εξής:

<xml version="1.0"; encoding="UTF-8" ?>

<Module>

<ModulePrefs title="Hello Wave from Webz">

<Require feature="wave" />

</ModulePrefs>

<Content type="html">

<![CDATA[

<head>

<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript" charset="utf-8">

  google.load("jquery", "1.3.2");

</script>

<link rel="stylesheet" href="http://gamewave.googlecode.com/svn/trunk/stylesheets/screen.css" type="text/css" media="screen" charset="utf-8">

<body>

Hello from my gadget!

</body>

]]>   

</Content>

</Module>

(To wordpress δεν μπορούσε να δείξει σωστά XML  με το tag code  οπότε το απότελεσμα δεν είναι βέλστιστο) Παρατηρώντας την δομή του παραπάνω αρχείου, βλέπουμε ότι στο xml κομμάτι ουσιαστικά ορίζουμε μόνο τίτλο και το default feature που θέλουμε, δηλαδή το wave. Μέσα στο γράφουμε xhtml κώδικα όπως για ένα οποιοδήποτε website. Παρατηρείστε ακόμη ότι το link προς το stylesheet δεν είναι relative αλλά στατικό. Για να χρησιμοποιείτε relative κλήσεις προς άλλα αρχεία ρίξτε μια ματιά στο Preload module του gadget API. Ερχόμαστε λοιπόν στην ουσία του wave gadget και στον τρόπο που η html-javascript εφαρμογή μας, μπορεί να γίνει real-time collaborative. Όλο το "μυστικό" κρύβεται στο javascript αντικείμενο wave που μετά την κλήση είναι διαθέσιμο στον κώδικά μας. H λογική είναι απλή. Το wave έχει μία κατάσταση (state) η οποία μπορεί να αλλάξει για δύο κυρίως λόγους: είτε επειδή κάποιος νέος συνομιλητής μπήκε στην συζήτηση, είτε επειδή κάποιος συνομιλητής αποθήκευσε κάτι στο wave. Για κάθε περίπτωση, ορίζουμε μία callback συνάρτηση, η οποία καλείται σε όλους τους clients κάθε φορά που ολοκληρώνεται μία αλλαγή στο state του wave. Με αυτό τον τρόπο, οι "κινήσεις" του κάθε συνομιλητή, μπορούν μέσω της stateCallback να φτάσουν σε όλους τους συνομιλητές. picture-2 Αρχίζουμε ορίζοντας τις συναρτήσεις για τα δύο συμβάντα που αναφέραμε. function init() { if (wave && wave.isInWaveContainer()) { wave.setStateCallback(stateChanged); wave.setParticipantCallback(participantChanged); } } Τώρα δεν μένει τίποτα άλλο παρά να ορίσουμε τις συναρτήσεις stateChanged() και participantChanged(). Κάποιες από τις βασικότερες λειτουργίες του αντικειμένου wave είναι

  • wave.getParticipants() // Επιστρέφει τον πίνακα όλων των συνομιλητών
  • wave.getParticipants().getId //Για τον κάθε συνομιλητή του παραπάνω πίνακα φέρνει το μοναδικό id του [πχ savvas@wavesandbox.com]
  • wave.getParticipants().getThumbnailUrl // Για τον κάθε συνομιλητή φέρνει το url της thumbanail εικόνας του
  • wave.getViewer().getId() // Επιστρέφει μοναδικό id του συγκεκριμένου συνομιλητή που βλέπει αυτό το gadget , δηλαδή το δικό σου id.
  • wave.getState().submitDelta(delta); //Αποθηκεύει ένα ζευγάρι key - value στο wave. Υπενθυμίζουμε ότι αυτή η κλήση, επειδή αλλάζει το state του wave καλεί την stateChanged() για όλους τους συνομιλητές.

Για να γίνει πιο κατανοητό, το πως αποθηκεύουμε στο wave και ενημερώνονται όλοι οι συνομιλητές, σκεφτείτε το παρακάτω σενάριο: Σε ένα παιχνίδι, ο κάθε συνομιλητής - παίχτης, κάνει κάποια στιγμή submit το score του. Θέλουμε όλοι οι συνομιλητές, να βλέπουν τα ενημερωμένα scores όλων των συμπαιχτών τους, ανα πάσα στιγμή. Έχουμε λοιπόν την function updateScore(points) { var gamerId = wave.getViewer().getId(); delta = {}; delta[gamerId] = points; wave.getState().submitDelta(delta); } η οποία αποθηκεύει το score του παίχτη, με key το προσωπικό του id. Κάθε φορά που κάποιος αποθηκεύει στο wave το updated score του, καλείται σε όλους η stateChanged που φροντίζει να εμφανίσει τα updated scores. function stateChanged() { if (!wave.getState()) { return; } var participants = wave.getParticipants(); if (participants) { for (var i = 0; i < participants.length; ++i) { var participant = participants[i]; var participant_score = wave.getState().get(getGamerId(participants[i]); // render current score of current participant } } Εδώ τελειώνει η πρώτη μας επαφή με το wave gadget και ταυτόχρονα και το πρώτο μου guest post στο webz. Άν κάποιος ενδιαφέρεται περισσότερο για ανάπτυξη wave gadget, υπάρχει ένα αρκετά πλήρες tutorial από την google. Για την ιστορία, στο 3ήμερο hackathlon για wave - development, φτιάξαμε με τον Γιώργο το gamewave, ένα gadget που δημιουργεί ένα live battlefield για ένα flash game, όπου οι συνομιλητές παίζουν ταυτόχρονα το παιχνίδι και συναγωνίζονται με το current score τους. Ο κώδικας είναι εδώ http://code.google.com/p/gamewave/source/checkout και για όποιον έχει wave account μπορεί να το κάνει embed και να παίξει από την διεύθυνση http://tinyurl.com/gamewave.