CAW1 2018 Projet de Emilien MOTTET et Amaury PUNEL

Titre du projet	ListenHub
Cadre	Projet Web
Page principale	CAW1_Demonstration_Realisation
Équipe	Emilien MOTTET, Amaury PUNEL
Encadrants	Sébastien Viardot

ListenHub est une application web qui permet à ses utilisateurs de pouvoir créer plusieurs playlists musicales et de les écouter.

Elle a été développée dans le cadre d'un projet de développement d'application web par Emilien MOTTET et Amaury PUNEL.

Présentation du projet

Description

ListenHub est une plateforme communautaire de création, de partage et d'écoute de playlists de musiques. Les utilisateurs ont la possibilité d'y créer des playlists et d'y ajouter soit leurs propres fichiers MP3, soit des musiques venant d'autres plateformes (Youtube, SoundCloud, ...). Ils peuvent par la suite partager ces playlists avec d'autres membres, ou bien télécharger l'ensemble de la playlist en MP3 pour une écoute hors ligne.

Cahier des charges

Durant la phase de réflexion de conception de l'application, le cahier des charges suivants a été écrits.

X représente les tâches qui sont implémentées dans la version finale.

Tâches principales :

[X] Créer/Modifier des playlists

[X] Uploader des fichiers audio

[X] Lire les playlists dans le navigateur

[X] Accéder aux musiques/playlist via une api

Tâches secondaires :

[ ] Télécharger les playlists en local

[X] Utiliser des musiques de spotify/deezer/youtbe/soundcloud/mixcloud

[ ] Partager les playlists avec d'autres utilisateurs

Cas d'usage

Utilisateur :

• Créer une playlist
• Supprimer une playlist
• Modifier une playlist
• Ajouter une chanson à playlist
• Supprimer une chanson de playlist
• Se déconnecter

Visiteur :

• Voir la page d'accueil
• Créer un compte
• Se connecter

Diagramme UML:

Modèle de données

Choix techniques

Tout nos choix techniques ont été motivés par une envie de découvrir de nouvelles technologies. Nous avons principalement utilisés des technologies javascripts, avec pour volonter de confronter nos aprioris sur un projet concret. De plus nous avons utilisé git et gitlab (état de l'art en matière de vcs) https://gitlab.com/listenHub/listenHard. De plus nous avons essayé de suivre les méthodes agiles en utilisant trello https://trello.com/b/Kje6DPCn/skate .

Express :

Framework proposé pour réaliser le projet. Nous avons choisi Express car nous souhaitions avoir un projet constitué de deux elements, une api et un front. Ce type d'architecure est très protable et on peut imaginer réaliser le front avec n'importe qu'elle techno possédant un client http. La puissance de npm était quelque chose que nous voulions tester.

Bilan : npm est surpuissant ! Venant du monde java, on a trouvé des ressemblances avec maven. Même si je pense que maven est encore plus puissant que npm. Le grand nombre de librairie déjà existante rend possible de créer des applications complexe en un temps rapide. Le dynamisne de la communauté est apréciable même si il peut être déroutant par sa vélocité ! Il est hype de faire des api rest, Express le fait très bien, nous pensons maitrisé les concepts de base de Express et commencé à apprécier la puissance des middleware. Nous avons en parrallele maintenu une doc swagger, elle permetait au développeur front d'utiliser l'api, elle a très bien marché. Sur ce point l'intégration avec le javascript est pas fou (car le js n'est pas typé !).

Pour ce qui est du javascript, ça reste un langage assez bizarre et déroutant.

Vue.js :

MongoDB : Nous avions pas de "religion" sur le choix de notre bd. Notre choix a été sur mongo car nous recherchions une bd capable de bien manipulé des fichiers types mp3. Nous avons principalement toruvé de la documentation sur mongo couplé avec grid-fs. On a aussi pu découvrir et utiliser pour la première fois une base de donnée no-sql.

Bilan : mongo a pleinement rempli sa tache pour notre modèle de donné simple. Et la librairie mongoose le rend facilement utilisable en javascript.

Docker/ docker-compose  : Sur conseil, nous avons finalement choisi docker pour rendre le plus simple possible l'installation de notre appli.

Bilan : Il est vrai qu'il est assez facile à prendre en main (même si les tutos sur le web n'utilise pas toujours la derniere version) et il encore plus impressionnant quand on l'execute juste pour lancer l'appli

Fonctionnalités

Webservices

Nous avons crée un web service et nous l'utilisons avec le client

Il permet de convertir une video youtube (url de la page youtube contenant la video) et on l'enregistre dans la base de donnée en format mp3.

Pour ceci on utilise une lib qui utilise youtube-dl et et fluent-ffmpeg (qui vient wrapper ffmpeg en local)

Rôles

- Utilisateur

- Visiteur

Spécificités techniques

Installation

git clone https://gitlab.com/listenHub/listenHard.git

cd listenHard

docker-compose build

docker-compose up

se rendre sur l'url : localhost:8080

Test

Test de l'api :

Nous avons essayé de mettre en place 2 types de tests (proches) :

-tests unitaires

-test d'intégration

Nous en avons réalisé quelque uns, pour comprendre le principe, et rendre la CI plus intéressante !

Test du front :

API

docker-compose build docker-compose up

ouvrir l'url : localhost:3000/v1/api-docs pour avoir une magnifique documention de l'api grace à swagger v2 (open-api).

CI/CD

Nous avons utilisés plusieurs outils pour avoir de l'intégration continue

https://travis-ci.org/EmilienMottet/listenHard

https://app.codeship.com/projects/292250

https://codecov.io/gl/listenhub/listenhard/

https://coveralls.io/github/EmilienMottet/listenHard

https://gitlab.styleci.io/repos/6269833

https://snyk.io/test/github/emilienmottet/listenhard?targetFile=server%2Fpackage.json

https://gitlab.com/listenHub/listenHard/pipelines

Après utilisations (on aurait pu la mettre en place plus tôt dans le projet), nous ne pouvons louer ces outils.

Pour la CI gitlab est l'outils le plus agréable à utiliser, bien que Travis à peut-être une meilleure popularité. Codeship est très simple d'utilisation, mais on est vite limité avec la version pour les projets open-sources.

Codecov et coveralls sont assez proche, Codecov est un peu plus "hype". Sur ce point la, gitlab-ci est très simple, simple à mêttre en place mais aussi simple dans le rendu. Dommage qu'il n'y est pas de meilleur intégration avec le repo gitlab ou l'ide.

Pour la surveillance de faille de sécurité, on a déjà npm audit qui permet d'avoir un aperçu de la qualité des libs que l'ont utilise. De plus on utilise Snyk qui nous permets de vérifier quoditiennement la qualité des builds si elles deviennent vulnérables on le saura !

Démonstration

La vidéo suivante vous permet d'avoir un aperçu global de l'application, avec la création d'un compte, l'ajout d'un fichier .mp3, la création d'une playlist avec ajout d'une chanson dedans, puis la lecteur de la playlist dans le lecteur musical de l'application.

Voir la présentation de ListenHub sur Youtube

Liens

https://gitlab.com/listenHub/listenHard

https://trello.com/b/Kje6DPCn/skate

https://ensiwiki.ensimag.fr/index.php?title=CAW1_2018_Projet_de_Emilien_MOTTET_et_Amaury_PUNEL