Timeline
From Laboratório MM 5
(→Desenvolvimentos Futuros) |
(→Medidas Técnicas Adoptadas) |
||
| Line 118: | Line 118: | ||
| - | ==== | + | ==== Soluções Técnicas Adoptadas ==== |
| Line 147: | Line 147: | ||
Foi ainda utilizado o método ''Cron Job'' para que ficheiros temporários relativos à imagem sejam eliminados. | Foi ainda utilizado o método ''Cron Job'' para que ficheiros temporários relativos à imagem sejam eliminados. | ||
| + | |||
| + | |||
| + | '''Infinite Scroll-''' na página de mensagens houve a necessidade da implementação de um ''infinite scroll''. Nesta, à medida que o utilizador realiza scroll na página são realizados novos pedidos de AJAX que carregarão mais informação. | ||
Revision as of 18:52, 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
|
|---|
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.
Nível de segurança - como forma de evitar possíveis ataques à base de dados, foram realizadas verificações de SQL injection a todos os inputs presentes na aplicação.
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 para o utilizador. Caso contrário o pedido expirará e será realizado um novo.
Sistemas de autocomplete - Tanto na inserção da localidade do utilizador como na inserção das tags em determinado evento foi utilizado um sistema de autocomplete de modo a ajudar o utilizador. No caso mais específico das tags 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. Este faz com que, após a inserção de dois ou três 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 ainda utilizado o método Cron Job para que ficheiros temporários relativos à imagem sejam eliminados.
Infinite Scroll- na página de mensagens houve a necessidade da implementação de um infinite scroll. Nesta, à medida que o utilizador realiza scroll na página são realizados novos pedidos de AJAX que carregarão mais informação.
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.
Um dos grandes problemas apresentados relacionam-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(), 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 (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 também por todos os resultados que apresentem algo mais à frente deste.
Posto isto, o método retornará um valor corresponde à relevância do resultado. Ou seja, ao valor "0" correspondem todos os resultados onde não existiu correspondência, ou seja, aqueles que não serão apresentados, neste caso, como resultado da pesquisa. Os restantes valores variarão entre outros possíveis valores, sendo que quando maior o resultado deste maior a relevância do resultado. 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.
Melhorias na performance/desempenho do site - optimização de algum do código presente na aplicação.
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.
|
|---|
página para eventos todos sistemas de ajudas colocação do projecto num servidor externo realização de testes de usabilidade
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).
