\section{Tecnologias usadas}
Neste capitulo apresentamos as ferramentas que foram usadas para o desenvolvimento do projeto. Para além das mencionadas pelos docentes no âmbito da cadeira, decidimos usar outras que nos facilitaram no desenvolvimento do projeto. Em baixo segue uma descrição de cada uma das ferramentas usadas e em que contexto foram usadas.
\subsection{\textit{Client-side}}
Na implementação do código para o cliente, foram usadas algumas ferramentas para além das recomendadas. Estas ferramentas não têm impacto direto na interface, mas sim no ambiente de desenvolvimento do código.
\subsubsection{NPM}
NPM é uma ferramenta utilizada para gerir pacotes de Javascript. Estes pacotes podem ser consultados no \href{https://www.npmjs.com/}{repositório do NPM}. Uma vez instalada a dependência de um pacote no projeto, esta é referenciada num ficheiro \textit{package.json}, previamente criado através do comando \textit{npm init}, executado para definir algumas propriedades do projeto (nome, descrição, autor, dependências). Uma das vantagens desta ferramenta para além da reutilização de código por parte de outros \textit{developers}, é os membros de um projeto poderem instalar as novas dependências através do comando \textit{npm install}.
\newline
\newline
Algumas das dependências que utilizamos neste projeto:
\begin{itemize}
    \item \textbf{bootstrap}, \textit{framework} de HTML, CSS e Javascript que ajuda no desenvolvimento de sites \textit{responsive}. Disponibiliza um variado leque de classes e componentes já predefinidos. 
    \item \textbf{jquery}, biblioteca de Javascript que facilita a manipulação de elementos HTML, animações, gestão de eventos e simplifica o uso de Ajax.
    \item \textbf{react}, biblioteca de Javascript que ajuda a desenvolver interfaces interativas. Permite a implementação de componentes com um estado e uma uma \textit{view} próprios. Sendo alterado o estado de um componente, este encarrega-se de renderizar a \textit{view} dos componentes associados. 
    \item \textbf{react-router}, biblioteca de Javascript para gerir rotas. Mantém a interface em sincronização com um URL específico.
\end{itemize}
\subsubsection{Webpack}
Webpack é uma ferramenta que avalia todas as dependências entre módulos instalados num projeto (a partir do NPM) e gera um ficheiro estático que representa esses módulos. A vantagem desta ferramenta é que disponibiliza um desenvolvimento por módulos. Podemos criar vários módulos que representam um determinado componente do site, simplificando a estrutura geral do projeto. Os módulos que foram instalados por NPM também vão ser encupidos no ficheiro gerado. Este ficheiro Javascript será o ponto de entrada no site. Uma vez que instalamos os módulos correspondentes ao bootstrap, react e jquery então deixa de ser necessário importar diretemente estas bibliotecas. Para o webpack funcionar é preciso criar um ficheiro de configuração \textit{webpack.config.js} que contém algumas informações como também o ficheiro de ponto de entrada para o Webpack. A partir do ficheiro de entrada (app.js) o webpack começa por ver os módulos dependentes. Avaliando recursivamente as expressões \textit{require(module name)} presentes nos ficheiros. Para cada dependência o webpack verifica se a mesma existe no caminho especificado.
\subsubsection{Gulp}
Gulp é uma ferramenta para automação de tarefas. Usamos como complemento ao webpack, mas não sendo por si uma ferramenta importante no contexto deste projeto. Existe apenas uma tarefa designada para o Gulp, executar o webpack, e uma vez compilado o ficheiro pelo webpack, este é copiado para uma pasta destino (/public/resources/assets/js).
\subsubsection{Babel}
Babel é um compilador de Javascirpt. Uma vez que o código em React não segue as notações puras do Javascript, o Babel compila o código em React para código nativo de Javascript. Utilizamo-lo como módulo instalado através de NPM. O Babel podia ser importado diretamente no browser e compilar o codigo react diretamente no browser, desde que o ficheiro que contém o codigo react seja importado com o atributo \textit{type="text/babel"}. Uma vez que fizemos esta transformação localmente então deixa de ser necessário acrescentar este atributo. Tendo ainda como vantagem o facto de a compilação do código ser feita localmente e não diretamente no browser. Isto resulta também numa redução do tempo de espera de loading da página.
\subsubsection{Sass}
Syntactically Awesome StyleSheets (SASS) é uma extensão ao CSS que fornece algumas vantagens à linguagem base do CSS. Permite-nos usar variáveis, regras em cadeia e importar outras folhas de estilo. Ajuda também a manter o código das folhas de estilo mais organizado. Como estas folhas de estilo não são interpretadas diretamente pelo browser, é necessário um compilador. Para compilar usamos Compass que instalamos através de NPM. As folhas de estilo são importadas através do javascript como módulos (requeire('stylefile.scss')) e o webpack, uma vez mais, fica encarregue de compilar este código com auxílio do módulo Compass, sendo gerada uma folha de estilo em linguagem CSS  básico.

\subsection{\textit{Server-side}}
Na implementação do código para o servidor foi usada a framework Spring e algumas dependências. Uma vez que se trata de um projeto em \textit{Maven}, as dependências usadas foram as que nos permitiram ter um ambiente simples de uma aplicação inicial em Spring e que nos permitissem realizar uma aplicação para o contexto do projeto.
\subsubsection{Spring}
Spring é uma framework para implementação de sistemas e aplicações em Java. Utilizamos esta framework para o desenvolvimento do Servidor. As dependências usadas foram as seguintes:

\begin{itemize}
	\item \textbf{Spring Boot Starter Web}, dependência para construir a estrutura base de uma aplicação web.
	\item \textbf{Spring Boot Starter Thymeleaf}, dependência para \textit{view engine}. Possibilita a criação de vistas em HTML com algumas anotações para embutir código, e passar variáveis do servidor que são renderizadas pela vista.
	\item \textbf{Spring Boot Starter Data JPA}, dependência para poder usar JPA com Hibernate. Esta ferramenta é usada para mapear os objetos em Java para objetos relacionais (neste caso em SQL). Esta ferramenta é útil pois abstrai o código SQL, sendo gerado o código de consultas, inserções e atualizações através das anotações usadas nas classes em Java.
	\item \textbf{Mysql Connector}, dependência para ligação à base de dados.
	\item \textbf{Jackson}, dependência que transforma um objeto Java em JSON.
	\item \textbf{Spring Security Web}, dependência usada para camada de segurança.
\end{itemize}