Dans cette partie, nous allons vous présenter les features prévues initialement, commencées mais qui ne sont pas encore implentées par manque de temps.
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}
...
...
@@ -165,7 +165,7 @@ La contrainte de temps du projet
\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, cas d'usage).
\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}}
...
...
@@ -176,21 +176,34 @@ A tour de r
\textcolor{sec}{\section{Réalisation technique}}
\textcolor{secp}{\subsection{Technologies et outils}}
\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{Partie graphique}}
L'ergonomie d'un site est un point très important. Notre objectif principal est donc de faciliter l'utilisation du site pour les utilisateurs. Pour cela, nous avons défini certaines contraintes :
\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 navigateurs les plus utilisés, c'est-à-dire : Chrome, Firefox, Internet Explorer. Les différentes fonctionnalités développées devront donc être testées sur ces trois navigateurs.
\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 utiliserons le toggle device mode du panel développement de Chrome, les media queries et Bootstrap.
\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 :
...
...
@@ -204,37 +217,29 @@ La \textbf{barre de navigation}, qui est un menu horizontal fix
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.
\item Difficultés temporelles : certaines features étaient au final trop ambitieuses et non réalisable dans le temps imparti
\item
\end{itemize}
\textcolor{sec}{\section{Bilan}}
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.
Les exigences fonctionnelles fixées dès le début par notre cahier des charges ont presque été menées à bien. En effet, les principaux modules caractérisant un réseau social ont été intégrés.\\
\\
Les exigences qui assurent la qualité et la performance du site ont toutes été développées. L'ergonomie du site est satisfaisante pour les utilisateurs d'après les tests d'utilisabilité, le site est compatible avec Internet Explorer et Firefox. \\
\\
Toutefois, certains points n'ont pu être développés par manque de temps.
\textcolor{sec}{\section{Conclusion}}
\begin{description}
\item [Le module concours :] ce module n'a pas été totalement finalisé: l'ajout d'un concours correspondant à chaque soirée et la clôture d'un concours par l'administrateur ont été développés. Mais par souci de temps, la participation des membres aux différents concours, n'a pu être intégrée. Nous avons donc laissé de côté ce module, mais en laissant les liens s'y rapportant qui pourrait donc été intégré sans grande
difficulté.
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.\\
\item [Les modules commentaires , votes et bouton j'aime :] ceux-ci n'ont pas pu être intégrés par manque de temps.
\end{description}
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é. \\
Bien que nous aurions pu développer ces modules, nous avons préféré vérifier et améliorer les performances et la qualité de l'application, notamment grâce aux différents tests. Cette solution a été envisagée lorsque nous nous sommes rendu compte que le temps était insuffisant, nous avons donc réfléchi afin de mener à bien notre projet de la meilleure façon possible. C'est pourquoi nous avons décidé de recarder notre sujet en ne gardant que les modules les plus important et en contrepartie nous avons décidé d'améliorer la qualité et la performance de notre application.\\
\\
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.
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.\\
\textcolor{secp}{\subsection{Conclusion}}
L'application finale n'intègre 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 a été améliorée en termes de sécurité (hashage du mot de passe), performance et qualité, ce qui rend son utilisation beaucoup plus rassurante, rapide, facile et agréable.
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.
