CAW1 2018 Projet de Félix Bertoni

De Ensiwiki
Aller à : navigation, rechercher
Project schedule.png
Titre du projet CAW1 2018 Projet de Félix Bertoni
Cadre Projet Web (alternants 2A)
Page principale CAW1_Demonstration_Realisation

Équipe Félix Bertoni
Encadrants Sébastien Viardot


Une gallerie photo ou on peut trier les images par tag, et proposant d'uploader directement des images sur le site.

Screencast

Euh ? 2Mo pour une vidéo, c'est un peu léger.
"même mes images sont plus lourdes que ça" -Félix Bertoni
Donc, ==> petit lien Youtube <== !

Objectifs

Permettre à un photographe de classer ses photos et de les montrer au public.

Visiteur :
- Visionner les photos via la galerie, sous forme basse défintion avec possibilité de visioner une image à la fois en HD
- Filtrer les photos en utilisant un système de tags
- Telecharger une photo depuis la galerie (choix de la résolution?)
- créer une "selection" de photos et la télécharger en une fois (choix de la résolution ?). (non implémenté)

Photographe :
- Tous les droits du visiteur
- Téléverser des photos sur le serveur
- Classer et grouper les photos en utilisant des "tags"
- Regrouper les tags par catégories
- Ajouter, modifier, supprimer des tags (partiellement implementé)

Multiphotographe / visiteur connecté / admin :
- Prévu, non implémenté
Dimentionnement et Photographe Il est important de noter que le site est prévu pour un (ou quelques) photographes. Ce n'est donc pas sensé être un dépôt de masse avec des dizaines de miliers d'images, mais plus une "selection" qu'un photographe, ou une équipe de photographe voudrait partager. En bref, une centaine d'images au maximum. De plus, l'architecture du site, et en particulier les algorithmes utilisés ont étés pensés "naifs" pour être plus accessibles. La conception simple ne devrait normalement pas influencer les performances, au vu de la quantité limitée de données manipulée.

Modèle de données


Le modèle de données est relativement simple. On est dans un cas où un seul photographe utilise le site. On à donc trois informations à retenir :
les images (nom, description)
les tags (nom, categorie)
et les taggings, association entre une image et un tag

On en déduit la base de donnée suivante :
IMAGES (title text primary key, description text)
TAGS (tag text primary key, category text)
TAGGINGS(title text, tag text, primary key (title, tag)) avec title et tag clés étrangères en provenance de IMAGES et TAGS respectivement.
On peut remarquer que la "catégorie" des tags est non contrainte.

Choix techniques

Backend : NodeJS
- express, logique !
- express-session, pour garder l'autentification
- passport, pour authentifier l'utilisateur
- passport-local, pour authentifier l'utilisateur
- connect-flash, pour authentifier l'utilisateur

- path, pour manipuler des fichiers
- multer, pour uploader des fichiers sur le serveur en selection multiple
- fs, pour manipuler des fichiers
- node-gd, pour manipuler des images

- ejs, pour le rendu des pages web

- chai et mocha pour les tests

- better-sqlite3, pour la gestion de la base de donnée (synchrone)

Frontend : Html/CSS/JS
- Bootstrap, pour le côté "responsive"
- Fontawesome, pour des belles icônes
- Jquery-UI, pour le drag-and-drop et l'autocomplétion
- Isotope Js, pour le filtrage des images par tags

Architecture des fichiers et routes


Backend
app.js : routes et configuration
serveur/auth.js : authentification utilisateur
serveur/appobjects.js : manipulation des images sur le serveur
serveur/dbhelper.js : manipulation de la base de données sur le serveur
serveur/[ensimage.db] : base de données du serveur

test/ : répertoire de test
public/ : répertoire servi publiquement par le serveur
public/js : les ressources JS du frontend
public/css : les resources CSS du frontend
public/images/fulls : les images en résolution complète servies sur le site
public/images/thumbs : les images en résolution réduites servies sur le site

uploads/ : le repertoire destination des fichiers uploadés
views/ : le répertoire des vues pour le rendu du frontend


Frontend</br> "/" : la gallerie principale
"/login" : la page d'authentification
"/logout" : url à accéder pour se déconnecter

Interface

L'interface est basée sur les deux principes suivants :
- le "visiteur" doit avoir l'impression de voir une gallerie 'statique' (non éditable)
- le "photographe" doit avoir accès à toutes les fonctionnalités du 'visiteur', et pouvoir éditer la galerie.

Vues
Gallerie : la page ou l'on arrive quand on charge la route '/' du serveur. Affichage des photos en définition réduite, ainsi que d'un bouton "menu" en haut à gauche de la page. Les images avec au moins un tag de la catégorie "user" sont masquées à l'utilisateur.
Menu : Modal (au dessus de la gallerie). Le visiteur peut filtrer, à l'aide d'une saisie dans un champs de texte autocomplété, les images par tags. Le photographe a une option supplémentaire pour uploader des images.
Vue HD : Modal (au dessus de la gallerie), invoqué en cliquant sur une image de la gallerie. Le visiteur voit l'image cliquée en résolution maximale, et peut télécharger l'image en résolution max. le photographe peut activer la vue d'edition.
Vue d'edition : Modal (au dessus de la gallerie), invoqué en cliquant sur "editer" dans la vue HD ou en cliquant sur une image de la gallerie une fois le mode edition ajouté. Le photographe peut modifier le titre, la description et les tags associés à l'image, ainsi que supprimer cette dernière.
Login page : la page ou l'on arrive en chargeant la route '/login' du serveur. Permet de s'authentifier en tant que photographe.

API

Le site fonctionne majoritairement sur des requêtes AJAX. Ces dernières peuvent donc être utilisées par n'importe quel client.
'/api/user' (GET) : permet de savoir si l'emmeteur de la requete est authentifié en tant que photographe {user:1} ou non {user:null}

'/api/images' (GET) : retourne la liste de toutes les images de la base. Si l'emmeteur de la requete n'est pas authentifié, les images ayant au moins un tag de la catégorie "user" ne seront pas dans la liste. les images dans la liste ont le format suivant : {title:string, description:string, file:string, identifier:string, tags:[{tag:string, category:string}]}</br> avec title, le nom de fichier sans extension ni chemin d'accès de l'image
description, la description de l'image
file, le fichier de l'image (title + extension)
identifier, title avec les _ remplacés par des -, utilié dans le html pour les identifiants.
tags : la liste des tags associés à l'image

'/api/tags' (GET) : retourne tous les tags présents dans la base. voir '/api/images' pour le format

'/api/upload' (POST) : permet d'uploader des images sur le site

'/api/update' (POST) : permet d'editer une image dans la base de donnée. attends un JSON comme "/api/images" retourne, avec en plus un champs "oldtitle" correspondant à l'ancien titre de l'image

Rendu

Fonctionnalités :
- authentification "en dur"
- deconnexion
- upload d'images, création automatique de thumbnails
- edition de tags, titre et description pour une image à la fois.
- suppression d'image
- filtrage des images par tags et autocompletion
- telechargement des images en résolution maximale
- quelques tests unitaires et Selenium
- les images taggées par au moins un tag de la catégorie "user" ne sont pas affichées à un visiteur

fonctionnalités en cours (désactivées)
- possibilité pour l'utilisateur de "selectionner" des images
- possibilité pour le photographe de marquer une image comme "large", elle prendra si elle peut le double de la largeur des autres images


faiblesses
- encore ergonomiquement faible pour le photographe (pas de verification des saisies)
- lenteur potentielle au chargement de la page si beaucoup d'image (tous les thumbnails sont chargés en direct)
- le Responsive Design est sencé être fonctionnel, mais peut avoir des dysfonctionnements car non testé (en particulier pour l'édition d'images)
- ne supporte pas les formats autres que JPEG
- les autocompletion des tags du menu de selection ne sont pas forcément très ergonomiques : on peut selectionner des tags non présents dans la gallerie

améliorations non implémentées
- "Lazy Loading" des images (très complexe) à cause de IsotopeJS
- édition multiple d'images (pour les tags)
- options de réseau (nombre d'images à charger et résolution min/max des thumbnails)
- option pour le visiteur de télécharger un selection d'image sous forme d'un archive.
- selection d'un style de présentation (couleur de fond, marges)
- supports d'autres formats que je JPEG
- options de retouche intégrés au navigateur