Definido o plano de desenvolvimento e as tecnologias a serem empregadas, a etapa seguinte tratou em elaborar os modelos para a implementação da aplicação. Estes modelos são compostos pelas arquiteturas definidas a partir da análise dos requisitos
funcionais e não funcionais. Três arquiteturas foram desenhadas: a estrutura da aplicação, a arquitetura do back-end e a arquitetura do front-end.
4.4.1
Arquitetura ou Estrutura da Aplicação
A arquitetura que define a estrutura da Ágora é um modelo do tipo Cliente- Servidor (BERSON, 1992), uma estrutura de aplicação distribuída em que tarefas são divididas entre os fornecedores de recursos (servidor) e os requerentes de serviços (clien- tes).
Em geral, os clientes e servidores se comunicam através de uma rede de com- putadores em máquinas distintas. O servidor é um host que executa um ou mais serviços e compartilha recursos com o cliente. Porém, o cliente não compartilha seus recursos com o servidor, apenas requisita um serviço ou função. Os clientes são responsáveis por iniciar as sessões de comunicação com os servidores, os quais aguardam requisições de entrada.
Figura 5 – Arquitetura estrutural da Ágora segundo o modelo Cliente-Servidor.
A Figura 5 apresenta a arquitetura estrutural da Ágora conforme o modelo cliente-servidor. O cliente, um usuário da plataforma, requisitará os serviços do servidor a partir de um browser localizado em um dispositivo com acesso à internet (desktop, smartphones, tablets e outros). O servidor, que executará todas as funções da plataforma, hospedará a aplicação bem como o banco de dados. O framework Django resolverá o fluxo de informação entre a aplicação e o banco de dados, e o Apache garantirá a comunicação entre o servidor e o cliente através do protocolo HTTP.
Capítulo 4. Projeto e-Ágora: a Ágora e a Metodologia da Ação Comunicativa 93
4.4.2
Arquitetura do Back-end
A arquitetura do back-end está intrinsecamente relacionada com o Django, uma vez que o framework fornece as soluções para acessar, processar, armazenar e controlar o banco de dados segundo as requisições do cliente.
O back-end fornecido pelo Django é organizado de acordo com a estrutura MVC (Model-View-Controller ) (BURBECK, 1992). O modelo consiste em uma arquitetura de 3 camadas que interagem entre si atendendo as solicitações do cliente e processando funções tanto em nível de banco de dados quanto de respostas HTML (HyperText Markup Language - Linguagem de Marcação de Hipertexto ). A Figura 6 apresenta uma abstração do modelo MVC e como cada camada interage entre si na requisição e execução de serviços.
Figura 6 – Arquitetura do modelo MVC.
A camada Model é responsável pela representação dos dados, fazendo uma interface entre a camada de requisição (View) e o banco de dados. Seus objetos, conhecidos como modelos, são abstrações de atributos do banco de dados e devem ser atualizados toda vez que uma mudança é requisitada. A camada Controller gerencia o fluxo de informações entre as camadas View e Model. É responsável por enviar comandos para algum modelo da camada Model, para atualizar o seu estado (inserir, editar ou excluir algum dado do banco de dados), ou para a camada View, solicitando a alteração da apresentação de um dado. A camada View é responsável por gerar uma representação dos dados no modelo
solicitado pelo cliente, fazendo a exibição por meio de um protocolo HTML ou XML, e enviando as ações do usuário para o Controller.
Os modelos e a implementação das funcionalidades da camada View foram desenvolvidos com base nos requisitos funcionais e não funcionais, e serão detalhados na fase de implementação.
4.4.3
Arquitetura do Front-end
O front-end é desenvolvido a partir de um conjunto de técnicas que têm por objetivo criar e manipular a parte visual e estrutural de um sistema web. Os métodos comumente utilizados são as linguagens interpretadas pelos browsers - programa que ha- bilita seus usuários a interagirem com documentos HTML hospedados em um servidor da rede (por exemplo, Chrome, Internet Explorer, Firefox e outros).
Para a implementação do front-end da Ágora foram utilizadas as linguagens mais amplamente empregadas e compatíveis com grande parte dos browsers atuais: o HTML5, o CSS e o Javascript. Segue uma breve descrição de cada tecnologia:
∙ HTML: abreviação para HyperText Markup Language (Linguagem de Marcação de Hipertexto), é uma linguagem de marcação utilizada na construção de páginas web (GRAHAM, 1995). É composta por uma série de pequenos códigos, denominados tags, escritos no documento principal e utilizados para definir os elementos do front- end, como a cor, fonte, objetos gráficos, hipertextos e outros. Um documento HTML é um arquivo que pode ser visto através de um browser, o qual faz a tradução ou renderização do texto transformando-o em uma estrutura visível ou audível. Escrever um código HTML requer apenas conhecer as tags e utilizá-las corretamente entre os elementos de texto, o que pode ser feito através de uma ferramenta simples de edição de textos. A versão utilizada no desenvolvimento da Ágora foi o HTML5, que traz novidades à linguagem como tags de semântica, acessibilidade, correção automática de erros de sintaxe, entre outras funcionalidades.
∙ JavaScript: é uma linguagem de programação utilizada para a implementação de aplicações web que exijam maior dinamismo, responsividade e interatividade (FLA- NAGAN, 2006). Trata-se de uma linguagem interpretada, o que confere velocidade, e executada no interior de outras linguagens, mais comumente da linguagem HTML. Usa elementos de sintaxe de programação estruturada (por exemplo, if, while, for, etc) e é quase inteiramente orientada a objetos. O uso mais comum do JavaScript é escrever funções que são embarcadas ou incluídas em páginas HTML, as quais interagem com o Modelo de Objetos de Documento (DOM) da página, executando localmente no navegador do usuário e não em um servidor remoto. Tal fato confere respostas rápidas do navegador, acarretando em funcionalidades mais responsiva. A
Capítulo 4. Projeto e-Ágora: a Ágora e a Metodologia da Ação Comunicativa 95
simplicidade da linguagem e as possibilidades de uso tornaram o JavaScript uma das mais populares linguagens web, tendo suporte em praticamente todos os browsers atuais. É usada por muitos websites para validar formulários, criar cookies, detectar browsers e melhorar o design.
∙ CSS: abreviação de Cascading Style Sheets, é uma linguagem voltada para o de- sign de websites, utilizada para definir a apresentação de documentos escritos em linguagem de marcação (LIE et al., 2005). É organizada em folhas de estilo - do- cumento que especifica uma apresentação visual ou auditiva. A principal vantagem em utilizar a linguagem CSS está na separação entre a estilização e a estrutura de um documento. Ao invés do programador colocar a estilização no texto principal da webpage, ele cria um arquivo de folha de estilos e depois liga ou importa para o documento a ser estilizado, enxugando o código HTML e evitando redundâncias. Apesar de agregar um novo arquivo ao sistema, uma ficha CSS possui tamanho muito reduzido, não implicando na diminuição da velocidade de renderização de um texto HTML.
A arquitetura do front-end também está intrinsecamente relacionada com o processo MVC do framework Django. Além das três linguagens citadas, o Django fornece uma linguagem própria de Template, denominada DTL (Django Template Language), a qual envia dinamicamente ao documento HTML o conteúdo estático do back-end. Uma API (Application Programming Interface) padrão é responsável por renderizar os modelos do back-end de forma que os mesmo sejam pré-carregados e compilados em uma repre- sentação na memória. Este processo possibilita uma resposta rápida do browser, pois não ocupa o carregamento com muitas requisições ao servidor.
As funcionalidades desenvolvidas para o front-end da Ágora foram implemen- tadas com uma abordagem híbrida. As linguagens foram utilizadas de forma a otimizar as requisições ao servidor e tornar mais dinâmica a experiência do usuário.