Acelerando com Ajax a Biblioteca Digital de Teses e Dissertações da USP

Rogerio T. Kondo1, Maria de Lourdes R. Lirani1, Vinicius Augusto Tagliatti Zani1, Caetano Traina Jr.1,2, Paulo Cesar Masiero2

1Centro de Informática de São Carlos Universidade de São Paulo (USP)

Caixa Postal 436 – 13.560-970 – São Carlos – SP – Brazil

2Instituto de Ciências Matemáticas e de Computação Universidade de São Paulo (USP)

Caixa Postal 668 – 13.560-970 – São Carlos – SP – Brazil

{rogerio,lurdinha}@sc.usp.br, Vinicius.Zani@gmail.com,

{caetano,masiero}@icmc.usp.br

Abstract. The Digital Library of Theses and Dissertations from the University of São Paulo (Brazil) - BDTD-USP - was first deployed in 2001, and since then has grown steadily, storing today more than 4,500 documents. The BDTD was originally built using the standard web interaction paradigm, composed by a succession of cycles where the user asks for data, then waits for the browser to gather all required data from servers and, finally, visualizes and analyzes the content. Now the BDTD is being re-constructed on top of a newer paradigm, where the second phase of each interaction cycle is virtually eliminated. This is achieved using the set of technologies Ajax, whose main concept is to embed intelligence in each web page, so many steps of the interaction occurs using code executed in the browser, without waiting for server data.

Resumo. A Biblioteca Digital de Teses e Dissertações da USP (BDTD-USP) foi disponibilizada para o público em 2001, e a partir de então cresceu a ponto de hoje manter mais de 4.500 documentos em seu acervo. Em sua concepção original, a biblioteca foi construída seguido o paradigma tradicional de interação na rede, onde o usuário segue uma sucessão de ciclos de: requisição de dados, espera pelo navegador obter os dados nos servidores, e visualização e análise dos resultados. A BDTD está sendo reconstruída baseada em um novo paradigma de interação, onde a fase de espera é praticamente eliminada pelo uso do conjunto de tecnologias denominadas Ajax. O principal conceito por trás dessas tecnologias é codificar inteligência em cada página da web, de maneira que o código executado no navegador fica responsável pela interação e pela obtenção em segundo plano dos dados necessários, eliminando a necessidade de espera do usuário.

1. Introdução

A Biblioteca Digital de Teses e Dissertações da USP [BDTD-USP] tornou-se referência nacional na área como a primeira biblioteca digital institucional brasileira. Até então, as bibliotecas digitais no Brasil existiam somente em nível departamental ou em grupos de pesquisa. Após seu desenvolvimento, a consulta às teses e dissertações disponibilizadas integralmente na Internet tem aumentado ano a ano. Em 2005 foram contabilizados 6,8 milhões de acesso. Somente no ano de 2006, já se contabilizam mais de 2,2 milhões nos primeiros quatro meses. Dos acessos identificados em 2006, cerca de 1,8 milhões (61%) correspondem a acessos nacionais e os restantes (39%) originaram-se fora do país, dos quais Portugal (50%), Reino Unido (10%) e Suíça (6%) são os maiores representantes.

Desde sua inauguração em 2001, a BDTD-USP adotou o sistema da Network Digital Library of Theses and Dissertation [NDLTD], baseado na linguagem de programação PERL e tendo o MySQL como seu banco de dados. Esse sistema permitiu a criação de um sítio web para a geração de conteúdo digital da biblioteca. Ele foi estudado e adaptado para melhor atender às necessidades da USP, o que incluiu a integração com seus sistemas corporativos, tais como o Sistema da Pós-Graduação (Fenix), e recursos para a geração de dados no formato MARC para o Banco de Dados de Referência Bibliográfica (Dedalus) da Universidade. Detalhes dessa primeira versão podem ser encontrados em Masiero et al. [2001].

A versão original do NDLTD apresenta as características de uma aplicação web tradicional, na qual as ações do usuário na interface da biblioteca geram sempre uma requisição HTTP ao servidor da aplicação. O servidor então executa as operações necessárias (recuperação de dados, checagem de consistência dos dados fornecidos, inserção e exclusão de dados no banco de dados, entre outros) e retorna uma página HTML ao navegador do usuário, instrumentando-o para o próximo passo.

Figura 1. Modelo tradicional de aplicações web [Garrett, 2005].

A Figura 1 ilustra esse modelo tradicional, que foi adaptado a partir do uso original da web (hipertextos) e não necessariamente produzia aplicativo com garantia de boa interação com o usuário [Garrett, 2005] porque, nesse modelo, enquanto o servidor está

processando, o usuário simplesmente espera pelo resultado. A cada passo da interação, o usuário é obrigado a esperar a execução do servidor, para poder solicitar o próximo passo. Com o desenvolvimento de novas tecnologias para o ambiente web, as oportunidades de interatividade têm aumentado, permitindo o desenvolvimento de aplicações que evitam que o usuário espere pelo próximo passo, e assim não perceba que a aplicação está interagindo com o servidor remoto.

Este trabalho descreve como a nova metodologia de desenvolvimento Ajax está sendo utilizada para a criação da nova versão da BDTD-USP, permitindo um aumento da interatividade dos usuários e facilitando a manutenção deste sistema. Todo o código foi reescrito em PHP e um novo módulo foi adicionado. Este trabalho está organizado da seguinte maneira: as Seções 2 e 3 colocam os conceitos fundamentais necessários à compreensão do assunto, apresentando respectivamente a metodologia Ajax e uma de suas diversas implementações; a Seção 4 descreve a nova versão da BDTD-USP usando esse novo paradigma e correções dos problemas identificados na versão anterior do sistema; finalmente, a Seção 5 mostra os problemas encontrados durante a nova implementação.

2. O que é Ajax

Ajax é um acrônimo para Asynchronous JavaScript and XML e é um importante componente da nova geração de aplicações Web 2.0 [O’Reilly, 2005]. Segundo [Garrett, 2005], Ajax não é uma, mas um conjunto de tecnologias, cada uma delas prosperando por si próprias, e onde o conjunto forma um poderoso meio para o desenvolvimento de aplicações web interativas. Ajax incorpora:

• XHTML (ou HTML) e CSS para a apresentação de informação;

• Document Object Model (DOM) para a apresentação ser dinâmica e interativa;

• XML e XSLT para o intercâmbio de dados e sua manipulação;

• XMLHttpRequest para a recuperação de dados de modo assíncrono; e

• JavaScript unindo todas essas tecnologias.

Uma aplicação Ajax redefine a natureza concebida para a web – requisição-(e espera)-resposta –, introduzindo um mecanismo intermediário entre o usuário e o servidor, conhecido como ‘motor Ajax’. A princípio, ela assemelha-se à introdução de uma nova camada na aplicação, o que a princípio poderia torná-la mais demorada. No entanto, o seu efeito é o contrário, agilizando a interação. A figura 2 ilustra o modelo Ajax.

Ao invés de carregar uma página web no início de cada sessão, o navegador do usuário carrega o motor Ajax, escrito em JavaScript, geralmente armazenado em um frame oculto. Este motor é responsável tanto pela apresentação da interface quanto pela comunicação com o servidor de acordo com as ações do usuário. O motor Ajax permite que a interação do usuário com a aplicação seja assíncrona, independente da comunicação com o servidor. Assim, raramente o usuário terá uma página em branco ou um ícone de ampulheta de processamento aguardando pela resposta do servidor.

Figura 2. Modelo Ajax de aplicações web [Garrett, 2005].

Cada ação do usuário, que normalmente geraria uma requisição HTTP, é transformada em uma chamada JavaScript e sua resposta nem sempre exigirá uma conexão ao servidor, tal como nos casos de uma simples validação de dados, edição de dados na memória ou mesmo em muitos casos de navegação: o motor Ajax torna-se o responsável pela resposta ao usuário, e pode antecipar ações. Se o motor necessita do servidor para responder a uma ação, tal como uma submissão de dados para processamento, ele faz as requisições de modo assíncrono, geralmente utilizando XML, sem que o usuário pare sua interação com a aplicação. A Figura 3 ilustra esse mecanismo assíncrono.

Figura 3. Comparação da Interação síncrona de aplicativos web tradicionais (esquerda) com a interação assíncrona de aplicativos Ajax (direita) [Garrett, 2005].

Por se tratar de um conjunto de tecnologias, não existe um pacote para ser baixado e instalado. Existem várias implementações em Ajax, comerciais ou de código aberto, desde simples bibliotecas estendidas para linguagens específicas como C++ (Wt), PHP (xajax) e Python (Django) até toolkits (Dojo JavaScript Toolkit, Google Web Toolkit, Microsoft Atlas Control Toolkit) e frameworks completos [AjaxPatterns] [Wikipedia].

3. A Biblioteca xajax

Por causa da familiaridade de programação em PHP, já utilizada no sítio público da Biblioteca Digital, optou-se pela implementação xajax [Xajax] pois, além de ser uma biblioteca de código aberto, ela permite criar aplicações Ajax utilizando HTML, CSS, JavaScript e PHP. Trata-se de uma biblioteca híbrida [AjaxPatterns] orientada a objetos, atuando tanto no cliente, através do seu motor xajax, quanto no servidor, através das classes PHP da aplicação. O motor é responsável por gerar funções encapsuladas em JavaScript que chamam funções PHP correspondentes executando-as no servidor de forma assíncrona. Quando ocorre uma chamada, as funções encapsuladas utilizam XMLHttpRequest para se comunicar com o servidor e chamar a função PHP correspondente. Como retorno, uma resposta XML da função PHP é repassada para a aplicação. Dessa forma, a programação é totalmente baseada em eventos, onde uma ação do usuário na aplicação pode resultar na execução de um código PHP no servidor e o seu resultado é exibido na aplicação sem a necessidade de recarregar uma página HTML.

A resposta XML pode conter instruções e dados que são analisados por um processador de mensagens do motor xajax e utilizados para atualizar o conteúdo da aplicação, desde estilos, classes CSS, atributos de elementos HTML, bem como incluir novo código JavaScript para a aplicação. Tanto as requisições quanto as respostas são codificadas em UTF-8 e a biblioteca opera com Firefox, Mozilla, MS Internet Explorer e Safari [Xajax].

4. Descrição da nova implementação

Para que um documento (dissertação ou tese) fique disponível para consultas no sítio público da Biblioteca Digital da USP, várias etapas precisam ser completadas. A figura 4 ilustra esse processo.

Como pode ser acompanhado nessa figura, o processo é dividido entre os três agentes envolvidos: alunos de pós-graduação, seções de pós-graduação e bibliotecas. Após a defesa, o aluno é convidado a disponibilizar sua tese ou dissertação na Biblioteca Digital, mediante a entrega de uma autorização, e é também o responsável por converter os arquivos textos em PDF. Essa autorização é entregue numa Seção de Pós-graduação, a qual, após a homologação da defesa, emitirá a conta a ser usada pelo aluno para que ele faça a submissão de sua tese ou dissertação. Na seqüência, o aluno faz a submissão do documento, integrando-o com os dados de seu documento, obtidos do Sistema Corporativo da Pós-Graduação (Fenix). A Seção de Pós-graduação fica então responsável pela revisão do conteúdo submetido e pela sua aprovação. As bibliotecas, por fim, catalogam o documento no Banco de Dados de Referências Bibliográficas (Dedalus) e os disponibilizam na Biblioteca Digital.

Figura 4. O processo para disponibilizar Teses e Dissertações.

O software original distribuído pela NDLTD e adaptado conforme descrito em [Masiero et al.2001] era composto por cinco módulos, os quais foram refeitos utilizando PHP para aplicação de novas técnicas de desenvolvimento bem como o paradigma de interação propiciado por Ajax, embora mantendo as mesmas funcionalidades anteriores. Além disso, um novo módulo de acompanhamento foi desenvolvido e integrado aos módulos existentes. Assim, a nova versão da BDTD-USP passa a ser constituída pelos seguintes módulos:

• Módulo de contas: permite que as Seções de Pós-graduação criem contas de submissão, enviadas eletronicamente aos alunos a partir dos dados oriundos no Sistema Fenix;

• Módulo de submissão: permite ao aluno realizar a submissão, agora em 6 etapas, utilizando uma foram de iteração baseada em um wizard;

• Módulo de revisão: permite às seções de pós-graduação a revisão do conteúdo submetido pelo aluno, incluindo a verificação e proteção dos arquivos PDF;

• Módulo de catalogação: permite às bibliotecas catalogar no Banco de Dados Dedalus o documento submetido e disponibilizá-lo para consulta na Biblioteca Digital;

• Módulo de administração: permite o acesso a todas as etapas do processo, com a possibilidade de interferência do administrador além de acesso aos outros dados existentes no banco de dados;

• Módulo de acompanhamento: permite ao aluno acompanhar todas as etapas do processo, desde sua submissão inicial até a disponibilização final no sítio da Biblioteca Digital.

A biblioteca xajax é utilizada para:

• autenticação do usuário no respectivo módulo;

• exibição de resultados de consultas ao banco de dados;

• inserção, remoção e atualização de dados no banco de dados;

• exibição de mensagens de avisos ao usuário (alerts);

• carregamento de templates específicos, de acordo com a interação com o usuário.

A biblioteca permite uma maior interatividade com o usuário dentro do sistema, melhorando seu tempo de resposta e com isso otimizando o tempo de trabalho do usuário. Não há mais necessidade de espera por uma página informando o usuário sobre o sucesso ou o fracasso da operação. No caso de fracassos, as mensagens são exibidas diretamente no navegador. Embora o código do sistema seja criado baseado nos eventos que o usuário possa gerar, sua manutenção ficou facilitada. Quando uma ação requisitada pelo usuário não funciona, basta verificar a função PHP associada à biblioteca xajax relativa ao evento gerado.

Empregamos também outras técnicas de desenvolvimento web com objetivo de permitir maior agilidade na manutenção do código do sistema. Um dos problemas do sistema original da NDLTD era a intercalação de códigos de programação PERL com códigos HTML, dificultando a manutenção tanto do código quanto do layout das páginas. Isso foi resolvido utilizando templates da biblioteca Sigma, do framework PEAR [PEAR]. Além disso, utiliza-se também Cascade Style Sheet para separar o design do layout.

Com exceção do módulo de submissão, todos os demais módulos utilizam apenas dois templates: um para entrada no respectivo módulo (login) e um para apresentação de dados. Este último template é dividido em três áreas, como ilustra a Figura 5. Exceto a área de título, que é instanciada em cada módulo, tanto a área de menu quanto a área de dados são preenchidas com templates específicos do módulo em questão, de acordo com o estado da interação com o usuário.

Figura 5. Áreas do template para apresentação de dados. Tanto a área de menus quanto a área de dados são instanciações Ajax, que variam conforme a interação com o usuário.

O módulo de submissão foi totalmente refeito. O módulo original do NDTLD mostrou-se ineficiente na prática, pois alguns alunos não completavam a submissão. Para

resolver este problema, adotou-se a utilização do recuso de wizard, no qual o aluno é guiado por um processo composto por seis passos (em seis diferentes templates). Utilizando esse recurso, o passo seguinte é exibido somente se o passo anterior foi corretamente completado e validado, e quando alguma verificação não é atendida, o wizard informa o problema e orienta o aluno em direção à solução.

5. Dificuldades encontradas

Dada a complexidade de um sistema para gerenciamento de uma biblioteca digital, várias dificuldades surgiram durante o novo desenvolvimento. Algumas delas, cuja solução julgamos ser de maior interesse para profissionais que atuam na área, são descritas a seguir.

5.1. Codificação de caracteres

Existem dois formatos de codificação de caracteres predominante no Brasil: ISO 8859-1 e UTF-8. O formato ISO 8859-1 é o mais difundido e é utilizado tanto no sistema da NDLTD quanto no banco de dados MySQL. A codificação UTF-8 foi criada com o intuito de ser única, evitando a necessidade de existência de dezenas de codificações e adaptações para exibição de texto em diversos idiomas e é o padrão de codificação do XML. Uma vez que o sistema utiliza a implementação xajax, que codifica os dados em UTF-8, e o banco de dados do sistema da Biblioteca Digital está codificado para ISO 8859-1, foi necessário manter no sistema o suporte para ambos os formatos. Embora a biblioteca xajax possua um sistema de codificação automática ela não funciona, nem nas versões mais recentes da biblioteca e já foi notificada aos mantenedores do projeto.

Para resolver esse problema, foi introduzido um codificador do próprio PHP no código do servidor para que as informações recebidas em UTF-8 fossem decodificadas em ISO 8859-1 antes do armazenamento no banco de dados.

5.2. Depuração do código

Quando tratamos de transferência de dados no modo assíncrono, fica difícil definir um modelo para a depuração do código e ainda mais difícil detectar erros. A ferramenta de depuração oferecida pela biblioteca xajax ainda é muito nova e não oferece todos os recursos que um programador necessita para correção de forma mais eficiente.

Tratando-se de um desenvolvimento baseado em eventos, o erro fica localizado na função PHP que responde a esse evento. Assim, métodos mais elementares foram utilizados para a depuração, como a introdução de breakpoints para visualização dos dados trafegados. Para o navegador, foram utilizados mensagens de avisos (alerts) em JavaScript para visualização dos dados antes de serem enviados ao servidor e, no servidor, códigos em PHP foram utilizados para forçar a exibição dos dados antes de serem armazenados no banco de dados.

5.3. Portabilidade entre navegadores

O problema maior ocorreu não na implementação JavaScript do xajax, uma vez que seu código é portável para a maioria dos navegadores, mas no design CSS e da formatação

HTML, devido às diferentes formas de renderizações utilizadas pelos diversos navegadores.

Dessa forma, optou-se pela utilização de elementos HTML e CSS que mantivessem uma aparência semelhante no maior número de navegadores. [Koch, 2006] faz uma análise da compatibilidade dos elementos CSS para diversos navegadores existentes.

6. Conclusão

Seguindo o paradigma tradicional de interação na web, o navegador usado pelo usuário apenas formata os dados recebidos e organiza as ações do usuário para repassá-las aos servidores remotos, os quais analisam, validam e buscam em suas bases de dados os dados solicitados para compor as próximas páginas que são enviadas, e assim preparam o próximo ciclo da interação. Nesse paradigma, muito tempo é perdido com o envio de páginas com dados já disponíveis nos navegadores e com a comunicação com os servidores (muitas vezes operando com grande carga de trabalho) apenas para validações ou pequenas ações que poderiam facilmente ser executadas nos clientes. O conjunto de tecnologias denominadas Ajax inclui recursos para o desenvolvimento de aplicativos que embutem em suas páginas códigos para serem executados nos navegadores melhorando a interatividade das aplicações web.

Neste trabalho mostramos como essas tecnologias estão sendo utilizadas na Biblioteca Digital de Teses e Dissertações da USP [BDTD-USP], e mais especificamente em seus módulos de geração de conteúdo digital, para agilizar as tarefas que tem de ser executadas por alunos, funcionários de seções de Pós-graduação e de bibliotecas na disponibilização das teses e dissertações na BDTD-USP. Essas tarefas são, em grande parte, executadas por usuários que não têm familiaridade com o processo de geração de conteúdo digital (alunos que recém finalizaram seus mestrados ou doutorados em todas as áreas de conhecimento humano). Assim, ele precisa de um ambiente que propicie uma realimentação de que ele está no caminho certo (e caso contrário, que o guie para conseguir executar a operação desejada) - ampulhetas e telas em branco freqüentemente o fazem abandonar a empreitada - e que seja rápido.

As tecnologias Ajax têm contribuído tanto para facilitar o desenvolvimento de aplicativos que atendem a essa necessidade, bem como para facilitar o desenvolvimento e manutenção do próprio código da biblioteca e sua integração com os demais sistemas corporativos da Universidade, pela maior facilidade de padronização, integração e facilidades de gerenciamento que propicia. Um outro efeito interessante também é a redução no tráfego da rede e a carga de trabalho dos servidores, pois as máquinas clientes passam a executar boa parte do código anteriormente centralizado no servidor. Com isso, o número de documentos transferido pode aumentar, pois tanto as redes quanto os servidores estão mais descarregados, permitindo assim que a biblioteca continue crescendo. Com a recente resolução da CAPES incentivando as Instituições de Ensino Superior a disponibilizar digitalmente as teses e dissertações defendidas nas instituições, espera-se significativo aumento dessa carga. A nova versão da BDTD-USP está pronta para atender a essa demanda, e sendo completamente construída em código aberto e seguindo normas de padronização internacionais na área, está disponível para qualquer instituição nacional que esteja interessada.

Referências

AjaxPatterns. The publicly editable repository of all things Ajax. http://ajaxpatterns.org. Acesso em: 25 jul. 2006.

BDTD-USP. Biblioteca Digital de Teses e Dissertações da Universidade de São Paulo. http://www.teses.usp.br. Acesso em: 04 ago. 2006.

Dedalus. Banco de Dados de Referência Bibliográfica da Universidade de São Paulo. http://dedalus.usp.br:4500/ALEPH/por/USP/USP/DEDALUS. Acesso em: 04 ago. 2006.

Fox, E. A.; Marchionini, G. (2001) “Digital libraries”. Communication of the ACM, , May 2001, v. 44, n. 1, p. 88-89.

Garret, J. J. (2005) “Ajax: A New Approach to Web Applications”, http://www.adaptivepath.com/publications/essays/archives/000385.php, Feb. 2005. Acesso em: 25 jul. 2006.

Koch, P. P. (2006). QuirksMode: http://www.quirksmode.org/. Acesso em: 25 jul. 2006.

Masiero, P. C. et al. (2001) “A Biblioteca Digital de Teses e Dissertações da Universidade de São Paulo”, Ci. Inf., Set./Dez. 2001, v. 30, n. 3, p. 34-41, http://www.scielo.br/scielo.php?script=sci_arttext&pid=S0100-19652001000300005&lng=en&nrm=iso. Acesso em: 25 jul. 2006.

NDLTD. Networked Digital Library of Theses and Dissertation: http://www.ndltd.org. Acesso em: 04 ago. 2006.

O´Reilly, T. (2005) “What is the Web 2.0: design patterns and business models for the next generation of software”, http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html, Sep. 2005. Acesso em: 25 jul. 2006.

Pear. PHP Extension and Application Repository. http://pear.php.net. Acesso em: 25 jul. 2006.

PHP. Hypertext Preprocessor. http://www.php.net. Acesso em: 25 jul. 2006.

Wikipedia. http://www.wikipedia.org. Acesso em: 25 jul. 2006.

Xajax. xajax PHP Class Library. http://www.xajaxproject.org. Acesso em: 25 jul. 2006.