\section{Architecture}
\label{sec:architecture}

From the architecture point of view, two main requirements was included on the new platform by Brazilian Federal Government request. They are:

\begin{enumerate}
  \item \textit{Integrating existing FLOSS systems} with minimal differences from
    their original versions;
  \item \textit{Providing consistent user interface} across different
    systems as well as centralized authentication.
\end{enumerate}

The adoption of existing FLOSS systems and the minimization of their local changes had the purpose to able the platform's softwares being easily upgrade to newer versions of their original software. With this facility, the platform take advantages from the maintenance and improvements made by communities. The development of a consistent user interface aims to provide to platform users a smooth transition between differents systems . Without it, the necessity of adaptation and learning for each tool could get users confused and fatigued 
%
For the first requirement, we have identified four main systems which would have specialized teams for work in the integration process. 
Team members have learned how to develop for their assigned systems and to contribute to the
original communities to align the used version with the original one.
%
In the end of the project, the SPB portal has combined more than ten
systems, such as Colab, Noosfero, Gitlab, and Mezuro.

Colab\footnote{\url{https://github.com/colab}} is a systems integration
platform for web applications. One of its goals is allowing different
applications to be combined in such a way that an user does not notice
the change between applications. For that, Colab provides facilities
for: (i) Centralized authentication, (ii) Visual consistency, (iii) Relaying of events between applications, and (iv) Integrated search engine.
%
Colab implements this integration by working as a reverse proxy for the
integration applications, that is, all external requests pass through
Colab before reaching them. 
%
Initially, Colab had support for a small set of applications (Trac, GNU Mailman, and Apache Lucene) made in hard-coded. Our team have helped Colab upstream to redesign the whole architecture, enabling the development of plugins to integrate new tools. We also added a feature that allowed Colab to run asynchronous tasks, which was a major improvement for us since we were developing a complex system. We have also migrated Django(web framework used by Colab) to the latest version and worked on RevProxy (the more important dependency of Colab) to put it in a good shape, fixing many bugs.


Noosfero\footnote{\url{http://noosfero.org}} is a software for building
social and collaboration networks. Besides the classical social
networking features, it also provides publication features such as blogs
and a general-purpose CMS (Content Management System). Most of the user
interactions with SPB is through Noosfero: user registration, project
home pages and documentation, and contact forms.
%
Noosfero was the tool that contemplated several functional requirements, therefore we have made a large number of contributions to upstream. We have helped it to migrate to the latest Rails version (web framework used by Noosfero), to enable the federation implementation (federation with other social networks) and to decouple the interface and the back-end.


Gitlab\footnote{\url{http://gitlab.com}} is a web-based Git repository
manager with wiki pages and issue tracking features. It is a FLOSS
platform and focuses on delivering a holistic solution that will see
developers from idea to production seamlessly and on a single platform.
%
Gitlab has several unique features, such as built-in continuous
integration and continuous deployment, flexible permissions, tracking of
Work-in-Progress work, moving issues between projects, group-level
milestones, creating new branches from issues, issues board, and time
tracking.
%
We have contributed to Gitlab upstream with some improvements related to configuration files and with the development of a new plugin that enables user authentication in Gitlab through the REMOTE\_USER HTTP header. This plugin was needed because Colab uses this mechanism to manage the authentication.


Mezuro\footnote{\url{http://mezuro.org/}} is a platform to
collect source code metrics to monitor the internal quality of software written
in C, C++, Java, Python, Ruby, and PHP.
%
In general, source code metrics tools also do not present a friendly way
to interpret its results and, even more, do not follow a standardization
between them. Mezuro collects and presents these results to the end
user, specially, by analyzing source code metric history during its life
cycle.
%
The Mezuro platform provides a single interface grouping available
tools, allows selection and composition of metrics in a flexible manner,
stores the metrics evolution history, presents results in a friendly
way, as well as, allows users to customize the given interpretation
accordingly to their own context.
%
During the project, we helped to modularize the Mezuro project in several independent services to minimize the amount of code to maintain it, helping to test it and grant its code quality. Currently, its computation and visualization modules use Kalibro and Prezento, respectively. They were developed into the Mezuro project and evolved during its integration to the new SPB Portal.

\subsection{System unification and User eXperience evolution}

The conceptual architecture of the platform is presented in Figure
\ref{fig:architecture}. Colab initially handles all user interaction,
directing requests to one of the integrated applications. It
post-processes responses from the applications to apply a consistent
visual appearance, manages authentication, and provides a unified search
functionality: instead of using the redundant restricted search
functionality of each application, a search o	n the SPB portal might
return content from any of the applications, be it web pages, mailing
list posts, or source code.

\begin{figure}[hbt]
  \centering
    \includegraphics[width=.8\linewidth]{figures/arch.png}
  \caption{SPB architecture overview.}
  \label{fig:architecture}
\end{figure}

But integration of collaborative environments goes beyond functional aspects.
To reduce the citizens perception of system complexity and to encourage them to use the software, a platform should offer an unified experience across its environments.
Thus, the SPB Portal information architecture was redesigned
to provide a transparent navigation and to reach users with different profiles.
A process of harmonization has been employed on the interaction models of each
tool to reduce the learning curve. At the same time, a new visual style was
created to unify the navigation experience and to comply with the guidelines of
the digital communication identity standard established by the Federal
Government.

With the increase in system features and the addition of new tools, the
visual style has steadily evolved to keep the navigation unified.  Moreover,
tools from different backgrounds, which in many cases provide similar
functionality, prompted the development of an unified interface. Some
features, such as search and user profile editing were eliminated from
the individual applications, and implemented centrally to ensure a
consistent look and feel.

Another challenge was responsive web design. The integrated applications
had varying degrees of support for responsiveness, and the common
interface had to adapt for each individual scenario. In particular
Noosfero did not yet have a responsive design; we engaged in its
development and contributed towards that goal.

\subsection{Deploy}

The SPB platform was deployed in 7 virtual machines with different functions,
as we can see in Figure \ref{fig:architecture2}.

\begin{figure*}[hbt]
  \centering
    \includegraphics[width=.8\linewidth]{figures/arch3.png}
  \caption{Instanciation view of the SPB architecture.}
  \label{fig:architecture2}
\end{figure*}

The \textit{reverseproxy} handles the HTTP requests and redirects them to the
\textit{integration}, the \textit{email} sends and receives e-mails on behalf
of the platform and the \textit{monitor} keeps the entire environment tracked.
These three \textit{VMs} mentioned - \textit{reverseproxy}, \textit{email} and
\textit{monitor} - are accessible via Internet and the other ones are only
available in the local network created between them.

\textit{Integration} works as a second layer of proxy beneath
\textit{reverseproxy}, any request to the platform will be handled by it. The
Colab service provides interface, authentication and search engine integration
among all the services. When a request is received to a specific service,
Colab authenticates the user in the target tool, sends the request and makes a
visual transformation in the HTML page which is the content of the response.
Another user-oriented feature is the integrated search engine, when the user
want to find something in the platform Colab will perform the search in the
whole databases. Colab itself provides a web interface for GNU Mailman and we
have two others integrated tools in \textit{integration}: Gitlab and Prezento.
Gitlab provides web interface for Git repositories and issues tracker, and
Prezento is a front-end for source code static analysis.

The source code static analysis is performed by \textit{mezuro}. It runs some
static analysis tools on source code stored in repository and provide this data
to Prezento. A social network and CMS (Content Manager System) is provided by
Noosfero in \textit{social}, and the databases of all tools with a cache
service are in \textit{database}.

