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.
Sommaire
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 :
Architecture
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