Timeline
From Laboratório MM 5
(→Queries utilizados) |
(→Queries utilizados) |
||
| Line 144: | Line 144: | ||
Por exemplo: | Por exemplo: | ||
| - | MATCH (username, morada, local) | + | ''MATCH (username, morada, local) |
| - | AGAINST (aveir*) | + | |
| + | AGAINST (aveir*)'' | ||
onde: | onde: | ||
Revision as of 15:58, 18 January 2012
Contents |
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.
A base de dados apresentada é composta, essencialmente, por 11 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 atributos apresentados.
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).
Note-se que, quem desejar visualizar o projecto apresentado na sua totalidade terá que instalar, nas suas máquinas, o referido MySQL 5.6.
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.
Na criação do evento é também de referir o sistema de tags implementado, que se tornará um meio facilitador para a pesquisa de determinado evento.
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
|
|---|
Desafios a nível de programação
Definir a visibilidade do utilizador e manter esse aspecto consistente ao nível de todas as páginas
Actualizações em tempo real - long polls - pedido de ajax para a servidor que fica no mesmo durante x minutos e, caso exista alguma alteração , devolve a mesma, caso contrário o pedido expira (timeout), sendo que o cliente volta a fazer o pedido. Torna-se mais eficiente na medida em que não está constantemente a iniciar sessões no servidor a um ritmo acentuado.
Auto-complete - uso do plugin de jquery ui - após a inserção de dois ou três caracteres este faz pedidos de ajax a uma página php que pesquisará entre as tags existentes retornando e preenchendo bla bla bla
Recuperação de password - configurar no xampp mercury mail de forma a servir de intermediário para os mais que se pretendem enviar para o servidor
em todos os inputs foram realizadas verificações de SQL injection para impedir que sejam realizadas ataques à base de dados
file upload feito através de uma iframe escondida de forma a não necessitar de fazer refresh à página. verificações do ficheiro para ver se a imagem corresponde ... image img area select para seleccionar a área e permitir.... foi-se buscar x inicial y inicial e dimensões da imagem
Queries utilizados
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.
Para a resolução de alguns problemas recorreu-se, então, à utilização de sub-queries. Estas permitiram recorrer a determinados resultados de uma query dentro de uma outra query, útil, por exemplo, na ordenação da pesquisa por todos os resultados.
No que diz respeito às Queries considera-se relevante falar, especificamente, da página de pesquisa. Nesta foi utilizado o método MATCH()... AGAINST(), disponível unicamente 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 (username, morada, 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 também por todos os resultados que apresentem algo mais à frente deste.
Campo match índice que quero utilizar (local , morada, descrição, título, nome, sobrenome e nome_tag)
against (av*)
retorna um valor que corresponde à relevância do resultado , quanto mais relevantes for o resultado maior o valor - ordena-se a query e filtra-se os que dão 0
union all (resultado de duas queries pesquisa utilizadores e eventos e ordenar por um camp+po em comum que é a relevância)
mysql insert ID para descobrir os id's dos registos inseridos
mysql data_seek - pesquisa de modo a posicionar o pointer do resultado da query num determinado index
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.
Melhorias na performance/desempenho do site - optimização de algum do código presente na aplicação.
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.
Alterações a nível de interface - pequenas modificações que poderiam tornar a interface mais agradável e/ou intuitiva.
Adaptação da aplicação para Mobile - pelas características inerentes à timeline desenvolvida, a aplicação 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.
Desenvolvimento de um Backoffice - um backoffice intuitivo facilitaria futuras alterações que os administradores da aplicação necessitassem de realizar.
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 pela timeline, a paleta de cores iria sendo alterada da forma abaixo apresentada.
|
|---|
Conclusões
Finalizado todo o processo, desde o planeamento até ao desenvolvimento da aplicação, é 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).
