A web está passando por uma fase onde a complexidade estrutural e a manutenção das páginas da internet estão além dos métodos que usamos para criação e gerenciamento. Devido essa carência de uma sistematização melhor, os pesquisadores, desenvolvedores e outros conhecedores e interessados pela área propuseram metodologias baseadas na engenharia de software que foram adaptadas para as aplicações web e que levam consigo o termo Engenharia Web. Esses métodos sistemáticos auxiliam o projeto e a manutenção dos programas que cada vez são maiores e mais complexos. Esses métodos inicialmente foram definidos na Engenharia de Software e tornou viável a criação e manutenção de aplicações com grande número de linhas de código com pouca depuração e com diversos programadores em um mesmo projeto com o mínimo de conflito. Com o surgimento e a evolução da internet as páginas web se tornaram também cada vez mais complexas, além de possuir características que diferenciam de aplicações convencionais como: grupo de desenvolvimento com diferentes ênfases de conhecimentos entre os integrantes (programação, redes, desenho artístico, etc.), a infraestrutura técnica no meio das aplicações web que se caracteriza por tecnologias heterogêneas, o processo de concepção de aplicações web que exige flexibilidade para modificações (devido sugestões ou críticas dos usuários) e, por fim, a integração que é a capacidade de um sistema web assimilar e interagir com sistemas e tecnologias legadas.

No restante do artigo veremos o que é a Engenharia Web e apresentaremos em detalhes uma das técnicas para engenharia web, a UWE, que é uma das mais completas e mais utilizadas no mercado empresarial. Essas metodologias em geral abrangem todo o ciclo de vida de uma aplicação, sendo que a UWE tem como principal característica a extensão da linguagem de modelagem UML.

Engenharia Web

A Engenharia Web surgiu pela motivação de alguns fatores como: Abordagem Orientada ao Documento na qual se buscou enfatizar a criação de documentos e o vínculo entre eles, a Simplicidade no Desenvolvimento onde apesar das pessoas considerarem fácil a criação de aplicações web, muito em função de aplicativos de edição e geração de páginas, isso resulta em redundância e inconsistência e, por fim, os Conhecimentos da Engenharia de Software tradicional que nem sempre são aplicados aos conceitos de aplicações web.

Devido a essas dificuldades temos como resultado a criação de aplicações web com falta de funcionalidades, baixo desempenho, pouca qualidade, complexidade demasiada, manutenção difícil e cara.

Um autor muito renomado na área de Engenharia Web, chamado Selmi, define os seguintes princípios básicos da Engenharia Web:

  • Definir os objetivos e requerimentos de forma clara;
  • Desenvolver a aplicação web sistematicamente em fases;
  • Planejar cuidadosamente essas fases;
  • Gerenciar todo o processo de desenvolvimento de forma continua.

O autor Deshpande define a Engenharia Web como "a aplicação de abordagens sistemáticas e quantificáveis para eficiente análise de requisitos, projeto, implementação, teste, operação e manutenção de aplicações web de alta qualidade".

A engenharia web possui diversos métodos e que estão em constante processo de aprimoramento como o HDM (1993), RMM (1995), HDM-Lite (1996), OOHDM (1996), WSDM (1997), WAE (1998), WebML (1999), W2000 (2000), UWE (2000), WAE2 (2001), OOWS (2001), Hera (2001), OO-H (2002) e WebSA (2004).

No processo de desenvolvimento de uma aplicação web tudo começa com a análise de contexto que é a etapa onde realizamos atividades como a análise, coleta de requisitos, documentação com registros da análise, verificação de requisitos, validação dos requisitos e o gerenciamento de requisitos. Nesta etapa também tratamos dos requisitos de conteúdo, qualidade, ambiente de sistema, interface de usuário e restrições de projeto. Requisitos não-funcionais que tratam da qualidade geral da aplicação também são verificados e analisados. As notações usadas nos documentos de análise de contexto que podem ser utilizados na engenharia web são as histórias de usuários, itens de requisitos, descrição formatada e a especificação formal.

A próxima etapa do desenvolvimento de uma aplicação Web é o Projeto da Arquitetura do Sistema que se trata de um conjunto de elementos e a relação entre esses elementos. Essa etapa é como uma transição entre a análise de contexto e a implementação do sistema, em que definimos os elementos da arquitetura com base nos requisitos especificados na etapa anterior.

Para definir os elementos da arquitetura do sistema tomamos como base a estrutura física utilizada (como, por exemplo, os servidores), as características da própria aplicação e os softwares envolvidos para a execução, a manutenção e outras funções para o desenvolvimento e implantação da aplicação.

Na etapa seguinte temos o Modelo do Processo que é responsável pela organização do desenvolvimento do sistema, e onde se define normas e padrões para as fases de desenvolvimento, facilitando assim a compreensão da estrutura geral da aplicação e a comunicação entre os desenvolvedores. O Modelo do Processo também define métodos para realizar cada fase de desenvolvimento assim como a transição entre essas fases. Portanto, enquanto um Método definido num Modelo de Processo trabalha com questões locais das fases do projeto, o Modelo de Processo aborda questões globais em todo o desenvolvimento da aplicação.

Após a arquitetura do sistema estar pronta e a escolha do modelo de processo ter sido definido, tem-se a etapa de Planejamento do Projeto. O Plano de Projeto consiste nos tipos de atividades e quando as atividades serão realizadas. O objetivo desta etapa é o melhor aproveitamento possível dos recursos e do tempo para que a aplicação seja concebida dentro do prazo e com funcionalidades satisfatórias.

A partir do plano anterior começa a fase do Desenvolvimento da Aplicação Web onde são implementados os módulos que compõe a aplicação através da programação. Nesta etapa também se define os elementos navegacionais, o conteúdo da aplicação e o aspecto visual das páginas. Além disso, utilizamos duas linguagens de programação, uma para o lado cliente e outra para o lado servidor na qual a coordenação do desenvolvimento é crucial para a harmonia entre programas de cliente e programas de servidor.

A fase de Implantação é onde disponibilizamos a aplicação web para os usuários on-line. Dessa forma, a aplicação é instalada no servidor.

Após a aplicação estar on-line será necessária a Avaliação e Manutenção do Sistema para que ele mantenha-se disponível e funcional. Também devemos manter o sistema atualizado de acordo com as mudanças tecnológicas e demandas dos usuários.

Outra etapa que temos no desenvolvimento de aplicações web é o Gerenciamento de Projeto que tem como objetivo garantir que os processos e atividades trabalhem em harmonia coordenando os diversos esforços envolvidos no ciclo de desenvolvimento. Podemos verificar que o gerenciamento de projeto trata da coordenação de todo o processo de desenvolvimento, por isso ele está presente em todas as outras fases do desenvolvimento.

A etapa de Controle de Qualidade avalia a qualidade do componente resultante de cada fase do processo. O controle da qualidade ocorre paralelamente a todas as fases.

Por fim, temos a etapa de Documentação onde fazemos um registro sobre os requerimentos, resultados e codificação para facilitar a avaliação dos desenvolvedores para uma futura manutenção, facilitar o uso de aplicações complexas, registrar e classificar requisitos. Nesta etapa de Documentação podemos organizar as atividades do processo com o uso de textos e diagramas, de modo que seja de fácil compreensão para os envolvidos no projeto e para usuários de sistemas complexos cuja explicação é inviável.

Processos de Desenvolvimento de Aplicações Web

Anteriormente verificamos algumas das características das aplicações web que as diferenciam de outros softwares. Além disso, analisamos também os elementos básicos que compõem o processo de desenvolvimento de um software voltado para a web, assim como as características de suas atividades.

No restante desta seção veremos o processo de desenvolvimento de aplicações web mais comum e utilizado para organizar e criar sistemas para internet.

UWE (Engenharia Web baseada na UML)

A UWE (UML Web Engeneering) é uma abordagem para o desenvolvimento sistemático de aplicações web, e tem como objetivo principal a unificação da abstração de alto nível do processo de desenvolvimento. Essa unificação permite uma melhor integração e comparação dos elementos do modelo, a codificação semiautomática a partir do modelo, diferentes processos de desenvolvimento, subconjuntos de elementos de modelagem e o uso de diferentes notações.

Essa abordagem foi proposta por Koch, Hennicker e Kraus sendo baseada na linguagem UML e no Processo Unificado (UP) além de ser também compatível com a arquitetura de modelagem OMG.

Processo da UWE

As principais características do processo de desenvolvimento de aplicações web que são baseadas na UWE são: a divisão dos problemas nas etapas iniciais e a implementação do processo de desenvolvimento orientado ao modelo.

Na UWE os diversos aspectos que descrevem o sistema web são trabalhados separadamente. As etapas do processo de desenvolvimento (análise de requisitos, definição da arquitetura e projeto) são descritos através de módulos para diferentes pontos de vista do sistema (conteúdo, estrutura do hipertexto e a interface com usuário). Em cada etapa do processo também se divide a descrição comportamental da descrição estrutural de cada módulo facilitando assim a divisão de tarefas da equipe de desenvolvimento e permitindo que conhecimentos específicos sejam bem aplicados a cada parte do problema.

O desenvolvimento orientado a modelos permite uma visão geral dos componentes da aplicação e uma maior facilidade para o estudo da manutenção ou mudanças do sistema. A orientação à modelo enfatiza a transição entre as etapas do processo de desenvolvimento onde o uso correto dos elementos é imprescindível para a geração automática de código com base no modelo.

A UWE introduz uma abordagem própria para a modelagem que inclui três modelos, cada um focando um aspecto central das aplicações Web: Modelo Conceitual, Modelo Navegacional e Modelo de Apresentação. Essa metodologia inicia com a fase de Análise de Requisitos que aborda a identificação de casos de uso e o resultado será um Modelo de Casos de Uso juntamente com o Diagrama de Casos de Uso. O Modelo de Casos de Uso é central, pois seu conteúdo é a base do desenvolvimento de outros diagramas e da implementação da aplicação.

Segue na Figura 1 um exemplo de um diagrama de caso de uso.

Exemplo de um diagrama de casos de uso

Figura 1. Exemplo de um diagrama de casos de uso.

Os diagramas de casos de uso podem ser feitos utilizando um quadro, um caderno ou também podem ser realizados através de diversas ferramentas que estão disponíveis como o JUDE.

Após isso, com base no Modelo de Casos de Uso construímos um Modelo Conceitual que é o modelo do domínio da aplicação. Neste modelo as classes e os outros participantes do sistema, bem como as relações entre eles, são modelados. Este Modelo Conceitual será representado por um Diagrama de Classes UML. Segue na Figura 2 um exemplo de um Diagrama de Classes utilizado para representar o Modelo Conceitual.

Diagrama de classes de um sistema acadêmico

Figura 2. Diagrama de classes de um sistema acadêmico.

A próxima etapa é o Modelo de Navegação que compreende a construção de dois modelos, o Modelo do Espaço de Navegação e o Modelo de Estrutura de Navegação. O Modelo do Espaço de Navegação é baseado no Modelo Conceitual e nos requisitos definidos anteriormente nos casos de uso. A função desta modelagem é especificar quais classes do Modelo Conceitual serão visíveis ao usuário e quais serão os caminhos para se chegar a essas classes. O Modelo de Estrutura de Navegação é construído a partir do refinamento do espaço de navegação. Neste modelo, são adicionados elementos de acesso como índices, excursões, consultas e menus.

Segue na Figura 3 um exemplo de um Modelo de Navegação.

Exemplo de um Modelo de Navegação

Figura 3. Exemplo de um Modelo de Navegação.

Por fim, temos o Modelo de Apresentação que é a representação de onde e como os objetos da navegação e os acessos primitivos serão apresentados para o usuário. O projeto da apresentação suporta a transformação do Modelo da Estrutura de Navegação em um conjunto de modelos que mostram o local estático dos objetos que são visíveis para o usuário, além do esquema de representação destes objetos (páginas) e dos seus comportamentos dinâmicos. O esquema da representação é similar à técnica de desenvolvimento usada por alguns projetistas de interface. O projeto de apresentação foca na organização estrutural da apresentação, como por exemplo, os textos, as imagens, os formulários e os menus e não na aparência física em termos de formatos especiais, cores, etc.

Segue na Figura 4 um exemplo de um Modelo de Apresentação.

Exemplo de um Modelo de Apresentação

Figura 4. Exemplo de um Modelo de Apresentação.

Notação da UWE

A UWE usa modelos visuais que permitem criar a documentação e facilitar o processo de desenvolvimento. A notação visual permite a construção de modelos bem expressivos e intuitivos, empregando uma semântica formal e facilitando o aprendizado dos desenvolvedores.

Os estereótipos usados para representar elementos dentro dos modelos da UWE são representados através de texto limitado por "<<" e ">>" ou ícones com ilustrações intuitivas para a função do estereótipo.

Alguns dos estereótipos da UWE são: <<anchor>>, <<anchored collection>>, <<button>>, <<choice>>, <<form>>, <<guided tour>>, <<image>>, <<indexx>>, <<menu>>, <<navigation class>>, <<navigation link>>, <<navigation property>>, <<page>>, <<presentation class>>, <<presentation group>>, <<presentation property>>, <<process class>>, <<process link>>, <<process property>>, <<query>>, <<text input>>, <<text>>, <<user action>>.

Modelagem utilizando ArgoUWE

O ArgoUWE é baseado no ArgoUML e faz uso da interface gráfica do ArgoUML. No entanto, os diagramas do ArgoUWE representam os novos modelos específicos para a UWE.

Segue na Figura 5 a arquitetura do plugin ArgoUWE sobre a plataforma ArgoUML.

Arquitetura do ArgoUWE</em>
sobre o ArgoUML

Figura 5. Arquitetura do ArgoUWE sobre o ArgoUML.

Antes de explorarmos o ArgoUWE devemos primeiramente baixar a ferramenta Ant que é pré-requisito para executar a ArgoUWE que está disponível em http://ant.apache.org/bindownload.cgi.

Após isso descompacte o arquivo em algum diretório e acesse as variáveis de ambiente do Windows e adicione nas variáveis do sistema o nome da variável “ANT_HOME” e no valor coloque o caminho onde está instalado o Ant. Por fim, edite a variável “Path” e adicione ao final do valor o “;” e acrescente “%ANT_HOME%/bin”. Também podemos adicionar as variáveis de ambiente através do prompt de comando. Para isso abra o Prompt de comando do Windows e digite:

set ANT_HOME=C:\apache-ant-1.9.4-bin\apache-ant-1.9.4
  set PATH=%JAVA_HOME%\bin;%ANT_HOME%\bin;%PATH%

Não devemos nos esquecer de trocar os caminhos para aqueles que são relativos a instalação nas nossas máquinas.

Após isso, devemos baixar e instalar o ArgoUWE através do endereço http://uwe.pst.ifi.lmu.de/toolargoUWE.html.

Após descompactar o ArgoUEW, vá até o prompt de comando e entre no diretório do ArgoUEW com o comando abaixo:

cd "C:\argouwe_bin\argouwe"

Por fim, execute o comando abaixo para executar a ferramenta:

"C:\apache-ant-1.9.4-bin\apache-ant-1.9.4\bin\ant" run

Instalado o ArgoUEW podemos agora explorar o ambiente.

Conforme mostra a imagem abaixo o ArgoUWE herda quatro compartimentos do ArgoUML, são eles:

  • Navigator Pane: Todos os diagramas e elementos do modelo são listados em uma estrutura em árvore;
  • Multieditor Pane: Este é o painel principal do ArgoUWE e é onde os diagramas são representados e podem ser editados;
  • Critique Pane: Este é onde uma lista de questões críticas do design são mostrados;
  • Detail Pane: É onde os atributos do elemento do modelo selecionado pode ser editado.

Segue na Figura 6 a imagem indicando cada um dos compartimentos discutidos acima, respectivamente.

Ambiente de trabalho no ArgoUWE

Figura 6. Ambiente de trabalho no ArgoUWE.

O ArgoUWE exporta modelos do usuário usando o padrão XMI. No modelo XMI UWE exportado os elementos do modelo são rotulados com valores especiais marcados.

Os diagramas do UWE podem ser encontrados no menu ilustrado na Figura 7.

Diagramas
disponíveis do UWE

Figura 7. Diagramas disponíveis do UWE.

Um modelo conceitual é representado no ArgoUWE como um diagrama de classe convencional. Nesse caso, tem-se que nada foi alterado em relação ao ArgoUML. No entanto, podemos marcar algumas classes conceituais como "navigation relevant", essas classes serão conectadas às classes de navegação que representam os nós da estrutura da aplicação Web. Na figura 6 podemos verificar ao final da imagem a opção "navigation relevant" marcada.

O Modelo de Navegação pode ser gerado de maneira semiautomática baseando-se nas classes conceituais marcadas como relevantes, conforme visto acima. Quando o modelador seleciona “Create Diagram” e “Navegation Diagram” o ArgoUWE copia todas as classes marcadas como relevantes e todas as associações entre eles do modelo conceitual para o Modelo de Navegação. Após isso podemos adicionar associações adicionais, queries, menus, entre outros.

Também podemos construir o Modelo de Apresentação que é muito similar à construção do Modelo de Navegação que é criado a partir do modelo conceitual, no entanto, o Modelo de Apresentação é construído com base no Modelo de Navegação. Construímos o Modelo de Apresentação através do menu “Create Diagram” e “Presentation Diagram”.

O interessante do ArgoUWE é que ele também ajuda aos modeladores a manter o modelo consistente. Algumas das restrições do meta-modelo do UWE são constantemente aplicados pelo ArgoUWE. Portanto, se fizermos alguma operação que o ArgoUML note que não é valido ele avisará ao modelador.

Bibliografia

[1] Pressman, R. Engenharia de Software: Uma abordagem Profissional. 7º edição. Editora Bookman.

Sugestão de conteúdo