CAW1 2019 Projet de Arnaud PIERRET et Othmane AJDOR

De Ensiwiki
Révision de 5 juin 2019 à 20:49 par Ajdoro (discussion | contributions) (API externe)

Aller à : navigation, rechercher
Traily Logo.png
Titre du projet Traily
Cadre Projet Web
Page principale CAW1_Demonstration_Realisation

Équipe Arnaud PIERRET, Othmane AJDOR
Encadrants Sébastien Viardot


Traily est une application web permettant à ses utilisateurs d'enregistrer et visualiser des parcours GPS sur une carte intéractive ainsi que d'avoir le suivi d'un coach.

Présentation du projet

Description

Traily Logo.png

Traily a pour but de permettre à ses utilisateurs d'enregistrer les parcours qu'ils effectuent à l'aide des données de localisation de leur appareil. Ils pourront ensuite les consulter sur une carte qui leur indiquera également des informations comme la date de l'exercice ainsi que la durée de ce dernier. Afin d'avoir un retour sur ses parcours, un coach pourra noter les parcours des personnes qu'il suit.


Une version live est disponible à l'adresse suivante : Traily

Technologies utilisées

Ayant déjà travaillé sur un projet Web utilisant Django, nous nous sommes dirigés vers NodeJS pour tester un nouveau framework. De plus, nous voulions une claire séparation entre le frontend et le backend, non seulement pour avoir à écrire une API complète, mais aussi pour se répartir de manière efficace le travail à réaliser.

Nous avons opté pour TypeScript sur l'ensemble des composants logiciels du projet. Ceci nous a permis d'écrire du code modulaire, organisé et facile à lire. Couplé avec un bon IDE, il nous a facilité la détection de bugs que nous aurions pu rencontrer durant le runtime.

Backend

  • NodeJS
  • Express
  • MongoDB

Frontend

  • Angular
  • Karma

Cas d'usages

Visiteur anonyme

  • Inscription (avec ou sans Facebook)
    100 %
  • Récupérer un mot de passe oublié
    100 %


Trainee

  • Connexion (avec ou sans Facebook)
    100 %
  • Accès à l'interface trainee
    100 %
  • Créer/Supprimer un track
    100 %
  • Accès à l'interface utilisateur
    100 %
  • Modifier ses informations
    100 %


Coach

  • Connexion (avec ou sans Facebook)
    100 %
  • Accès au panneau de coaching
    100 %
  • Consulter les trainees suivis
    100 %
  • Suivre un nouveau trainee
    100 %
  • Consulter les tracks d'un trainee suivi
    100 %
  • Noter le track d'un trainee suivi
    100 %
  • Arrêter le suivi d'un trainee
    100 %
  • Accès à l'interface trainee
    100 %
  • Créer/Supprimer un track
    100 %
  • Accès à l'interface utilisateur
    100 %
  • Modifier ses informations
    100 %


Administrateur

  • Connexion (avec ou sans Facebook)
    100 %
  • Accès au panneau d'administration
    100 %
  • Modifier/supprimer un utilisateur
    100 %
  • Assigner un trainee à un coach
    100 %
  • Accès à l'interface trainee
    100 %
  • Créer/Supprimer un track
    100 %
  • Accès à l'interface utilisateur
    100 %
  • Modifier ses informations
    100 %

Diagramme des Use Cases

Administrateur

Traily usecases-Admin.png

Coach

Traily usecases-Coach.png

Trainee

Traily usecases-Trainee.png

Visiteur anonyme

Traily usecases-Anonyme.png

Modèle de données

Traily db.png

API

Ci dessous, le tableau de notre API qui nous a évolué depuis la conception jusqu'à son état final qui est présenté ici :

Tableau récapitulatif
Routes GET POST PATCH PUT DELETE
/api/auth/register - anyone
Ajoute un nouvel utilisateur
CR 200
- - -
/api/auth/login - anyone
Renvoie un token d'accès
CR 200
- - -
/api/auth/refresh-token - user
Rafraîchit un token d'accès expiré
CR 200
- - -
/api/auth/logout - user
Force l'expiration du token d'accès
CR 200
- - -
/api/auth/forgot-password - anyone
Envoie un nouveau mot de passe par Email
CR 200
- - -
/api/auth/facebook - anyone
Envoie un nouveau mot de passe par Email
CR 200
- - -
/api/users coach
Renvoi la liste des utilisateurs
CR 200
admin only
Ajoute un utilisateur
CR 201
- - -
/api/users/profile <userID>
Renvoi les informations de <userID>
CR 200
- - - -
/api/users/<userID> <userID>
Renvoie les informations d'un <userID>
CR 200
- admin only
Modifie un utilisateur <userID>
CR 200
- admin only
Supprime l'utilisateur <userID> s'il existe
CR 204 ou 404
/api/users/<userID>/image <userID>
Renvoie l'image de l'utilisateur <userID>
CR 200
<userID>
Upload et renvoie l'image de l'utilisateur <userID> (coach)
CR 201
- - <userID>
Supprime l'image de l'utilisateur <userID>
CR 204
/api/users/<userID>/tracks <userID> et coach de <userID>
Renvoie la liste des trails d'un <userID>
CR 200
<userID>
Ajoute un track pour l'utilisateur <userID>
CR 201
- - <userID> et coach de <userID>
Supprime un <trackID> appartement à un <userID>
CR 204
/api/users/<userID>/<trackID> <userID> et coach de <userID>
Renvoie les informations d'une track <trackID> appartement à un utilisateur <userID>
CR 200 ou 404
- <userID>
Modifie un <trackID> appartenant à un <userID>
CR 204
- <userID>
Supprime un <trackID> appartement à un <userID>
CR 204 ou 404
/api/users/<userID>/trainees <userID> (coach)
Renvoie la liste des utilisateurs suivis par le coach <userID>
CR 200
- <userID> (coach)
Assigne un utilisateur à un<userID> (coach)
CR 200
- admin only
Retire un utilisateur au coach <userID>
CR 204

Nous avons préféré l'utilisation des requêtes PATCH au lieu de PUT qui n'actualise que les champs spécifiés dans les requête. Ceci évite la recreation ou le remplacement total du document dans la base MongoDB.

En plus de l'API fourni par le backend, nous avons implémenté des appels à l'API de Facebook afin de gérer l'authentification par OAuth. Après avoir récupéré un Token d'accès à Facebook, l'utilisateur le transmet au backend qui se charge de créer un utilisateur correspondant.

Schéma d'interface

Traily frontend UserInterface.png

Lors de la conception, nous avons défini que l'interface principale se composerait d'une carte au centre, avec à sa gauche un menu déroulant qui contiendrait l'ensemble des pistes enregistrées par l'utilisateur. Trois boutons au dessus permetterait de filtrer ces pistes par période tandis qu'un bouton en dessous lancerait la géolocalisation pour une nouvelle piste.

Architecture de l'application

Traily architecture.png

API externes

Authentification Facebook

Nous avons choisi d'utiliser l'API Facebook pour permettre aux utilisateurs de s'inscrire et se connecter à l'application à l'aide d'un compte Facebook.

Si l'utilisateur existe déjà dans la base de donnée mais choisit de se connecter par le biais de Facebook, un lien avec son compte existant est créé. Dans le cas échéant, un nouvel utilisateur est créé à partir des informations fournies par l'API Graph de Facebook et de l'image publique de l'utilisateur.

Nous avons utilisé pour cela le protocol oAuth2 avec lequel d'autres services et API (Google, Strava...) peuvent facilement être ajouté dans de futurs améliorations.

Le diagramme de séquence ci-dessous montre les différentes étapes de création de compte utilisant Facebook.

Traily facebook login seq.png

Envoi d'emails

Lorsqu'un nouvel utilisateur s'inscrit sur l'application, un email d'accueil est envoyé à l'adresse mail utilisée lors de son inscription en utilisant l'API de MailGun, un service d'envoi d'emails.

De même manière, si un utilisateur essaie de récupérer son mot de passe oublié, un email contenant un mot de passe temporaire est envoyé à son adresse mail.