Clickwin

From Laboratório MM 5

Latest revision as of 04:24, 18 January 2011

Ano Lectivo 2010/2011 | Universidade de Aveiro | U.C. Laboratório Multimédia V | DeCA | NTC

Trabalho Realizado por:

Alexandra Fernandes - 47130

João Sousa - 46751

Léo Ferreira - 46564

Nelson Leite - 45697

Introdução

No âmbito da unidade curricular de Laboratório Multimédia V foi-nos proposto a realização de um trabalho de grupo em articulação com a disciplina de Gestão de Empresas e Implementação e Controlo de Projectos Multimédia, que abarcasse os princípios da Web 2.0. Recorrendo a tecnologias server-side e client-side, desenvolveu-se um website de leilões ao segundo (ClickWin).Este relatório propõe-se apresentar todo o processo de concepção e desenvolvimento da plataforma, assim como todas as dificuldades sentidas e as soluções adoptadas pelo grupo de trabalho.

Objectivo do documento

O objectivo deste documento é relatar o planeamento, concepção e desenvolvimento da plataforma ClickWin, bem como as dificuldades sentidas ao longo do tempo e evoluções futuras que o projecto iria a vir sofrer.

Visão geral do projecto

A ClickWin tem como objectivo oferecer a experiência de compra e/ou venda de produtos em leilões ao segundo. Ao entrar na plataforma o utilizador será confrontado imediatamente com os leilões a decorrer. Poderá visualizar os produtos e as respectivas descrições e para poder participar nesta plataforma o utilizador terá de se registar. Uma vez registado, o utilizador poderá então licitar os produtos (terá que ter comprado licitações previamente). Assim que o leilão termina, o vencedor terá a oportunidade de dar algum feedback, através de comentários ao produto e ao respectivo vendedor (que pode ser a empresa ClickWin ou outro utilizador) bem como uma classificação qualitativa (de 1 a 5), para deste modo, toda a comunidade ter uma imagem verdadeira da plataforma, e não haver “fraudes”. A ClickWin permite não só a compra de produtos, mas também venda. Para isto, o utilizador terá que fazer um upgrade à sua conta para Premium, comprando este “estatuto” por três, seis, ou doze meses. Sendo um utilizador Premium, poderá então disponibilizar os seus produtos para leilão. Assim, pretendemos tirar proveito do conceito web 2.0, onde grande parte do conteúdo da plataforma será construída pelo utilizador.

Base de dados desenvolvida

Toda a informação do nosso site passa obrigatoriamente pela base de dados. Mas devido a falta de tempo não foi possível usufruir de todas as tabelas, então fizemos pequenas adaptações. Sendo assim:

Utilizadores – Nesta entidade vai ser armazenado toda a informação relativa aos utilizadores registados.

Produtos – Aqui vão ser guardados todos os produtos existentes, bem como toda a sua informação. É possível também saber quem começou o leilão, o tempo de duração do leilão, a data em que o produto foi posto à venda e o número de clicks que levou o leilão, ou seja, quantas vezes foi licitado, que vai resultar no preço de venda do produto.

Marca / Categoria – Nestas tabelas serão guardadas as informações relativas à marca e categoria de cada produto, respectivamente.

Newsletter – Aqui são guardados os emails dos utilizadores que queiram receber newsletter.

errorDetails – Nesta tabela estão as mensagens de erro/feedback a aparecer ao utilizador.

FAQ – Onde são guardadas as perguntas e respostas mais frequentes (não é alterada pelo utilizador)

As restantes tabelas serão referidas nos desenvolvimentos futuros.

Implementação

Para a implementação do projecto foi essencial a utilização do dropbox, apesar de termos trabalhado sempre presencialmente. Com a dropbox é possível a todos os elementos do grupo terem acesso a todas as páginas, imagens, scripts e etc,.

Por questões de reaproveitamento de código, e para deixar a página mais leve, recorremos a diversos includes e requires. Foram ainda utilizadas funções que facilitaram a programação.

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

As principais funcionalidades da aplicação web são: Registo – Permite ao utilizador registar-se através do preenchimento de um formulário. Em caso de se tentar registar com um username ou email repetido, o registo não é efectuado com sucesso, obrigando o utilizador a escolher outro. Neste caso, todos os outros campos não perdem a informação previamente introduzida, para não obrigar o utilizador a repetir o processo. De referir ainda que a password registada na base de dados é encriptada com md5.

Login – Depois de efectuado o registo, o utilizador poderá efectuar login na página, permitindo usufruir de grande parte das funcionalidades, ou seja, permite iniciar sessão.

Logout – Faz com que termine a sessão do utilizador.

Funcionalidades só possíveis com sessão iniciada:

Licitação produto – Permite ao utilizador licitar produtos. Ao fazê-lo o preço aumenta em 0,01€ e o tempo em 10 segundos. No caso de o utilizador não estar logado, a licitação não é possível.

Alteração de dados pessoais – O utilizador tem a possibilidade de alterar as informações a seu respeito (editar a base de dados).

Alteração do tipo de conta – Aqui é possível fazer o upgrade da conta para premium, que vai desbloquear novas funcionalidades, descritas de seguida. Ao comprar premium pela primeira vez, a data da compra é adicionada em relação à data actual na base de dados. Caso ainda se seja premium e se tente comprar outra vez, a data respectiva é adicionada em relação à data já existente na base de dados (isto é conseguido através da função mktime). Depois do tipo de conta alterado, seria necessário fazer logout e outra vez login para a variável de sessão ser actualizada. No entanto conseguimos forçar a actualização da sessão no momento da alteração do tipo de conta, sem recorrer ao supracitado.

Inserção de produtos e respectiva visualização e edição – O utilizador pode inserir os seus produtos e disponibilizá-los ou não imediatamente para leilão. Depois de inserido o produto e estando em stand by, pode ser visualizado, editado ou apagado. Aquando da inserção é possível escolher marcas e categorias existentes ou inserir novas. No caso de se inserir uma marca ou categoria repetida (só tem o problema de ser case sensitive), esta não será inserida na base de dados, apenas assumirá o id correspondente à marca/categoria pretendida e todo o restante processo se desenrolará normalmente.

Existem ainda outras funcionalidades, menos relevantes:

Newsletter – O utilizador pode registar o seu mail na base de dados para mais tarde receber newsletters.

Pesquisa de produtos – O utilizador, ou um simples visitante, pode procurar, pelo nome, os produtos existentes.

Mudança de tipo de utilizador - Quanto á verificação do tipo de utilizador ocorre na página “índex.php”. Quando o utilizador faz login, é comparada a data actual com a data de fim do premium, e caso tenha sido ultrapassada, é feito um downgrade para utilizador normal. De referir ainda que ao faltar uma semana para acabar o prazo o utilizador deveria receber um email de aviso, mas como o servidor de email não está configurado apenas recebe uma mensagem na própria página a informar os dias que restam (isto acontece de cada vez que se faça login).

Redimensionamento de imagem - Para o index, as imagens que tenham largura superior ao estipulado, são dinamicamente redimensionadas, caso contrário ficam com a dimensão original.

Mapa de páginas

Server Behaviours utilizados

Foram utilizados os seguintes behaviours: • Dynamic Attribute - para as actions dos formulários que interagem com a base de dados

• Dynamic Text Field – para quando se quer escrever no value dos inputs dados da base de dados

• Dynamic Text - para quando se quer escrever HTML dados da base de dados

• Repeat Region – para quando se querem repetir elementos provenientes da base de dados (e não só, também repete código HTML)

• Show if Recordset is Not Empty – verifica se a base de dados está vazia; se estiver, o código dentro deste behavior não executa

• Log In User – possibilita o login ao utilizador

• Log Out User - possibilita o logout ao utilizador

• Restrict Access To Page – verifica se o utilizador está com sessão iniciada e verifica o nível de acesso para permitir o acesso a uma determinada página. Caso não cumpra o que é verificado é redireccionado para o index.php

• Check New Username – para verificar, no envio de formulários, se existe algum campo na base de dados igual a um determinado campo preenchido

• Insert Record – insere dados na base de dados

• Update Record – actualiza/altera dados da base de dados

• Delete Record – apaga registos da base de dados

Recordsets/Queries utilizados

• rs_prodLeiloes – selecciona os registos dos produtos que estejam em leilão, ou seja, quando os produtos tenham o estadoLicitacao e estadoVenda a verdadeiro

• rs_msg_erro – selecciona registos da tabela erros para aparecer o erro correspondente

• rs_userDataPremium – selecciona os registos necessários do utilizador que estiver logado para permitir a alteração do tipo de utilizador e da data limite da conta premium

• rs_updateUsers – selecciona todos os campos do utilizador que estiver logado para permitir a alteração dos campos necessários para a mudança para premium

• rs_produtos – selecciona os dados da tabela produtos

• rs_marca / rs_categoria – selecciona todos os registos das tabelas marca e categoria, respectivamente, ordenados por ordem alfabética

• rs_faq – selecciona todos os registos da tabela faqs

• rs_user - selecciona todos os registos da tabela utilizadores do utilizador que estiver logado

• rs_pesquisa - selecciona todos os registos dos produtos relativos à palavra pesquisada

• rs_registoUtilizadores - selecciona todos os registos da tabela utilizadores para depois inserir dados

Parâmetros passados entre páginas

Os parâmetros que são passados entre as páginas são pelos métodos GET e POST.

Os que são passados por URL são:

• Todos os erros / mensagens de feedback

• Os dados de utilizador no registo, caso haja username ou email repetidos

• Os id’s dos produtos respectivos a apagar

Já os parâmetros passados por POST são:

• Os id’s dos produtos respectivos a editar

• A palavra pesquisada

• As variáveis de sessão

Integração (CSS, JQuery, XML, Spry)

Para o bom desenvolvimento do projecto foi necessário recorrer a bibliotecas de AJAX. Desta forma, foi utilizado JQuery para a animação da caixa de login, onde se identifica os elementos pretendidos através das classes, e a animação fica ao encargo das funções pré-definidas pelo Jquery, à excepção da velocidade da animação e da altura.

Para o cronómetro (o tempo decrescente respectivo a cada produto), é calculado numa página à parte onde, através de PHP, é criado um XML, onde cada nódulo contém informação relativa ao id do produto e o seu respectivo tempo.

Esta foi a parte mais trabalhosa e mais complicada, porque por cada licitação o preço e o tempo de cada produto aumentavam. Para isto funcionar seria necessário estar constantemente a verificar o tempo que restava para o fim do leilão. Ora, a solução para este problema passa por uma função de AJAX (auctioner), executada de segundo a segundo. Função essa que consiste em chamar a página “contador.php” e devolver o valor lá calculado, escrevendo nos respectivos spans. Na página “contador.php” é verificado a data de publicação do produto, o tempo de duração do leilão, o número de clicks e a data actual. Com estes dados é calculado o tempo que falta para determinado leilão acabar (em segundos) e formatado para o formato mais conveniente. Como isto é executado a cada segundo, na página “índex.php” o utilizador tem a ilusão de uma contagem decrescente.

Foram ainda utilizadas bibliotecas spry, na página “faq.php”, para o acordeão com as perguntas e respostas. Todo o layout do site foi conseguido através de formatações em CSS.

Desenvolvimentos Futuros

Para desenvolvimentos futuros, isto é, componentes por implementar, temos:

Saldos – Onde vai ser possível ao utilizador ver o seu saldo, bem como carregar a sua conta e comprar licitações, através de paypal ou transferência bancária.

Reviews – Servirão para construir feedback sobre os utilizadores

Link “Produtos” do menu – Link para a listagem completa dos produtos ou listagem de produtos por categorias (através dos submenus)

Cookies – Guardar a sessão e dados estatísticos em cookies

Próximos produtos – leilões com tempo restante superior a 1 dia apareceriam nesta zona, mas ainda impossibilitados de serem licitados, apenas seguidos pelo utilizador

Utilização completa da base de dados – A entidade Leilões permite-nos guardar todos os leilões a decorrer e decorridos, e devido aos seus relacionamentos é possível perceber quem começou o leilão, quem o ganhou e que produto está a ser leiloado. A entidade Reviews permite guardar todos os comentários e classificações dadas ao utilizador autor de um leilão. Já a tabela Bids permite guardar o histórico de licitações de um determinado leilão

Vencedor do leilão – Quando o tempo restante de um leilão acabar, o ultimo utilizador a licitar é o vencedor do produto.

Conclusões

É à luz de muito trabalho, de tentar outra e outra vez, que conseguimos alcançar as grandes coisas da vida, assim, é “À força das pequenas coisas” que fazem com que conseguimos chegar àquilo que poucos conhecem como sendo o sucesso. “Viste como ergueram aquele edifício de grandeza imponente? Um tijolo, e outro. Milhares. Mas um a um. E sacos de cimento, um a um. E blocos de pedra, que pouco representam na mole do conjunto. E pedaços de ferro. E operários que trabalham, dia a dia, as mesmas horas. . . Viste como levantaram aquele edifício de grandeza imponente?... À força de pequenas coisas”. (Josemaría Escrivá)

Relativamente a este projecto, foi como um edifício que ainda está por terminar, mas que o que já foi construído foi devido ao esforço de um grupo de pessoas que gostam de trabalhar nesta área, e pretender num futuro próximo obter o sucesso. “ O único lugar onde o sucesso vem antes do trabalho é no dicionário”. (Paulo Páscoa, 2007,cit Albert Einstein)

Em suma, este projecto deu-nos uma boa noção das dificuldades que encontraremos no mercado, e ao contrário de todos os outros projectos em que conseguimos sempre acabar ou chegar muito perto, este pela sua complexidade não nos foi possível. No entanto, foi sem dúvida o trabalho que mais nos permitiu evoluir e aprofundar temáticas leccionadas, visto que a evolução só é possível quando procurada através de esforço, de trabalho.

Referências bibliográficas

"W3Schools Online Web Tutorials", [www.w3schools.com]

"Parse XML with jQuery", [1], [2]