Relatório de Estágio MYBOOKSPACE APLICAÇÃO WEB CHAVE-NA-MÃO PARA AUTORES MESTRADO EM ENGENHARIA INFORMÁTICA - PDF
Relatório de Estágio MYBOOKSPACE APLICAÇÃO WEB CHAVE-NA-MÃO PARA AUTORES MESTRADO EM ENGENHARIA INFORMÁTICA
Download "Relatório de Estágio MYBOOKSPACE APLICAÇÃO WEB CHAVE-NA-MÃO PARA AUTORES MESTRADO EM ENGENHARIA INFORMÁTICA"
Mikaela Estrada Miranda
1 Relatório de Estágio MESTRADO EM ENGENHARIA INFORMÁTICA MYBOOKSPACE APLICAÇÃO WEB CHAVE-NA-MÃO PARA AUTORES Sara Luísa Oliveira Correia Brás Orientadores: Eng. José Campos, Empresa Tangível Doutor António José Nunes Mendes, DEI/FCTUC 24 de Janeiro de 2012
2 Resumo Para os autores, é extremamente difícil divulgar os seus livros e manter contacto com os leitores. Para colmatar esta lacuna, a maioria utiliza blogs genéricos para a divulgação dos seus trabalhos e recepção de testemunhos por parte dos leitores. O presente estágio tem como objectivo disponibilizar aos autores uma plataforma desenhada com vista a divulgar os seus trabalhos e permitir manter contacto com os seus leitores. Esta plataforma permitirá também consultar os detalhes dos autores e disponibilizar conteúdos suplementares aos trabalhos (por exemplo, amostras e exercícios). Palavras-Chave 1. Plataforma Web 2. Livro 3. Autor 4. Comentários 5. Fórum 6. Chat 7. Notícias 8. Glossário 9. CodeIgniter i
3 Conteúdo 1. Introdução Âmbito do Estágio Motivação Objectivos Primeiro Semestre Segundo Semestre Visão Nomenclatura Estrutura do Relatório Estado da Arte Aplicações Similares DivulgaLivros Clube de Autores Random House Library Thing Good Reads Shelfari Comparação entre aplicações Tecnologias Linguagem Frameworks Yii Zend Frameword CodeIgniter Kohana Symfony Comparação de Frameworks Framework escolhida Plugins chat de conversação Chat como Gmail/Facebook Chat com PHP MySQL Chat AJAX Chat Ajax Khan Ajax IM Plugin jquery UI Chatbox Plugin escolhido Requisitos Protótipo Fluxo de interacção ii
4 4.2. Mockups Arquitectura Modelo de Dados Visão do Utilizador Implementação Estrutura do Código Base de Dados HTML, CSS e JavaScript Procura com Sugestões (autocomplete) Erros e Validações Gestão de Imagens Planeamento Primeiro Semestre Segundo Semestre A. Requisitos A.1. Requisitos Funcionais A.1.1. Interacção com o leitor A.1.2. Interacção com o autor A.1.3. Interacção com o administrador iii
5 Acrónimos Acrónimo AGPL AJAX APC BSD CRUD i18n IM jquery UI GPL l10n MIT MVC ORM PHP SQL URL YAML Yii ZF Significado Affero General Public License Asynchronous Javascript and XML Alternative PHP Cache Berkeley Software Distribution Create, Read, Update and Delete Internationalization Instant Messenger jquery User Interface General Public License Localization Massachusetts Institute of Technology Model View Controller Object-Relational Mapping PHP: Hypertext Preprocessor Structured Query Language Uniform Resource Locator YAML Ain't Markup Language Yes It Is Zend Framework iv
6 Índice de Figuras 1.1 Mockup da página inicial do My Book Space Mockup da página de detalhes de um autor no My Book Space Mockup da página de detalhes de um livro no My Book Space Página inicial do website Divulga Livros Exemplo de um autor e as suas obras no Divulga Livros Página inicial do website Clube de Autores Exemplo Exemplo do autor Maicon Jackson da Silva e as suas obras no DivulgaLivros Página inicial do website Random House Exemplo do autor John Elder Robison em Random House Página inicial do website Library Thing Exemplo de um livro em Library Thing Página inicial do website Good Reads Exemplo de autor em Good Reads Página inicial do website Shelfari Exemplo de um livro em Shelfari Chat como o gmail/facebook Chat com PHP MySQL Chat AJAX Chat Ajax Khan Demo Ajax IM Ajax IM Plugin jquery UI Chatbox Os três tipos de autores da aplicação Diagrama de arquitectura da aplicação Página Inicial Listagem de Livros Listagem de Autores Detalhes do Livro Detalhes do Autor Registo Autenticação com Sucesso Edição da Foto do Autor Edição do Perfil do Autor Pesquisa Estrutura do Código Diagrama de Gantt com as tarefas do primeiro semestre Diagrama de Gantt com as tarefas do segundo semestre v
7 Índice de Tabelas 2.1 Comparação entre as 6 aplicações similires e o estágio Comparação entre as 5 frameworks consideradas vi
8 1. Introdução 1.1. Âmbito do Estágio O presente estágio está a ser desenvolvido no âmbito da disciplina de Dissertação / Estágio inserida no Mestrado em Engenharia Informática do Departamento de Engenharia Informática da Faculdade de Ciências e Tecnologia da Universidade de Coimbra. Este projecto teve início a 01 de Setembro de 2011 e terminará a 29 de Junho de O estágio decorre nas instalações da empresa de usabilidade e design de interacção Tangível, sala 1.14 do Instituto Pedro Nunes, em Coimbra, com orientação próxima do Eng. José Campos, por parte da empresa, e do Doutor António José Mendes pela Universidade. A equipa de trabalho foi constituída apenas pela estagiária, não menosprezando o importante feedback recebido não só pelos orientadores, mas também pela restante equipa da Tangível Motivação É comum encontrar, na Internet, websites mais ou menos amadores, de autores que pretendem divulgar o seu trabalho e congregar uma comunidade de pessoas interessadas no tema do seu livro. O objectivo último destes autores é um misto de paixão pela divulgação do tema e um desejo de gerar e consolidar a sua reputação pessoal. Contudo, é notória a inexistência de aplicações web desenhadas especificamente para este fim. O número de autores é gigantesco a nível mundial. Destes, um grupo muito significativo está atento aos movimentos sociais na Internet e é adepto da utilização da web como canal de divulgação e interacção com a comunidade. A Internet é, cada vez mais, o meio de excelência para gerar correntes sociais e reputação. 1
9 1.3. Objectivos O objectivo é desenvolver uma aplicação web orientada a autores. Esta aplicação visa oferecer aos autores um serviço web que, depois do livro ter sido editado e distribuído (via electrónica ou tradicional) pelas editoras, mantenha o contacto vivo com a comunidade e com os leitores/seguidores Primeiro Semestre De seguida serão listados os objectivos que no presente estágio foram cumpridos no primeiro semestre: Estudo de aplicações concorrentes e tecnologias a utilizar para o desenvolvimento do projecto (Estado da Arte secção 2); Fazer uma análise detalhada de requisitos funcionais e não funcionais da aplicação (Requisitos secção 3); Definir a arquitectura da aplicação (Arquitectura secção 5); Efectuar o planeamento detalhado para o primeiro e o segundo semestre (Planeamento secção 6); Implementação iterativa das funcionalidades base da aplicação (Implementação secção 7); Elaboração do relatório intermédio de estágio Segundo Semestre Com base na análise efectuada no primeiro semestre, deverão ser cumpridos os seguintes objectivos no segundo semestre: Implementação iterativa e incremental da aplicação; Testes das funcionalidades implementadas, correcções e refinamentos; Testes de usabilidade, correcções e refinamentos; Elaboração do relatório académico de estágio. 2
10 1.4. Visão Figura 1.1 Mockup da página inicial do My Book Space O My Book Space consiste numa aplicação web onde os autores podem construir o seu espaço e manter contacto com a sua comunidade leitora. A página inicial terá uma listagem dos livros e dos autores mais populares, conforme é possível visualizar na figura 1.1. Figura 1.2 Mockup da página de detalhes de um autor no My Book Space 3
11 Como é possível visualizar na figura 1.2, cada autor tem uma página com os seus detalhes, contactos, mini-biografia e livros publicados. A qualquer altura é possível o autor autenticar-se com a finalidade de alterar as suas definições ou iniciar uma conversa com algum dos leitores que estejam a visitar alguma das suas páginas. Figura 1.3 Mockup da página de detalhes de um livro no My Book Space Cada livro tem também uma página com detalhes, descrição e outras propriedades relevantes como o índice e o glossário. Para além destas três figuras, os restantes mockups desenhados podem ser encontrados no Anexo C Nomenclatura No decorrer deste documento serão usados termos que devem ser descritos à partida. De seguida apresentam-se os principais: Frameworks: Trata-se de um conjunto de classes que pretende disponibilizar uma funcionalidade genérica comum a vários projectos de software. [1] 1 O anexo também poderá ser encontrado em 4
12 MVC: Model-View-Controller é um padrão de arquitectura de software que permite separar o modelo de dados da lógica da aplicação e da apresentação, permitindo o desenvolvimento, teste e manutenção isolado de ambos. [2] ORM: Object-Relational Mapping trata-se de uma framework ou conjunto de classes que permite utilizar uma interface de programação que tratará da persistência dos dados sem ser necessário a utilização directa de comandos SQL.[3] i18n & l10n: Internacionalização (i18n) e localização (l10n) tratam-se de processos de desenvolvimento e/ou adaptação de um produto para uma língua e cultura de um país. A internacionalização adapta as mensagens do sistema à língua e à cultura locais. Isto permite respeitar as particularidades de cada língua e cultura de cada país. [4] Scaffolding: É uma técnica utilizada por algumas frameworks MVC, em que o programador especifica como a base de dados da aplicação pode ser usada. O compilador usa essa especificação para gerar código que a aplicação pode usar para criar, ler, actualizar e eliminar entradas (CRUD) da base de dados. [5] 1.6. Estrutura do Relatório A primeira secção, Introdução, indica os objectivos e o âmbito do trabalho a desenvolver. A secção seguinte, Estado da Arte, diz respeito à analise de aplicações comparáveis a este projecto e tecnologias úteis para o seu desenvolvimento e explica as razões das escolhas já efectuadas. A terceira, Requisitos, retrata todos os requisitos necessários para o sucesso da aplicação, separando-os por tipos de utilizadores. Protótipo, é a secção que se segue, fala sobre o fluxo de interacção da aplicação e dos seus protótipos iniciais. A quinta secção, Arquitectura, explica a arquitectura da aplicação e todas as partes relativas à mesma. 5
13 Na sexta secção, Visão do Utilizador, é apresentado um pequeno manual de utilização das funcionalidades já implementadas. A sétima, Implementação, descreve os aspectos considerados mais importantes de implementação das funcionalidades já implementadas. A oitava, Planeamento, mostra o planeamento seguido no primeiro semestre e o esperado para o segundo. Com excepção do Anexo A, que se encontra no final deste documento, todos os anexos restantes, podem ser encontrados, não só na plataforma de estágios, mas também na Web, em 6
14 2. Estado da Arte Este capitulo irá focar-se em dois temas distintos. Primeiro serão analisadas as aplicações já existentes no mercado que se podem considerar similares à aplicação a desenvolver, ou seja que tenham algumas das funcionalidades a implementar. Numa segunda fase serão discutidas algumas das principais tecnologias disponíveis para a implementação do estágio Aplicações Similares Esta fase teve como principal objectivo encontrar aplicações já existentes que tentem resolver o mesmo tipo de problemas. Apesar da grande maioria de soluções encontradas para a divulgação de livros passarem por blogs improvisados, foram encontradas algumas aplicações que se poderão considerar similares a este estágio DivulgaLivros Figura 2.1 Página inicial do website Divulga Livros [6] 7
15 O DivulgaLivros trata-se de um website brasileiro que permite aos autores divulgarem as suas obras. A única língua suportada pelo site é o português do Brasil. A figura 2.1 mostra a página inicial onde são mostrados alguns livros, uma lista dos últimos autores registados e uma lista de notícias de outros blogs. A aplicação permite visualizar a lista de todos os autores registados e as suas páginas no site. Permite também fazer pesquisas, utilizando a funcionalidade avançada de pesquisa disponibilizada pelo Google que restringe os resultados a um determinado domínio web. Figura 2.2 Exemplo do autor Maicon Jackson da Silva e as suas obras no DivulgaLivros [6] Na figura 2.2 podemos visualizar a página de um leitor no Divulga Livros. A aplicação permite ao autor publicar uma mini-biografia até caracteres e uma única foto que será redimensionada para as dimensões recomendadas pelo site. Para além da mini-biografia com foto, a restante informação possível de partilhar pelo autor está limitada à publicação de ficheiros e de referências para outras páginas web. A aplicação apenas pode ser visualizada em português do Brasil. Não existe uma secção de comentários, apenas é permitido ao autor publicar um endereço electrónico para onde os leitores poderão, externamente ao site, enviar os seus 8
16 comentários. Esta página de promoção do autor tem um custo mensal para o autor de R$ 10,00 (aproximadamente 4,10 ). Existe ainda um serviço adicional, com o custo de R$ 200,00 (aproximadamente 81,85 ), que permite que divulgar um livro na página inicial deste site durante dois meses. Depois desse tempo este serviço ficará inactivo Clube de Autores Figura 2.3 Página inicial do website Clube de Autores [7] O Clube de Autores trata-se de um site brasileiro de venda online de livros, no formato de Ebook e impresso. O site permite visualizar todos os autores registados, todos os livros e ordenar essas listagens escolhendo o critério de ordenamento. Permite também visualizar os livros por temas e pesquisar por um livro. Para o seu livro estar, neste website, disponível para venda, o autor deve enviar um ficheiro.pdf com o livro. No caso de os utilizadores pretenderem comprar a versão impressa, o site trata da impressão. O lucro será depositado na conta do autor assim que o resultado das vendas dos seus livros atinja um valor de R$ 100,00 (aproximadamente 40,53 ). 9
17 O site permite ainda uma pequena descrição do livro, a visualização das suas primeiras páginas, uma pequena biografia do autor com uma pequena foto (180 x 240) e referência para outras páginas. Existem também alguns serviços extra que podem ser adquiridos adicionalmente, como revisão, capa e diagramação, com um custo adicional variando com o número de páginas e de caracteres do livro. Na figura 2.4 é possível visualizar a página do autor Mário Wilson. Figura 2.4 Exemplo da página de um autor no Clube de Autores [7] Random House Trata-se de um website americano que apenas permite o registo a leitor residentes nos Estados Unidos. De forma a verificar a veracidade da residência é requerido o código ZIP em conjunto com a respectiva localidade. Também o registo dos autores não pode ser feito através do site, apenas através da editora. A aplicação permite procurar por autores ou por livros. Cada autor tem uma breve descrição, uma foto, link para a sua página oficial e a sua lista de livros. O livro tem também uma pequena descrição e a informação de onde é possível adquiri-lo. Na figura 2.5 é possível visualizar a página inicial do site Random House e na figura 2.6 um exemplo de um autor na página. 10
18 Figura 2.5 Página inicial do website Random House [8] Figura 2.6 Exemplo do autor John Elder Robison em Random House [8] 11
19 Library Thing Figura 2.7 Página inicial do website Library Thing [9] Trata-se de uma aplicação multilingue de recomendações de livros. O registo no site é gratuito e possibilita a construção de uma biblioteca virtual. Essa biblioteca é criada catalogando livros a partir da Amazon e de bibliotecas online. De forma a organizar a sua biblioteca online, os livros poderão ser catalogados em diversas categorias, chamadas prateleira. O utilizador pode definir novas categorias para além das já existentes como favoritos, adquiridos, lidos e emprestados. Figura 2.8 Exemplo de um livro em Library Thing [9] 12
20 Um livro tem uma pequena descrição e o seu local de compra e o autor tem uma pequena biografia e fotografias. É possível adicionar comentários (reviews) dos livros que ficarão visível para todos os utilizadores. Existe também um fórum para debates de ideias. A partir de duzentos livros, esta aplicação é paga, com o valor de $10 por ano (aproximadamente 7,40 ). Os autores não são o público alvo desta aplicação. Esta está mais focada na interacção dos leitores. Pode ser considerada como uma rede social centrada nos livros. No entanto, como muitas das suas funcionalidades se podem considerar semelhantes às deste estágio, considerou-se importante também estudar esta aplicação Good Reads Figura 2.9 Página inicial do website Good Reads [10] Trata-se de um website de recomendações de livros permitindo criar grupos de amigos com o objectivo de trocarem opiniões sobre livros. O livro tem uma pequena descrição da obra e locais onde a mesma pode ser adquirida. O autor tem uma pequena biografia acompanhada de uma fotografia e alguns contactos e links para outros websites relacionados. A aplicação permite publicar comentários a livros, funcionando como reviews e ainda criar quizzes com quatro possíveis respostas. 13
21 Nesta aplicação, que poderá também ser considerada como rede social centrada em livro, os autores não são o público alvo. No entanto, como muitas das suas funções se podem considerar semelhantes às deste estágio, considerou-se importante estudar também esta aplicação. Figura 2.10 Exemplo de autor em Good Reads [10] Shelfari Figura 2.11 Página inicial do website Shelfari [11] 14
22 Trata-se de um website de promoção de livros promovido pela Amazon. Tal como o Library Thing e o Good Reads, trata-se de uma rede social centrada em livros. Permite procurar livros e adiciona-los à sua estante identificando-os como lido, a ler no momento ou com intenções de ler. Possibilita também identificar o livro como favorito, desejado ou adquirido. A aplicação permite atribuir uma pontuação, categorias e comentários ao livro adicionado à estante, comentar a discussão sobre o livro e visualizar as características das versões anteriores. Figura 2.12 Exemplo de um livro em Shelfari [11] Na figura 2.12 podemos ver um exemplo de um livro no site. O livro apresenta uma descrição, um sumário, as personagens, a errata e onde é possível comprar. Os utilizadores da aplicação podem comentar os livros, e esses comentários (reviews) ficarão visíveis a todos os utilizadores. Existe também uma secção de discussões onde os utilizadores poderão deixar os seus comentários. São mostradas também as capas e informações referentes a edições anteriores do livro. É apresentada também uma pequena biografia do autor com uma fotografia e links para outras páginas. 15
23 Comparação entre aplicações Divulga Livros Clube de Autores Random House Library Thing Good Reads Selfari My Book Space Conteúdos da Obra Material de apoio (.doc,.pdf, referências para outras páginas) Descrição, primeiras páginas e comprar pelo site Descrição, onde comprar Descrição, onde comprar Descrição e onde comprar Descrição, sumário, personagens, errata e onde comprar Descrição, índice, remissões, download de materiais, amostras, errata e onde comprar Autor Comentários Glossário Fórum Chat Blog Exercícios Mini biografia com foto do autor e contactos Mini biografia com foto do autor, contactos e links para outras páginas Breve descrição com foto do autor e link para a página oficial do autor Mini biografia com foto do autor e link para a página oficial do autor Mini biografia com foto do autor, contactos e links para outras páginas Mini biografia com foto do autor e link para outras páginas Mini biografia com foto do autor, contactos e links para outras páginas Não, só disponibiliza o Subscrição por módulos Multilingue Não Não Não Não Não Sim Não Sim Não Não Não Não Não Sim Não Não, só através do departamen to de publicidade da editora Sim Não Não Não Não Não Não Não Não Sim, comum a todo o site Não Não Não Não Sim Preço Base: ~4,10 por mês Livro na primeira página: ~81,85 para 2meses Base: Gratuito Serviços extra: de acordo com o número de páginas e caracteres Apenas através da editora Gratuito até 200livros. + de 200 livros 7,40 por ano. Sim Não Não Não Não Sim Não Não Gratuito Sim Sim Sim Não Não Não Não Não Gratuito Sim Sim Sim Sim Sim Sim Sim Sim Tabela 2.1 Comparação entre as 6 aplicações similires e o estágio Base: Gratuito 5 por mês por funcionalidade extra 2.2. Tecnologias Nesta secção serão analisadas as tecnologias disponíveis para a implementação do My Book Space e as razões que levaram à selecção das tecnologias escolhidas Linguagem Apesar da escolha da linguagem ser deixada ao critério da estagiária, esta é idealmente escolhida tendo em conta as tecnologias actualmente utilizadas na empresa tendo em vista a evolução e suporte do produto. Assim, visto tratar-se de uma aplicação para a Web, e considerando as preferências da estagiária e da empresa, optou-se pelo uso de PHP [12]. A escolha recaiu sobre esta opção pela sua flexibilidade e facilidade 16
24 de uso em relação à construção de aplicações Web e devido à vasta opção de frameworks disponíveis Frameworks No que diz respeito ao uso de frameworks, várias opções foram analisadas e testadas Yii Yii[13] é uma framework open-source, gratuita, escrita em PHP5, para o desenvolvimento de aplicações Web. Adopta a arquitectura MVC, suporta validação de formulários e integração com jquery[14]. Yii também suporta tradução da mensagem, formatação de data e hora, formatação de números e localização da interface. [20] Trata-se de uma framework de alta performance, com melhores resultados de performance relativamente a outras frameworks mais usadas, como o Symfony, Zend e CodeIgniter. Esta maior rapidez da Yii deve-se ao facto desta usar a técnica lazy loading extensivamente. Por exemplo, ela não inclui um ficheiro de classe até a classe ser usada pela primeira vez, e não cria um objecto até que este seja acedido pela primeira vez. Outras frameworks têm pior desempenho, pois permitem uma funcionalidade (por exemplo, conexão à base de dados ou sessão do utilizador) não importando se é ou não utilizada durante uma solicitação. [21] Zend Frameword Zend Framework[23] trata-se de uma framework open source, implementada em PHP5 sob a licença New BSD License[24]. É uma das frameworks em PHP mais utilizada, principalmente por grandes empresas como a IBM, Google e Microsoft. [25] Adopta a arquitectura MVC, suporta qualquer biblioteca AJAX, validação de formulários e i18n e l10n. Traz inúmeras vantagens para grandes projectos, devido à sua vasta e numerosa colecção de bibliotecas permitindo o uso de mais funcionalidades do que qualquer outra framework em PHP, e sem a necessidade de aprender outra linguagem como YAML. No entanto, para projectos mais pequenos, torna-se bastante grande e complexa, 17
25 obrigando a escrever demasiado código para uma coisa simples.[26] A documentação é tão completa quanto complexa, tornando-se numa das maiores dificuldades da framework. Relativamente a outras frameworks, como o CodeIgniter, a sua instalação torna-se algo mais complexa e a sua curva de aprendizagem bastante mais lenta, não sendo a framework mais aconselhada como primeira framework para programadores habituados ao PHP puro CodeIgniter CodeIgniter[27] trata-se de uma framework open source de desenvolvimento de aplicações Web dinâmicas em PHP. Esta framework foi desenvolvida sob o padrão de arquitectura de software MVC. Suporta qualquer biblioteca de AJAX, validação de formulários e i18n e l10n. Trata-se de uma framework bastante leve e simples, com uma boa performance e documentação clara e completa. A comunidade é bastante grande e existem vários tópicos de ajuda em vários fóruns espalhados pela Web. Existem também vários exemplos, tutoriais e vídeos que tornam bastante simples o começo com CodeIgniter, tornando a curva de aprendizagem bastante elevada. Também a sua pré-configuração é bastante simples, sem necessidade de comandos na consola, sendo, praticamente, transferir e começar a usar Kohana Kohana[37] é uma framework open source foi criado a partir do CodeIgniter, reescrito para a versão 5 do PHP, a fim de tirar partido das melhorias dessa versão. Surgiu da necessidade de correcção de alguns bugs do CodeIgniter (versão 1.5.x, actualmente encontra-se na versão 2.0.3) e inserção de novas funcionalidades solicitadas pela comunidade. [38] Adopta o padrão MVC, suporta qualquer biblioteca AJAX, suporta validação de formulários e suporta i18n e l10n. Trata-se de uma framework menos conhecida, quando comparado com CodeIgniter, e com uma comunidade bastante mais pequena, com documentação mais confusa, e um número muito menor de exemplos disponíveis na Web. 18
26 Symfony Symfony[41] trata-se de uma framework gratuita, sob a licença MIT [44], escrita em PHP. Segue o modelo MVC, suporta AJAX, validação de formulários e i18n e l10n. É uma framework bastante pesada, devido às suas inúmeras funcionalidades, e ao contrário da framework Zend não permite que apenas sejam incluídas as funcionalidades pretendidas, tornando-a mais lenta que as outras frameworks. Voltada para programadores avançados cujo principal objectivo é criar aplicação de nível empresarial. Comparável ao popular Ruby on Rails, mas com a vantagem de não necessitar de aprender uma nova linguagem. [43] Relativamente ao CodeIgniter, a préconfiguração desta framework revela-se bastante mais complexa Comparação de Frameworks Na tabela 2.2 é possível visualizar as características que se consideraram importantes para a escolha da framework a utilizar, para além da performance, facilidade de pré-configuração, curva de aprendizagem, documentação e comunidade. Yii PHP 5 Zend PHP 5 Linguagem Ajax MVC jquery, Yii vem com um conjunto de mini-aplicações AJAX activas Qualquer biblioteca Sim Sim i18n e l10n Sim Sim ORM Active Record Table and Row data gateway Third party Validação de formulários Sim Sim Scaffolding CodeIgniter PHP 5 Qualquer biblioteca Sim Sim Sim Sim Kohana PHP 5 Qualquer biblioteca Sim Sim Sim Sim Não Symfony PHP 5 Prototype, Propel, script.aculo.us, Sim Sim Doctrine AJAX com UJS e (YAML) plugins PJS Sim Sim Tabela 2.2 Comparação entre as 5 frameworks consideradas [48] Sim Não 19
27 Framework escolhida De entre todas as frameworks consideradas a escolha recaiu sobre CodeIgniter, não só devido à sua simplicidade de instalação e de aprendizagem, mas também devido à clareza na sua documentação e na enorme comunidade que facilita o encontro de tutoriais, vídeos de apoio e soluções para os diversos problemas que surgem durante a implementação. Por se tratar de uma framework leve, com boa performance e grande apoio quer pela documentação quer pela comunidade, é a framework mais recomendada para programadores habituados ao PHP puro Plugins chat de conversação Com vista a implementar a tertúlia onde o autor poderá conversar com os seus leitores, foram analisados alguns plugins de chat baseados em jquery Chat como Gmail/Facebook Figura 2.13 Chat como o gmail/facebook [50] Na figura 2.13 é possível visualizar o chat em questão. Ao inicial uma conversa com outro utilizador disponível, aparecerá uma área no canto inferior direito do site, onde se passará toda a conversa com o outro utilizador. A janela mudará de laranja para azul caso o outro utilizador tenha enviado uma mensagem que ainda não tenha sido lida. É também possível minimizar ou fechar essa janela de conversação. Se a conversação ficar inactiva por algum tempo, aparecerá no chat a data e hora da última mensagem. 20
28 Trata-se de um chat implementado usando jquery e CodeIgniter, no entanto este apenas pode ser usado sob a licença GPL [52], gratuita para fins não comerciais Chat com PHP MySQL Figura 2.14 Chat com PHP MySQL [53] Trata-se de um chat de conversação embutido na página. Ao autenticar-se na página permite escolher uma das três cores (preto, azul e vermelho) para o seu nome. O sistema permite enviar mensagens privadas, ou para todos os utilizadores online, disponibilizando um conjunto de smiles que poderão ser usados durante a conversação. O utilizador será avisado sempre que alguém entrar ou sair do chat. No entanto, como não utiliza AJAX, está constantemente a ir à base dados buscar as informações a apresentar e a recarregar a página, notando-se por vezes algum delay e alguma incoerência nos dados mostrados. Este chat parece apenas suportar o browser Google Chrome [54], visto que tanto para no Firefox [55] como para no Internet Explorer [56] os smiles não aparecem correctamente e é claro um flicker constante no Internet Explorer, devido à página estar constantemente a ser recarregada. 21
29 Chat AJAX Figura 2.15 Chat AJAX [57] Trata-se de um chat, open source, que permite enviar mensagens para todos os utilizadores podendo estas incluir smiles. Os utilizadores são alertados sempre que um utilizador entra ou sai do chat. Permite também enviar acções, citações, imagens, URLs e mudar a cor do texto, pôr sublinhado, negrito e itálico. Permite também um grande número de configurações, como ocultar a lista de utilizadores, alterar a linguagem, tirar o som, alterar os sons consoante o tipo de mensagem recebida, entre outras, tornando a aplicação pouco intuitiva e difícil de usar. Esta aplicação está sob a licença AGPL. [58] 22
30 Chat Ajax Khan Figura 2.16 Chat Ajax Khan [60] Trata-se de um chat com o mesmo estilo do facebook, tal como é possível visualizar na figura Este chat permite listar quais os utilizadores online e abrir múltiplas janelas de conversação com outros utilizadores. A licença em que o plugin é disponibilizado não é clara, apenas indicando não ser gratuito para fins não comerciais Ajax IM Trata-se de uma framework open source extensível quer em funcionalidades quer na sua aparência. Tem suporte para múltiplas línguas e permite manter o estado à medida que se navega pelo site web. Pode ser instalada quer usando um qualquer servidor web com suporte de PHP (tal como Apache) bem como em modo standalone fazendo uso do node.js. 23
31 Figura 2.17 Demo Ajax IM [61] Figura Fira Ajax Demo IM Ajax [62] IM [61] Nas figuras 2.17 e 2.18 é possível visualizar o site em questão e a sua versatilidade. O Ajax IM é disponibilizado sob a licença MIT, podendo ser usado gratuitamente para fins comerciais. 24
32 Plugin jquery UI Chatbox Figura 2.19 Plugin jquery UI Chatbox[63] Na figura 2.19 é possível visualizar o chat em questão. Ao iniciar uma conversa com outro utilizador disponível, aparecerá uma área no canto inferior direito do site, onde se passará toda a conversa. A janela mostra um pequeno efeito, saltando, caso outro utilizador tenha enviado uma mensagem que ainda não tenha sido vista. É também possível minimizar ou fechar essa janela de conversação. Tal como os outros componente do jquery UI [64], este plugin é licenciado quer sob a licença MIT [47] como pela GPL v2 [66] Plugin escolhido A escolha do plugin de chat foi condicionada pela licença e teve em principal atenção a conversação individual e a versatilidade do plugin. Assim, a escolha recai sobre Ajax IM. 25
33 3. Requisitos Nesta secção vão ser apresentados, de forma resumida, os vários requisitos da aplicação. Estes foram elaborados pela estagiária tendo por base a descrição e discussão inicial com o orientador da Tangível. Notar que a versão completa do levantamento de requisitos pode ser consultada no Anexo A. Uma vez que são notórios três tipos de utilizadores, os requisitos serão separados por interacção com o leitor, autor e administrador. No entanto, o administrador poderá também assumir a função de autor ou leitor, assim como o autor pode assumir a função de apenas leitor. Assim, os requisitos definidos para o leitor são também válidos para o autor e para o administrador assim como os definidos para o autor serão também válidos para o administrador. Administrador Autor Leitor Figura 3.1 Os três tipos de autores da aplicação A aplicação a desenvolver centra-se nos autores e nas suas publicações. Qualquer leitor poderá visualizar a lista de autores e de livros existentes no sistema e aceder aos seus detalhes. Para cada autor, será possível visualizar o perfil com os seus dados pessoais, como o e website, mini-biografia e livros por ele adicionados. Será também possível consultar os dados de um livro (como autor e editora), aceder a detalhes do seu conteúdo (como índice e glossário) e obter uma lista de locais onde é possível comprar o livro. 26
34 Em qualquer momento, o autor poderá gerir os seus livros, adicionando e actualizando as suas publicações. Poderá ainda disponibilizar aos seus leitores recursos relacionados com os livros, por exemplo, amostras e exercícios. O sistema deverá ser implementado de forma modular, possibilitando ao autor, mediante pagamento, adicionar ou remover funcionalidades ao seu perfil (por exemplo, fórum e blog). Cada autor poderá ter um fórum, onde discutirá com os leitores temas do seu interesse, e um blog, onde dará a conhecer as suas notícias à comunidade leitora. A qualquer altura, um leitor poderá adicionar comentários quer a entradas do fórum quer a notícias do blog. Em ambos, o autor será a autoridade máxima tendo assim o poder de editar ou mesmo eliminar comentários realizados pelos leitores. O autor poderá ainda conversar directamente com todos os utilizadores que naquele momento específico naveguem numa suas páginas, através de um sistema de conversação em tempo real. O administrador terá a possibilidade de visualizar estatísticas e alterar a ordem pela qual os livros e autores serão listados. Poderá também consultar em que estado se encontram os pagamentos dos módulos subscritos por parte dos autores, ou de bloquear algum livro ou autor. 27
35 4. Protótipo 4.1. Fluxo de interacção À semelhança da secção anterior, e tendo como finalidade descrever a navegação permitida, foi elaborado um diagrama de interacção para cada tipo de utilizador (Anexo B 2 ). Para facilitar visualmente a compreensão, os diagramas encontram-se sub-divididos por quatro cores, representando cada cor um conjunto de funcionalidades Mockups Com base nos requisitos, e de forma a complementar os diagramas de fluxo, foram desenhados protótipos (Anexo C 2 ), também separados por tipo de utilizador, representativos da primeira visão da aplicação. Alguns destes protótipos podem ser encontrados na sub-secção 1.4, Visão, no capítulo da Introdução. 2 O anexo pode ser encontrados em 28
36 5. Arquitectura Nesta secção começa-se por descrever a arquitectura global da aplicação e de seguida explica-se como o modelo de dados vai ser tratado. A aplicação deverá estar preparada para três tipos de utilizadores: autores, leitores e administradores. Os primeiros serão os principais utilizadores da aplicação, para quem a aplicação estará focada. Os leitores têm acesso às informações publicadas pelos autores podendo sempre deixar o seu testemunho. Os administradores poderão gerir todo o sistema. Figura 5.1 Diagrama de arquitectura da aplicação 29
37 A figura 5.1 ilustra quais os intervenientes externos à aplicação. Por um lado temos os utilizadores administrador, autor e leitor que interagem com a aplicação através dos seus browsers. Por outro, temos as entidades de pagamento a usar pelos utilizadores para a aquisição de módulos da aplicação Modelo de Dados De forma a satisfazer todos os requisitos, foi elaborado o diagrama de modelo de dados (Anexo D 3 ). Este representa todas as entidades da base de dados e de que forma se relacionam. Também com objectivo de facilitar visualmente a interpretação, optou-se novamente pelo uso de cores de forma a distinguir as diferentes partes lógicas da aplicação. 3 O anexo pode ser encontrados em 30
38 6. Visão do Utilizador Este capítulo demonstra as funcionalidades já implemendas no My Book Space. A página inicial da aplicação contém uma lista de sugestões de autores e livros Figura 6.1. O utilizador, independentemente do local onde se encontre na aplicação, tem sempre a possibilidade de efectuar uma pesquisa ou de se autenticar (ou terminar sessão, caso já esteja autenticado). Figura 6.1 Página Inicial Ao seleccionar a entrada Books no menu, o utilizador é direccionado para a listagem de livros Figura 6.2. Aqui, tem a possibilidade de filtrar a listagem por letra ou reordenar os resultados por ordem alfabética, temporal ou de popularidade (número de visitas). 31
39 Figura 6.2 Listagem de Livros A entrada Authors no menu, leva o utilizador para a listagem de autores Figura 6.3. Tal como na listagem de livros, é também possível filtrar e reordenar os resultados. Figura 6.3 Listagem de Autores 32
40 Ao seleccionar um livro, o utilizador é direccionado para os detalhes do livro Figura 6.4. Nos detalhes pode encontrar a imagem de capa do livro bem como informação base, tal como qual o autor e editora. Do lado direito pode ser encontrado o menu do livro, o qual vai dar acesso às funcionalidades avançadas (a desenvolver em breve). Figura 6.4 Detalhes do Livro De forma similar, ao seleccionar um autor, o utilizador é direccionado para os detalhes do autor Figura 6.5. Para além da informação base sobre o autor, pode também ser encontrada a sua imagem de perfil, mini-biografia e lista de livros publicados. Do lado direito encontra-se o menu do autor (funcionalidades a desenvolver em breve). 33
41 Figura 6.5 Detalhes do Autor Qualquer utilizador tem a possibilidade de criar uma conta no My Book Space Figura 6.6. Para isso apenas tem que seleccionar a opção de registo no topo da página e preencher o formulário a que se depara. Este, bem como todos os formulários, são sujeitos a um processo de validação a partir do qual o utilizador será notificado na ocorrência de algum erro. Após a submissão do formulário de registo com sucesso, será pedido ao utilizador para validar a sua conta através do enviado pelo sistema. 34
42 Figura 6.6 Registo Após o processo de registo estar concluído, o utilizador pode autenticar-se na aplicação. Quando a autenticação ocorrer com sucesso, o utilizador será direccionado para a sua página de detalhes de perfil e uma mensagem de alerta será mostrada Figura 6.7. Figura 6.7 Autenticação com Sucesso 35
43 No seu perfil, o utilizador pode alterar a sua imagem Figura 6.8 bem como editar os seus detalhes pessoais Figura 6.9. Figura 6.8 Edição da Foto do Autor Figura 6.9 Edição do Perfil do Autor 36
44 Independentemente do local onde o utilizador se encontra, este terá acesso à pesquisa global Figura À medida que o utilizador insira as palavras-chave, deparar-se-á com uma lista de sugestões. Estas estão divididas nas categorias de livro e autor, a partir das quais pode seleccionar directamente uma sugestão sendo redireccionado para os detalhes do livro ou autor escolhido ou então ignorar as sugestões e pesquisar pelas palavras-chave inseridas. Figura 6.10 Pesquisa 37
45 7. Implementação 7.1. Estrutura do Código O codigo desenvolvido segue a estrutura recomendada pelo CodeIgniter, o qual tem por base o modelo MVC. Na raíz do projecto existem três directorias principais: application Local onde o código do My Book Space é desenvolvido; public Conteúdos disponibilizados estaticamente ao público sem existir qualquer processamento por parte do CodeIgniter; system Código base do CodeIgniter. Figura 7-1 Estrutura do Código A implementação de uma funcionalidade transversal necessita, normalmente, de efectuar alterações nas seguintes directorias: application/config Mantém todas as opções de configuração da aplicação. Por exemplo, as credenciais de acesso à base de dados; application/controllers Contém informação sobre quais as rotas possíveis de ser acedidas pelos utilizadores. Por exempo, é aqui que se define o que acontece quando um utilizador tenta aceder à secção de livros, /book. Recordar que, segundo o MVC, é da responsabilidade de controlador interagir com os modelos (base de dados) e delegar a visualização do resultado para uma vista; application/models Compreende todo o código de acesso à base de dados; application/views Contém a lógica de apresentação da aplicação. Esta faz referência a CSS, Javascript e imagens presentes na directoria public. 38
46 application/helpers Local onde se coloca o código transversal a toda a aplicação (código partilhado entre controllers e models); public/media Directoria onde se encontram as imagens referentes aos livros e autores Base de Dados Com base no diagrama de modelo de dados (Anexo D 4 ) foi gerado um script para a criação das tabelas para a base de dados MySQL. O CodeIgniter possuí um módulo de abstracção da base de dados, Doctrine, o qual fica responsável por estabelecer a ligação à base de dados e interagir com ela. Visto tratar-se de um ORM, Doctrine permite definir queries usando uma linguagem independente da base de dados em causa, o que possibilita utilizar o motor de base de dados pretendido HTML, CSS e JavaScript A camada de visualização do My Book Space baseia-se no conceito de templates. Estes promovem a reutilizaçao do código, permitindo definir a estrutura base da página (por exemplo, cabeçalho e menu) apenas sendo necessário para cada acção diferente escrever o que realmente muda o corpo da página. Para agilizar o desenvolvimento inicial da aplicação usou-se por base a framework de CSS Twitter Bootstrap. Esta define um conjunto base de estilos de formatação, por exemplo para texto, formulários e tabelas. No que toca a JavaScript usou-se por base as bibliotecas jquery e jquery UI Procura com Sugestões (autocomplete) A pesquisa recai no uso da biblioteca jquery UI, em particular no plugin Autocomplete. Este permite sugerir ao utilizador a lista de livros e autores à medida em que escreve na caixa de pesquisa. 4 O anexo pode ser encontrados em 39
47 De forma a melhorar a interacção com o utilizador, a comunicação entre o plugin e o servidor web é realizada usando AJAX. Ao introduzir palavras chave de pesquisa, o utilizador tanto pode optar por seleccionar um livro ou autor da lista de sugestões indo directamente para a sua página ou então ignorar as sugestões e pesquisar pelas palavras-chave inseridas Erros e Validações Sempre que um formulário é submetido, a informação nele introduzida passa pela funcionalidade de validação do CodeIgniter. Esta permite definir, por exemplo, campos obrigatórios, verificar se é um endereço de válido e protecção contra injecção de HTML. Ao existirem erros, o utilizador é obrigado a voltar à mesma página onde tem agora identificados quais os erros. Sempre que exista a necessidade de notificar o utilizador, quer pelo sucesso quer pelo erro das suas operações, uma mensagem temporária surge no ecrã. Exemplos dessas operações são a inserção com sucesso de um livro ou uma tentativa de autenticação falhada Gestão de Imagens Os autores têm ao seu dispor a possibilidade de inserir a sua imagem de perfil e as capas dos seus livros. Tendo em conta os requisitos da aplicação, estas imagens são armazenadas no servidor em tamanhos diferentes. Por exemplo, uma imagem de perfil é armazenada no servidor em três tamanhos diferentes: perfil (grande), listagem (média) e recomendações (pequena). 40
48 8. Planeamento Nesta secção, serão apresentadas as tarefas previstas até à finalização do estágio e o tempo previsto para a execução de cada uma delas. A marcação temporal corresponde à semana que inicia nesse dia. É notório que algumas tarefas necessitam da finalização de outras para poderem ser iniciadas, assim como a realização em simultâneo de outras faz todo o sentido Primeiro Semestre Figura 8.1 Diagrama de Gantt com as tarefas do primeiro semestre Na Figura 8.1 podem ser visualizadas as tarefas realizadas ao longo do primeiro semestre. Salientar ainda que a diferença entre este diagrama e o planeamento realizado no início do estágio é mínima. Assim, são de destacar as seguintes anotações sobre o diagrama: Preparação do ambiente de trabalho Esta primeira tarefa demorou algum tempo visto que dizia respeito à integração da estagiário na empresa. Esta tarefa englobou não só a apresentação da cultura da Tangível, mas também discussões sobre os principais detalhes do estágio. Desenho do modelo de negócios, Desenho do modelo de dados, desenho da arquitectura da aplicação e Desenho do fluxo de interacção Apesar da construção dos vários diagramas terem início diferentes, estes 41
49 foram constantemente actualizados à medida que os outros diagramas iam surgindo e o projecto ficando mais definido. Relatório intermédio e Relatório final É notório um longo período na elaboração do Relatório intermédio, como do Relatório final, uma vez que estas tarefas são de natureza contínua sendo importante ir registando as experiências no momento em que estas são vivenciadas. Funcionalidades básicas Estas funcionalidades compreendem as configurações iniciais do projecto (tais como estruturação do código e ligação à base de dados) e implementação das operações básicas para o utilizador (como o registo e autenticação). Funcionalidades do livro Estas funcionalidades dizem respeitos a todas as funcionalidades do livro, como a criação de livros e referências (notar que esta funcionalidade continua no segundo semestre) Segundo Semestre Figura 8.2 Diagrama de Gantt com as tarefas do segundo semestre Na Figura 8.2 encontram-se as tarefas relativas ao segundo semestre e, de igual forma, são de salientar as seguintes anotações: Funcionalidades do livro Funcionalidades do autor Estas funcionalidades dizem respeitos aos pré-requisitos definidos na secção A.1.2 deste relatório. Funcionalidades de administração Estas funcionalidades dizem respeitos aos pré-requisitos definidos na secção A.1.3 deste relatório. 42