[L. BLYWEERT, A. VIGODA – FI-14]

Présentation du projet en vidéo

« Projet récent, Mozilla TowTruck a été présenté en avril 2013 par l’équipe de Mozilla Labs. Il permet d’ajouter à un site web des fonctionnalités de collaboration en temps réel, comme la possibilité de voir les changements apportés au site en temps réel, le chat, et le chat vocal. »

TowTruck: Mozilla Labs (lien officiel)

Comment ça marche?

Tout d’abord, le navigateur Firefox, dans sa dernière version, ou mieux, dans sa version Nightly (http://nightly.mozilla.org), ou encore Google Chrome sont conseillés.

• Cliquer sur le bouton TowTruck intégré à votre site

• Partager le lien avec un ami, un collègue… ou même plusieurs.
• En attendant vous pouvez déjà renseigner votre pseudo dans le champ situé sous le lien que vous venez d’envoyer.

• Il n’y a plus qu’à attendre que cette personne vous rejoigne.

• Une fois connectés à plusieurs, vous pouvez activer le chat vocal, ou encore chatter à l’ancienne. Les utilisateurs connectés sont repérés par une image dans le panneau TowTruck, et le curseur de chaque utilisateur est affiché sur l’écran de chaque personne connectée. Lorsque quelqu’un clique sur la page, un cercle apparaît autour de son curseur afin de montrer à tout le monde qu’il a cliqué.

Installation

L’installation de TowTruck peut se faire de deux façons :

Grâce à deux ligne de codes

Cette installation du plugin a été simplifiée au maximum : il suffit d’insérer deux lignes de code JavaScript dans le code source de la page pour voir apparaître le panneau de contrôle de TowTruck.

1. <script src="https://towtruck.mozillalabs.com/towtruck.js"></script>

Puis cette ligne pour insérer le bouton d’activation :

2. <button onclick="TowTruck(this); return false;">Start TowTruck</button>

Directement sur le serveur

La deuxième méthode d’installation, plus complexe, permet d’installer une version local de TowTruck sur son propre serveur.

Lien vers les fichiers d’installations du service (Via GitHub)

Fonctionnement

TowTruck est écrit en JavaScript. Son code source est disponible sur GitHub. Il est composé de deux parties :

La partie serveur

• server.js: Ce module permet tout simplement de faire passer des messages entre les clients connectés. La logique principale de l’application est exécutée côté client.

La partie client

Elle contient l’essentiel des fichiers de TowTruck. Voici quelques exemples de fichiers JavaScript avec une description de leur utilité :

• chat.js: gère le code du chat textuel, ainsi que l’affichage d’anciens messages du chat
• cursor.js: prend en charge le partage de la position du curseur, aussi bien pour l’affichage que la détection de clics.
• playback.js: gère la commande /playback, qui une fois entrée dans le chat, permet la lecture d’enregistrements.
• recorder.js: permet l’enregistrement lorsque l’utilisateur tape /record dans le chat.
• session.js: module le plus important du projet. Prend en charge les channels, les messages de routage, les connexions, il est aussi utilisé pour une partie des communications.
• towtruck.js : c’est le module de démarrage de TowTruck. Il est inclus dans toutes les pages, définit les variables de TowTruck, et gère le chargement initial de l’application.
• ui.js: contient une grande partie de l’UI (User Interface).

Plugins et add-on

WordPress

Pour mettre en place Mozilla Labs TowTruck sur un blog WordPress :

1. Mettre les fichiers dans le dossier [_wordpress]/wp-content/plugins/
2. Dans l’interface administrateur de WordPress activer le plugin
3. Dans les réglages activer le bouton TowTruck
4. Un bouton d’activation apparaît en bas à gauche de chaque page du site

Firefox

Pratique : l’équipe a aussi pensé à développer un add-on Firefox qui permet d’activer TowTruck sur n’importe quel site :

1. Télécharger l’add-on ici
2. Un lien est ajouté dans la barre d’état de Firefox
3. Il suffit de cliquer sur towtruck pour l’activer sur le site désiré

Add-on TowTruck pour Firefox

 

Démonstration

A l’aide d’un CMS installé sur un serveur FTP personnel, nous avons effectué une démonstration de modifications collaboratives en binôme. Pour cela, nous avons mis en place un WordPress auquel nous avons greffé le plugin TowTruck pour WordPress.

NOTRE Démonstration de TowTruck Sous WordPress (hébergé chez Free)

 

Une fois activé, il permet d’effectuer des modifications avec une collaboration en temps réel. Il suffit de cliquer sur TowTruck On/Off en bas à gauche pour le lancer.

Exemple : l’utilisateur 1 se connecte à l’interface d’administration puis active TowTruck. Il envoie le lien à son collègue, l’utilisateur 2, qui se connecte alors à son tour. A partir de ce moment, les modifications effectuées par l’utilisateur 1 sont affichées en temps réel sur l’écran de l’utilisateur 2, et vice-versa.

TowTruck leur permet également de communiquer, à la fois via un chat vocal et textuel.

Et si l’utilisateur 1 change de page?

L’utilisateur 2 en est aussi tôt averti, et TowTruck lui propose de « suivre » l’utilisateur 1 sur la page où il se trouve, afin de poursuivre leur collaboration en temps réel.

Fluide, collaboratif, léger et intuitif : telles ont été nos impressions lors de l’utilisation de TowTruck sur un serveur pourtant assez lent. Toujours à l’état de projet, TowTruck semble déjà abouti et pourrait bien devenir à terme une référence dans son domaine.

Services similaires

Nous n’avons trouvé qu’un seul service similaire à proprement parler. Néanmoins Prezi et Google Drive proposent tous deux un service reprenant le même concept de collaboration en temps réel, mais à la différence de TowTruck, ils ne fonctionnent que sur le site en question.

EatPonies

Une alternative à TowTruck existe : il s’agit de EatPonies, que vous pouvez découvrir sur le site officiel : http://eatponies.com

Prezi

Sur le même principe que la collaboration de TowTruck, Prezi, éditeur de présentation en ligne, propose à l’utilisateur d’éditer ses présentations avec d’autres utilisateurs en temps réel. Le curseur de chaque utilisateur est représenté par un avatar, et les modifications effectuées sont visibles par tous.

Google Drive

Google Drive propose son service de collaboration en ligne sur plusieurs types de documents (powerpoint, document texte, feuille de calcul…). Seules les modifications sont visibles par les utilisateurs.