Beretro

From Laboratório MM 5

Revision as of 13:11, 19 January 2012 by Beretro (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Jump to: navigation, search

Bruno Garcia - 50098
Catarina Braga - 49553
Filipe Mendes - 49396

Introdução

Este trabalho, realizado no âmbito da disciplina de Laboratório Multimédia 5, com a colaboração da unidade curricular de Implementação e Controlo de Projetos Multimédia, visa a implementação de um sítio dinâmico para a Web que explore a temática da web 2.0 e que integre informação armazenada em bases de dados, sistema de gestão de conteúdos e ainda autenticação de utilizadores com diferentes níveis de acesso.

Objectivo do documento

O presente documento tem como principal objectivo relatar todo o processo de desenvolvimento, levado a cabo pelo grupo, na implementação do projeto proposto nesta unidade curricular, utilizando as tecnologias leccionadas. São então apresentados os procedimentos de construção da base de dados e de implementação, explicando os Server Behaviours, os Recordsets e Queries utilizados, assim como a integração com outras tecnologias. Este documento termina com a manifestação de alguns objectivos para desenvolvimentos futuros deste projeto.

Visão geral do projeto

Com vista à implementação do conceito da web 2.0, focado na dinâmica da interação do utilizador com a estrutura e conteúdo de uma página, surgiram algumas ideias, num processo de brainstorming, das quais o grupo elegeu a que apresentava maior potencial para desenvolver. Assim, o projeto baseia-se numa comunidade de fãns e colecionadores de produtos Retro, que possibilita, aos seus integrantes, trocarem e venderem este género de objetos entre si. Oferece também a possibilidade aos seus utilizadores de adquirirem produtos referentes ao Merchandising associados a esta Retro Community/Store. Ligado a este conceito, apresentamos uma interface apelativa e, caracterizada pela temática Retro/Vintage, e que permite aos seus utilizadores a navegação num ambiente de pertença à comunidade na qual se inserem.

Base de dados desenvolvida

Feita a análise de todas as funcionalidades a implementar na plataforma beRetro, o grupo centrou a sua atenção na construção da Base de Dados. Para tal, auxiliou-se do software MySQL Workbench resultando um total de 13 tabelas. Foram então identificadas as entidades que constituem a base de dados da nossa Retro Comunity/Store, nas quais se inserem os diferentes atributos caracterizadores de cada uma delas:

“user”: armazena a informação relativa a cada utilizador registado. Contém então um “id” específico para cada um deles, e campos detalhados para o nome, username, password, email, data de nascimento, pais, telemóvel, morada, data de registo e a especificação do ”id” do tipo de utilizador e do país do mesmo.

“user_tipo”: guarda a informação da tipologia do utilizador relativamente às suas permissões no web site, sendo cada uma delas específicas com um “id” único e com a sua designação associada.

“pais”: consiste na tabela onde está guardada a lista de países e na qual o utilizador pode escolher um deles na sua identificação. Contém como atributos o seu “id” e a designação que lhe associa.

“mensagem”: tabela que guarda os dados relativos às mensagens que podem ser trocadas pelos diferentes utilizadores. Assim os seus atributos consistem no identificador da mensagem “id”, no identificador do utilizador emissor “user_id”, do destinatário “user_destino_id”, no título, corpo e data de envio da mensagem.

“lista contacto”: entidade associada à lista de contactos que cada utilizador possui, sendo armazenado o “id” do contacto registado nessa lista, bem como o “id” do utilizador.

“produto”: armazena a informação de todos os produtos pertencentes a um utilizador registado. Os atributos que lhe associam estribam-se no seu “id” exclusivo, nome, descrição, tipo permuta do produto, identificador do seu utilizador e da categoria a que pertence, data de publicação, estado de transferência em que se encontra o produto, preço, imagem e quantidade, no caso específico dos produtos referentes ao Merchandising.

“categoria”: lista de designações de diferentes categorias que caracterizam os produtos. Cada produto está relacionado com uma determinada categoria. Deste modo, esta entidade detém os atributos de identificação única “id” e o seu nome específico.

“likes”: tabela de relação m:m entre a entidade user e produto. Nesta encontram-se registados o identificador do user e do produto, bem como a data desta ação.

“comentário”: tabela que abrange os comentários feitos pelos utilizadores a um determinado produto. Os seus atributos compreendem o seu identificador único, do user e do produto, o texto relativo ao comentário e ainda a data em que este foi realizado.

“wishlist”: tabela de relação m:m entre a entidade user e produto, onde são armazenados os produtos elegidos por um utilizador. Nesta, encontram-se registados o identificador do user e do produto.

“proposta”: entidade que representa a lista de propostas que cada utilizador pode fazer a um produto pertencente a outro utilizador, sendo constituída pelos seguintes atributos: identificador único da proposta, do user e do produto, o texto relativo à proposta em si, data, o valor e o estado da proposta.

“lista_compra”: entidade que compreende o seu identificador, o do user e a data relativa à compra. Esta aplica-se somente na lista de compras com produtos que dizem respeito ao Merchandising.

“produto_compra_info”: tabela de relação m:m entre a entidade lista_compra e produto, onde são registados os identificadores de ambas, bem como a quantidade relativa a cada produto, e o preço total da compra.

Apresenta-se de seguida, o diagrama com a estrutura e constituição da base de dados.

Implementação

No presente tópico é apresentado o desenvolvimento associado à implementação das funcionalidades existentes na nossa página web, de acordo com as diferentes tecnologias utilizadas.

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

A aplicação web, por nós desenvolvida, procurou apresentar funcionalidades ao nível de diferentes áreas, nomeadamente do registo, login, página utilizador, página de produto, troca e venda dos mesmos, merchandising, pesquisa e sistema de troca de mensagens. Deste modo, o utilizador pode registar-se como membro desta Retro Comunity/Store' e posteriormente efetuar o login, acedendo à sua página pessoal, onde tem a possibilidade de editar/adicionar as suas informações, editar/adicionar produtos que pretende trocar/vender com os membros da comunidade, ver notificações e trocar mensagens com outros utilizadores. Após o login, o utilizador, pode igualmente, ter acesso aos produtos dos outros utilizadores, exibindo a sua opinião através de “Likes” e Comentários, bem como mostrar o seu interesse em adquirir o produto, através da possibilidade de fazer propostas ao detentor desse mesmo produto, consoante a tipologia de transação pretendida pelo mesmo. O utilizador pode ainda comprar produtos alusivos ao merchandising, adicionando-os a uma lista de compras. É-lhe também permitido efetuar pesquisas relativas a qualquer elemento desta página.

Mapa de páginas

Ao entrar na página web “beRetro”, o utilizador acede diretamente à Página Inicial. Nesta, encontra uma área com “Produtos Recentemente Adicionados” e uma pequena alusão à forma como estes podem ser partilhados entre os diferentes utilizadores, nomeadamente através de “Venda/Compra”, “Troca” e ainda “Troca e Venda”. Esta página inclui também, uma zona de navegação que lhe permite aceder a outras, tais como, “Produtos”, “Merchandising”, “Help”, “Sobre” e ainda “Pesquisa”. A Página “Produtos” expõe todos os produtos adicionados pelos diversos membros desta comunidade, sendo esta visualização facilitada através da zona de filtragem existente no início da mesma. Cada um dos produtos, pode ser visualizado ao pormenor, através da página “produtos_detalhe”. A Página “Merchandisig” exibe todos os produtos relacionados com a marca beRetro. Tal como em Produtos, esta possui uma zona de filtragem, assim como a possibilidade de visualização particularizada do produto através da página “merchandising_detalhe”. A Página “Help” ajuda o utilizador a compreender o funcionamento do site, de acordo com as respostas a algumas questões frequentes. A Página “Sobre” apresenta o conceito da nossa “Retro Comunity/Store”. A Página “Pesquisa” apresenta os resultados relacionados com a pesquisa efectuada pelo utilizador, no espaço definido na barra de navegação. Em todas as página de beRetro, o utilizador pode proceder ao seu registo, a partir do “Ribbon Central” que se encontra no topo central da página, o que o possibilita ter uma “Página Pessoal”, e após o login poder fazer “Comentários”, “Likes” e “Propostas” aos diversos produtos de outros utilizadores. A partir da Página Pessoal, o utilizador pode ter acesso a outras quatro páginas: “Dados Pessoais”, onde os pode editar/adicionar; “Notificações” que apresenta avisos relativos a comentários, likes e propostas que tenha recebido; “Mensagens” onde pode falar diretamente com os membros da comunidade e ainda “Meus Produtos” onde se encontram os seus produtos. Aqui pode ter acesso a outras duas páginas. Caso este queira ver/editar as informações referentes a cada um deles, deve encaminhar-se a “Ver Produto”. Caso pretenda adicionar novos, deve ir a “Novo Produto”.

Server Behaviours utilizados

Neste tópico são mencionados os server behaviours usados na nossa plataforma web, de acordo com a nomenclatura de implementação automática do Dreamweaver. No entanto, nenhuma das funcionalidades existentes foi executada com a ajuda destes mecanismos, uma vez que toda a programação é “hand made”. A seguinte lista enuncia alguns dos server behaviours implementados.

Insert Record – behaviour que permite inserir dados na Base Dados, como por exemplo, informações relativas aos nossos produtos.

Update Record – behaviour que permite atualizar dados existentes na Base de Dados, como por exemplo, alterar as informações pessoais dos utilizadores.

Dynamic Text – behaviour que permite mostrar os dados armazenados na Base de Dados.

Dynamic Text Field – behaviour que permite a introdução de dados a partir dos formulários existentes, que são dinamicamente armazenados na Base de Dados.

Repeat Region – behaviour que permite reutilizar porções de código de forma a repetir determinadas ações, tais como a apresentação de comentários, produtos, propostas, entre outros.

Show if Recordset is Empty – behaviour que permite a apresentação de avisos aos utilizadores, em situações como por exemplo a ausência de produtos na sua página pessoal.

Restrict Access To Page – behaviour que permite tornar o acesso restrito a determinados utilizadores, como por exemplo a disposição a uma página pessoal mediante o registo do utilizador.

Display Record Count – behaviour que permite mostrar apenas um certo número de elementos, provenientes de um total, existente na Base de Dados.

Display Total Records – behaviour que permite mostrar o total de dados existentes na Base de Dados, relativos aos parâmetros definidos pela Query.

User Authentication – behaviour que permite o registo, login, logout e as condições associadas de verificação.

Recordsets/Queries utilizados

De forma a permitir o acesso à Base de Dados, foram invocadas algumas Queries que possibilitam a seleção, inserção e manipulação dos dados existentes dinamicamente na plataforma. Assim, seguidamente, são enunciados alguns exemplos de Queries, bem como referenciado a sua finalidade.

- SELECT * FROM user WHERE username = '%s'", $user_name Seleciona toda a informação respectiva a um utilizador, por exemplo nome, data de nascimento, email, entre outros.

- INSERT INTO produto (produto_nome, produto_descricao, tipo_produto, categoria_id, data_publicacao, produto_estado, user_id, produto_preco, produto_imagem, quantidade) VALUES ('%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s')" utf8_decode($_POST['prod-nome']), utf8_decode($_POST['prod-descricao']), utf8_decode($_POST['prod-tipo']), utf8_decode($_POST['prod-categoria']), utf8_decode($_POST['prod-data']), utf8_decode(1), utf8_decode($_SESSION['user_id']), utf8_decode($_POST['prod-preco']), utf8_decode($produto_imagem), utf8_decode($_POST['prod-unidades']))

São inseridos na tabela produtos, os valores preenchidos no formulário, respectivos aos campos onde estes serão introduzidos.

- UPDATE user SET password='%s' WHERE id_user='%s', utf8_decode($_POST['password_nova']), utf8_decode($row_user['id_user']));

Na tabela “user” é atualizado o valor da password, onde o “id_user” corresponde a ($row_user['id_user'].

- DELETE FROM comentario WHERE id_comentario = '%s', utf8_decode($_GET['eliminarcomentario']));

Na tabela “comentário” são eliminados todos os valores das colunas respectivas ao “id_comentário” = “$_GET['eliminarcomentario']”.

Parâmetros passados entre páginas

A passagem de parâmetros entre as diferentes páginas foi realizada a partir de três métodos distintos: “POST” e “GET”, associados à passagem de valores por url, e ainda através de “Session” que permite preservar dados ao longo de acessos continuados por um utilizador ao site. Por exemplo, o método “GET” foi utilizado na passagem de valores entre as páginas “meus_produtos” e “produtos_detalhes”; o método “POST” foi usado na passagem de valores referentes à inserção de dados do utilizador, do formulário “form-registo” para a base de dados. O método “Session” permite mostrar a página do utilizador consoante o reconhecimento do mesmo através do login.

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

De forma a melhorar a experiência de utilização da plataforma, foi usado CSS3 e jQuery, uma framework de JavaScript.

Relativamente ao CSS3, foram utilizadas propriedades ao nível das transições, múltiplas imagens de fundo, opacidade, sombras, entre outros, tal como é apresentado nos exemplos que se seguem:

Transitions: “ transition: all 0.7s ease 0s; ”

Multiple Backgrounds: “ background: url(../images/box_top_dot.jpg) left 5px repeat-x,url(../images/box_bottom_dot.jpg) repeat-x bottom left, url(../images/body_bg.jpg) left top repeat; ”

Border-radius: “ -moz-border-radius: 5px; ”

Text-Shadow: “ text-shadow: 0px 0px 5px #000; ”

RGBA Colors: “ background: rgba(51,51,51, 0.0); ”

Opacity: “ opacity: 1; ”

No que diz respeito ao jQuery, o grupo utilizou esta framework para a validação de formulários do lado do cliente, como complemento à validação do lado do servidor. Esta tecnologia foi igualmente usado para assegurar o bom funcionamento do “Ribbon Central”, na medida em que, durante o processo de login, este se mantém na posição correta, não desaparecendo do ecrã, aquando da saída do rato. O seguinte código mostra a implementação desta particularidade.

 $('#username').focus (function() {
 $("#header-top").addClass("header-open");});

 $('#username').focusout (function () {
 $("#header-top").removeClass("header-open");});

Desenvolvimentos Futuros

No que diz respeito a desenvolvimentos futuros, o grupo gostaria de alcançar todos os objectivos definidos no primeiro instante, aquando a definição das funcionalidades da aplicação Web, referidas no ponto acima deste presente relatório. Desse modo, pretendia-se ver implementado a wishlist, o merchandising, sistema de troca de mensagens, notificações, melhorias a nível de segurança, acessibilidade, filtragem de informação, interação incorporando AJAX, adaptação do design da aplicação para diferentes dispositivos, tais como mobile, tablets, etc, optimização do código, de forma a melhorar o seu desempenho, e a realização de testes de usabilidade.

Conclusões

A implementação da plataforma beRetro, permitiu ao grupo, perceber a dimensão e a envolvente de uma aplicação web 2.0. Na realidade, não é um processo fácil e exige uma grande dedicação por parte de todos os elementos que constituem a equipa, para que os resultados sejam satisfatórios e os objetivos atingidos. No nosso caso em particular, nem todos foram cumpridos, visto que nem todas as funcionalidade foram implementadas. No entanto, com o desenvolvimento deste projeto, o grupo pôde pôr em prática e desenvolver os conhecimentos adquiridos ao longo do semestre, na unidade curricular de Laboratório Multimédia 5, enriquecendo assim a sua experiência no que diz respeito a esta temática da web, caracterizando-se num universo amplo, bastante competitivo e onde a inovação é já uma particularidade bastante difícil de se conseguir, mas que consegue fazer toda a diferença entre os utilizadores de todo o mundo.