3d-interface-rapport/rapport/architecture.tex

305 lines
11 KiB
TeX

\part{Architecture du programme}
Comme dit précédemment, le programme se décompose en un côté serveur et un côté
client. Le cas du \emph{streaming} sera traité à part (dans la partie
\ref{streaming}, puisqu'il est comporte des parties à la fois sur le client et
le serveur) et nous ne parlerons ici que du serveur, puis du code client.
\paragraph{}
Voici une \emph{simplification} de l'arborescence de la version de
développement :
\begin{figure}[H]
\centering
\begin{subfigure}[b]{0.3\textwidth}
\centering
\tikzstyle{every node}=[draw=black,thick,anchor=west]
\tikzstyle{folder}=[draw=blue, fill=blue!30]
\begin{tikzpicture}[%
grow via three points={one child at (0.5,-0.7) and
two children at (0.5,-0.7) and (0.5,-1.4)},
edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}]
\node [folder] {root}
child { node [folder] {js}
child {node [folder] {l3d}
child {node [folder] {src}}
child {node [folder] {apps}}
}
child [missing] {}
child [missing] {}
child {node [folder] {Autres libraries}}
child {node {Makefile}}
}
child [missing] {}
child [missing] {}
child [missing] {}
child [missing] {}
child [missing] {}
child { node [folder] {lib}
child {node {NodeLog.js}}
child {node {controllers.js}}
child {node {posts.js}}
child {node {mail.js}}
}
child [missing] {}
child [missing] {}
child [missing] {}
child [missing] {}
child { node [folder] {controllers}}
child { node [folder] {posts}}
child { node [folder] {geo}
child {node {Geo.js}}
child {node {Mesh.js}}
child {node {MeshContainer.js}}
child {node {MeshStreamer.js}}
}
child [missing] {}
child [missing] {}
child [missing] {}
child [missing] {}
child { node {private.js }}
child { node {package.json }}
child { node {npm-shrinkwrap.json }}
child { node {server.js }};
\end{tikzpicture}
\caption{Vue globale}
\end{subfigure}
~
\begin{subfigure}[b]{0.3\textwidth}
\centering
\tikzstyle{every node}=[draw=black,thick,anchor=west]
\tikzstyle{folder}=[draw=blue, fill=blue!30]
\begin{tikzpicture}[%
grow via three points={one child at (0.5,-0.7) and
two children at (0.5,-0.7) and (0.5,-1.4)},
edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}]
\node [folder] {src}
child { node [folder] {cameras}
child { node {FixedCamera.js}}
child { node {PointerCamera.js}}
child { node {ReplayCamera.js}}
}
child [missing] {}
child [missing] {}
child [missing] {}
child { node [folder] {canvases}
child { node { MousePointer.js}}
child { node { Previewer.js}}
child { node { StartCanvas.js}}
}
child [missing] {}
child [missing] {}
child [missing] {}
child { node [folder] {loaders}
child { node { ProgressiveLoader.js }}
}
child [missing] {}
child { node [folder] {math}
child { node { Hermite.js }}
}
child [missing] {}
child { node [folder] {recommendations}
child { node { Arrow.js}}
child { node { Viewport.js}}
}
child [missing] {}
child [missing] {}
child { node [folder] {scenes}}
child { node [folder] {utils}
child { node [folder] {closure-compiler}}
child { node [folder] {simple-compiler}}
child { node { build\_all.sh}}
child { node { demon.sh}}
}
child [missing] {}
child [missing] {}
child [missing] {}
child [missing] {}
child { node {l3d.js}}
;
\end{tikzpicture}
\caption{Détail des sources de L3D}
\end{subfigure}
~
\begin{subfigure}[b]{0.3\textwidth}
\centering
\tikzstyle{every node}=[draw=black,thick,anchor=west]
\tikzstyle{folder}=[draw=blue, fill=blue!30]
\begin{tikzpicture}[%
grow via three points={one child at (0.5,-0.7) and
two children at (0.5,-0.7) and (0.5,-1.4)},
edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}]
\node [folder] {apps}
child {node [folder] {prototype}
child {node [folder] {interactive}
child {node {main.js}}
}
child [missing] {}
child {node [folder] {replay}
child {node {main.js}}
}
child [missing] {}
child {node [folder] {tutorial}
child {node {main.js}}
}
child [missing] {}
child {node [folder] {coin-creator}
child {node {main.js}}
}
child [missing] {}
child {node [folder] {coin-viewer}
child {node {main.js}}
}
child [missing] {}
child {node [folder] {coin-checker}
child {node {main.js}}
}
child [missing] {}
child {node {ButtonManager.js}}
child {node {Coin.js}}
child {node {GlobalFunctions.js}}
}
;
\end{tikzpicture}
\caption{Détail des applications}
\end{subfigure}
\caption{Arborescence du \emph{dépôt} de développement}
\end{figure}
\tikzstyle{every node}=[]
\section{Code serveur}
Le code serveur est situé à la racine du projet : le fichier \texttt{server.js}
est en fait le programme principal du serveur.
\subsection{Dépendances}
Le programme principal utilise de nombreuses libraires : les dépendances de
notre serveur sont définies dans le fichier \texttt{package.json}.
L'inconvénient d'avoir de nombreuses librairies en même temps est la
compatibilité des versions : en effet, une des dépendances nécessite une
version particulière d'une autre librairie. Chaque dépendance est une
librairie, qui a elle même ses dépendances, etc...
\paragraph{}
J'ai recontré ce problème au cours du projet : une librairie utilisait une
version précise d'une dépendance qui en nécessitait une autre. Nous avons donc
utilisé une fonctionnalité de \emph{npm} (le programme qui permet d'installer
des librairies dans un serveur NodeJs) qui s'appelle \emph{shrinkwrap} et qui
permet de figer l'arbre de dépendance d'une application NodeJs.
\paragraph{}
Les \emph{packages} que nous utilisons sont les suivants :
\begin{itemize}
\item \emph{express} : un framework web pour NodeJs qui permet de gérer
facilement les urls, les requêtes, les réponses, etc...
\item \emph{jade} : un moteur de template pour simplifier la génération des
pages HTML
\item \emph{pg} : une librairie permettant la connexion à la base de données
\item \emph{body-parser} : une librairie permettant de traiter simplement
les paramètres passés aux requêtes
\item \emph{cookie-parser} et \emph{cookie-session} : une librairie gérant
les sessions sous forme de cookies
\item \emph{socket.io} : une librairie permettant d'utiliser facilement les
sockets (côté serveur et client)
\item \emph{serve-favicon} : une librairie pour choisir facilement l'icône
du site
\item \emph{emailjs} : une librairie permettant de se connecter à une
adresse e-mail
\end{itemize}
\subsection{Modèle, vue, contrôleur}
Pour ce projet, nous avons adopté une version simplifiée du design-pattern
\emph{modèle-vue-contrôleur} : en JavaScript, nos modèles seront des objets
simples (en JavaScript, un objet n'est qu'une liste de paires
\emph{clé-valeur}), et le modèle sera limité à l'exécution des requêtes SQL.
\paragraph{}
Les contrôleurs sont chargés au démarrage par le fichier
\texttt{controllers.js}, qui parcourt les dossiers qui sont contenus dans le
dossier \texttt{controllers}. Dans chacun de ces dossiers, deux fichiers et un
dossier sont présents :
\begin{itemize}
\item \texttt{index.js} qui contient des fonctions (contrôleurs) qui
répondent à des requêtes
\item \texttt{urls.js} qui contient les urls existantes et les fonctions
auxquelles elles vont être associées
\item \texttt{views}, dossier qui contient les vues qui vont être utilisées
par les contrôleurs définis dans \texttt{index.js}
\end{itemize}
\paragraph{}
La même technique à été appliquée pour le dossier \texttt{posts} et le fichier
\texttt{posts.js}, à la différence près que les requêtes traitées sont des
requêtes POST et non pas des requêtes GET : elles servent principalement à
stocker des informations dans la base de donneés.
\newpage
\section{Code client}
Le code client est séparé en trois parties :
\begin{itemize}
\item une partie dans le répertoire \texttt{src} contenant de nombreuses
fonctions et classes
\item une partie dans le répertoire \texttt{apps} contenant des
applications que nous avons développées
\item des autres librairies développées par des tiers, dans le répertoire
\texttt{js}
\end{itemize}
Le \texttt{Makefile} présent dans le dossier \texttt{js} est celui qui
concatènera nos sources, les \emph{minifieras} et génèrera les scripts que nous
utiliserons par la suite.
\paragraph{}
Dans la suite, nous allons seulement parler de L3D, puisque c'est le code que
nous avons développé.
\subsection{Les sources}
L3D est composée de plusieurs classes :
\begin{itemize}
\item les caméras, permettant de choisir des caméras avec des mouvements
particuliers
\item les canvas, qui permettent d'afficher des informations
supplémentaires à l'écran
\item les loaders, qui permettent de charger des modèles de manière
différente de celles proposées par \threejs{}
\item les classes mathématiques, comme les polynômes de Hermite
\item les recommandations, notamment les flèches et les \emph{viewports}
\end{itemize}
\paragraph{}
Elle contient aussi quelques fonctions qui permettent de créer les scènes que
nous avons utilisées, et de les initialiser correctement.
\paragraph{}
Dans le répertoire \texttt{utils}, il y a plusieurs outils pratiques pour le
développement et le déploiement : c'est là qu'est rangé le \emph{minifier} de
Google, \closurecompiler{}, et une version simplifiée, le Simple-Compiler, qui
utilise les mêmes paramètres mais se contente de concaténer le code.
\paragraph{}
Pour L3D, le premier fichier qui sera dans la version finale est
\texttt{l3d.js}. Il contient simplement l'initialisation du \emph{namespace}
\texttt{L3D}, auquel toutes les classes et fonctions appartiendront.
\subsection{Les applications}
Les applications sont principalement composées de programmes principaux, qui
utilisent les classes de L3D, ainsi, elles ne sont pas fusionnées avec L3D, et
laissées dans le namespace global.
\subsubsection{Interactive}
Ceci est l'interface principale, où l'utilisateur doit rechercher les pièces.
Nous en parlerons plus dans la partie \ref{interface}.
\subsubsection{Replay}
C'est l'interface qui crée une \texttt{ReplayCamera} et permet de visionner une
expérience qui a été faite dans le passé.
\subsubsection{Tutorial}
C'est le didacticiel de l'application : il possède notamment une classe qui copie
la caméra principale tout en permettant de vérifier que les interactions sont
faites comme il faut.
\subsubsection{Coin-creator, Coin-editor et Coin-checker}
Ce sont des outils de développement qui seront détaillés dans la section
\ref{coins}.