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

From the architeture point of view, the integration of several features (such as centralized authentication, unified interface, search engine as well as other back-end features) of systems with different programming languages and frameworks would require a non-trivial amount of work. In this context, the most important architetural requirements for the new platform were:

\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 lower the effort of upgrading the software packages that compose the platform to newer version of their original software. With this facility, the platform
benefits from maintenance and improvements made by communities. The development of a consistent user interface aims to provide to platform's users a smooth transition between different 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 write code to their assigned systems and how 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 applications, i.e., 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) hard-coded in its core. Our team have helped Colab
upstream to redesign its 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.
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
also 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 do not present a friendly way to
interpret their 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 on
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}

However, 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 a 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 a 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 also 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}. 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 mentioned
virtual machines - \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.

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

\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 a repository and provides this data
to Prezento. A social network and CMS is provided by Noosfero in
\textit{social}, and the databases of all tools with a cache service are in
\textit{database}.