CAW1 2018 Projet de Jérémy MABBOUX et Martin VENÇON

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

Équipe Jérémy MABBOUX, Martin VENÇON
Encadrants Sébastien Viardot


The Lonely Tomato est une application Web dont le principal objectif est la recherche de recettes, selon différents critères : par nom, par ingrédient, par tag (entrée, sauce...). Il permet aux utilisateurs de rechercher une recette spécifique ou d'acquérir des idées de recette se basant sur certains ingrédients.

The Lonely Tomato permet également de sauvegarder, d'évaluer, de commenter ou d'ajouter des recettes. A terme, l'application pourrait également permettre de partager des recettes ou d'exporter une liste de courses à partir de certaines recettes.

LonelyTomato.png

Screencast

Ensiwiki n'autorise l'upload que de 2 Mb, alors pour une meilleure expérience vous trouverez la vidéo de présentation de The Lonely Tomato sur Vimeo.

> C'est par ici <

Objectifs

Problématique de base : Proposer une application de recherche de recettes, à partir d'un nom, ou d'un à plusieurs ingrédients. On peut étendre l'application à un site de partage et de gestion de recettes.

Cahier des charges :

  • Gestion des utilisateurs (non connecté, connecté, connecté avec droits supplémentaires)
  • Recherche de recettes par nom, ingrédients
  • Application de filtres sur la recherche
  • Ajout de recettes
  • Page d'administration des recettes
  • Favoris
  • Système de notation
  • Système de commentaires
  • Recette(s) aléatoire(s)
  • Application "responsive"

Cas d'usage

Pour tous les utilisateurs :

  • S'inscrire
  • Se connecter
  • Rechercher une recette (multi-critères)
  • Trier et filtrer les résultats
  • Consulter les notes/commentaires pour une recette donnée
  • Afficher un certain nombre de recettes de manière aléatoire


Si utilisateur connecté :

  • Se déconnecter
  • Ajouter une recette en favori
  • Noter une recette
  • Poster un commentaire sur une recette
  • Ajouter une recette pour validation
  • Modifier ses recettes ajoutées
  • Consulter ses recettes et ses favoris


Si l'utilisateur est administrateur :

  • Valider ou refuser une recette ajoutée par un utilisateur
  • Tout ce que peut faire un utilisateur connecté

Processus d'ajout d'une recette

Depuis la liste de toutes les recettes (/admin/recipe_manager/recipe/)
Depuis la page d'édition d'une recette (/admin/recipe_manager/recipe/{ID}/change/)
  • Chaque utilisateur connecté a la possibilité d'ajouter des recettes. Pour ce faire, ils doivent remplir le formulaire d'ajout de recette.
  • Une fois ce formulaire validé, la recette est en attente de validation (ou de refus) par un administrateur (un mail est envoyé à chaque administrateur pour les avertir). Pendant cette période, la recette n'est visible que par son auteur.
  • Les administrateurs ont la possibilité de valider/refuser des recettes via leur interface à l'url : localhost:8000/admin/
  • La liste des recettes en attente se situe à l'adresse : localhost:8000/admin/recipe_manager/recipe
  • Screenshots montrant les boutons ajoutés à l'interface Administrateur permettant la validation/suppression des recettes ci-contre:
  • Si la recette est validée: elle devient visible par toute la communauté de The Lonely Tomato
  • Si la recette est refusée: elle est supprimée et oubliée à tout jamais
  • Dans les deux cas, un mail est envoyé à l'utilisateur (s'il l'a renseigné durant sa création de compte) pour l'avertir

Modèle de données

Les classes présentées dans le modèle UML ci-dessus ont été implémentées.

Lonelytomato uml.png

Choix techniques

Le projet a été réalisé en utilisant la version de production du framework Django (v2.0.5 à l'heure actuelle).

Moteur de recherche des recettes

Nous avons utilisé le moteur de recherche ElasticSearch afin de gérer les recherches selon différents attributs, de gérer l'auto-complétion et les fautes de frappe utilisateur.

Cela correspond à notre utilisation d'un service web externe.

Pour l'utiliser, nous nous sommes servi de :

Ces deux outils nous servent d'interface entre notre application et Elasticsearch. Ils permettent notamment de se connecter à ce service et de fournir un Client dans l'application Django. Puis, grâce à ce client, nous pouvons effectuer des requêtes à ce service web.

Framework CSS

Nous avons utilisé le framework CSS Materialize CSS pour notre front-end. Ce framework nous permet d'avoir facilement un design Material et gère le responsive design.

Base de données

Nous avons utilisé la base de donnée SQLite par défaut de Django pour stocker les données relatives à notre application (données utilisateur). Parallèlement à cette base, ElastiSearch nous permet de stocker les recettes ainsi que les produits (données de masse). Les recettes sont issues du site Marmiton et les produits de la base de données Open Food Fact.

Mise en place de la gestion des rôles

Les rôles ont été gérés dans les vues et les routes de l'application à l'aide des méthodes fournies par Django :

  • is_authenticated
  • is_superuser

Il est possible de créer un administrateur à l'aide de la commande suivante :

   python3 manage.py createsuperuser

Installation

Cette procédure d'installation a été écrite pour un système Linux.

Prérequis

  • Sources récupérées et accessibles
  • Python 3.6+
  • pip (pour Python 3)
  • virtualenvwrapper

Commandes pour installer les packages :

Aptitude
   sudo apt-get install python3 python3-pip virtualenvwrapper
Pacman / Yaourt
   sudo yaourt -S python3 python-pip
   sudo pip3 install virtualenvwrapper
   source /usr/bin/virtualenvwrapper.sh

Environnement virtuel

  • Création de l'environnement virtuel :
   mkvirtualenv -p /usr/bin/python3 <venv-name>
  • Travailler dans son environnement virtuel :
   workon <venv-name>

Installation des dépendances

Commande à lancer à la racine du projet dans l'environnement virtuel

   pip3 install -r requirements.txt

Lancement de l'application

Toujours à la racine du projet :

   python3 manage.py migrate --run-syncdb
   python3 manage.py runserver

L'application devrait maintenant être accessible à l'URL : http://localhost:8000

Utilisateurs par défaut

   python3 manage.py loaddata recipe_manager/fixtures/init.json

La commande ci-dessus insère en base deux utilisateurs :

  • <username:password>
  • admin:secretpassword (ROLE administrateur)
  • user:secretpassword (ROLE utilisateur)

API

Une API légère non-exhaustive a été créée grâce à la librairie Django Rest Framework. Les fichiers sources relatifs à cette API sont disponibles dans le dossier /recipe_manager/api/

L'authentification se fait via Basic Auth.

Tableau récapitulatif
Routes GET POST PUT DELETE
/users admin only
Renvoi la liste des utilisateurs
CR 200
admin only
Ajoute un utilisateur
CR 201
- -
/users/<ID> admin only
Renvoi les informations de l'utilisateur <ID> s'il existe
CR 200 ou 404
- admin only
Modifie l'utilisateur <ID> s'il existe
CR 200 ou 404
admin only
Supprime l'utilisateur <ID> s'il existe
CR 204 ou 404
/recipes Renvoi la liste des recettes
CR 200
logged user only
CR 201
- -
/recipes/<ID> Renvoi les informations de la recette <ID> si elle existe
CR 200 ou 404
- admin or author only
Modifie la recette <ID> si elle existe
CR 200 ou 404
admin or author only
Supprime la recette <ID> si elle existe
CR 204 ou 404

Au lancement de l'application (python manage.py runserver), cette API est accessible à l'url :

http://localhost:8000/api/

Cette API ne concerne qu'une partie du modèle utilisé dans l'application The Lonely Tomato (User et Recipe).

Tests

Les trois types de tests peuvent être lancé tous en même temps via la commande :

   python3 manage.py test

Unitaire

Des tests unitaires ont été réalisés grâce au module "tests" du framework Django. Ces tests vérifient essentiellement l'état des différentes routes de l'application selon l'état d'un utilisateur (loggé ou non).

Ces tests vérifient également la procédure de connexion. On peut lancer les tests grâce à la commande suivante :

   python3 manage.py test recipe_manager.tests.test_views_access

Selenium

Cette gamme de tests utilise Selenium.

Prérequis :

  • Un navigateur Google Chrome
  • L'application accessible à l'adresse http://localhost:8000 (python3 manage.py runserver)

Des tests fonctionnels ont été écrits pour cette application. Ils peuvent être lancés via la commande :

   python3 manage.py test recipe_manager.tests.test_selenium

Ces tests couvrent :

  • Le tri des recettes alphabétiquement
  • La navigation à travers les différentes pages de l'application

API

Des tests unitaires ont été écrits pour cette API. Ils peuvent être lancés via la commande :

   python3 manage.py test recipe_manager.tests.test_api

Ces tests couvrent :

  • le login d'un utilisateur
  • les quatre méthodes (GET, POST, PUT et DELETE) sur un objet Recipe, avec une attention particulière aux droits des différents types d'utilisateur existants (non connecté, connecté, administrateur)

Architecture de l'application

L'architecture de l'application correspond à l'architecture de base d'une application Django

  • /projet_web_ensimag (Django project)
    • Contient les settings de l'application ainsi que le fichier des urls racines
  • /recipe_manager (Django app)
    • /api
      • Contient les fichiers liés à l'API
    • /static
      • Contient les fichiers CSS, Javascript ainsi que les ressources (images) utilisées
    • /templates
      • Contient les fichiers HTML de l'application
    • /templatetags
      • Contient le fichier nous permettant d'enregistrer des filtres manuels utilisés dans les templates
    • /tests
      • Contient les fichiers liés aux différents tests

Rendu

Contenu du zip :

  • Screencast (screencast.mp4)
  • Readme (README.md)
  • Les sources de l'application The Lonely Tomato (sources/)
  • Un export de cette page wiki en PDF comprenant le modèle de données, le cahier des charges, etc (wiki.pdf)

Futur

Le site pourrait être mis en production tel qu'il est à l'heure actuelle. Cependant on pourrait ajouter les fonctionnalités suivantes :

  • Utilisateurs "amis" entre eux
  • Recommandation de recettes
  • Partage de recettes sur les réseaux sociaux
  • Export de liste de courses à partir d'une ou plusieurs recettes
  • Rang d'utilisateur en fonction de son activité et de sa réputation