rapport.tex

\documentclass[a4paper]{article}
% debut du preambule, on met les packages

\usepackage[latin1]{inputenc} % sous windows
\usepackage[T1]{fontenc}   
\usepackage[francais]{babel}
\usepackage{lmodern}
\usepackage{layout}
\usepackage[top=2cm, bottom=2cm, left=2cm, right=2cm]{geometry}
\usepackage{color}
\usepackage{graphicx}
\usepackage{algorithmique}
\usepackage{hhline}


\definecolor{sec}{rgb}{0,0.34,0.5}
\definecolor{secp}{rgb}{0,0.47,0.72}
\definecolor{para}{rgb}{0,0.65,0.86}



\begin{document}
\begin{titlepage}

\newcommand{\HRule}{\rule{\linewidth}{0.5mm}}
\center

\includegraphics[scale=0.4]{Logo_ENSIIE.png}\\[1.5cm]

		
\textsc{\LARGE E.N.S.I.I.E}\\[0.5cm]

\textsc{\Large }\\[0.5cm]

\HRule \\[0.4cm]

{\huge \bfseries Projet Web 1A \\
 Rapport de projet  \\[0.4cm] }

\HRule \\[1.5cm]

\begin{flushleft}
\Large \emph{Groupe H:}\\
Julie \textsc{Choquet}\\
Julien \textsc{Naty-Daufin}\\
Anouar \textsc{Mahrous}\\
Guillaume \textsc{Gamelin}\\[3cm]
\end{flushleft}

\vfill

{\large \today}\\

\thispagestyle{empty}
\setcounter{page}{0}

\end{titlepage}

\newpage

\renewcommand{\contentsname}{Sommaire} % Dans le corps du document,avant la commande \tableofcontents.
\setcounter{tocdepth}{5}

\tableofcontents
\thispagestyle{empty}
\setcounter{page}{0}

\newpage

\textcolor{sec}{\section{Introduction}}

Aujourd'hui, la gestion des photos d'évènements et soirées à l'ENSIIE est encore très basique. Une fois connecté sur iiens.net, l'upload
des photos se fait par dossiers, tout comme la consultation. Bien que le site soit tout à fait fonctionnel, son interface nécessiterait d'être mise à jour et son ergonomie repensée pour mieux combler les attentes actuelles des utilisateurs. Notre but est donc de proposer des focntionnalités innovantes, en plus des anciennes fonctionnalités du site, avec une nouvelle interface sous la forme d'une application web (qui pourrait plus tard être intégrée
à iiens.net).\\ 
Notre objectif est de produire un site au design moderne, qui s'adapte aux appareils mobiles et qui permet une personnalisation de l'expérience utilisateur (profil modifiable, barre de navigation personnelle). L'affichage des photos sera totalement revu : il se fera sous forme de timeline avec la possibilité de zoomer sur une certaine période. Cela permettra d'avoir à la fois un aperçu global de l'avancement de la soirée et de pouvoir se focaliser sur une partie de la soirée. Enfin, notre site aura une dimension sociale : possibilité de liker une photo, de commenter, de consulter le profil des autres utilisateurs et d'identifier ceux-ci mais aussi d'élire une photo lors de concours réguliers.


\textcolor{sec}{\section{Conception}}

\textcolor{secp}{\subsection{Features}}

\textcolor{para}{\subsubsection*{Étude de l'existant : features minimales}}

Dans un premier temps, nous nous sommes concentrés sur le développement d'une liste de features minimales : celles déjà présentes sur l'outil proposé par iiens.net.

\begin {description}

\item[Connexion, déconnexion :] authentification grâce à un identifiant unique (exemple: AriseID) et un mot de passe qui sont sauvegardés dans la base de données.

\item[Inscription :] tout élève membre d'Arise peut s'inscrire gratuitement à TIMELINE.
Lors de cette inscription, il saisit ses informations personnelles (nom , prénom, promo,  identifiant et mot de passe) et peut personnaliser son profil (avatar, quote).

\item[Compte administrateur :]compte ayant accès à certaines fonctionnalités permettant notamment l'ajout ou la suppression de soirée. Ce compte est aussi responsable de la maintenance de l'application.

\item[Importation des photos :] chaque utilisateur à la possibilité d'importer des photos sur le site en précisant ses infos (année, thème).
Nous avons choisi de ne pas permettre l'ajout multiple de photos à partir d'un fichier zip ou tar pour des raisons expliquées plus bas.

\item[Consultation des photos:]chaque utilisateur peut avoir accès aux photos postées sur le site. Pour cela, il doit choisir une année et une soirée, il aura alors accès à une liste de photos. Il peut cliquer sur une photo pour l'agrandir. Nous avons choisi de ne pas permettre le slide d'une photo à une autre dans la consultation d'ensemble des photos d'une soirée de part la mise en place de la timeline.

\end{description}

\textcolor{para}{\subsubsection*{Features ajoutées}}

 \begin{description}
 
\item [Importation des photos plus complète :] les photos s'ajoutent une à une car l'utilisateur doit renseigner l'heure de prise de la photo en plus des informations sur la soirée afin qu'elle soit immédiatement jointe à la Timeline. Le posteur peut aussi mettre un commentaire sur cette photo.

\item [Timeline :] amélioration de la consultation des photos. Celle-ci se fera toujours par soirée (identifié par une année et un thème), mais l'utilisateur pourra naviguer le long de la Timeline et associer à chaque photo une heure dans la soirée. L'application fournit ainsi une version temporalisée de la consultation existante. La Timeline présente donc toutes les photos d'une soirée, indépendamment du photographe.

\item [Contact  :]pour toute question, information ou réclamation, l'utilisateur peut contacter l'administrateur en lui envoyant un mail.

\item [Afficher les commentaires :]chaque utilisateur peut lire les commentaires postées sur une photo en cliquant sur celle-ci.

\item [Partie utilisateur personnalisée:] sur la partie gauche de l'écran, l'utilisateur a accès à une barre de navigation qui lui est propre. Il peut ainsi modifier ses informations personnelles (quote, avatar, surnom ou mot de passe), mais aussi avoir accès à toutes les photos qu'il a postées (notamment celles ayant remporté un concours) et celles où il est identifié.

\item [Affichage des photos hors timeline :] les photos peuvent être consultées en dehors de la timeline sous forme de carousel (slide de la précédente à la suivante possible) et l'utilisateur peut agrandir la photo en cliquant sur celle-ci pour afficher des informations supplémentaires.

\item [Mise en avant des dernières photos postées :] sur la page acceuil, carousel présentant les 10 dernières photos postées.

\item [Consultation de profil :] un utilisateur peut afficher le profil d'un autre en cliquant sur son surnom ou son avatar, il a alors accès à ses informations personnelles (surnom, quote, avatar) mais aussi ses posts, ses wins et ses identifications.

\end{description}

\textcolor{para}{\subsubsection*{Features incomplètes}}

Dans cette partie, nous allons vous présenter les features prévues initialement, commencées mais qui ne sont pas encore implémentées par manque de temps.

\begin{description}

\item [Identification :]lors du post d'une photo, l'utilisateur peut identifier les personnes présentes sur la photo.
Chaque utilisateur peut ajouter une identification à une photo après que celle-ci soit postée lors de sa consultation.

\item [Concours :]pour chaque soirée, une liste de concours est proposée pendant un certain temps. Chaque utilisateur peut voter une fois par soirée et par concours pour la photo qu'il juge correspondre le mieux au thème du concours. Les concours actuels et passés, les photos gagnantes ou en tête des votes sont visibles dans la rubrique concours. Des boutons permettant de voter pour ces concours sont disponibles en dessous de chaque photo.

\item [Rechercher un élève :] actuellement, il est possible de consulter le profil d'un élève en cliquant sur son avatar si celui-ci a laissé un commentaire sur une photo. L'objectif était de rendre accessible le profil d'un utilisateur en cliquant sur son surnom (lors d'une identification par exemple) ou en entrant son nom dans une barre de recherche (avec ElasticSearch).
\end{description}



\textcolor{secp}{\subsection{Structure}}

\textcolor{para}{\subsubsection*{Découpage du site}}

Le projet est divisé en deux parties: la partie utilisateur et la partie administrateur. Les administrateurs ont accès à des fonctionnalités supplémentaires par rapport aux utilisateurs, notamment pour la maintenance du site. Ces fonctionnalités sont disponibles dans la page Gestion accessible grâce à la barre de navigation seulement si le compte connecté est un compte administrateur.

\textcolor{para}{\subsubsection*{Structure des pages}}
Sur Timeline, on trouve deux types de structure de pages :

\begin{itemize}
\item les pages de timeline photos qui sont composées d'une barre de navigation horizontale en haut de l'écran pour accèder aux différentes rubriques du site et l'affichage de la Timeline sur toute la largeur de l'écran. 
\item les autres pages suivent un autre modèle : la même barre de navigation horizontale en haut de l'écran, mais aussi un menu vertical personnel à gauche de l'écran. Le contenu prend la place restante. Ces barres de navigation sont incluses dans chaque page grâce à \texttt{menu.php}.
\end {itemize}

\textcolor{para}{\subsubsection*{Base de données}}

Pour répondre aux exigences fonctionnelles du site, nous avons utilisé la base de données représentée ci-dessous. Celle-ci a du être modifiée à de nombreuses reprises au cours du codage pour faciliter ce dernier (exemple du stockage de l'extension de la photo de profil dans avatar).

\includegraphics[scale=0.5]{DiagUML.jpeg}

\textcolor{sec}{\section {Avancement du projet}}

\textcolor{sec}{\subsection{Planning prévu et réel}}

La contrainte de temps du projet était forte : nous avons eu un peu plus d'un mois et demi pour réaliser beaucoup de choses et nous n'avions pas forcément les compétences nécessaires au préalable. Il a fallu faire beaucoup de recherche, découvrir des fonctionnalités et apprendre par soi-même. Certaines parties du travail prévues comme rapide ont au final pris plus de temps que prévu. Voici les différentes étapes de notre travail :\\
\begin{description}
\item[29 Mars - 12 Avril :] élaboration de la base de données, de la liste des features (minimales, envisagées, prévues) et de la maquette du site avec Balsamiq. Cette étape a été couteuse en temps mais nous a permis d'avoir un aperçu global du site et de faciliter les requêtes SQL et la mise en page CSS. Le bilan avec le chargé de groupe a permis de faire évoluer la base de donnée, de mieux comprendre les technologies derrière chaque fonctionnalité, d'appréhender les difficultés et de trier les fonctionnalités à implémenter par ordre de priorité.
\item[12 Avril - 24 Avril :] choix des technologies, découverte de GitLab et Bootstrap, consultation de \\ \emph{http://www.phptherightway.com/}. Après avoir identifié les modules et les tâches à accomplir pour chacun, nous commencons le développement des features minimales.
\item[24 Avril - 10 Mai :] intégration des différentes fonctionnalités, développement des features ajoutées, période de test (navigateurs, appareils, tests unitaires et fonctionnels, sécurité).
\end{description}

\textcolor{sec}{\subsection{Répartition du travail}}

Au début du projet, nous avions décidé de nous répartir les tâches en fonctions des langages utilisés (PHP, Javascript, HTML et CSS). Nous avons remis en question ce découpage puisque celui-ci était impossible à mettre en oeuvre efficacement et inintéressant d'un point de vue individuel. Par conséquent, nous nous sommes mis d'accord sur l'arborescence du projet et ses modules et nous avons développé conjointement ou par équipe de 2 en utilisant GitLab. La maquette étant établie au préalable, celle-ci nous servait de charte graphique à respecter. \\

A tour de rôle, un membre du groupe était chargé de l'intégration des fichiers et fonctions et de la réalisation des différents tests : le fichier n'était intégré au reste du travail que si celui-ci était valide d'un point de vue technique et graphique.\\

\textcolor{sec}{\section {Réalisation technique}}

\textcolor{secp}{\subsection {Technologies et outils}}

\textcolor{para}{\subsubsection*{Nos choix}}

\begin{description}
\item[Bootstrap :] nous avons choisi d'utiliser Bootstrap, même si aucun de nous n'était familier avec ce framework, pour son approche du responsive design et la facilité de mise en page que son utilisation apporte. Bootstrap est livré avec des fichiers CSS et JS qui ont été très utile pour l'affichage du carousel ou du pop-up lors du click sur une photo.
\item[Javascript :] nous avons utilisé JavaScript pour presque tous les formulaires, cela permettant de vérifier l'input de l'utilisateur rapidement du côté client et d'augmenter la sécurité de la base de donnée. Nous avons aussi réaliser certaines animations pour rendre l'expérience utilisateur plus fluide. Une partie du code javaScript a été réalisé avec jQuery par facilité, nous espérons cependant en avoir fait une utilisation correcte. Enfin, le code javaScript est souvent relié à des requêtes AJAX pour le lier aux scripts PHP.
\item[PHP :] utilisé pour toute interaction avec le serveur. Nous avons choisi de faire nos requêtes SQL en PDO et en préparant celles-ci pour éviter les injections. Le hashage du mot de passe se fait également grâce à l'API native de gestion de mot de passe.
\item[sendmail.tar :] utilisation d'un executable pour gérer l'envoi d'emails aux administrateurs. 
\item[GitLab :] choix imposé mais très utile pour permettre le travail de groupe et le versioning.
\item[Phppgadmin :] maintenance de la base de données facilitée.
\end{description}

\textcolor{para}{\subsubsection*{Choix écartés}}

\begin{description}
\item[Framework MVC :] aucun des membres n'étant familier avec ceux-ci, nous avons fait le choix de s'en passer car notre projet était de petite envergure. Nous n'aurions peut être pas du car les fichiers se sont vite multipliés et l'organisation est devenue un peu problématique.
\item[ElasticSearch :] utilisation prévue mais non effectué à cause d'un manque de temps.
\end{description}

\textcolor{secp}{\subsection {Charte graphique}}

L'ergonomie d'un site est un point très important. Notre objectif principal était donc de faciliter l'utilisation du site pour les utilisateurs et de définir une identitié graphique. Pour cela, nous avons défini certaines contraintes : \\

\begin{description}
\item [Accessibilité des navigateurs :] l'application doit être fonctionnelle sous les principaux navigateurs (Chrome, Firefox, Internet Explorer). Les différentes fonctionnalités ont donc été testées sur ces trois navigateurs.

\item [Accessibilité des appareils :] l'application doit être au maximum responsive, pour que l'affichage soit plaisant sur les appareils de taille d'écran plus petite (tablettes, smartphones). Pour cela, nous avons utilisé le toggle device mode du panel développement de Chrome, les media queries et Bootstrap.

\item [Le système de navigation :] la navigation doit être simple, même pour les utilisateurs débutants. Il est donc indispensable que l'apprentissage du site ne demande pas d' efforts à l'utilisateur. L'utilisation de menus qui répertorient les principales fonctionnalités permet à l'utilisateur de minimiser son effort mental et de trouver son chemin sans effort.\\
La \textbf{barre de navigation}, qui est un menu horizontal fixé en haut de chaque page est donc composée de :
	\begin{itemize}
	\item acceuil : page d'acceuil présentant les 10 dernières photos postées
	\item soirées : permet d'accèder à la timeline de chaque soirée
	\item ajout : permet d'ajouter une photo à une soirée
	\item contact : contacter l'administrateur
	\item concours : consulter les concours actuels et passés, voter pour une photo et voir celles qui sont déjà nominées
	\end{itemize}
La \textbf{barre personnelle} est un menu vertical situé à gauche de l'écran et permet d'accèder à : mon profil, mes posts , mes identifications et mes wins. Il permet aussi de se déconnecter.
\end{description}

\textcolor{secp}{\subsection {Problèmes rencontrés}}

Les principales difficultés rencontrées sont du à un manque de temps et d'expérience.\\
\begin{description}
\item [Upload de fichiers :] validation de l'uplaod problématique (essai avec requête AJAX infructeux), stockage des photos et des avatars mal pensé au départ, il nous a fallu modifier la base de données.
\item [Mise en page de la Timeline :] difficile à mettre en place de façon responsive et complète, nous avons fait le choix de cacher certains fonctionnalités selon l'affichage.
\item [Gestion des heures avec PHP :] problème entre le formatage et les conditions.
\item [Requête AJAX simultanées avec javaScript :] résolu en réalisant une seule requête et format de données JSON.
\end{description}

\textcolor{sec}{\section {Conclusion}}

Les exigences fonctionnelles fixées dès le début par notre cahier des charges ont presque été menées à bien. En effet, les features minimales ont été développées et les principales fonctionnalitées caractérisant un réseau social ont été commencées.\\

L'ergonomie du site est satisfaisante pour les utilisateurs d'après les tests d'utilisabilité, sur différents navigateurs (Chrome, Firefox, Explorer) et sur différents appareils (smartphone, tablette). Il reste toutefois des améliorations graphiques à effectuer.\\

D'un point de vue sécurité, le site propose une protection contre les injections SQL basique et un hashage du mot de passe. L'affichage des informations stockée dans la base de donnée et entrées par l'utilisateur sur le site n'est cependant pas sécurisé. \\

Certains points (présentés dans la partie features incomplètes) n'ont pas pu être développée faute de temps mais leur intégration serait facilement envisageable.\\

Si nous étions amenés à approfondir le développement de cette application, nous pourrions envisager une spatialisation de la Timeline. En projetant celle-ci sur un plan de l'école, il serait possible de situer les photos dans l'espace et dans le temps et de fournir un mode de navigation innovant et encore plus convivial.\\

L'application finale n'intègre donc pas tous les modules envisagés dans notre cahier des charges. Néanmoins, celle-ci est conforme à nos objectifs qui étaient d'intégrer les modules de base caractérisant la TIMELINE. De plus, l'application proposée est sécurisée et l'expérience utilisateur a été repensée ce qui rend son utilisation rapide, facile et agréable. 


\end{document}