1

Integrao de Tecnologias para Desenvolvimento de Sistemas Web, utilizando a metodologia AJAX

Hudson Simes Ribeiro Hudsonsr@gmail.com Jefferson Grij Ferreira Pereira Jefferson.grijo@gmail.com Lus Paulo de Jesus Nunes linweda@yahoo.com.br Eduardo Barrre barrere@inf.aedb.br

Associao Educacional Dom Bosco (AEDB) - Resende, RJ, Brasil

RESUMO
Este artigo aborda o processo de desenvolvimento de sistemas Web no que se refere s tecnologias atualmente disponveis, suas caractersticas, vantagens e impactos. Aborda tambm a metodologia AJAX como uma possibilidade vivel para esse tipo de desenvolvimento. Tambm apresentado um estudo de caso desenvolvido pelos autores ilustrando o uso dessas tecnologias.

Palavras-Chave: Sistemas Web. AJAX. Plataforma Java. MVC. 1. INTRODUO Nos primrdios da Internet, consistia apenas em contedos estticos escritos em HTML (Hypertext Markup Language), tornando qualquer um que desenvolvesse pginas, especialista da internet. Algum tempo depois, atravs da tecnologia CGI (Commom Gateway Interface) foi possvel a criao de pginas com o seu contedo dinmico. O CGI permite ao servidor passar solicitaes http a um programa externo, e receber o resultado deste programa, enviando ao browser cliente e assim o Perl tornou-se a linguagem mais popular para escrever programas CGI. Aps o CGI, surgiram novas e melhores tecnologias que sempre disputaram o ambiente de desenvolvimento de aplicativos web, como: ColdFusion: Produzido pela Allaire, oferece tags personalizadas como HTML,

que podem ser usada para realizar uma srie de operaes especialmente consultar banco de dados. Durante um perodo de tempo foi considerada a principal tecnologia para a programao de aplicativo web. Server-Side JavaScript (SSJS): uma extenso da linguagem JavaScript, a

linguagem de script que ainda regula a programao web do lado cliente. SSJS pode acessar classes Java distribudas do lado servidor usando a tecnologia LiveWire da Netscape.

III SEGeT Simpsio de Excelncia em Gesto e Tecnologia

PHP: uma tecnologia de fonte aberta que amadureceu nos ltimos anos,

oferecendo fcil desenvolvimento de aplicativo web, com seu gerenciamento de sesso e inclui uma funcionalidade interna, tal com upload de arquivo. Hoje, como PHP 5.0 partiu para uma abordagem orientada a objeto, possui uma fatia considervel de adeptos. Servlet: a base do desenvolvimento de aplicativo web usando a linguagem

de programao Java. Java Server Pages (JSP): uma extenso da tecnologia Servlet. Active Server Pages (ASP): ASP da Microsoft emprega tecnologias de script

que funcionam em plataforma Windows, mesmo havendo esforos para transportar essa tecnologia para outros sistemas operacionais. ASP Windows funciona com o servidor web Internet Information Server (IIS Servidor de Informaes de Internet). Active Server Pages .NET (ASP .NET): Essa tecnologia parte da iniciativa

.NET da Microsoft. Interessantemente, a .NET Framework emprega um tempo de execuo chamado Commom Language Runtime que muito semelhante a Java Virtual Machine e oferece uma vasta biblioteca de classe, disponvel a todas as linguagem .NET e de pginas ASP .NET. Ela introduziu vrias novas tecnologias, inclusive gerenciamento de estado, que no depende de cookies ou reescrita de URL. No passado, ASP e Servlet/JSP eram as principais tecnologias usadas no desenvolvimento de aplicativo web. Com o lanamento de ASP .NET no difcil prever que essa tecnologia se tornar o principal concorrente de Servlet/JSP, cada qual tem seus prprios fs e no fcil prever qual ser a vencedora, o resultado mais provvel que nenhuma das duas ser a vencedora absoluta do mercado; Ao invs, provavelmente as tecnologias correro lado a lado nos prximos anos. Kurniawan (2002). A Seguir so descritas as tecnologias para desenvolvimento Web e o estudo de caso desenvolvido pelos autores. 2. JSP (JAVA SERVER PAGES), SERVLETS E JAVABEANS A tecnologia Servlet a base do desenvolvimento de aplicativo web usando a linguagem de programao Java. Ela uma das tecnologias Java mais importante, e a tecnologia subjacente para outra tecnologia Java, popular para desenvolvimento de aplicativo:

III SEGeT Simpsio de Excelncia em Gesto e Tecnologia

Java Server Pages (JSP). Portanto, entender a tecnologia Servlet e sua arquitetura importante, se voc quer ser um desenvolvedor de Servlet. Ainda que voc planeje desenvolver o seu aplicativo web Java usando apenas pginas JSP, entender a tecnologia Servlet ajuda a montar um aplicativo JSP mais eficiente e efetivo, pois esta pgina ser compilada em Servlets pelo servidor. Kurniawan (2002). Java oferece ainda a tecnologia JavaBeans, que nada mais do que uma classe que possui um construtor sem argumentos e com mtodos de acesso do tipo get e set. A combinao destas tecnologias torna a programao e a criao de pginas um processo um tanto complicado quanto as maneiras tradicionais, porm com acesso a inmeras funcionalidades da biblioteca Java. Uma vez criada uma pgina, todo seu cdigo pode ser utilizado por outras. Alm da reutilizao das classes, estas tecnologias tornam mais rpida a apresentao do contedo para o visitante, j que todo trabalho pesado de executar os Servlets fica a cargo do contentor de Servlet no servidor, e aps processar uma solicitao ele permanece na memria, aguardando por uma outra solicitao. Outras funcionalidades so a portabilidade, que semelhante as outras tecnologias Java, os aplicativos Servlets so portteis, podendo mov-los para outros sistemas operacionais sem dificuldades; Robustez, Servlets so gerenciados pela Java Virtual Machine, no havendo a necessidade de se preocupar com galha de memria ou coleta de resduos; e aceitao difundida no mercado, visto que um grande nmero de fabricantes trabalham com tecnologias baseadas em Java. 3. CSS LAYOUT Cascading Style Sheets (CSS - Folhas de Estilo em Cascata), uma tecnologia que nos permite criar pginas web de uma maneira mais exata. Esta tecnologia permite fazer muitas coisas que no era possvel utilizando somente HTML, como incluir margens, tipos de letra, fundos, cores, etc. CSS pode ser escrito dentro do cdigo HTML da pgina web ou em um arquivo a parte e linkar a pgina com esse arquivo. Antes, toda a estrutura do site era feita em incontveis tabelas, e hoje, com a criao de CSS, toda a arte de estruturao de um site contendo milhares de paginas pode ser feita atravs de um nico documento, definido desde as folhas padres at a largura do caracter espao.

III SEGeT Simpsio de Excelncia em Gesto e Tecnologia

Outro fator importante a se destacar nesta tecnologia o tamanho em bytes. Por no mais serem acorrentadas as tabelas, a estrutura do site se torna mais leve e dinmica. A codificao gerada para se manter uma estrutura do tipo CSS LAYOUT bem menor se comparada s formas tradicionais de se criar um layout. Em mdia, seriam gastas seis linhas de cdigo para se criar uma tabela contendo uma linha e uma coluna. J no CSS layout, uma simples estrutura pode ser criada com apenas duas linhas de cdigo. ANGEL ALVAREZ. 4. JAVASCRIPT JavaScript uma linguagem de programao Web que executada do lado cliente, desenvolvida pela Netscape. Essa linguagem possibilita adicionar recursos dinmicos s pginas HTML. 4.1 FUNCIONAMENTO DO JAVASCRIPT Em sua essncia, a linguagem JavaScript atua inserida no meio do cdigo HTML de pginas Web. Essa insero pode ser feita de vrias formas, desde a incluso de cdigo numa rea determinada ou a insero em vrios pontos da pgina. Tudo depende da utilidade necessria. Quando o navegador de Internet "l" a pgina e se possuir tal recurso, deve "entender" as instrues do JavaScript e execut-las. O fato do JavaScript no exigir a instalao de softwares especiais para execuo (assim como ocorre com linguagens mais sofisticadas, como PHP e ASP) o fez ter grande popularidade, j que qualquer pgina HTML pode conter recursos em JavaScript. Tudo depende, basicamente, da capacidade do navegador em entender as instrues (hoje em dia, praticamente todos os navegadores possuem essa aptido). Embora esta tecnologia seja antiga, com o surgimento de novas tcnicas, ela vem sendo amplamente utilizada para a apresentao dinmica de algum contedo, ou mesmo nas tradicionais verificaes de formulrios. ALECRIM. 5. XML XML um subtipo de SGML (Standard Generalized Markup Language - Linguagem Padronizada de Marcao Genrica) capaz de descrever diversos tipos de dados. Seu propsito principal a facilidade de compartilhamento de informaes atravs da Internet.

III SEGeT Simpsio de Excelncia em Gesto e Tecnologia

A linguagem XML definida como o formato universal para dados estruturados na Web. Esses dados consistem em tabelas, desenhos, parmetros de configurao, etc. A linguagem ento trata de definir regras que permitem escrever esses documentos de forma que sejam adequadamente visveis ao computador. ANGEL ALVAREZ. 5.1 DIFERENA ENTRE O HTML E O XML O HTML e o XML tem l suas semelhanas, sendo a principal o fato de utilizar tags (palavras-chaves e parmetros). Em ambas as linguagens, cada tag consiste em duas partes, uma que inicia e outra que fecha o comando. No entanto, em muitos casos, se uma tag aberta no HTML e no fechada, a pgina exibida mesmo assim. J no XML, se houver qualquer erro desse tipo, a aplicao simplesmente pra. Percebe-se com esse exemplo, que o HTML uma linguagem mais tolerante, enquanto o XML altamente rgido. Isso pode at parecer uma desvantagem, mas se for, compensada pela extensibilidade do XML. Para um melhor entendimento, veja o seguinte fato: no HTML, a tag <p> </p> indica o incio e o fim de um pargrafo. No XML, as tags so usadas para definir blocos de dados. O que isso quer dizer? Quer dizer que, <p> </p> podem significar qualquer coisa que o programador desejar. Por exemplo, <p> </p> podem significar peso, pessoa, nome, endereo, classe, carro, enfim, o que o usurio quiser que represente. Por essa caracterstica, o XML at considerado por muitos uma linguagem capaz de gerar outras linguagens, visto que quem define os comandos e suas funes o programador. A praticidade tanta que torna-se possvel um usurio criar uma coleo prpria de tags e aplic-las nas pginas e documentos que desejar. Como exemplo de linguagens baseadas em XML podemos citar: RDF, SMIL, MathML, NCL, XSIL e SVG. O XML vem sendo amplamente explorado pelo seu grande poder de portabilidade, sendo capaz de transmitir informaes entre diferentes plataformas, assim como tambm sua maleabilidade e versatilidade ao se poder criar a tag que necessria para sua aplicao. ANGEL ALVAREZ. 6. AJAX O Asynchronous JavaScript and XML no uma tecnologia e sim uma tcnica de programao que possui a capacidade de retornar uma informao de forma dinmica sem a necessidade de se recarregar toda a uma pgina e seu contedo.

III SEGeT Simpsio de Excelncia em Gesto e Tecnologia

Esta tcnica utiliza vrias tecnologias citadas anteriormente, principalmente JavaScript, gerenciando a comunicao cliente servidor, e XML encapsulando a informao, cada uma a evoluir a sua maneira e a convergir de uma maneira poderosa, podemos ainda citar: Apresentao baseada em padres, que utilizam XHTML e CSS. Exibio e interao dinmicas por meio de DOM (Document Object Model). Troca e manipulao de dados por meio do uso de XML e XSLT. Recuperao assncrona de dados com XMLHttpRequest. E JavaScript, que junta tudo.

A implementao mais comum do Ajax baseada na classe XMLHttpRequest, que faz o meio de campo entre o servidor e o browser. A tcnica ganhou fama em servios como o Gmail, Orkut, Google News, Amazon e Google Local Google Desktop Search, que empregam muitos recursos em Ajax. MELGAR. 6.1 VANTAGENS As grandes vantagens de utilizar Ajax num site que permite proceder a alteraes na pgina com muito menos transferncia de informao, pois podem ser transferidos apenas os dados novos em cada alterao, sendo o HTML do site reutilizado ou criado no cliente. Por outro lado, como apenas partes das pginas so atualizadas, e essa atualizao normalmente muito mais rpida do que se toda a pgina fosse atualizada, o utilizador chega a ter a sensao de que tudo acontece em tempo real, localmente no seu computador. No h necessidade de instalao ou configuraes especiais, ou ficar preso a uma nica plataforma, todas as tecnologias utilizadas no desenvolvimento so multiplataformas e rodam na maioria dos browsers. Como o Ajax composto por vrias tecnologias, cada qual com a sua funo, fica mais fcil a sua manuteno.

III SEGeT Simpsio de Excelncia em Gesto e Tecnologia

6.2 DESVANTAGENS A grande desvantagem da utilizao massiva de Ajax so a usabilidade e a indexao dos sites. Pela parte da usabilidade, o fato de uma grande quantidade das funcionalidades do site serem implementadas em Javascript, torna mais difcil a manuteno de funes a que os utilizadores esto habituados, como o boto Voltar/Back do browser, como as sucessivas pginas so criadas no browser do cliente esta operao no funciona. Por outro lado, se as alteraes so mais que alteraes do contedo, mas navegao no prprio contedo, pode tornar-se impossvel (ou pelo menos complexo) guardar links diretos para determinado contedo que se pretende lembrar. Esta questo da navegao coloca-se ainda com mais relevncia quando se trata a indexao do site, pois se as listagens so geradas em Javascript, e os robs de indexao dos sites de pesquisa no executam o Javascript, na maioria dos caso no vo indexar corretamente o site. Outro problema por vezes apresentado o dos tempos de resposta, que numa rede com tempos de resposta elevados podem gerar timeouts e tempos de espera que os utilizadores no percebem. Nesta situao os utilizadores devem ser alertados visualmente. MELGAR. 7. ESTUDO DE CASO SPEL SISTEMA DE PUBLICAO ELETRNICA Com o objetivo principal de ajudar o editor nas tarefas de publicao e gerenciamento de uma revista, foi proposta a elaborao de um sistema que visa facilitar todo processo de publicao, desde o envio de artigos pelos colaboradores, at a sua efetiva publicao, o SPEl. Ele dividido em 4 mdulos: Edio: responsvel por todas as definies de Sesses da Revista, quais

artigos sero publicados naquele nmero e a edio dos mesmos. Gerenciamento: responsvel pelo controle de artigos j publicados e a

publicar, assim como estatsticas de visualizao de cada artigo, visualizao de sesses e visitao da revista. Publicao/Exibio: responsvel pela gerao dos arquivos-fonte da revista.

III SEGeT Simpsio de Excelncia em Gesto e Tecnologia

Controle de Usurio: responsvel pelo controle de acesso revista, liberando

ao usurio o acesso apenas ao que tem direito. O grande diferencial desta ferramenta a integrao de todas as etapas at a publicao, e tambm ps-publicao. A navegao da revista bastante intuitiva e a princpio em dois (2) idiomas (portugus e ingls), e todo o contedo da revista est armazenado em Banco de Dados, permitindo melhor atualizao e manuteno da revista. O Sistema pode ser utilizado tanto no meio corporativo, quanto no acadmico, disponibilizando uma revista/jornal em sua rede interna e tambm pelos sites que j trabalham com publicao de revistas e desejam uma ferramenta verstil e de fcil utilizao. 7.1 ARQUITETURA E IMPLEMENTAO A figura 1 apresenta a arquitetura do SPEl, apresentando o modelo MVC (ModelView-Controller), os usurios e permisses, as classes de dados, o fluxo dos objetos e o processo de desenvolvimento da aplicao. O MVC garante a separao de tarefas, facilitando assim a reescrita de alguma parte e a manuteno do cdigo.

Figura 1. Modelo MVC. Na camada VIEW, responsvel por apresentar os resultados na pgina Web, utilizamos a tecnologia JSP(Java Server Pages) aproveitando seus melhores recursos, e visando melhorar a iterao com o usurio, utilizamos em alguns componentes a metodologia AJAX (pacote org.ajaxtags.demo.servlet), como na tabela inferior e a busca de um determinado registro das pginas de cadastro e a navegao entre abas nas pginas de configurao da revista e configurao de seo.

III SEGeT Simpsio de Excelncia em Gesto e Tecnologia

Na camada CONTROLLER, utilizamos um servlet (pacote controle) que despacha todas as solicitaes http s pginas de apresentao correspondentes, com base na solicitao de URL, parmetros de entrada e estado da aplicao. Deste modo, temos um nico ponto de controle para segurana e registro, encapsulando as entradas de dados e facilitando o controle de sesso. Na camada MODEL, utilizamos logicamente JavaBeans (pacote Servio), representando as classes de modelo da nossa aplicao, facilitando o armazenamento e a recuperao de dados. Utilizamos ainda outros Servlets (pacote ClassesApoio) responsveis por funes especficas como conexo com banco de dados, configurao de idioma, upload de arquivos, etc. 7. 2 USURIOS E PERMISSES Os usurios do sistema so divididos em 4 perfis bsicos, os quais so representados pela classe Perfis. Nela, so descritos os perfis de usurio ADMINISTRADOR, responsvel pelo cadastro da revista, cadastrar e delegar permisses ao editor e consultar as estatsticas de visitao; usurio EDITOR, responsvel pelo cadastro dos colaboradores, configurao do layout da revista e dos artigos, manter artigo, escolha de artigos que sero publicadas naquele determinado n, disponibilizar a revista, consultar as estatsticas de visitao, consulta de artigos publicados e a publicar; usurio COLABORADOR, que podero postar e consultar artigos; E finalmente, usurio VISITANTE, S tem acesso a uma revista j publicada. O sistema prev o cadastro de perfis intermedirios para atender qualquer nvel de acesso. A figura 2 abaixo ilustra a interao do usurio Editor com o sistema, de acordo com a diagramao da UML.

ConfigurarLayout

DadosLayout LoginEditor

EfetuarLogin

ConsultarArtigosArmazenados DadosConsul taArti go DadosSecao

ManterSecao

DadosPublicacao Publ icarRevista

III SEGeT Simpsio de Excelncia em Gesto e Tecnologia

10

Figura 2. Diagrama de caso de uso do ator editor. 7. 3 CLASSES DE DADOS O sistema possui as seguintes classes de dados: e publicao; Secao, responsvel pelo cadastro de sees da revista; Artigos, responsvel pelo cadastro dos artigos; Foto, responsvel pelo cadastro de fotos dos artigos; Usuario, responsvel pelo cadastro de usurios; Perfil, responsvel pelo cadastro de perfis de acesso revista; Configuracao, responsvel pela configurao da revista; ConfSecao, responsvel pela configurao das sees; ArtigosPublicados, responsvel pelo controle de artigos publicados; Visitacao, responsvel pelo controle de visitao. Revista, responsvel pelo cadastro da revista e por disponibiliz-la para edio

7.4 FLUXO DOS OBJETOS Os objetos criados pela camada VIEW so objetos Java (JavaBeans- objetos com propriedades e mtodos get/set, e mtodo de negcio). Eles trafegam da interface para a

III SEGeT Simpsio de Excelncia em Gesto e Tecnologia

11

camada de controle sofrendo os processos de negcio necessrios, at a persistncia no banco de dados. 7. 5 PROCESSO DE DESENVOLVIMENTO O processo de anlise e projeto do sistema segue as bases Prototipao Evolutiva. Baseado em ciclos evolutivos, a modelagem do sistema fora balizada pela construo de casos de uso e o agrupamento de tecnologias a serem utilizadas. Seguido pela prototipao da interface de usurio, bem como o esquema navegacional, definiu-se o modelo de interao do usurio. Em paralelo, os objetos de dados foram modelados e as devidas informaes relativas persistncia foram inseridas. Na seqncia, a implementao das regras de negcio e ajustes mais finos na interface do usurio foram efetuados. Finalmente, testes de usabilidade, performance, correo de erros e ajustes foram aplicados. 8. CONCLUSO Este artigo aborda de forma sucinta a Integrao de tecnologias para desenvolvimento de sistema em JSP, utilizando a metodologia AJAX, com o estudo de caso do sistema SPEl. Embora existam vrias maneira de se implementar uma aplicao, foi visto que utilizar JSP, Servlet e JavaBeans aplicando o modelo MVC obtm-se um cdigo mais limpo e de fcil manuteno, e agregando a metodologia AJAX no desenvolvimento da interface, torna o software mais atrativo aos olhos do usurio. E importante lembrar que utilizar ou no o modelo MVC depende muito da aplicao, no case de aplicaes robustas ou escalveis, este modelo altamente recomendado independente da linguagem utilizada. A utilizao das tecnologias abordadas, mostraram-se capazes de suprir as necessidades no desenvolvimento do SPEl, cada qual com sua singularidade, tornando possvel adequar o sistema com as novas tendncias no desenvolvimento web. Alm deste aspecto, utilizar estas tecnologias, at ento, pouco aplicadas, nos auxiliou a enxergar uma forma pratica de criar aplicativos web e que ainda sim, fosse to eficaz quanto as formas mais difundidas.

III SEGeT Simpsio de Excelncia em Gesto e Tecnologia

12

9. REFERNCIAS [1] KURNIAWAN, BUDI. Java para a Web com Servlets, JSP e EJB. Cincia Moderna, 2002. ed.1. [2] GUIMARES, RENATO. ASP.NET - Uma mudana radical no desenvolvimento web... <http://www.imasters.com.br/artigo/1624>. Acessado em 10 de Abril de 2006. [3] LIMA, GLEYDSON. Introduo a Enterprise JavaBeans PARTE 1. <http://www. j2eebrasil.com.br/jsp/tutoriais/tutorial.jsp?idTutorial=010_001>. Acessado em 3 de Maro de 2006. [4] EIS, DIEGO. Browsers e seus diferenciais. <http://www.tableless.com.br/>. Acessado em 21 de Abril de 2006. [5] ANGEL, MIGUEL ALVAREZ. O que CSS. <http://www.criarweb.com/artigos/173.php>. Acessado em 29 de Maio de 2006.

[6] ANGEL, MIGUEL ALVAREZ O que XML. <http://www.criarweb.com/artigos/203.php>. Acessado em 12 de Maro de 2006.

[7] ALECRIM, EMERSON. Linguagem JavaScript. <http://www.infowester.com/lingxml.php>. Acessado em 5 de Maio de 2006. [8] CAELUM, Ensino e solues em Java. Java para desenvolvimento web. <http://www.caelum.com.br/caelum/index.jsp>. Acessado em 23 de Abril de 2006. [9] MELGAR, ROBINSON. Ajax Asynchronous Javascript and XML. Revista www.com.br, n. 69, p.26-27, abril. 2006. [LARMAN 2003] Larman, Craig. : A Manager's Guide. AddisonWesley Professional, 2003.