Home - EmmanuelF-Ephec/Web2020 GitHub Wiki

Rapport groupe 17

Réalisé par : CROMPTON Glenn, FOUREAU Emmanuel, DELESTIENNE Damien

Projet McCrew

R1 : Description du projet

Introduction

Dans le cadre du cours de développement orienté web, nous allons réaliser un site web qui répond aux besoins d’un client. Nous avons pensé à travailler avec l’équipe du McDonald’s de Nivelles, car la communication au sein de l’équipe n’est pas bonne. Les crew’s ne sont jamais mis au courant des nouveautés, mais aussi des changements. Il est aussi ennuyeux de voir quels sont les horaires de la semaine, car il faut se déplacer jusqu’au restaurant à chaque fois.

L’équipe a accepté de collaborer bénévolement dans le but de créer un site web interne à l’entreprise, pour aider la communication entre les travailleurs (ou Crew’s).

Description globale

Le site web aura différents comptes utilisateurs comprenant des comptes « Managers » et des comptes « Crew’s », ils auront différents droits au niveau du site web. Ces comptes seront tous créés par les managers pour empêcher quelqu’un qui ne travaille pas au McDonald’s de se créer un compte.

Sur la première page se trouveront les annonces pour que les travailleurs ne les ratent pas en arrivant sur le site. La page sera composée de différentes annonces toutes faites par les managers, quand une annonce sera faite, un mail sera envoyé à tous les travailleurs pour qu’ils soient mis au courant des nouveautés. Les annonces seront utiles pour :

  • Annoncer le début des nouvelles campagnes (nouveaux burgers, frites, etc)
  • Annoncer les changements de procédure au sein du McDonald’s
  • ...

Il y aura un onglet de champ de discussion qui sera ouvert à tous. Tout le monde pourra y discuter, y laisser un message mais aussi répondre aux messages fait par ses collègues.

Le dernier onglet sera l’onglet des « horaires », il servira quant à lui aux managers pour mettre les horaires en ligne toutes les semaines une fois qu’ils sont prêts, et pour les crew’s à les télécharger et de pouvoir les avoir n’importe quand.

Tous les membres de l’équipe seront évidements capables de gérer leur compte personnel, de changer leur mot de passe, de mettre à jour leur adresse mail, etc…

Nous devons donc créer un site facile d’utilisation, intuitif et capable d’assurer une meilleure communication au sein du McDonald’s.

R2 : User Stories

  1. En tant qu’utilisateur, je veux pouvoir me connecter pour accéder au site.

    • L’utilisateur aura accès à un écran de login possédant deux champs de textes pour son email et son mot de passe ainsi qu’un bouton « se connecter » et « mot de passe oublié ». Comme ceci :ecran login 1
    • Lorsque l’utilisateur clique sur le bouton se connecter, l’application va vérifier en base de données si ses informations s’y trouvent et sont correctes.
    • Pour ce faire, il faut effectuer une requête de type POST à l’url suivant : localhost:8000/api/token
    • Si les informations sont bonnes, l’utilisateur se connecte au site et accède directement à la page d'accueil suivante : localhost:3000/home , sur laquelle se trouve aussi une barre de navigation.
    • Si les informations ne sont pas correctes, l’utilisateur revient simplement sur une nouvelle page de login sur laquelle se trouve un message. Comme ceci :

    login failed

  2. En tant qu’utilisateur, je veux pouvoir accéder à la page des annonces afin de les consulter.

    • L’utilisateur pourra accéder à la page des annonces grâce à la barre de navigation qui l’emmènera à l’url suivant localhost:3000/announcements.
    • Une fois sur la page des annonces, l’utilisateur aura une liste de toutes les annonces qui s’offrira à lui : annonces
    • Pour charger toutes les annonces, il faut effectuer une requête à la base de données : GET localhost:8000/api/notice.
    • Pour pouvoir consulter une annonce, l’utilisateur n’aura qu’à cliquer dessus. Cela aura pour effet de l’emmener sur une page qui contient juste l’annonce en question, se trouvant à l’url suivant localhost:3000/announcements/#id annonce
    • Pour charger l’annonce, il faut effectuer une requête à la base de donnée de la sorte : GET localhost:8000/api/notice/#id

  3. En tant qu’utilisateur de type manager, je veux pouvoir ajouter des utilisateurs afin d’ajouter tous les membres de mon équipe.

    • Pour pouvoir ajouter un utilisateur, l’utilisateur devra se rendre sur la page de gestion manage profiles localhost:3000/ManageProfiles sur lequel il trouvera un bouton pour ajouter un utilisateur.
    • Une fois que l’utilisateur aura cliquer sur ce bouton, un formulaire apparaîtra pour qu’il crée un utilisateur : addcrew
    • L’utilisateur devra compléter les informations et ensuite cliquer le bouton envoyer.
    • Lorsque l’utilisateur clique sur le bouton créer, une requête POST est effectuée à la base de donnée via l’url suivant : locahost:8000/api/users
    • Une fois l’utilisateur créé, le formulaire disparaît et l’utilisateur est ajouté dans la liste.

  4. En tant qu’utilisateur de type manager, je veux pouvoir ajouter une annonce afin de la rendre visible par tout le monde.

  5. En tant qu’utilisateur, je veux pouvoir accéder aux horaires afin de les télécharger.

  6. En tant qu’utilisateur de type manager, je veux pouvoir ajouter un horaire afin de le rendre accessible à tout le monde.

  7. En tant qu’utilisateur, je veux pouvoir accéder à mon profil afin d’y consulter mes données personnelles.

  8. En tant qu’utilisateur, je veux pouvoir modifier mes informations personnelles afin d’y effectuer des changements si nécessaire.

  9. En tant qu’utilisateur, je veux pouvoir cliquer sur un bouton mot de passe oublié lors du login afin de réinitialiser mon mot de passe.

  10. En tant qu’utilisateur de type manager, je veux pouvoir supprimer des utilisateurs afin de faire des mise à jour de mon équipe.

  11. En tant qu’utilisateur, je veux pouvoir consulter le chat afin d’y lire les messages.

  12. En tant qu’utilisateur, je veux pouvoir poster un message dans le chat afin de discuter avec les autres membres.

R3 : Choix technologique Front-End

React

En ce qui concerne, nous avons choisi React car elle est largement utilisé par d'autres applications et par manque de connaissances envers les autres frameworks, lors du choix de ceux-ci en début de projets.

Pour notre projet et nos besoins, react n'a pas été le meilleur choix car nous n'utilisons pas ses composants à leurs pleins potentiels. Vu que notre applications ne demande pas beaucoup d'éléments réutilisables et n'est pas une application Single-page, react ne rend pas la travail plus simple.

R4 : Choix technologique Back-End

Django

En ce qui concerne les technologies niveau serveur nous allons utiliser Django combiné à python. Nous avons fait ce choix car nous pensons que Django est le framework qui a le plus grand avenir devant lui. Certes, beaucoup de site utilisent encore du PHP avec Symphony mais nous pensons que de plus en plus de développeurs vont se tourner vers Django.

Alors pourquoi Django et non Flask ? Alors certes, Flask est beaucoup plus libre que Django mais Django offre plus de possibilités comme: un panneau administrateur, une interface de base de données, une architecture dossier pour notre application et notre projet mais surtout un ORM. Les principales raisons de notre choix se sont portées surtout sur l'orm et l'architecture des fichiers. En effet, l'orm est très pratique pour travailler avec une base de donnée et flask ne nous en offrait pas. de plus, les fichiers offerts par Django tel que models.py url.py settings.py nous ont été très utile.

R5 : Architecture, fonctionnement du site et techniques de déploiement

Lorsque l'utilisateur veut accéder à notre site, il doit d'abord se connecter. Après son login, il aura accès à notre site. En fonction de son compte, si il est manager ou crew, il aura des fonctionnalités différentes, tel que l'ajout de d'annonces ou d'horaires pour le manager.

R6 : Diagrammes de classes

Nous avons décidé de ne pas réaliser de diagramme de classe tout simplement car pour nous ce n'est pas réalisable dans le cadre de notre projet. En effet, les seuls structures que nous avons sont nos tables de bases de données et donc le diagramme relationnel de notre base de données est suffisant.

R7 : Justification base de données

Pour notre base de données nous avons choisi d'utiliser MySql. La première raison est que nous avons besoin d'une base de données relationnelle et donc ça élimine déjà des possibilités. Mais pourquoi MySql et pas une autre relationnelle? La raison est surtout que nous l'utilisons dans le cadre d'un autre cours et donc il était plus évident pour nous de s'orienter vers MySql. Après plusieurs recherches, nous nous sommes rendu compte que peut-être nous aurions pu utiliser MariaDB pour des raisons purement philosophiques. En effet, MariaDB est un fork de MySql et ils se sont séparés suite au rachat par Oracle. Contrairement à Oracle, MariaDB se veut opensource et veut promouvoir le développement communautaire.

R8 : Diagramme base de données

db diagramme

R9 : Documentation API Rest

Vous trouverez notre API Rest à ce lien : https://glenn.juliencoppin.be/api/swagger/

R10 : Manuel d'installation

Creer une base de données mysql avec un nom quelconque

Aller dans le directory 'back' et créer un fichier que on nomme '.env'

Dans ce fichier ajouter tous les champs suivant:

SECRET_KEY=UneSecretKey DEBUG=True DB_NAME= B_HOST=127.0.0.1 DB_PORT=3306 DB_USER= DB_PASSWORD=

Changer les endroits ou c'est vide par vos coordonées

En back-end:

Ouvrir un terminal dans la directory "back"

python3 -m pip install --user virtualenv(installer environnement virtuel)

python3 -m venv env(créer l'environnement virtuel)

chmod u+x env/bin/activate

source env/bin/activate(Activer l'environnement virtuel)

pip install -r requirements.txt(installer toutes les dépendances nécessaires pour le fonctionnement du serveur Django)

python manage.py migrate pour créer toutes les tables dans la base de données(besoin d'être créée avant la commande)

python manage.py runserver(démarrer le serveur Django + connexion à la base de donnée)

En Front-end

Ouvrir un nouveau terminal dans la directory "fend"

npm install(installer toutes les dépendances react)

npm start(démarrer l'application react)

R11 : Liens du projet

Lien vers notre site : https://glenn.juliencoppin.be (Si vous voulez utiliser notre site, utilisez les identifiants suivants: '[email protected]' 'Test1234=' )

Lien vers notre Trello : https://trello.com/b/PRFwLd1b/site-web

R12 : Documents préparés pour les coaching

Voici le document pdf qui reprend tous les documents que nous avons préparés pour chaque coaching : Préparation coachings

R13 : Testing

Test d'API

Pour tester notre API, nous avons utilisé Postman. En effet, Postman nous permet de créer des collections dans lesquelles nous pouvons sauvegarder des requêtes munies de tests. Voici un exemple lorsque nous lançons notre collection de test: test postman

Tests unitaires

Au niveau des tests unitaires nous avons implémentés du snapshot testing. Le but étant de vérifier que lorsque que quelque chose est modifié dans le code, notre page reste la même dans sa globalité. Voici un exemple de lancement de tests : test et voici le résultat du test coverage : testcvr

R14 : Sécurité

Analyse de sécurité

Au niveau de la sécurité nous devions faire attention à :

  • Restreindre l'accès à la base de donnée à des utilisateurs autorisés
  • Ne pas faire transiter les mots de passes en clair
  • Ne pas utiliser root pour se connecter à la base de données
  • Chiffrer les communication avec notre application

Sécurité mise en place

  • Mise en place d'https
  • Mise en place du système de token pour effectuer des requêtes à la base données
  • Hachage des mots de passes
  • Utilisateur de base donnée avec des droits restreints

R15 : Mise en valeur

Nous avons mis en place un système d'utilisateurs fonctionnel. Le site n'est pas accessible sans être connecté avec son propre token.

Nous avons aussi utilisé la librairie redux pour react. C'est une librairie pas facile à prendre en main mais qui s'avère très utile dans notre cas. Elle nous permet de vérifier si un utilisateur est toujours connecté au site Web et si pas, il est automatiquement redirigé. Redux nous permet aussi d'avoir accès à certaines variables dans toute notre application front-end.

R16 : Références

Django

Ceci ne sont que certains liens que nous avons utilisé, mais nous en avons utilisé bien bien plus.

R17 : Interactions avec le client

Lors de notre première rencontre avec le client, nous avons discuté du but de l'application et ce dont elle devrait être capable de réaliser. Par la suite, nous avons à nouveau rencontré le client pour discuter de l'application que nous lui proposions de réaliser pour correspondre le mieux à ses attentes. Depuis ce jour, nous n'avons plus eu de contacts avec le client. Nous attendons la fin du confinement pour le rencontrer et lui faire essayer notre application.

R18 : Fonctionnement du groupe

Pour travailler sur ce projet, nous nous sommes réparti les tâches. Damien s'est plus concentré sur la partie back-end ainsi que les rapports et Emmanuel et Glenn se sont plus concentré sur la partie front-end. Tout d'abord, nous avons pas mal discuté sur l'aspect de l'application et à quoi elle devrait ressembler. Une fois cela fini, nous avons réalisé les user stories et de la nous les avons mise sur le trello. Une fois le trello réalisé, il nous suffisait de nous y rendre, voir les tâches qu'il restait à accomplir et les faire. Pour ce qui est du code, nous avons fortement utilisé git pour nous tenir à jour et transmettre notre code aux autres.

R19 : Réalisation et conclusions personnelles

Damien

Dans ce projet j'ai réalisé une grande partie du back-end. En effet, je me suis occupé de la base de donnée, de la mise en lien de django avec notre base de données pour ce qui concerne l'api et les requêtes. Je me suis aussi occupé du testing de l'api ainsi que des rapports.

A la fin de ce projet je me rends compte qu'en fait je ne connaissais pas tant de choses que cela sur les sites web. En effet, je me suis rendu compte que c'était bien plus que du simple html js et css. Je suis assez content de ce que j'ai pu apprendre ainsi que des techniques de collaboration utilisées. Je me suis aussi rendu compte que le développement web, n'était pas la chose que je préférais le plus dans l'informatique. Ce projet m'a demandé plus de temps au niveau des recherches effectuées plutôt que de temps de développement pur, j'ai trouvé cela un peu dommage...

Emmanuel

Dans ce projet, j'ai réalisé en partie le front-end et la connexion entre celui-ci et le back-end. J'ai aussi appris comment utiliser les JWTokens pour notre site.

Ce projet m'aura pas mal appris sur le fonctionnement d'un site Web et de toute la partie cachée de l'iceberg (surtout la partie back-end dont je n'avais pas conscience). Encore besoin d'amélioration dans l'auto-apprentissage. Il y avait aussi une bonne communication dans notre groupe qui m' aidé à tenir le cap.

Glenn

Au cours du projet j'ai essayé d'etre un développeur full stack, mais je me suis retrouvé à travailler tout de même plus sur le front-end avec Emmanuel. Je n'ai absolument pas trouvé simple de commencer ce projet car même si nous avions déja fait du javascript, et du sql en cours, on avait jamais travaillé sur un site web en lui même pour mélanger le tout.

Je ne savais pas par ou commencer et personnellement je trouvais que à ce niveau la nous n'avions pas beaucoup d'aide, je me rappelle que nous avons essayé de commencer par faire du back-end (avec notre coaching prototype qui arrivait a grand pas),en se disant que c'était le plus important, mais nous ne savions pas que on devait faire notre base de donnée. A plusieurs reprises nous nous sommes retrouvés à jeter à la poubelle des grandes parties de code parce que nous remarquions que il était inutilisable au plus nous apprennions les frameworks en eux même, parce que oui, même si on connaissait un peu le javascript, React n'a rien a voir et prend autant de temps à apprendre que un tout nouveau language.

Ce projet m'aura tout de même appris à travailler en équipe et m'aura aidé sur voir l'importance de la gestion du temps car j'avais très grandement sous estimé le temps que ça allait nous prendre. Il m'aura quand même permis de comprendre le fonctionnement d'un site web et surtout de savoir pour le prochaine que je vais developper, quels sont les choses importante auquelles penser au préalable.