Timeline

From Laboratório MM 5

Latest revision as of 21:04, 19 January 2012

Introdução

Objectivo do documento

O presente relatório, desenvolvido no âmbito das disciplinas de Laboratório Multimédia 5 e Implementação e Controlo de Projectos Multimédia do curso de Novas Tecnologias da Comunicação da Universidade de Aveiro, visa relatar todo o processo de planeamento e desenvolvimento da criação de uma aplicação para a Web 2.0.

Ao longo do relatório serão, então, apresentados alguns dos procedimentos tomados, as dificuldades sentidas e as soluções adoptadas, bem como uma breve conclusão sobre possíveis melhorias a desenvolver futuramente.

Visão geral do Projecto

A ideia do projecto Timeline assenta na criação de uma agenda, dotada de uma interface minimalista e intuitiva, que visa proporcionar ao utilizador uma alternativa de complexidade reduzida aos restantes produtos que são passíveis de se encontrar no mercado actual.

Timeline proporciona, assim, de uma forma bastante dinâmica, a navegação por uma linha temporal onde os utilizadores poderão adicionar e visualizar eventos, convidar amigos para os seus eventos, aderir aos eventos dos seus amigos, assim como pesquisar por determinado evento ou subscrever determinada instituição.

Base de dados desenvolvida

Após planeada toda a aplicação, realizada a lista de requisitos funcionais e bem delineadas quais as tarefas que a mesma permitiria realizar, procedeu-se, então, à concepção de uma base de dados que correspondesse, da forma mais eficiente e optimizada possível, às necessidades encontradas.

Para visualizar o modelo físico da base de dados siga o seguinte link:

Media:basedadostimeline.png

A base de dados apresentada é composta, essencialmente, por 10 distintas tabelas, sendo que quase todas apresentam uma relação com uma tabela central, referente ao utilizador.

Passaremos, então, ao esclarecimento de algumas opções tomadas em relação às tabelas e seus atributos.

Tabela utilizador - apresenta as informações relativas ao utilizador, sendo que, algumas das informações apresentam dois atributos distintos (por exemplo: utilizador_telemovel e utilizador_telemovelVisivel). Este aspecto é necessário para que o utilizador possa definir a visibilidade das suas informações.

Tabela subscricao - é a tabela referente aos amigos do utilizador. O elemento 'subcricao_activo' permite verificar se determinado utilizador é amigo de um outro ou se, em oposição, determinada amizade foi, por exemplo, removida. Os valores oscilam entre dois estados - zero (não há relação de amizade) e um (existe relação de amizade).

Já o elemento 'subscricao_estado' é referente à pendência de convites de amizade entre utilizadores. Oscilando também entre estados de zero e um.

Tabela passwordRequest - nesta é possível ver um atributo associado à password com o nome de hash. A hash trata-se de um conjunto de bits, não passíveis de se repetirem, que irão permitir criar uma password encriptada, melhorando assim as questões de segurança da aplicação.

Tabela mensagens - a auto-associação presente nesta deve-se ao facto de, determinada mensagem poder ser resposta a uma outra. Existindo, assim, uma associação entre ambas.

Tabela comentario - à semelhança do sucedido nas já referidas tabelas, apesar dos comentários poderem ser 'aparentemente' removidos, estes nunca serão definitivamente eliminados da base de dados. Simplesmente o seu estado ('comentario_activo') irá passar de 1 para 0, o que se reflecte na invisibilidade de determinado comentário para os utilizadores. O mesmo processo ocorre na tabela de eventos.

Tabela de Tags - na presente tabela é de salientar que, de forma a optimizar a mesma, nunca existirão tags repetidas. Existe, portanto, uma verificação que permite que tags com o mesmo nome nunca tenham id's diferentes e se aglomerem no mesmo.

O sistema de auto-complete implementado tornou-se também um meio facilitador para a inserção das mesmas por parte do utilizador.

De referir ainda que, no desenvolvimento da base de dados da aplicação, optou-se pelo uso do MySQL 5.6 uma vez que este seria o único a permitir o uso dos índices Full Text. A utilização destes permitiu, então, aumentar a rapidez e eficiência dos sistemas de pesquisa (nomeadamente nas páginas de pesquisa e amigos). No entanto, os mesmos apresentaram alguns problemas sendo que, talvez por alterações ao tipo de dados nos campos das tabelas, ocasionalmente deixavam de funcionar, existindo a necessidade de os recriar.

Note-se que, quem desejar visualizar o projecto apresentado na sua totalidade terá que instalar, nas suas máquinas, o referido MySQL 5.6.

Informações relativas à base de dados

User: timeline

Password: timeline

Implementação

Descrição das principais funcionalidades da aplicação Web

Registo e Login

O Registo e Login na aplicação são necessários para ter acesso à mesma, sendo que utilizadores não logados apenas terão acesso à página inicial, onde lhes serão dadas algumas informações sobre as principais funcionalidades da aplicação, assim como a oportunidade do já referido login e/ou registo.

Na fase de Registo, é de salientar que não serão permitidos registos com contas de email iguais, sendo que este será o identificador único de cada utilizador, ou seja, o correspondente ao usual "username".

Criar, Partilhar, Editar e Eliminar Eventos / Aceitar e Recusar convites de Eventos

A principal funcionalidade da Timeline é, então, permitir aos seus utilizadores a inserção de eventos na sua timeline e o envio de convites de adesão aos seus amigos.

De referir que, na criação de um evento é dada a oportunidade ao usuário de definir a visibilidade do mesmo, sendo que este pode oscilar entre três estados: Público, Privado e Amigos.

• Eventos públicos são visíveis a qualquer utilizador da aplicação.
• Eventos privados encontram-se apenas visíveis para os convidados de determinado evento.
• Eventos amigos são visíveis para todos os amigos do criador do evento, mesmo que não tenham sido convidados para tal.

A edição e eliminação de eventos estará, unicamente, ao encargo do seu criador.

Quanto à partilha, o utilizador poderá, então, convidar os seus amigos a participarem em determinado evento, sendo que estes terão que aceitar o convite para o mesmo começar a fazer parte da sua timeline.

Enviar, Aceitar e Recusar Pedidos de Amizade

A possibilidade de cada utlizador dispor dos seus amigos é o que permite ao projecto Timeline diferenciar-se de todos os outros calendários, tornando-o mas interactivo e, deste modo, apelativo.

Pesquisar por Eventos e Pessoas

Timeline permite ainda efectuar uma pesquisa, de forma rápida e aprofundada. Para tal dispõe de um sistema de filtros que permitem especificar qual a procura. São eles localidade (tanto para a pesquisa de eventos como para pessoas), data e tags (no caso da pesquisa a eventos).

Visualizar e Comentar Eventos

Todos os Eventos poderão, então, ser comentados, sendo que a visibilidade de determinado comentário estará de acordo com a visibilidade do evento.

Editar o Perfil

Cada utilizador terá ainda acesso a uma pequena página de perfil, onde serão apresentadas algumas informações sobre o mesmo. Além de ser dado ao utilizador a possibilidade de modificar algumas das informações é, ainda, dada a possibilidade de definir a visibilidade das mesmas.

Envio e Recepção de Mensagens

Os utilizadores poderão ainda entrar em contacto entre si utilizando um pequeno sistema de mensagens, útil para situações e ou comentários a determinados eventos que requeiram alguma privacidade.

Mapa de páginas

Soluções Técnicas Adoptadas

A complexidade, a nível técnico, da aplicação Timeline, reside na necessidade das suas actualizações serem realizadas em tempo real, de forma simples e dinâmica, sem que o utilizador necessite de fazer refresh à página.

Posto isto, grande parte dos desafios encontrados foram passíveis de se resolver recorrendo ao uso da tecnologia AJAX. A incrementar a esta é, ainda, possível referir o uso de JavaScript como elemento fundamental para o bom funcionamento da aplicação. Contudo, por este não fazer parte dos elementos de avaliação no âmbito da disciplina de Laboratório Multimédia 5, não será dada muita relevância à sua explicitação ao longo do relatório.

Passaremos então à explanação de algumas das soluções técnicas adoptadas:

• Actualizações em tempo real - No decorrer do desenvolvimento do projecto, e de forma a permitir as actualizações em tempo real sem que estejam a ser iniciadas sessões constantes no servidor a um ritmo acentuado, recorreu-se ao uso da técnica de long polling.

Esta funciona como um pedido de AJAX ao servidor que se mantém neste durante x segundos, garantindo que assim que uma nova informação esteja disponível a mesma seja enviada e se torne visível para o utilizador. Caso contrário o pedido expirará e um novo será realizado.

• Sistemas de autocomplete - Tanto na inserção de texto no campo localidade como na inserção das tags em determinado evento, foi utilizado um sistema de autocomplete, por forma a auxiliar o utilizador.

No caso mais específico das tags (e como já foi explicado), este permitiu ainda que não fossem criadas tags com nomes iguais ou muito semelhantes, pondo em causa a optimização da base de dados. Para tal recorreu-se ao uso de um plugin de jQuery. O referido plugin permite que, após a inserção de alguns caracteres no input em causa, seja realizado um pedido de AJAX a uma página PHP que pesquisará a sua semelhança entre as tags existentes na mesma, retornando o seu valor e preenchendo o campo em questão.

• Recuperação de password - de forma a implementar um sistema que permita a recuperação da password pelo utilizador foi necessária, então, a configuração no XAMPP do mercury mail. Este servirá de intermediário para as mensagens que serão enviados para o mail do utilizador, caso seja efectuado o pedido.

A nova password é gerada de forma aleatória e colocada no campo 'utilizador_password' da tabela de utilizador. Sendo que continua a ser dada ao utilizador a hipótese de alterar a mesma nas definições da sua conta.

• Upload da Imagem de Perfil - o carregamento da imagem presente na página de editar perfil é realizado através de uma iframe escondida. Esta permite que possam ser visualizadas as alterações realizadas sem que haja necessidade de um recarregamento da página.

Existe ainda uma verificação aos requisitos da imagem, quer a nível do peso do ficheiro como ao nível das suas dimensões, para que posso ser realizado o upload.

Foi também utilizado o método Cron Job para que ficheiros temporários relativos à imagem sejam eliminados.

• Infinite Scroll- na página de mensagens surgiu a necessidade da implementação de um infinite scroll. Nesta, à medida que o utilizador realiza scroll são efectuados novos pedidos de AJAX que carregarão a nova informação.

• Nível de segurança - finalmente, como forma de evitar possíveis ataques à base de dados, foram realizadas verificações de SQL injection a todos os inputs.

Queries utilizadas

As Queries apresentaram-se, a nível de conceptualização, como um grande desafio no decorrer do projecto, uma vez que nem sempre era tão explícita e evidente a relação entre determinados campos.

Um dos grandes problemas apresentados relaciona-se com a definição da visibilidade dos eventos e com a sua consistência ao longo de todas as páginas. Para a resolução do problema apresentado recorreu-se, então, à utilização de sub-queries. Estas permitiram recorrer a determinados resultados de uma query dentro de uma outra.

No que diz respeito às Queries considera-se relevante falar, ainda, da página de pesquisa. Nesta foi utilizado o método MATCH()... AGAINST(), unicamente disponível para tabelas InnoDB no MySQL 5.6. Este permite comparar determinada palavra ou, simplesmente parte de uma palavra com o campo de um índice definido.

Por exemplo:

    MATCH (utilizador_nome, utilizador_sobrenome, utilizador_local)

    AGAINST (aveir*)

onde:

• username, morada e local são os índices que pretendemos usar, ou seja, onde pretendemos procurar.
• aveir* a palavra ou, neste caso, parte da palavra pela qual pretendemos pesquisar. O "*" colocado à frente da palavra faz com que a busca seja realizada não só por "aveir", mas por todas as palavra que apresentem no início da sua constituição o conjunto de caracteres "aveir".

Posto isto, o método retornará um valor correspondente à relevância do resultado. Ou seja, ao valor "0" correspondem todos os resultados onde não existiu correspondência, aqueles que não serão apresentados, neste caso, como resultado da pesquisa. Os restantes valores variarão, sendo que quando maior o resultado destes maior a sua relevância. Resultados mais relevantes serão apresentados primeiro na página de pesquisa.

Ainda na referida página, e tendo em conta que esta apresenta um barra de navegação que permite ao utilizador navegar entre as diferentes páginas, caso existam vários resultados para uma dada pesquisa, houve a necessidade de recorrer à função mysql_data_seek(). Este permite posicionar o pointer do resultado da query num determinado index.

Em casos onde seria necessário saber o valor de um determinado ID, e de modo a que não fosse necessária a realização de uma nova query, recorreu-se à utilização da função mysql_insert_id.

Por exemplo:

    $_SESSION ['userID'] = mysql_insert_id();

Parâmetros passados entre páginas

Na aplicação desenvolvida foram utilizados dois métodos distintos para a passagem de parâmetros entre páginas, sendo eles o $_GET e o $_POST.

O método $_GET foi utilizado tanto nas páginas de pesquisa (passando no url qual a pesquisa efectuada, dando assim algum feedback ao utilizador), como na timeline dos amigos (passando o ID de determinado amigo).

Nas restantes páginas, e por questões de segurança, existindo a preocupação de que informação relevante ou confidencial não deverá ser passada no url, foi utilizado o método $_POST.

Integração (e.g. Flash, AJAX Frameworks, etc)

Além do evidente PHP, SQL e HTML necessários para a construção de uma aplicação no âmbito da Web 2.0., outras tecnologias foram implementadas no desenvolvimento do projecto.

Assim sendo, e de modo a tornar toda a aplicação mais dinâmica, sendo possível carregar nova informação sem ser executado o recarregamento de toda a página, optou-se pela utilização da tecnologia AJAX.

Ainda de modo a tornar a mesma mais apelativa, com animações quer no deslocamento da timeline, como no surgimento dos eventos ou mesmo surgimento de algumas páginas, recorreu-se a diversas bibliotecas de JQuery.

CSS3 ajudou, além da formatação geral, a incrementar o dinamismo a alguns elementos presentes nas páginas como, por exemplo, os botões.

JavaScript foi utilizado de forma a permitir a maior parte do funcionamento da aplicação.

Desenvolvimentos Futuros

Terminada a fase de desenvolvimento do projecto é possível referir alguns dos aspectos não implementados que o grupo gostaria de vir a desenvolver futuramente. Entre eles:

• Diferentes contas de utilizadores - desenvolvimento de contas para utilizadores pagantes e instituições.

• Sistema de avisos (mail e telemóvel) para utilizadores pagantes - implementar a possibilidade dos utilizadores com conta premium receberem avisos sobre os seus eventos, personalizando a data e a hora de recepção dos mesmos.

• Página Geral de Eventos - a existência de uma página representativa de todos os eventos públicos inseridos pelos utilizadores poderia se tornar, de alguma forma, uma mais valia para o site.

• Alterações a nível de interface - pequenas modificações que poderiam tornar a interface mais agradável e/ou intuitiva.

• Alteração do esquema de cores da aplicação - tendo em conta que a aplicação se trata de uma linha temporal, a ideia inicial seria que o esquema de cores da mesma se fosse alterando consoante a estação em que o utilizador se encontra. Assim sendo, ao navegar por esta, a paleta de cores iria sendo alterada da forma abaixo apresentada.

• Adaptação da aplicação para Mobile - pelas características inerentes à timeline desenvolvida, o site não tem ainda o desempenho esperado no que diz respeito a dispositivos móveis, sendo que a sua adaptação faria, então, parte dos desenvolvimentos futuros a ter em conta.

• Criação de Sistemas de Ajuda - os sistemas de ajuda ajudariam ao retirar de algumas dúvidas que pudessem surgir aos utilizadores durante a navegação.

• Melhorias na performance/desempenho do site - optimização de algum do código ou elementos das tabelas.

• Desenvolvimento de um Backoffice - um backoffice intuitivo facilitaria futuras alterações que os administradores necessitassem de realizar.

• Alojamento do projecto num servidor externo - de forma ao mesmo poder ser visível pelos interessados, seria uma mais valia este se encontrar disponível on-line.

• Realização de testes de Usabilidade - por questões de tempo, não se tornou possível a realização de testes de usabilidade à aplicação, assim como a resolução dos problemas por estes levantados. Tendo o grupo, no entanto, noção do quão importante seriam estas alterações para a melhoria do projecto.

Conclusões

Finalizado todo o processo, desde o planeamento até ao desenvolvimento do projecto, é possível concluir que o mesmo, correspondeu, em grande parte, às expectativas criadas pelos membros do grupo.

Embora não tenham sido implementadas todas as funcionalidades desejadas e tendo consciência que existiriam pormenores ainda a tratar, entende-se o resultado final como bastante positivo.

Apesar de se ter apresentado como um grande desafio para todos os elementos do grupo, o desenvolvimento da aplicação permitiu aos mesmos melhorar bastante os seus conhecimentos tanto ao nível das tecnologias de server-side como de client-side (PHP, MySQL, Ajax, Jquery, JavaScript).

Referências bibliográficas

[1] http://www.w3schools.com

[2] http://jquery.com/

[3] http://www.reddit.com/

[4] http://stackoverflow.com/

[5] http://www.php.net/