yiddishgun11 / shuffletunes

Interconnected speakers with Raspberry Pi & WebApp for school project 🎵

Welcome on my profile page 🖥️💯

Using System.Brain;

namespace MyWorld
{
    internal static class Profile
    {
        /// <summary>
        ///  The main entry point of my Profile
        /// </summary>
        [STAThread]
        static void Main()
        {
            - 📍  From Belgium 
            - 👨‍🎓 Student in computer sciences
            - 👀 I’m currently working on secret & private projects
            - 📚 I’m currently learning system programming with C, C# & assembly language
            - 🧠 Learning C ++ ? => currently thinking about it:)
            - 📚 Greatly interested by Windows & sys internals
            - 🚀 I have interest in web development with ReactJS and ASP.NET
            
            Application.Run(Hello 👋);
        }
    }
}

shuffletunes's Issues

[US 10] : En tant qu'utilisateur connecté, je souhaite accéder au réglages de l'application afin de modifier les paramètres que je souhaite

Quel est la valeur de la US pour le client

Important

Description et objectif

Tout utilisateur connecté aura la possibilité d'accéder au panneau de réglages de l'application afin de modifier les paramètre qu'il souhaite changer (profil, couleurs, etc.)

Maquette

A venir

Critères d'acceptation spécifiques à la US

• L'utilisateur à accès au panneau de réglages grâce à un icone adéquat dans la barre de navigation

• L'utilisateur à accès au panneau de configuration

• Les réglages se présentent sous la forme d'une liste déroulante proposant à l'utilisateur les différents options possibles.

• La US respecte le design et la colorimétrie du projet

• La US passe les testes de vérifications généraux

• La US passe ses testes de vérifications spécifiques

Tâches techniques qui composent la US

• Création de la page web
• endpoints API
• base de données opérationnelle pour les éventuelles modifications à venir

Quel est la complexité de la US

6

Estimation du temps necessaire pour faire la US

8h

[US-3] : Exec commandes non sécurisées.

Erreurs liés aux différentes commandes contenu dans exec.js.
CodeQL a détecté des erreurs de sécurité:

• https://github.com/YiddishGun11/ShuffleTunes/security/code-scanning/28
• https://github.com/YiddishGun11/ShuffleTunes/security/code-scanning/29

Ce bug apparait depuis la PR #53.

Mettre en place une DB

• Mettre en place la DB sur base de la technologie choisie
• Mettre à jour le wiki

Redirection si connecté

On arrive pas à accéder au dashboard même si on est connecté. Le onEnter de la route vers le dashboard est probablement la cause

[US 7] : En tant que qu'utilisateur connecté, je souhaite pouvoir accéder à mon profil afin de pouvoir voir mes informations personnelles

Quel est la valeur de la US pour le client

Important

Description et objectif

L'utilisateur connecté pourra accéder à ces quelques informations personnelles à l'aide de cette fonctionnalité. Celle-ci permettra d'afficher un petit composant en haut à droite de l'écran de l'utilisateur et reprendra l'image et le pseudo de l'utilisateur actuellement connecté. Un bouton sera également présent en haut à droite du composant afin d'accéder à une page reprenant plus de détails du compte et également une option de modification de ces informations.

Ce composant apparaitra en cliquant sur l’icône "personnage" se trouvant en haut à droite de l'écran. Pour refermé le composant, il faudra recliquer sur l'icône cliqué précédemment pour ouvrir le composant.

Maquette

Dashboard général :



Cliqué sur l'icône mise en évidence pour faire apparaitre le composant :



Apparition du composant :

Critères d'acceptation spécifiques à la US

• Respect des colorimétries du site.
• Respect de la police du site. (Poppins)
• Un composant apparait lorsque l'utilisateur connecté clique sur l'icone de type profil placé en haut à droite de composant principal.
• Le composant affiche une image.
• Le composant affiche le pseudo de l'utilisateur connecté.
• Le composant admet un bouton en haut à droite de celui-ci.

Tâches techniques qui composent la US

• Récupération des informations personnelles nécessaire de l'utilisateur connecté auprès de la base de données.

Quel est la complexité de la US

5

Estimation du temps necessaire pour faire la US

5h00

Schéma prototype émetteur

• Création d'un schéma électronique de l'émetteur
• Upload le schéma sur le wiki

Testing US1

Il n'y a pas encore de tests front et back pour la US1. Il faut les faire

[US 1] : En tant qu'utilisateur connecté, je souhaite upload ma musique sur le Raspberry Pi afin de la rendre disponible sur l'application

Quel est la valeur de la US pour le client

Prioriatire

Description et objectif

La US consiste à donner la capacité à l'utilisateur connecté d'upload sa musique .wavet .mp3 sur le Raspberry Pi pour qu'elle soit disponible sur l'application et à ses différentes fonctionnalités développée lors d'autre US. Les fichiers musicaux présent sur le device utilisateur seront ainsi disponible sur le serveur FTP du Raspberry Pi.
Avant l'envoi des fichiers musicaux sur le serveur, l'utilisateur connecté a accès à une liste des musiques qu'il a soumis au formulaire d'envoi et à la capacité de supprimer une ou plusieurs musiques présents dans la liste.
Des pop-up s'affiche lors de la soumission de musiques dans le formulaire, lors du succès ou la réussite de l'upload et lors de l'annulation de l'upload.
La fonctionnalité sera disponible sur la page "Dashboard" en cliquant sur le bouton "Upload new file".

Maquette

1. Page d'upload

2. Si on a soumis des musiques dans le formulaires

3. Si on supprime une des musiques dans la liste

4. Si on clique sur le bouton "Cancel"

5. Si on clique sur le bouton "Send" et que cela échoue

6. Si on clique sur le bouton "Send" et que cela réussi

Critères d'acceptation spécifiques à la US

• Lorsque je me rend sur la page "Dashboard" et que je clique sur "Upload new files", le formulaire apparait sur la page.
• Lorsque je clique sur un autre bouton de navigation de la page ("Your files", "Your playlists", "Favorites Songs", etc.), le formulaire disparait.
• Lorsque je clique sur le formulaire, un gestionnaire de fichier s'ouvre.
• Si je choisi un ou plusieurs fichier .wav ou .mp3, ceux-ci sont rajouter dans la liste les fichiers en attente d'upload et une pop-up signalant cet ajout apparait.
• Si je choisi un ou plusieurs fichier qui n'ont pas l'extension .wavou .mp3, ceux-ci ne sont pas pris en compte.
• Si j'ai des fichiers en attente d'upload, ceux-ci apparaissent à l'écran sous forme d'une liste.
• Si je supprime une musique depuis la liste des fichiers en attente, celle-ci disparait de la liste et une pop-up signalant cette suppression apparait.
• Si le nombre de fichier en attente dépasse 20, on ne sait plus en rajouter.
• Si je clique sur le bouton "Cancel" et que la liste des musiques en attente d'upload est vide, rien ne se passe.
• Si je clique sur le bouton "Cancel" et que la liste des musiques en attente d'upload comporte au moins 1 fichier, la liste se vide complétement.
• Si je clique sur le bouton "Send" et que la liste des musiques en attente d'upload est vide, rien ne se passe.
• Si je clique sur le bouton "Send" et que la liste des musiques en attente d'upload comporte au moins 1 fichier, la procédure d'upload se lance.
• Si la procédure réussi, la/les musiques sont disponibles sur la page "Dashbord" en cliquant sur "Your Files" et un pop-up signalant le succès de l'opération apparait
• Si la procédure rate, la/les musiques restent dans la liste des musiques en attente d'upload et un pop-up signalant l'échec de l'opération apparait
• La US respecte le design et la colorimétrie du projet
• La US passe les testes de vérifications généraux

Tâches techniques qui composent la US

• #4 (prérequis)
• #5 (prérequis)
• Création de la page web "Dashboard" (prérequis)
• Création du composant "UploadMusic"
• Implémentation du composant "UploadMusic" dans la page "DashBorad"
• Création de l'endpoint POST uploadMusic

Quel est la complexité de la US

7

Estimation du temps necessaire pour faire la US

20 h

[US 6] : En tant qu'utilisateur connecté, je souhaite disposer d'une section "favoris" afin d'y stocker mes musiques favorites

Quel est la valeur de la US pour le client

Prioritaire

Description et objectif

L'utilisateur doit pouvoir liker des chansons depuis ses playlists afin qu'elles puissent aller dans une section nommée 'favorits'

Maquette

Critères d'acceptation spécifiques à la US

• L'utilisateur à accès à la section "favoris" disponible dans la barre de navigation de l'application

• L'utilisateur à accès à la liste de ses musiques

• L'utilisateur dispose d'un bouton de forme de coeur lui permettant de liker / disliker la musique de son choix

• Lorsque l'utilisateur like une chanson celle-ci se retrouve dans la liste des 'favoris' et le coeur de like est rempli pour signaler que la chanson à belle et bien été likée

• Lorsque l'utilisateur dislike une chanson celle-ci ne se trouve plus dans la liste des "favoris" et le coeur des like n'est plus rempli

• On ne peut liker qu'une seule chanson à la fois

• La US respecte le design et la colorimétrie du projet

• La US passe les testes de vérifications généraux

• La US passe ses testes de vérifications spécifiques

Tâches techniques qui composent la US

• Création de la page web
• endpoints API
• base de données opérationnelle pour stocker les titres des musiques favorites et ainsi conservé leur état

Quel est la complexité de la US

Sur une échelle de 1 à 10, nous avons décidé que cette US représenterait une difficulté de 6.

Estimation du temps necessaire pour faire la US

6h

Accessibilité

Il faudrait faire un check de toute l'application pour s'assurer qu'elle soit un minimum accessible aux personnes ayant un handicape.

Privacy Policy

Il faut qu'on mette un lien vers notre Privacy Policy et qu'on la rédige

[US 5] : En tant qu'utilisateur connecté, je souhaite disposer d'une section "playlist" afin de pouvoir trier mes musiques

Quel est la valeur de la US pour le client

Important

Description et objectif

l'utilisateur aura la possibilité de consulter la liste de ses playlists ou il aura la possibilité d'y rajouter des sons afin de trier ses musiques

1.1 Liste des Playlists

Lorsque l'utilisateur se rend dans l'onglet "playlists" de l'application, celui-ci peux consulter la liste de ses playlists précédemment créées ou sinon se retrouve face à un message lui permettant de savoir qu'il n'a pas encore de playlists

1.2 Listes des playlists + musiques

Lorsque l'utilisateurs clique sur une playlist, celle-ci s'ouvre de façon "dropdown" et la liste des musique associée à la playlist en question s'affiche

1.3 Créer une playlist

L'utilisateur peut, s'il le veut créer une nouvelle playlist et la rajouter à la liste de ses playlists

1.4 Supprimer des musiques dans une playlist

L'utilisateur peut, s'il le souhaite, supprimer des chansons de ses playlists

1.5 Supprimer une playlist

L'utilisateur peut, s'il le souhaite, supprimer une playlist existente qu'il ne souhaite plus utiliser

Critères d'acceptation spécifiques à la US

• L'utilisateur à accès à la section "playlist" disponible dans la barre de navigation de l'application

• L'utilisateur à accès à la liste de ses playlists

• L'utilisateur dispose d'un bouton lui permettant de créer une nouvelle playlist

• Lorsque l'utilisateur créer une playlist, celle-ci s'affiche bien dans la liste des playlists lors d'un refresh de la page

• Lorsque l'utilisateur click sur une playlist, il a accès à la liste des musiques de cette playlist

• On ne peut créer qu'une playlist à la fois

• La US respecte le design et la colorimétrie du projet

• La US passe les testes de vérifications généraux

• La US passe ses testes de vérifications spécifiques

Tâches techniques qui composent la US

• Création de la page web
• Endpoints API
• Base de données opérationnelle pour stocker les titres des musiques favorites et ainsi conservé leur état
• Utilisation de procédures

Estimation du temps de réalisation de la US

Sur une échelle de 1 à 10 et comparé aux autres US, nous plaçons celle ci sur un niveau de difficulté de 8 pour le nombre de critères associés à celle-ci

Inscription et serveur SFTP

Il est nécessaire qu'un dossier utilisateur soit créer sur le serveur SFTP lors de son inscription sinon celui-ci ne pourra pas upload et lire ses musiques via l'application.

[US 3] : En tant qu'utilisateur je souhaite pouvoir appuyer sur un bouton "Play" afin de pouvoir lancer ma musique sélectionnée

Quel est la valeur de la US pour le client

Important

Description et objectif

L'utilisateur pourra lancer un fichier musical afin de pouvoir l'écouter sur les différentes enceintes du système.

Le bouton "play" permettant de lancer la musique se trouvera au bas-centre de l'application web afin d'être le plus visible possible pour l'utilisateur. Le bouton sera représenté par une icone de type "play". Celui-ci cliqué lancera la musique sélectionnée et se modifiera en changeant de fonctionnalité et d'icone de type "pause".

La barre sera visible tout le temps sur la WebApp.

Type d'utilisateur

Les utilisateurs concernés seront tous ceux connectés à l'application WebApp.

Maquette

Bouton "Play"

Bouton "Pause"

Critères d'acceptation spécifiques à la US

• Respect du design du site.
• Respect du type d’icône du site.
• Respect de la colorimétrie.
• Le bouton sera orné d'une icône commune de type "lecture".
• Le bouton se modifie après être cliqué en icône de type "pause".
• Le bouton se modifie après être cliqué en fonction de type "pause".
• Le bouton "play" se modifie et l'affichage du titre de la musique s'affiche lorsque qu'une musique est sélectionnée.
• Le bouton "stop" cliqué change l’icône et efface le titre de la musique.
• Le bouton "stop" exécuté une commande shell permettant l’exécution d'un script arrêtant la diffusion FM de la musique.

Scénario

Un utilisateur se connecte grâce à ses informations d'authentification. Celui-ci connecté arrive sur l'application et peut directement voir la barre de gestion de son. Il pourra ensuite aller sélectionner une musiques dans ses playlists et double-cliqué dessus pour lancer la musique sélectionnée. Le bouton "play" changera d'icone et sera recliquable pour mettre pause à la musique.

Quel est la complexité de la US

7

Estimation du temps nécessaire pour faire la US

10h

[US 2] : En tant qu'utilisateur connecté, je souhaite disposer d'une section "favori" afin d'y stocker la liste de mes musiques favorites

Schéma prototype récepteur

• Création d'un schéma électronique du récepteur
• Upload le schéma sur le wiki

Testing US 8

Il faut des test back end et front end pour la US #21

Testing US 11

Il faut des tests pour la US #25 en front et en back

Corriger les problèmes de sécurité

Divers problèmes de sécurité ont été détecter via CodeQL, il est primordial de résoudre ces problèmes et fermer les failles

Tous les problèmes : https://github.com/YiddishGun11/ShuffleTunes/security/code-scanning

[US 8] : En tant qu'utilisateur non connecté, je souhaite m'inscrire à la WebApp afin de pouvoir disposer de toutes les fonctionnalités de l'application

Quel est la valeur de la US pour le client

Important

Description et objectif

La US a pour but de mettre à disposition un formulaire d'inscription pour tout les utilisateurs non connecté de créer un compte pour qu'il ait accès aux fonctionnalités de la webapp qui sont développés dans d'autres US.
Le formulaire d'inscription comporte 3 champs : un pseudo, un mot de passe et une vérification du mot de passe.
Ces champs sont soumis à différentes vérification en front et en back end.
En front end :
- le pseudo doit avoir une longueur comprise entre 5 et 20 caractères et doit autoriser les caractères @ et _ ainsi que les chiffres
- le mot de passe doit comporter au moins un chiffre, une lettre majuscule, une lettre minuscule et un caractère spécial (@ > < ! - _ % ainsi qu'une longueur comprise entre 10 et 20 caractères
- la vérification du mot de passe consiste à s'assurer que les valeurs de ce champs sont les même que le champs mot de passe

En back end :
- le pseudo doit avoir une longueur comprise entre 5 et 20 caractères, doit autoriser les caractères @ et _ ainsi que les chiffres et ne doit pas déjà exister dans la base de donnée
- le mot de passe doit comporter au moins un chiffre, une lettre majuscule, une lettre minuscule et un caractère spécial (@ > < ! - _ % ainsi qu'une longueur comprise entre 10 et 20 caractères
- la vérification du mot de passe consiste à s'assurer que les valeurs de ce champs sont les même que le champs mot de passe

La police de sécurité a été revue. Plus d'infos ici : #21 (comment)

Si les vérifications front end ne passent pas, le(s) champs problématique(s) changent de couleurs et indique ce qui ne va pas. De plus, l'envoi de la requête via le bouton "Register" est bloqué.

Si les vérifications back end ne passent pas, l'inscription n'a pas lieu et un message d'erreur expliquant le problème s'affiche sur la page.

Si tout se passe bien, un message de succès apparait et je suis redirigé vers la page de connexion

Maquette

1. Page Inscription

Critères d'acceptation spécifiques à la US

• De la page d'accueil, en cliquant sur le bouton "Login" puis "Register", on arrive sur la page d'inscription.
• Si je tape un pseudo non conforme (cf. description), le champs Pseudo change de couleurs et indique le problème et je ne sais pas soumettre ma demande d'inscription à l'aide du bouton "Register"
• Si je tape un pseudo qui existe déjà, un message d'erreur apparait après ma soumission d'inscription
• Si je tape un pseudo correcte, rien ne se passe
• Si je tape un mot de passe non conforme (cf. description), le champs "Password" change de couleur et indique le problème et je ne sais pas soumettre ma demande d'inscription à l'aide du bouton "Register"
• Si la vérification du mot de passe et le mot de passe ne sont pas identique, le champs "Confirm Password" change de couleur et indique le problème et je ne sais pas soumettre ma demande d'inscription à l'aide du bouton "Register"
• Si l'inscription réussi, un message de succès s'afficher et je suis redirigé vers la page de connexion

Tâches techniques qui composent la US

• #6 (prérequis)
• Page inscription
• page connexion
• endpoint API

Quel est la complexité de la US

3

Estimation du temps necessaire pour faire la US

5h

[US 12] : En tant qu'utilisateur je souhaite que le projet soit portable afin de l'utiliser dans n'importe quel endroit avec facilité

WARNING : Cette US ressemble probablement trop à un regroupement de tâches techniques sans pour autant réellement apporter une nouvelle fonctionnalité à l'utilisateur.

Quel est la valeur de la US pour le client

Prioriatire

Description et objectif

L'US a pour but de mettre en service l'application totalement en local.
Ce support doit être portable, pré configuré et sans action de l'utilisateur nécessaire afin de le faire fonctionner.

Il doit pouvoir être utilisé dans un endroit isolé de tout réseau, ou cable possible.
Le module central doit pouvoir communiquer avec les modules FM sans l'application d'un support physique et sans internet.
On utilisera donc un raspberry et il se composera de plusieurs serveurs :

• Serveur Web
• Serveur FTP
• Serveur FM
• Serveur Database
• Firewall

Maquette

N/A

Critères d'acceptation spécifiques à la US

• Wifi disponible afin pour se connecter au serveur web
• Fréquence FM pour la communication entre le serveur maitre et les modules
• Modules alimentés sans nécessité de prises de courant

Tâches techniques qui composent la US

• Création & Configuration serveur Web
• Création & Configuration serveur FTP
• Création & Configuration serveur FM
• Création & Configuration serveur Database
• Création & Configuration firewall

Quel est la complexité de la US

6

Estimation du temps necessaire pour faire la US

Beaucoup 15h

Action si fuite de donnée

Il faut mettre en place des moyens d'actions et d'informations pour les utilisateurs en cas de fuite de données

Register Captcha

Il nous a été conseillé de rajouter un captcha lors de l'inscription

Mise en place d'un serveur Web

• Mise en place du serveur Web
• Mettre à jour le wiki

Matériel pour émetteur et récepteurs

• Effectuer une recherche du matériel disponible
• Acheter le matériel adapté pour le projet
• Liste / Inventaire du matériel
• Mise à jour du wiki pour la partie matériel

Hard coded user in UploadMusic endpoint

L'enpoint a toujours un utilisateur hardcodé. Cela doit être changé afin de prendre l'utilisateur actuellement connecté.

[US 7] : En tant qu'utilisateur connecté je souhaite pouvoir avoir accès à mon profil afin d'y consulter mes informations

Quel est la valeur de la US pour le client

Important

Description et objectif

L'utilisateur aura la possibilité de cliquer sur un bouton situé en haut à droite de la fenêtre d'affichage de son profil afin de pouvoir modifier les informations s'y trouvant.

Maquette

Page de Profil :

Critères d'acceptation spécifiques à la US

• Un bouton d'affichage de profil sera en haut à droite de l'onglet d'accueil.
• Une fois cliqué, une nouvelle page affichant les informations sur l'utilisateur apparaitra.
• Les informations affichées sont correctes et correspondent bien à l'utilisateur.

Tâches techniques qui composent la US

• Mise en place d'une BDD
• Mise en place d'un serveur
• Traitement de requêtes GET et POST

Quel est la complexité de la US

4

Estimation du temps necessaire pour faire la US

3h

Création procédures SQL

• Transformer le code SQL en procédures
• Insérer les procédures en DB
• Remplacer le code SQL appelé depuis axios dans les procédures

Suppression des données utilisateur

Il faut donner la possibilité à l'utilisateur de supprimer ses données de l'application quand il le veut.

Testing auto Backend cassé

Les tests automatique fait par github action ne fonctionne pas. Les tests utilisent le même port (5000) en même temps, ce qui fait rater les tests qui n'ont pas eu accès à ce dis port

Inscription Consentement

Le RGPD indique que le consentement d'une personne doit être claire pour une fonctionnalité donnée. Il faut donc ajouter une case à cocher lors de l'inscription spécifiant que l'utilisateur à lu et accepte notre traitement des données personnelles

Lock front route

Un utilisateur non connecté ne devrait pas avoir accès au dashboard. Il faut le bloqué.

Mise en place d'un serveur SFTP

• Mettre en place le serveur
• Mettre à jour le wiki

[US 11] : En tant qu'utilisateur non connecté, je souhaite me connecté à la WebApp afin d'employer les fonctionnalités de l'application

Quel est la valeur de la US pour le client

Important

Description et objectif

La US a pour but de mettre à disposition un formulaire de connexion pour tous les utilisateurs non connecté pour qu'il puisse avoir accès à la page Dashboard et donc profité des fonctionnalités de l'application.

Le formulaire de connexion comporte 2 champs : un pseudo et un mot de passe.

Si les champs sont vide, rien ne se passe lorsqu'on effectue la requête.
Si le pseudo ou le mot de passe est incorrecte, un message d'erreur apparait. Ce message doit être générique et ne doit en aucun cas préciser si c'est le pseudo ou le mot de passe qui pose problème.
Si le pseudo et le mot de passe sont correctes, un token d'identification est crée et permet à l'utilisateur d'accéder à la page Dashboard et d'utilisé les fonctionnalités de l'application.

Maquette

EN COURS

Critères d'acceptation spécifiques à la US

• De la page d'accueil, en cliquant sur le bouton "Login", on arrive sur la page de connexion.
• Si je tape un bon pseudo et le bon mot de passe, un token est créé et je suis redirigé vers le dashboard.
• Si je tape un mauvais pseudo ou un mauvais mot de passe, un message d'erreur apparait. Le message d'erreur doit être générique, càd qu'il ne doit pas préciser la raison de pourquoi l'authentification à échoué.

Tâches techniques qui composent la US

• #6
• Page inscription
• endpoint API

Quel est la complexité de la US

3

Estimation du temps necessaire pour faire la US

5h