CAW1 2020 Projet de Julien REBOUL, Ilona OBRY

De Ensiwiki
Aller à : navigation, rechercher
Project schedule.png
Titre du projet Déjà-hu
Cadre Projet Web 2AA Ensimag 2020

Équipe Ilona Obry, Julien Reboul
Encadrants Sébastien Viardot


Description du projet

Déjà-hu est un site qui répertorie les apparitions de dahu en France afin de mieux comprendre cet animal mystérieux. Il se base sur du crowdsourcing, c'est à dire que n'importe quel personne qui a vu ou cru voir le dahu, source à l'appui ou non, peut se connecter et enregistrer l'endroit et la date où elle l'a vu à l'aide d'une carte pour mieux géolocaliser l'évènement.

Technologies utilisées

Frameworks

Django

Django est un framework Python qui permet de développer rapidement les bases d'un site web. Nous l'avons notamment utilisé pour gérer:

  • La navigation entre les pages
  • La base de données
  • La création d'objets
  • La gestion des utilisateurs
  • La gestion des fichiers uploadés par les utilisateurs
  • Globalement les échanges entre le front-end et le back-end

Bootstrap

Bootstrap est un framework qui fournit des designs complets et responsives pour la partie front d'un site web. Nous l'avons notamment utilisé pour:

  • La barre de navigation
  • Les différents formulaires

Selenium

Selenium est un framework qui permet l'automatisation de tests autant du côté front que du côté back. Il a été utilisé pour tester les fonctionnalités de l'interface du site telles que :

  • La navigation entre les pages
  • La cohérence de l'affichage d'une page en fonction de la présence ou non d'un utilisateur connecté
  • La connexion d'un utilisateur au site
  • La déconnexion d'un utilisateur
  • La présence et la pertinence des informations présentent dans certaines parties du site

API

Wikipedia

Nous utilisons l'API Wikipedia pour récupérer les informations de la page correspondante au dahu. Nous affichons ensuite certaines des informations récupérées sur la page "Informations" de notre site.

Google Maps

Nous utilisons L'API Google Maps pour générer une carte sur la page "Carte" du site. Cette carte est utilisée pour visualiser les endroits où le dahu a été vu à l'aide d'event:

Event.PNG

Base de données

Pour la base de données nous utilisons SQLite qui est très bien intégré à Django. Cela permet entre autre de facilement lier les données avec les modèles créés avec Django.

Modélisation

Models.PNG

Django permet de gérer plus facilement les Medias, notamment en enregistrant le fichier uploadé dans un dossier particulier puis en enregistrant le chemin en base de données.

Pour des raisons de tests et de sécurité que nous n'avons pas pu mettre en place, nous avons préféré limiter d'une part le type de fichier à upload à des images (jpg, jpeg, png, gif) et le nombre de fichier à upload par Evenement à 1 seul.

Cas d'utilisation

Use case.PNG

Architecture

Lors de la création d'un projet Django, le framework génère une architecture de base que nous avons utilisé. Durant le développement du site, nous avons essayé au maximum de respecter les recommandations de la documentation Django en terme d'architecture de projet.


Répertoires particuliers :

  • dejahu/ : Le premier répertoire racine dejahu/ est le contenant du projet
  • dejahu/dejahu/ : Le sous-répertoire dejahu/ correspond au paquet Python effectif du projet
  • dejahu/dejahu_map/ : Répertoire dont la structure accueil l’application
  • dejahu/dejahu_map/migrations/ : Les fichiers de migration de l'application sont stockés ici (utiles pour la modification des modèles)
  • dejahu/dejahu_map/templates/dejahu_map/ : Stock tous les fichiers .html
  • dejahu/dejahu_map/static/ : Stocke tous les fichiers static dont l'application a besoin (images, javascript, css ...)
    • dejahu/dejahu_map/static/css/ : Stocke tous les fichiers css de l'application
    • dejahu/dejahu_map/static/js/ : Stocke tous les fichiers javascript / jquery de l'application
    • dejahu/dejahu_map/static/pictures/ : Stocke toutes les images de l'application (ex: logo)
    • dejahu/dejahu_map/static/uploaded_files/: Stocke tous les fichiers chargés par les utilisateurs du site


Fichiers particuliers :

Dans le répertoire dejahu/ :

  • manage.py : un utilitaire en ligne de commande qui permet d’interagir avec le projet Django de différentes façons
  • db.json : fichier servant à initialiser la base de données pour avoir une application fonctionnelle
  • db.sqlite : fichier de base de données de sqlite
  • README.txt : documentation d'installation, de lancement et de test du projet
  • requirements.txt: fichier contenant l'ensemble des paquets nécessaires au fonctionnement du site

Dans le répertoire dejahu/dejahu/ :

  • __init__.py : un fichier vide qui indique à Python que ce répertoire doit être considéré comme un paquet
  • settings.py : réglages et configuration de ce projet
  • urls.py : les déclarations des URL de ce projet, une sorte de « table des matières » du site
  • asgi.py : un point d’entrée pour les serveurs Web compatibles aSGI pour déployer le projet
  • wsgi.py : un point d’entrée pour les serveurs Web compatibles WSGI pour déployer votre projet

Dans le répertoire dejahu/dejahu_map :

  • views.py : fichier contenant l'ensemble des vues du site
  • urls.py : fichier contenant les url associés aux vues servant à les appeler
  • tests.py : fichier contenant les tests unitaires
  • testSelenium.py : fichier contenant les tests fonctionnels
  • models.py : fichier définissant les modèles – essentiellement, le schéma de base de données
  • apps.py : fichier permettant de faire référence à la classe de configuration de l’application pour l'inclure dans le projet
  • admin.py : fichier permettant de rendre l'application modifiable via l'interface admin

Fonctionnalités implémentées

Navigation

Une barre de navigation permet à l'utilisateur de naviguer à travers plusieurs pages du site et lui donne accès à :

  • La page "Carte" qui répertorie les Dahus
  • La page "Informations" comprenant des informations générales à propos du Dahu
  • La page de connexion avec son formulaire (en mode non connecté)
  • La déconnexion qui redirige ensuite vers la carte (en mode connecté)
  • La page d'inscription avec son formulaire (en mode non connecté)

User

Un système d'utilisateur est en place afin de restreindre l'accès à certaines fonctionnalités du site (voir section gestion des rôlesà. Les principales fonctionnalités relatives aux utilisateurs sont :

  • L'inscription
  • La connexion
  • La déconnexion

Pour ses fonctionnalités, nous avons utilisé le modèle User fournit par Django ainsi que les méthodes d'authentication intégré de Django.

Gestion des rôles

Un visiteur (utilisateur ne possédant pas de compte ou n'étant pas connecté), peut uniquement visualiser toutes les localisations de Dahu sur la carte.

Pour les utilisateurs possédant un compte, il existe deux rôles :

  • Utilisateur
  • Administrateur

L'utilisateur peut visualiser toutes les localisations de Dahu, créer, modifier et supprimer ses propres localisations sur la carte. L'administrateur peut visualiser toutes les localisations de Dahu, créer, modifier et supprimer toutes les localisations sur la carte. Tout le monde (visiteurs ou utilisateurs possédant un compte) peut consulter la section informations du site.

La gestion de l'affichage en fonction de l'utilisateur c'est faite d'une part avec les gabarits Django dans le template de la carte ainsi qu'avec le système d'authentification intégré de Django, d'autre part avec javascript et jquery qui sont responsables de l'affichage de la carte et du placement des points de localisation. Il fallait en effet être capable d'associer un point de localisation à l'utilisateur l'ayant créé et ainsi afficher les options adéquates (suppression et modification de la localisation) en fonction de l'utilisateur connecté. Ceci n'était possible qu'en utilisant javascript et jquery.

Événement

L'événement correspondant à la localisation d'un Dahu comprend la position de cette localisation (latitude et longitude), la date, une éventuelle description et photo d'illustration apportée par l'utilisateur. Il y a plusieurs fonctionnalités possibles autour d'un événement :

  • La création
  • La modification
    • De la description
    • De l'image uploadé
      • Suppression de l'image
      • Ajout d'une image
  • La suppression (Supprime aussi l'image attachée)

Navigateurs compatibles

Le site a été testé et est fonctionnel avec les navigateurs suivants:

  • Firefox 77.0.1
  • Google Chrome 83.0.4103.97

Interface

Carte

Navigation sur la carte

Carte1 dahu.PNG

Visualisation d'un évènement

Carte2 dahu.PNG

Informations

Info dahu.PNG

Connexion

Connexion dahu.PNG

Inscription

Inscription dahu.PNG

Se déconnecter

La déconnexion est effective dès qu'on clique sur "Se déconnecter". On retourne alors automatiquement sur la carte.

Screencast

Voici une démonstration des principales fonctionnalités du site : https://www.youtube.com/watch?v=j2228xeHgF4&feature=youtu.be

Remarques

Amélioration des fonctionnalités existantes

Voici une liste d'améliorations pouvant être implémentées sur les fonctionnalités existantes du site :

  • Lorsqu'un utilisateur a supprimer une image et que la page se recharge, réouvrir l'événement concerné
  • Lors de la création d'un événement, permettre à l'utilisateur d'ajouter des fichiers autres que des images (enregistrement audio, vidéo ...)
  • Lors de la création d'un événement, permettre à l'utilisateur d'ajouter plusieurs média
  • Rendre plus dynamique le site en utilisant ajax pour moins recharger les pages

Idées de fonctionnalités à rajouter

Voici une liste de fonctionnalités pouvant être ajoutées au site :

  • Suppression d'un compte utilisateur par l'administrateur
  • Une page permettant la gestion d'un profil utilisateur lorsque ce dernier est connecté

Références

Prérequis, installation et lancement du site et des tests

Afin d'installer les dépendances nécessaire au bon fonctionnement du site et lancer ce dernier ainsi que les tests, se référer au fichier README.txt sur le dépôt Git

Dépôt Git

https://gitlab.ensimag.fr/obryi/projet-deja-hu