CAW1 2019 Projet de Arnaud PIERRET et Othmane AJDOR

De Ensiwiki
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 interactive 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

Logins et mots de passe des utilisateurs de démo:

  • Compte administrateur:
admin1@traily.club = 1admin1
admin2@traily.club = 2admin2
  • Compte coach:
coach1@traily.club = 1coach1
coach2@traily.club = 2coach2
  • Compte trainee:
trainee1@traily.club = 1trainee1
trainee2@traily.club = 2trainee2

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

Visiteur anonyme

Traily usecases-Anonyme.png

Trainee

Traily usecases-Trainee.png

Coach

Traily usecases-Coach.png


Administrateur

Traily usecases-Admin.png


Spécificités techniques

Modèle de données

Traily db.png

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 permettrait 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

Gestion de rôle

L'application propose 3 roles différents:

  • Administrateur
  • Coach
  • Trainee

Un middleware dans le Backend NodeJS se charge d'intercepter et de traiter les requêtes des utilisateurs et de vérifier les tokens d'accès fournis lors de la connexion ou lors du rafraîchissement des tokens après expiration sont toujours valides et que le rôle de l'utilisateur connecté correspond aux droits d'accès à l'API. Ceci permet de mutualiser le code de traitement de requête et d'éviter les répétitions de code entre les fonctions.

Un filtrage et traitement supplémentaire est ensuite fait au niveau des fonctions qui peuvent avoir des spécificités indépendantes les une des autres.

API

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 recréation 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.

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



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 protocole oAuth2 avec lequel d'autres services et API (Google, Strava...) peuvent facilement être ajoutés dans de futurs améliorations.

L'authentification par Facebook ne marche que sur le domaine Traily.club. Vous pouvez facilement créer une application Facebook en visitant la page développeur Facebook puis en remplaçant l'identifiant appId dans le composant de login Angular frontend/src/app/login/login.component.ts pour pouvoir l'utiliser sur votre propre domaine.

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.

WebView Android

En plus de l'accès à Traily via un navigateur, nous avons jugé nécessaire la mise en place d'une application mobile dans le but de rendre l'utilisation plus facile et ergonomique.

Plusieurs technologies intéressantes sont disponibles pour répondre à ce besoin comme NativeScript, Cordova ou Ionic qui proposent de mutualiser le code et réduire le temps de développement. Faute de temps, nous avons choisi d'utiliser une WebView classique qui peut s'installer sur un terminal Android et qui répond néanmoins parfaitement à nos attentes et aux besoins des utilisateurs.

En plus des fonctionnalités qu'offre Traily sur un navigateur web, cette application permet à l'utilisateur de:

  • Se connecter via son Facebook ou via un login/mot de passe classique
  • Créer des tracks en utilisant les services de géolocalisation disponibles sous Android
  • Uploader ou modifier sa photo de profil en utilisant sa caméra si son terminal en est équipé.

Un APK précompilé est fourni sous webview/Traily/output/Traily-debug.apk

CI/CD

L'intégration continue se fait par le biais de GitlabCI intégré au repository Gitlab.

Un fichier Dockerfile est inclu dans le repository pour construire l'image avec laquelle nous faisons nos tests d'intégration.

Jeux de tests

Trois jeux de tests peuvent être déroulés dans votre environnement de développement local, après chaque push dans les branches du repository, et en option lors du déploiement dans l'environnement de production.

Backend

Pour le Backend, 4 suites de tests d'intégration BDD (une pour chaque route du Backend) ont été rédigées pour couvrir les différents cas d'utilisation de l'application:

  • Authentification pour tester les fonctionnalités d'inscription, connexion et déconnexion, rafraîchissement des tokens d'autorisations
  • Utilisateurs pour tester les fonctionnalités de gestion d'utilisateurs (création, modification et suppression)
  • Trainees pour tester les fonctionnalités de gestion de Trainees suivis par un coach
  • Tracks pour tester les fonctionnalités de gestion de Tracks, dont la création et suppressions pour les utilisateurs, et la notation de ces tracks par les coachs.

Ces tests nous permettent d'avoir, en moyenne, une couverture de 93% sur l'ensemble des fonctionnalités du Backend et peuvent être lancés en lançant les commandes:

cd backend
yarn install
yarn test

Le résultat détaillé des tests de couverture peut être visualisé, après avoir lancé les tests d'intégrations, en utilisant la commande:

yarn postcoverage

Nous avons utilisé principalement les librairies:

  • Supertest, qui fournit une abstraction permettant d'effectuer facilement des tests d'envoi de requêtes HTTP
  • Chai, qui est une librairie d'assertions BDD/TDD

Frontend

Pour le Frontend, nous avons utilisés des tests E2E à l'aide de Protractor et Cucumber et des tests unitaires en utilisant Karma.

Pour pouvoir lancer ces tests, il faut installer:

  • WebDriver-Manager à l'aide de la commande
npm install -g webdriver-manager
webdriver-manager update

Tests E2E

Les tests E2E rédigés visent à valider le bon fonctionnement de quelques propriétés du Frontend comme la connexion et le suivi des Trainees.

Ces tests peuvent être lancés en lançant les commandes:

cd frontend
yarn install
yarn e2e

Tests unitaires

Les tests Jasmine/Karma rédigés visent à valider le bon fonctionnement des différents blocs (composants) d'Angular. Dans notre cas ils vérifient que les composants arrivent à s'instancier ainsi qu'un test sur la redirection lié au login.

Ces tests peuvent être lancés en lançant les commandes:

cd frontend
yarn install
yarn test

Installation

Pour pouvoir installer et utiliser Traily, il faut commencer par cloner le repository Gitlab.

Si des erreurs apparaissent durant l'installation et qui indiquent que certains modules ont été compilés en utilisant des versions différentes de NodeJS, vous pouvez utiliser la commande ci-dessous pour corriger cela:

npm rebuild --update-binary

Génération de certificat

Le lancement de l'application nécessite l'utilisation de certificat SSL. Pour ce faire, il faut générer un certificat au format CRT et une clé KEY à l'aide de la commande:

openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

Deux fichiers localhost.crt et localhost.key seront créés dans le dossier dans lequel vous êtes. Ces deux fichiers doivent être placés dans les deux chemins backend/src/config/https/ et frontend/src/assets/https/.

Backend

Après avoir généré et déplacé les certificats créés dans l'étape précédente, il faut créer un fichier d'environnement .env à partir de l'exemple fourni .env.example.

Les deux champs à renseigner sont:

  • MONGO_URI pour pointer le Backend vers l'instance et base de donnée MongoDB que vous avez créé (en local ou sur un serveur)
  • MONGO_URI_TESTS pour pointer le Backend vers l'instance et base de donnée qui sera utilisée pour faire tourner les tests.


le Backend peut maintenant être lancé:

Pour le lancer dans un environnement de développement avec une base de données MongoDB préremplie

  • Soit dans un environnement de développement avec une base de données MongoDB préremplie avec les commandes suivantes:
cd backend
yarn install
yarn dev
  • Soit dans un environnement de production avec une base de données vide avec les commandes suivantes:
cd backend
yarn install
yarn start

Une documentation de l'API backend peut être générée et consultée à l'aide des commandes:

cd backend
yarn install
yarn docs

Frontend

Le Frontend peut être maintenant lancé après avoir généré les certificats:

  • Soit dans un environnement utilisant les deux certificats générés à l'aide des commandes:
cd frontend
yarn install
yarn ssl
  • Soit dans un environnement dans lequel le développeur utilisera les certificats Apache ou NGINX utilisés dans leurs configurations:
cd frontend
yarn install
yarn start

L'application est maintenant accessible sur https://localhost:4200

Screencast

Une démo des possibilités de l'application est disponible en vidéo à cette adresse : Vidéo