UA.DeCA.NTC

Transcrição

1 1

2 Protótipo de alta-fidelidade Identificação do Projeto: Criação de um site: OBJETIVOS Esta é a quinta entrega da unidade curricular que consiste no desenvolvimento de um protótipo de alta-fidelidade com os seguintes objetivos: Experimentar e testar as principais funcionalidades e a interface tipo Testar atempadamente o uso das aplicações Fundamentar/validar a opções tomadas na especificação técnica e na especificação gráfica As páginas que não foram desenvolvidas têm a indicação under construction - em construção PROTOTIPAGEM Funcionalidades implementadas: Visualização da informação; Filtragem de informação por tipologias de perfil; Login e registo Home page Upload da imagem de perfil edição do perfil do utilizador registado; Localização das parcerias página das parcerias; Gerir visitas (criar novas e editar existentes) pelo parceiro; Marcar visitas pelo utilizador registado; Inserir comentários perfil do parceiro e item culturas no submenu vegetais. Rodapé com informação visível Funcionalidades a implementar: Preenchimento de dados do perfil do parceiro edição do perfil do parceiro. Na nossa proposta inicial propusemo-nos fazer a página de edição do perfil do parceiro. Contudo como necessitávamos de fazer upload de fotos, optámos por fazer a do utilizador registado; Propor parceria página das parcerias; As funcionalidades por nós desenvolvidas estão optimizadas para o navegador Firefox. Contudo começamos desde já a testar a aplicação no IE 8 e 9, Chrome e Safari. 2

3 Podemos afirmar que cumprimos os objectivos a que nos propusemos e em alguns casos fomos um pouco mais além, por exemplo na marcação/gestão de visitas às quintas parceiras. Todos os conteúdos inseridos, como por exemplo texto e caminhos para imagens e vídeos, vêm da Base de Dados. Utilizador não registado O utilizador não registado pode visitar as páginas implementadas para consultar e visualizar a informação. Não pode inserir comentários nas páginas já implementadas das quintas/perfil das quintas e na área das culturas. Home page Na home page pode filtrar a atividade recente com o dropdown menu onde estão os diferentes perfis de utilizador, horta de varanda, horta urbana, horta comunitária, horta convencional e curioso. Parcerias Se o navegador suportar os serviços pode visualizar a sua localização atual e as quintas parceiras mais próximas. Para esta funcionalidade recorremos ao API do Google maps e introduzimos markers personalizados com a localização das quintas. 3

4 Utilizador registado Registo de utilizador O utilizador vai poder aceder à área do seu registo em todas as páginas visitadas. Esta área está presente no sidebar lateral direito. Quando o fizer essa área é expandida para exibir os dados necessários para o registo. Na área dos conteúdos é exibido um slide-show de imagens, recorrendo à biblioteca JQuey. Este slide de imagens exibe os diferentes perfis disponíveis com informações relevantes de modo a ajudar o utilizador na correta escolha do seu perfil. A escolha correta do perfil irá posteriormente ser útil na obtenção de informação direccionada para os seus gostos e informação exibida na aplicação. Neste slide de imagens é oferecida a possibilidade de navegação entre as imagens apresentadas e aceder à página relacionada. Os dados requeridos são apenas o nome, (que funcionará como login), palavra-chave, repetição da palavra-chave e do perfil. Temos duas formas de validação dos dados introduzidos. Uma client-side (AJAX) e outra server-side (PHP). 4

5 Durante o processo de registo é utilizado o AJAX para verificar de imediato se o login escolhido ( ) está disponível e se a parte local (antes tem mais do que quatro caracteres. Depois da submissão do formulário o PHP vai verificar se não existem erros, campos vazios, palavra-chave repetida ou repetido. Caso seja detetado algum erro é exibido um alert() javascript contendo o relatório de erros, caso contrário é exibida uma mensagem de sucesso. Depois dos dados serem introduzidos com sucesso o utilizador já pode aceder à aplicação como utilizador registado. Login/logout Em todas as páginas o utilizador tem a possibilidade de fazer o seu login sendo exibida uma mensagem de erro quando algum dos dados está incorrecto. Caso não se recorde da palavrachave tem a possibilidade de pedir a sua recuperação, sendo enviado um automático da administração (admin@terrapura.info) do site para o indicado no registo contendo a palavra-chave. Se estiver em qualquer uma delas e efetuar o seu login permanece na mesma. Caso efetue o logout regressa a home page porque é sinal que vai abandonar a aplicação. O utilizador com uma sessão iniciada pode aceder através de um drop menu, para terminar sessão, ver perfil, editar perfil e editar conta. Neste momento ele já pode editar o seu perfil, adicionando os dados em falta e fazer o upload de uma foto do perfil. 5

6 Durante a criação do registo tentámos utilizar a função do php MKDIR com o parâmetro recursivo true, para serem criadas automaticamente dentro da pasta do utilizador duas pastas, uma com o ID e outra para as fotos. Depois de vários erros e contactos com a administração do servidor fomos informados que por questões de segurança tal não era possível. Sendo assim optámos por acrescentar no final do nome das fotos o id do utilizador. Este nome é guardado na BD. De forma a prevenirmos erros utilizamos a função PHP replace() que elimina do nome das fotos, caracteres especiais por nós indicados e espaços vazios. Utilizamos outra função para eliminar os caracteres em maiúsculas. Temos também implementado um sistema que quando detecta que uma foto tem um nome repetido acrescenta-lhe um número. Desta forma prevenimos erros de inserção de dados na BD. Depois do upload da foto de perfil ela será exibida na sua área personalizada e nos comentários que fizer. Comentários: O utilizador registado pode fazer comentários na área do perfil das quintas e na área das culturas, no submenu vegetais. Estão a ser exibidas pela hora de entrada e com um limite de 10. Posteriormente será implementado um sistema para exibir todas. 6

7 Marcação de visitas O utilizador registado na página do perfil das quintas pode marcar visitas às quintas. Tem acesso a um calendário por onde pode navegar estando os dias com as visitas assinalados a uma cor diferente. Não pode ultrapassar o limite de vagas disponíveis, marcar novamente uma visita para o qual já se encontra registado e submeter uma visita sem vagas. É efectuada uma verificação na BD e exibida uma mensagem JS com o erro detetado. Caso a marcação seja efectuada com sucesso é exibido a caixa de alerta respetiva. O utilizador posteriormente vai poder atualizar as suas marcações quanto ao número de pessoas que marcou, ou até mesmo desmarcar a visita. Parcerias 7

8 No menu de parcerias, tem-se acesso aos projetos aceites. Para escolher uma visita clica em ver perfil onde além de ver as atividades do parceiro e sua produção, também tem acesso a marcar visitas. O parceiro faz a gestão das visitas da sua quinta, disponibilizando os dias, e todas as informações associadas. Pode também posteriormente atualizar a mesma. Neste menu o Parceiro pode gerir as suas visitas. Marcar visitas por parte de um utilizador registado Temos um calendário com o dia atual a negrito e os dias disponíveis para marcação da visita sombreados a verde. 8

9 Quando o número de visitas atingir o limite, o dia de marcação passa de sombreado verde para sombreado a cinzento. Temos setas direcionais para navegar no calendário ao longo dos meses. Ao clicar num dia pretendido, sombreado a verde, temos uma mensagem de feedback a avisar que existem visitas disponíveis. Ao selecionar o dia, acedemos a mais informação relativa à marcação: Nome da visita, breve descrição da visita, horário da mesma, número de vagas disponíveis e sua totalidade e preço unitário. Temos também uma caixa de texto do tipo numérico, onde vamos marcar o número de visitantes clicando no botão Enviar pedido. Abre uma janela de pop-up com feedback de marcação com sucesso. Não é possível marcar nova visita para o mesmo dia, pelo que ao tentar marcar te mos uma janela de pop-up com a mensagem: Este utilizador já tinha marcado esta visita. Gerir visitas por parte do parceiro Um dado parceiro, entra no seu próprio perfil de parceiro, acede à sua quinta em Ver perfil e ao visualizar o menu contendo os 4 links mencionados no item anterior vai escolher Gerir visitas. Aparece o mesmo calendário do item anterior, mas com funcionalidades diferentes. 9

10 Caso pretenda editar dados relativos a um dia já marcado, deve clicar nesse dia e alterar o que for necessário. A visita que estiver a ser editada passara no calendário de verde para amarelo. Tem também a possibilidade de verde para amarelo. alizar as vagas reservadas que estarão no estado de espera. Pode aceitar e reservar as mesmas. Para criar uma nova visita deve: Escolher um dia sem marcação; Dar um nome significativo à visita; Fazer uma breve descrição da visita; Escolher o horário: hora inicial e final (ex: 14h 16h): vamos ter um feedback sobre o formato que tem de ser utilizado (tag html title ) Escolher o nº máximo de visitas para este dia; à semelhança do ponto anterior, temos o feedback do formato. Informar sobre o preço; Ativar a visita; Dia e hora inicial/final o campo data é colocado automaticamente. A hora é inserida manualmente. Quando for editada a visita criada, os campos encontraram-se devidamente preenchidos. 10

11 Visita editável Visita atual Campos inseridos automaticamente Visitas reservadas 11

12 12