CAW1 2019 Projet de Matisse LANDAIS et Loïc ROSSO

De Ensiwiki
Aller à : navigation, rechercher
Project schedule.png
Titre du projet En Cas de soif
Cadre Projet Web (alternants 2A)
Page principale CAW1_Demonstration_Realisation

Équipe Matisse LANDAIS, Loïc ROSSO
Encadrants Sébastien Viardot


En Cas de Soif a pour but de proposer une carte avec les points d'eau les plus proche selon la localisation de l'utilisateur. L'utilisateur pourra donc la renseigner, ajouter et supprimer des points d'eau, ainsi que regarder ceux des autres. L'application sera donc communautaire et un administrateur pourra supprimer les points inutiles.

Présentation de l'application

Logo ecds.png


Objectifs du projet

Ce projet nous permettra de développer nos connaissances en web à l'aide d'un framework, Django, et de Bootstrap pour le frontend. De plus, nous utiliserons Mapbox, une API externe utile pour afficher des points d'eau sur une carte. Des tests de non régressions et la mise en place d'une CI aura pour effet de s'assurer de la qualité de notre code et de son évolution générale. Des tests unitaires seront aussi mis en place pour délivrer un code robuste

Bien que nous travaillons en binôme, la mise en place de cycle agile est importante pour le déroulement du projet. C'est pourquoi nous utiliserons un tableau Kanban et prendrons des user stories au fur et à mesure du projet.

Cas d'usage

Un utilisateur pourra :

  • S'inscrire, se connecter et de déconnecter
  • Voir les points d'eau sur une carte grâce à sa localisation
  • Ajouter et supprimer des points d'eau
  • Connaître sa localisation et ajouter un point d'eau sur celle ci

Un administrateur pourra :

  • Révoquer un utilisateur abusif
  • Supprimer les points d'eau de tout les utilisateurs

Un administrateur est un cas spécifique d'utilisateur. Il pourra donc réaliser les mêmes actions plus celles précédemment énoncées.

DiagrammesCUEnCasDeSoif.png

Différents scénarios d'usage

Scénario d'un utilisateur :

  • 1 : Un utilisateur anonyme se rend sur le site dont il a entendu parler
  • 2 : Il s'inscrit, puis se rend sur la carte des points d'eau
  • 3 : Il ajoute un point d'eau car il sait que des amis à lui vont en montagne dans la semaine

Scénario anonyme :

  • 1 : Un utilisateur anonyme fait du skateboard le long de l'isère
  • 2 : Avec la chaleur excessive durant l'été, il décide de faire une pause pour boire
  • 3 : Il n'a plus d'eau et veux pouvour remplir sa gourde
  • 4 : Il se rend sur en cas de soif et trouve un point d'eau proche

Scénario administrateur :

  • 1 : Un utilisateur ajoute des points d'eau en plein milieu de l'Atlantique
  • 2 ! L'administrateur les voit, peut révoquer l'utilisateur et supprimer les points d'eau inutiles

Scénario administrateur (options) :

  • 1 : Les utilisateurs votent en défaveur d'un point d'eau qui n'existe pas
  • 2 : L'administrateur voit les votes négatifs et peut effectuer les mêmes actions que dans le scénario précédent

Modèle de données

DiagrammeClasseEnCasDeSoif.png

Présentation technique de l'application

Choix de technologies

  • Django : ce framework python permet de développer en seulement quelques lignes une API Rest avec un endpoint. Le langage python permet de développer rapidement des modèles de données sans se préocupper de certains aspects mais en gardant l'essentiel.
  • Bootstrap : nos pages étant relativement simple il nous a paru judicieux de rendre les pages en html et Jinja2. Bootstrap a été utilisé pour l'esthétique d'une part mais aussi pour sa responsivité.
  • Mapbox : une API en javascript proposant de nombreuses fonctionnalités comme l'ajout de marker ou l'utilisation de token 'maitres' permettant de palier à des soucis de sécurités (token mis à jour en interne toutes les 15 minutes pour éviter les accès excessif)

Tests

  • Django Unit Test : les tests unitaires fournis par Django nous ont permis de tester des fonctionnalités comme l'accès à certaines pages, les modèles utilisateurs et l'API.
  • Selenium : le framework Selenium a été utilisé pour les tests sur la navigation, les formulaires (connexion ...) afin de tester les actions pouvant être effectuée par un utilisateur.

Intégration continue

N'ayant pas utilisé le Gitlab de l'Ensimag mais Github, l'intégration continue a été faite sur Travis avec un déploiement automatique vers Docker

  • Travis : Lors de chaque mise à jour sur master ou bien lorsque que quelqu'un effectue une pull request, des tests unitaires et d'intégrations se lancent et s'assurent que tout fonctionne. un bilan de la couverture de test est également généré. De plus lorsque travis s'exécute sur master, il réalise la fonctionnalité décrite ci dessous.
    > Notre intégration continue : https://travis-ci.com/Matissou/EnCasDeSoif
  • Docker : après chaque mise à jour de la branche master sur Github/Gitlab, l'intégration continue Travis créée et pousse sur le dockerHub une image Docker avec la dernière version du projet ainsi que les dépendances. Il suffit de récupérer cette image sur Docker Hub avec la commande correspondante et le tour est joué.
    > Notre image docker : https://cloud.docker.com/repository/docker/loicrosso/en-cas-de-soif/
  • Codecov : Pour chaque pull request et sur master, un bilan de la couverture de test est réalisé par cet outil. Il permet de visualiser le pourcentage total de couverture, ainsi que de comparer les différences entre différentes branches.
    > Notre couverture de test : https://codecov.io/gh/Matissou/EnCasDeSoif

Architecture du système

ArchiEnCasDeSoif.png

API

Utilisation

Il est possible d'utiliser EnCasDeSoif en utilisant l'API REST suivante. Cette API est accessible via l'url :

  <baseURL>/api/<path>


  • Les cases marquées d'une interdiction représentent une méthode d'API non valide pour une URL donnée.
  • Les cases marquées d'un verrou représentent une méthode d'API qui nécessite une connection pour être utilisée (Basic AUTH par exemple avec votre user/password).
Apiroutes.png

- Modèle pointEau pour interragir avec l'API :

 {
   "pk": 1,
   "nom": "Fontaine foot",
   "lat": "43.09000000",
   "long": "34.00000000",
   "desc": "Une fontaine fort sympathique à côté des stades de foot !",
   "owner": "someOwner"
 }

- Modèle de user pour interrair avec l'API :

 {
 "id": 1,
 "username": "someOwner",
 "pointseau": [1, 2, 8]
 }

Rotation de Token

Les tokens utilisés par notre application changent toutes les 15 minutes afin d'éviter un dépassement de quota en cas de récupération frauduleuse de la clé. Quand un utilisateur souhaite récupérer des points d'eau, si la clé temporaire a moins de 15 minutes d'existence on peut l'utiliser, soit on génère une nouvelle clé. L'utilisateur reçoit dans les deux cas ses données. Voici le diagramme de séquence attaché :

DiagSeqAPI Token.png

Screencast

Installation & lancement

Une clé Mapbox est requise pour l'utilisation de l'application. Il vous faudra :

Depuis les sources

Prérequis :

  • Python 3.7
  • Pip

Remplacez votre login et clé Mapbox dans la commande

 $ git clone https://github.com/Matissou/EnCasDeSoif
 $ cd EnCasDeSoif
 # Modifiez le fichier .env avec votre login et clé d'api Mapbox 
 # Sourcez le fichier .env
 $ source .env
 #installer les dépendances
 $ pip install -r requirements.txt
 # préparer la base de données
 $ python manage.py makemigrations && python manage.py migrate
 # lancer le serveur
 $ python manage.py runserver --insecure

Avec Docker

Prérequis :

  • Docker

Remplacez votre login et clé Mapbox dans la commande

 $ docker pull loicrosso/en-cas-de-soif
 $ docker run --rm --name EnCasDeSoif -p 8000:8000 \
               -e MAPBOX_LOGIN='MyMapboxUsername' \
               -e MAPBOX_PRIVATE_KEY='sk.MyMapBoxSecretKey' \
               loicrosso/en-cas-de-soif

Notre image docker se trouve ici

Accès

Après l'une des deux installations, rendez-vous à l'adresse :

 localhost:8000

Démonstration

Voici une vidéo de présentation de notre application : https://www.youtube.com/watch?v=c0UllQNmUXM