Beeogarden
“Beeogarden” é um projeto desenvolvido no âmbito académico, cujo tema central se encontra relacionado com a preservação e proteção de espécies polinizadoras que, atualmente, se encontram em risco.
Introdução
Beeogarden é uma aplicação que facilita a criação de uma comunidade em torno de uma motivação comum para a ajuda do ambiente, que dá aos seus membros ferramentas para ajudar a proteger os agentes polinizadores. Mais concretamente, ao incluir uma loja que disponibiliza produtos desenhados para ajudar os agentes polinizadores, um sistema de registo de campos e uma rede de relações entre utilizadores.
Design e organização
Identidade
Numa fase inicial do projeto em causa, dedicámo-nos à criação de uma identidade visual que fosse capaz de representar não só a nossa aplicação como conceito mas também a atitude que pretendíamos que esta refletisse. Tendo em conta que o nosso foco principal seria a ajuda das abelhas, tirámos grande parte da nossa inspiração destas.
Assim, optámos por utilizar um esquema de cores simples, composto por tons neutros como preto, branco e algumas variantes de cinzento, acompanhados por uma cor de destaque. Neste caso selecionámos um tom de amarelo que nos lembra as colmeias das abelhas.
Relativamente à construção das nossas interfaces, tentámos manter uma certa consistência na forma como apresentamos os nossos elementos. Assim tomámos em consideração detalhes como os tamanhos e pesos das letras, a disposição de elementos semelhantes em páginas diferentes e mesmo micro-interações, principalmente em ecrãs de computador.
Por fim, selecionámos uma família de fontes que nos pareceu adequada, tanto pela sua versatilidade como pela sua legibilidade. Esta conta ainda com o pormenor de ter serifas que se assemelham a alguns aspetos da fisionomia das abelhas.
Organização da solução
Tendo em conta os nossos diversos objetivos, e mantendo em mente a satisfação dos nossos futuros utilizadores, configurámos o nosso projeto segundo o seguinte esquema:
Ao entrar na nossa aplicação, o primeiro ecrã que surge apresenta ao utilizador a possibilidade de realizar o login ou de efetuar um novo registo. A partir deste ponto, e assumindo que a autenticação se verificou corretamente, o utilizador é redirecionado para a página do seu perfil. Nesta página o utilizador passa a ter acesso a uma variedade de funcionalidades, que se encontram enumeradas nas barras de navegação. Em primeiro lugar, estão as páginas ranking e informações, sendo que a primeira contém informações relativas aos beeopoints de todos os utilizadores da aplicação e a segunda inclui um conjunto de factos informativos sobre abelhas, plantas e assuntos semelhantes, que podem ser explorados com maior profundidade com um click. Em segundo lugar, o utilizador poderá também aceder a um espaço onde é possível alterar algumas das definições da sua conta, tal como o seu nome de utilizador ou foto de perfil. De seguida, está também ao dispôr uma ligação à loja, na qual se encontram expostos todos os produtos disponíveis para compra. Esta pode ser efetuada a título próprio, ou seja, o utilizador pode comprar um produto para si mesmo, ou segundo o sistema de pay-to-plant, que permite a utilizadores que não tenham um espaço pessoal disponível para a plantação de sementes enviarem as mesmas para alguém que tenha registado um beeogarden na aplicação. Assim, todos os membros têm a possibilidade de registar um espaço que tenham disponível para plantação na aplicação, através da página registar beeogarden, de modo a que este seja elegível para receber sementes de outros utilizadores. Este espaço poderá ser registado como público caso se trate de um local aberto ao público ou, caso contrário, privado. Após vizualizar os produtos detalhadamente e selecionar alguns para compra, o utilizador poderá vizualizá-los na página do carrinho, que se encontra presente na maior parte das páginas. Ao enviar produtos para um determinado campo ou ao receber produtos para o seu próprio campo, o utilizador passa a ter acesso a uma zona de chat acessível a partir do perfil, na qual poderá entrar em contacto com os donos do campo para o qual enviou sementes ou com os contribuidores do seu próprio beeogarden. Na interface de chat o utilizador terá também a possibilidade de, caso ache necessário, denunciar ou bloquear o utilizador com quem partilha a conversa. Por seu turno, todos os campos registados encontram-se associados a um feed, no qual, caso estes sejam privados, os seus contribuidores poderão publicar texto e imagens. No caso dos beeogardens públicos, o seu perfil será visível para todos os utilizadores. Este projeto conta ainda com um mapa, no qual se encontram assinalados os campos públicos que foram registados na aplicação, sendo que estes se encontram expostos para todos os utilizadores.
Interface gráfica da aplicação
No que toca ao desenvolvimento da interface gráfica do projeto em apreço, tivémos o cuidado de mater a coerência ao longo de todas as páginas criadas. Segundo o que nos foi pedido no âmbito académico desta aplicação, desenhámos e implementámos layouts para ecrãs de telemóvel, segundo a ideologia mobile-first, tablet e computador.
Implementação
Tecnologias utilizadas
Para a implementação deste projeto tomámos partido de uma variedade de tecnologias. Primeiramente, de modo a construer a estrutura básica das nossas páginas, utilizámos HTML e CSS. De seguida, para sermos capazes de criar algumas funcionalidades mais dinâmicas como modais e carrosséis de imagens, utilizámos JavaScript e jQuery. No que diz respeito ao desenvolvimento da base de dados do nosso projeto, utilizámos o programa MySQL Workbench, que nos permitiu desenhar a base de dados de forma intuitiva. Por sua vez, usámos PHP para efetuar a ligação entre a nossa aplicação e a nossa base de dados, de modo a tornar as informações apresentadas dinâmicas. Usámos ainda JSON e AJAX para fazer a troca de dados entre JavaScript e PHP em funcionalidades que necessitavam de fazer solicitações assíncronas à base de dados, como é o caso do chat.
Modelo de dados
Para o armazenamento de dados desenvolvemos uma base de dados própria. Esta, de acordo com o seguinte esquema, conta com um conjunto de tabelas que nos permitem organizar as informações necessárias. Deste modo, temos uma tabela utilizador que armazena todas as informações sobre cada um dos utilizadores registados na aplicação, tais como nome de utilizador, email, password, data de criação, biografia, foto de perfil, o seu papel na aplicação, género, se é ou não a primeira vez que efetua login na aplicação e se foi bloqueado por alguém. Por sua vez, a tabela produtos guarda dados relativos a cada produto da loja, como o seu nome, as suas propriedades e o seu preço. Esta encontra-se ligada à tabela de compras, numa relação de muitos para muitos, que regista os dados relativos a compras efetuadas a partir da loja. Alguns valores como a quantidade são registados na tabela de relação criada. Por seu turno, a tabela espaço guarda os dados relativos ao campos registados na aplicação, nomeadadmente o nome, morada, dimensão, tipologia de campo e o número de beeopoints que acumulou. Esta está conectada à tabela posts, que contém as informações sobre as publicações feitas pelos utilizadores. Para além disso, temos a tabela reports, que regista todas as instâncias de denúncia efetuadas. Temos ainda a tabela info, na qual estão os dados relativos aos factos e curiosidades apresentadas na página informações. Já a tabela mensagens serve para guardar os conteúdos de todas as mensagens enviadas, bem como o utilizador de origem, o seu destinatário e a data de envio. Por fim, existem ainda tabelas como a de género e roles que servem como índices de atributos, standardizando a atribuição de valores e ajudando a evitar erros de incompatibilidade.
Estrutura de ficheiros
Em relação à estrutura de organização de ficheiros, optámos por organizar os nossos conteúdos de acordo com as tipologias de conteúdo. Assim, temos uma pasta principal que desempenha o papel de raíz da nossa aplicação e na qual se encontram alojados os ficheiros de formato PHP relativos a cada uma das nossas páginas, bem como os ficheiros CSS e JavaScript principais. Esta está ainda subdividida em várias pastas que contém outros conteúdos do projeto. Em primeiro lugar, temos uma pasta components, que inclui alguns components regulares nos nossos layouts, tais como a barra de navegação e o loader. Por seu turno, a pasta connections aloja o ficheiros responsável por efetuar a coneção entre as páginas PHP e a base de dados. De seguida, a secção scripts na qual estão ficheiros relativos ao processamento e verificação de informações bem como ao desempenho de tarefas. Por fim, a pasta denominada img contém todas as imagens utilizadas ao longo do projeto, acompanhadas das imagens importadas pelos utilizadores através da aplicação.
Metodologias e técnicas aplicadas
Para a concretização do nosso projeto, recorremos a uma variedade de metodologias. Primeiramente, convém mencionar que tirámos partido de algumas funcionalidades nativas do PHP, tais como as variáveis de sessão ($_SESSION) para guardar dados de cada sessão de um utilizador e os métodos de encriptação de palavras-passe (password_hash).
Por seu turno, para a implementação do mapa, utilizámos a API do GoogleMaps, que se encontra escrita em JavaScript. Foi também necessário criar uma função para transformar um array de PHP, composto pelos dados de cada campo público registado na aplicação, em JavaScript de modo a possibilitar a inserção de marcadores no mapa de acordo com as coordenadas de cada campo, bem como uma secção com as informações relativas a este.
No que toca à implementação do chat, foi preciso utilizar ajax. Inicialmente, é feita uma verificação relativa à coneção entre os utilizadores. Caso esta ainda não exista, é criado um novo chat na base de dados. Caso contrário, os conteúdos das mensagens anteriormente enviadas são mostrados na interface. Utilizámos, então, ajax para implementar o envio e a recuperação de mensagens para e a partir da base de dados de forma automática e assíncrona, por forma a mostrar as mensagens em tempo real.
Finalmente, para criar o carrinho, formulámos um processo específico. Assim, quando se adiciona um produto ao carrinho pela primeira vez é criadas uma nova compra na base de dados. Nesta vão ser guardados dados relativos a todos os produtos que, a partir desse momento, sejam adicionados ao carrinho. Uma compra apenas é dada como concluída a partir do momento em que é registada uma data de finalização.
Principais desafios técnicos
No decorrer do desenvolvimento deste projeto, e tendo em consideração os nosso objetivos fundamentais, deparámo-nos com alguns obstáculos. Inicialmente, a aplicação de todos os diferentes ecrãs de forma responsiva revelou algumas dificuldades, pelo que nos levou a dispender de algum tempo extra para a resolução de alguns problemas relativos ao layout. Seguidamente, a implementação de funcionalidades mais complexas como o mapa ou o chat. No caso do primeiro, foi necessário recorrer a uma API do Google Maps, juntamente com a criação de alguns códigos para satisfazer as nossas necessidades. Por sua vez, para completar o chat foi preciso utilizar tecnologias que não foram abordadas no âmbito académico, tais como ajax. Para possibilitarmos aos nossos utilizadores o upload de imagens tivémos também que realizar algumas pesquisas adicionais. Um dos nossos maiores desafios foi a criação e implementação de um sistema de compras complexo funcional, sendo que este deveria permitir diferentes tipos de produtos em diferentes quantidades e com destinatários diferentes.