Publié par

Il y a 4 années -

Temps de lecture 3 minutes

Xebia TV 2.0 est en ligne! Retour sur ce projet…

Xebia-TV-logo-final

La nouvelle version de Xebia TV est désormais accessible ici.

Cette mise à jour a pour objectif d’améliorer l’expérience utilisateur grâce à un meilleur design et un nouveau player Youtube personnalisé.

L’arrivée de cette version est aussi l’occasion de revenir ensemble sur ce projet et les solutions techniques que nous avons retenues pour sa réalisation.

Petit retour en arrière…

Pour ceux qui ont manqué la mise en service de Xebia TV, celle-ci a eu lieu le 29 septembre 2014. L’idée à l’origine de ce projet était de faciliter la vie des Xebians qui ne pouvaient pas assister en personne à toutes les sessions de XKE ou de tech events. Ainsi, Xebia TV leur permettrait de les revoir à la demande et même d’interagir en live avec les animateurs par chat.

Une première version de l’application vit le jour au cours d’un hackathon que nous avions organisé dans le cadre d’un XKE. Suite à ce hackathon, nous avons continué à travailler dessus. Le projet gagnant en maturité, la décision fut prise d’en ouvrir l’accès au public pour arriver à sa première mise en production.

Depuis, nous avons effectué pas mal de refactorings et repensé l’ergonomie et la conception de l’application pour vous présenter cette nouvelle version.

Nos choix techniques

xebiatv

  • Organisation des fichiers sources en DDD.
  • Coté front-end :
    • Application : AngularJS, Less et l’API de Google pour créer un player Youtube personnalisé que nous avons encapsulé en directive réutilisable ;
    • Build  : Gulp et Bower.
  • Coté back-end :
    • Application : NodeJS, Express, Bluebird et SuperAgent ;
    • Stockage : Les vidéos sont actuellement hébergées et indexées sur Youtube.
  • Industrialisation :
    • Tests : Karma, Mocha, Sinon et Chai ;
    • Integration continue : Codeship ;
    • Plateforme : Elastic Beanstalk

La mise à jour 2.0

  • Ajout d’une page d’accueil :
    • Présentation de Xebia TV
    • Notification et liens vers le live en cours
    • Affichage du programme des lives prévus pour la journée
    • Liens vers les vidéos les plus populaires
  • Utilisation d’un player Youtube personnalisé :
    • Look & feel original
    • Compatible HTML5 selon le navigateur utilisé
  • Écran Live :
    • Remplacement des images affichées à la place du player si aucun live n’est en cours
    • Correction d’un bug empêchant le chat de fonctionner correctement
  • Écran V.O.D. :
    • Les descriptions accompagnant les vidéos sont formatées pour une meilleure lisibilité
    • Amélioration graphique des vignettes des vidéos
    • Il est désormais possible d’accéder à une vidéo spécifique en copiant/collant son url dans la barre d’adresse du navigateur
  • Refontes techniques :
    Cela ne vous intéressera que modérément mais nous autres, les développeurs, nous aimons le gain de maintenabilité obtenu par ces refontes.
    En résumé, ces refontes nous ont permis d’adopter un design DDD, d’intégrer des librairies comme Bluebird/SuperAgent et de nettoyer le code source d’origine. Pour rappel, dans le contexte du hackathon, tous les membres de l’équipe n’étaient pas des experts AngularJS/NodeJS. Après tout, l’intérêt de ce hackathon était aussi de découvrir des technologies que l’on n’avait pas forcément l’habitude de manipuler.

Pour finir, merci à Sarah Buisson, Mathieu Breton et Jérémy Vinai pour la réalisation de cette version.

Publié par

Publié par Alexandre Dergham

Au cours de ses 10 années d'expérience, Alexandre a développé des compétences dans les technologies JEE et Javascript qui l'ont rendu polyvalent. De ce fait, il intervient essentiellement sur des missions où sont requis des profils full stack.

Commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nous recrutons

Être un Xebian, c'est faire partie d'un groupe de passionnés ; C'est l'opportunité de travailler et de partager avec des pairs parmi les plus talentueux.