Capítulo 4 Implementação do Sistema
4.2. Web Service
4.2.2. EditEvent
O método EditEvent é o método responsável por fazer alterações aos eventos já existentes, quer seja nome, localização, data ou até os parâmetros adicionais. Este método, Figura 20, começa como o método anterior, por verificar se o utilizador tem sessão válida iniciada. Se a sessão for válida procura-se então pelo evento a modificar e caso este exista, e o valor das novas coordena-
das e o novo nome não forem null, pois são parâmetros necessários para um evento para o
evento, caso o novo nome para o evento não exista na base de dados, o método procura por todos os parâmetros associados ao evento com o id do evento a editar e altera os existentes pelos novos parâmetros inseridos pelo utilizador. No caso de tudo ser efetuado sem nenhum erro o método devolve o valor "1" caso contrário o valor "-1".
31
4.2.3.EnrollEvent
Para um utilizador se inscrever num evento é necessário utilizar o método EnrollEvent, Figura
21. Neste método após fazer a verificação da sessão, conforme descrito na secção 4.2.1, é
necessário dividir o objeto JSON recebido em dois parâmetros, o id do utilizador a inscrever e o
id do evento no qual o utilizador se vai inscrever. De seguida é necessário procurar se o utiliza- dor e o evento com os ids obtidos existem na base de dados, caso algum destes não se encontre
na mesma, é devolvido a mensagem "user or event not found". Caso existam, é ainda necessá-
rio verificar se o utilizador está já inscrito no evento. Se este se encontrar inscrito no evento é devolvido a mensagem "user already in event", caso contrário o utilizador é inscrito no evento.
32
4.2.4.FBUserLogin
Quando o utilizador faz o login no sistema utilizando o Facebook o método utilizado é o FBUser-
Login, Figura 22. Neste método é verificado se o utilizador já existe na base de dados e caso não exista é adicionado um novo utilizador. No final é sempre iniciada a sessão para o utilizador.
Dado que ambos os clientes, web e móvel utilizam a API do Facebook para realizar o login, a
autenticação é feita pelo Facebook, sendo apenas necessário adicionar utilizadores e iniciar ses- são.
Figura 22 - FBUserLogin
33
4.3. Aplicação Web
A aplicação web foi desenvolvida utilizando a linguagem de markup HTML5, CSS, JavaScript e
jQuery. As principais funcionalidades da aplicação web são efetuar login através do Facebook,
criar eventos, inscrever em eventos, comentar eventos existentes, editar eventos criados, fazer a monitorização dos utilizadores registados nos eventos e verificar lista de utilizadores registados num evento.
A aplicação web está “fisicamente” estruturada, conforme se pode visualizar na Figura 23, da
seguinte forma: as páginas públicas, acessíveis sem ter sessão iniciada, encontram-se no diretó-
rio raiz da página; as páginas privadas ficaram na pasta "admin_pages"; todos os ficheiros
JavaScript encontram-se na pasta "js"; os ficheiros CSS encontram-se na pasta "styles_folder"; e
todas as imagens utilizadas na aplicação web ficaram na pasta "images". Na pasta "js" encon-
tram-se ainda 2 outras pastas, a pasta "maps" e a pasta "plugins" que contêem o plugin do
Google Maps e alguns plugins de jQuery, respetivamente.
Figura 23 - Estrutura da Aplicação Web
A aplicação é composta por 10 páginas diferentes, "index" , "createevent", "EventList", "elapse- devents", "futureevents", "my_events", "eventdetails", "edit_event", "eventusers" e "livemonito-
34
ring". A implementação e funcionalidades de cada uma destas páginas serão descritas nas sec- ções seguintes deste documento.
Todas as páginas da aplicação web são carregadas e sendo de seguida feitos pedidos ao servi-
dor de modo a construir as páginas com a informação relevante, como por exemplo, os detalhes de um evento ou a lista de eventos.
4.3.1. Index
A página "index", Figura 24, é a página onde a aplicação web inicia. Nesta página é possível ao utilizador realizar o login na aplicação, visualizar eventos existentes através de um mosaico com
uma interface visual do estilo metro do Windows8, e navegar para as outras páginas através da
barra de menu ou através do painel de controlo.
Figura 24 - página index sem login efetuado
O utilizador pode realizar o login na aplicação clicando apenas no botão superior direito e utili-
zando o Facebook para o realizar. Ao clicar no botão de login, Figura 25, a aplicação faz um
pedido de utilizando a função FB.login(function,{scope:""}) da API do Facebook, pedindo permis- sões para aceder ao email do utilizador, para publicar em nome do utilizador e para aceder ao
aniversário, bem como a outras informações como o nome e o username do utilizador. Após o
pedido ser realizado com sucesso é feito um pedido POST, para o método FBUserLogin do web service enviando os dados do utilizador, de modo a iniciar a sessão no servidor.
35
Figura 25 - Função login
Após realizar o login, aparece na página principal o painel de controlo e o botão de login desapa-
rece para dar lugar a uma label onde aparece o nome do utilizador e um botão para realizar o
logout da aplicação, conforme se pode visualizar na Figura 26. Nesta página é também possível
ao utilizador fazer um "Gosto" ou comentar a aplicação no Facebook através do plugin social do
Facebook.
36
4.3.2.Create Event
A página "Create Event", Figura 27, é a que permite ao utilizador criar um evento. Quando a
página acaba de carregar é realizado um pedido ao servidor para obter todas as categorias dis- poníveis para atribuir a um evento., Quando a resposta do servidor chega são então adicionadas a uma lista todas as categorias obtidas.
Figura 27 - Página Create Event
À medida que o utilizador vai preenchendo os campos da localização do evento é apresentado um mapa ao utilizador de modo a permitir que este verifique se a localização escolhida para o evento é a correta e se não existe nenhum erro, Figura 28.
Figura 28 - Mapa para verificar localização do evento
A função desenvolvida para a realização desta tarefa foi a função RefreshMap(), realizada quando
ocorre um evento de alteração de um campo do formulário, que realiza um pedido GET ao servi-
dor da Google Maps com o endereço "http://maps.google.com/maps/api/ geoco-
de/json?address=<params>", enviando como parâmetros os inseridos pelo utilizador. A resposta enviada pelo servidor é um objeto JSON com a latitude e a longitude associada a essa localiza-
37
ção, caso a localização não seja encontrada é lançado um alerta com a mensagem "Location not
found".
O utilizador pode também nesta página escolher fazer o upload de fotos para o evento e escolher adicionar mais parâmetros ao evento que aqueles presentes no formulário para tal clicando no sinal de mais, Figura 29.
Figura 29 - Escolher ficheiros e adicionar parâmetros
Ao clicar no sinal mais é apresentado ao utilizador o ecrã da Figura 30, onde o utilizador pode inserir o nome do parâmetro a inserir.
Figura 30 - Add new Information
Após inserir e clicar em adicionar informação nova, o novo parâmetro é adicionado ao formulá- rio, Figura 31.
Figura 31 - Novo Parâmetro
Após o utilizador preencher o formulário pode clicar no botão Submit para criar um evento. Caso este pedido seja realizado com sucesso é apresentada uma mensagem de sucesso no ecrã,
utilizando a função jQuery animate(), que altera a posição atual da mensagem que se encontra
fora do ecrã, para uma posição visível no fundo deste, Figura 32, indicando que tudo correu como esperado; caso contrário, é apresentada uma mensagem de erro, Figura 33.
38
Ao botão Submit está associado um handler para quando o utilizador clicar no botão realizar o
pedido ao servidor. Esta função, Figura 34, começa por construir um objeto JSON utilizando todos os parâmetros inseridos pelo utilizador, e de seguida realiza um pedido ao servidor do Google Maps de modo a obter a latitude e longitude da localização adicionando esses valores ao
objeto JSON. Finalmente, é realizado então um pedido POST ao método CreateEvent do web
service. Sendo a resposta diferente do valor "-1", é mostrada a mensagem de sucesso, é feita
uma publicação no Facebook, Figura 35 e no final é feito o upload das imagens do evento atra-
vés de um pedido POST para o método uploadimage.
39 Figura 35 - publicação no Facebook
4.3.3.Event Details
A página Event Details é a página de cada evento, onde é possível ao utilizador verificar os deta- lhes do evento selecionado, as fotos(Figura 36), a localização(Figura 37) e os parâmetros adicio- nais, é também possível aos utilizadores comentarem cada evento através do Facebook, Figura 38. É neste ecrã que é feita a inscrição de um utilizador num evento.
Figura 36 - Página do Evento (Título e fotos)
40
Figura 38 - Página do Evento (Informação adicional e comentários)
Esta página é construída de acordo com o evento em questão, ou seja, durante o carregamento da página é feito um pedido ao servidor para obter os detalhes do evento, de seguida é necessá- rio obter o endereço das coordenadas associadas ao evento, para isso é realizado um pedido ao Google Maps no endereço "http://maps.googleapis.com/maps/api/geocode/json?latlng= {lat,lng}" que devolve um objeto JSON com o endereço. Tendo esse pedido sido realizado com
sucesso é então inicializado o mapa com a localização do evento. Por fim é feito o download das
imagens do evento através do método getImage.
Para implementar o slideshow das imagens dos eventos foi utilizado o plugin jQuery flexslider
[14]. O fluxograma de funcionamento do carregamento desta página pode ser visualizado na Figura 39.
41
Para a inscrição do utilizador num evento é feito um POST utilizando o método EnrollEvent e
enviando os dados do utilizador, caso este pedido seja bem sucedido é mostrada uma mensa- gem de sucesso, Figura 40, caso contrário é mostrada uma mensagem de erro, Figura 41.
Figura 40 - Mensagem de inscrição com sucesso
42
4.3.4. My Events
A página My Events é responsável por mostrar ao utilizador todos os eventos criados pelo pró-
prio. Esta página começa por fazer um pedido GET ao servidor utilizando o método getEvent-
FromOrg que retorna um array JSON contendo todos os dados dos eventos criados pelo utiliza- dor. Na tabela da Figura 42 são mostrados os eventos, o número de utilizadores em cada even- to, a data de realização de um evento e a localização.
Figura 42 - Tabela dos eventos criados pelo utilizador
A última coluna da tabela é onde se encontra um botão que abre um menu que permite ir para
uma das seguintes páginas, "eventusers", "edit_event", "livemonitoring" e a página do próprio
evento, Figura 43. A tabela da Figura 42 foi implementada utilizando o plugin jQuery dataTables
[15].
43
4.3.5. Event Users
Na página Event Users o utilizador pode consultar quais os utilizadores inscritos num evento e
alguns dos seus dados, como por exemplo, o email ou a data de aniversário, ver a Figura 44.
Figura 44 - Utilizadores inscritos no Evento
4.3.6. Live Monitoring
Na página Live Monitoring é possível ao organizador do evento ver a posição dos utilizadores
inscritos no evento caso estes tenham o atributo visibility como "true", Figura 45. Esta funciona- lidade é possível em qualquer altura do evento e só é possível obter posições atualizadas caso os utilizadores tenham a aplicação Android a correr.
44
Esta página começa por inicializar o mapa do Google Maps, de seguida efetua um pedido ao servidor para obter os detalhes do evento em questão. Após receber a resposta do servidor é adicionado um marcador (marker) na posição correspondente à localização do evento. Finalizada a ação anterior, é feito um novo pedido ao servidor, desta vez para obter os utilizadores inscritos no evento e as suas posições, sendo por fim adicionados os marcadores correspondentes a cada
utilizador e de seguida inicializado um temporizador para fazer o refresh das posições de 10 em
10 segundos. O fluxograma desta página pode ser visualizado na Figura 46.
45
4.3.7. Edit Event
Esta página permite ao organizador do evento editar o evento em questão, dando a possibilidade de alterar o nome do evento, a localização a data e a hora de início e as informações adicionais, Figura 47.
Após o utilizador fazer as alterações e clicar no botão submit é apresentada uma mensagem de
sucesso caso as alterações tenham sido realizadas com sucesso ou uma mensagem de erro caso tenho ocorrido um erro.
46
4.4. Aplicação móvel
A aplicação móvel deste sistema foi desenvolvida utilizando o IDE Eclipse com o ADT plugin da
Google, este plugin permite o acesso às APIs para o desenvolvimento de uma aplicação Android.
A aplicação YourEvent permite aos utilizadores fazerem o login utilizando o Facebook, sendo
direcionados logo de seguida para o mapa do próximo evento no qual estão inscritos, onde podem ver a sua própria localização bem como a localização de outros utilizadores que estão inscritos no mesmo evento. Cada utilizador pode ainda aceder aos detalhes do evento, do orga- nizador do evento e do próprio utilizador.
Esta aplicação está dividida em 5 atividades; LoginActivity; MapScreen; ProfileDetails; EventDe-
tails e SettingActivity.
As classes implementadas para a criação desta aplicação foram as representadas na Figura 48. As classes BallonItemizedOverlay, BaloonOverlayView e customItemizedOverlay são responsáveis pela criação de um balão personalizado, Figura 49, ou seja, um balão diferente daquele pré definido pela API da Google. Estas classes são também responsáveis pela gestão de eventos de clique no balão.
Figura 48 - Classes da aplicação Android
Figura 49 - Balão personalizado
É na classe Constants que são guardadas e declaradas todas as constantes e variáveis globais
usadas no sistema. A classe BaseRequestListener é a responsável por implementar os Listeners que são chamados quando ocorre um evento de login utilizando a API do Facebook. As classes SettingActivity, ProfileDetails, MapScreen, EventDetails e LoginActivity são as responsáveis pela implementação das atividades da aplicação.
47 O diagrama de classes da aplicação móvel é o presente na Figura 50.
Figura 50 - Diagrama de classes da aplicação Android
A relação entre as classes BallonItemizedOverlay, BaloonOverlayView e customItemizedOverlay estão descritas na Figura 51.
48
A relação entre as classes MapScreen, Constants, LoginActivity e BaseRequestListener estão descritas na Figura 52.
Figura 52 - Relação entre as classes MapScreen, Constants, LoginActivity e BaseRequestListener
As classes EventDetails, ProfileDetails e Settings Activity não possuem relações entre si conforme se pode ver no seu diagrama de classes na Figura 53.
49 O fluxo da aplicação móvel pode ser visto na Figura 54.
50
4.4.1. Atividade LoginActivity
Quando o utilizador inicia a aplicação YourEvent esta começa pela atividade LoginActivity (Figura
55).
Figura 55 - Aplicação YourEvent (LoginActivity)
O objetivo desta atividade é realizar a autenticação do utilizador fazendo uso da biblioteca do Facebook para Android [16]. Para tal é necessário ter uma aplicação criada no site do Facebook Developers (https://developers.facebook.com/apps/). Após criar com sucesso a aplicação é
fornecida um APP_ID, Figura 56, que permite ao Facebook identificar a aplicação que está a
51
Figura 56 - Aplicação YourEvent no Facebook Developers
O ciclo de vida de uma atividade começa pela função onCreate(), conforme podemos verificar no fluxograma da Figura 57, esta função começa por definir o layout da atividade indo de seguida inicializar todos os handlers necessários.
52
Nesta atividade o utilizador apenas tem a possibilidade de realizar o login ou fechar a aplicação, se o utilizador clicar no botão para realizar o login é chamada a função loginToFacebook(), que é responsável por fazer o pedido utilizando funções da biblioteca do Facebook.
Como se pode ver no fluxograma da Figura 58, a função começa por obter as preferências guar-
dadas no dispositivo móvel pela aplicação do Facebook, onde se encontram guardados o Access
Token para esta aplicação e o tempo de sessão, de seguida verifica se o Access Token não é null
e, caso não seja é guardado o Access Token existente para acesso à API do Facebook. Se o
tempo de acesso for diferente do valor "0", o valor obtido é atribuído à sessão atual. Após estes
dois passos verifica-se se já existe uma sessão válida no Facebook para a aplicação YourEvent.
Se a sessão for inválida é feito um pedido que autorize o acesso a parte da informação do utili- zador, bem como permissão para publicar em seu nome, indo de seguida guardar as novas preferências, como o novo Access Token e o tempo de sessão.
53
Após o utilizador autorizar a aplicação YourEvent, clicando no botão de permitir aplicação, é rea-
lizado um pedido ao Facebook para obter os dados do utilizador, obtendo um objeto JSON como resposta, Figura 59.
Figura 59 - Objeto JSON enviado pelo Facebook
Ao receber a resposta do Facebook a atividade executa a AssyncTask postFbLogin. A AssyncTask
é uma tarefa que funciona em background, ou seja, não corre na UI (User Interface), e é respon-
sável por fazer um pedido POST ao web service utilizando o método FBUserLogin. Enquanto o
pedido é feito ao servidor é mostrado ao utilizador a mensagem da Figura 60. Finalizado o pedi- do é lançada a atividade seguinte MapScreen e é terminada a atividade atual.
54
Enquanto o utilizador estiver nesta atividade o utilizador pode também fechar a aplicação o que leva à atividade LoginActivity entrar na função onDestroy().
4.4.2. Atividade MapScreen
A atividade seguinte é a MapScreen. Conforme se pode ver na Figura 61, esta atividade tem o
objetivo de mostrar a localização do utilizador, a localização do evento e a localização dos restan- tes utilizadores inscritos no evento. O evento é marcado com o ícone verde, enquanto que o utilizador é marcado com o ícone cinzento escuro e os restantes utilizadores são representados com o ícone cinzento claro, ver a Figura 61.
Figura 61 - Aplicação YourEvent (MapScreen)
Neste ecrã o utilizador pode clicar em cada um dos ícones de modo a descobrir quem, ou o que, é cada um. Se clicar num dos ícones cinzentos irá abrir um balão com o nome, a foto e o email daquele utilizador, Figura 62; caso clique no ícone verde irá abrir um balão com a foto do even- to, o nome, a data e a hora, Figura 63.
55 A Figura 64 representa o fluxograma da função onCreate() da atividade MapScreen. Esta função
começa por definir o layout desta atividade e adicionar um menu na ActionBar 1 da atividade. A
atividade executa de seguida um conjunto de AsyncTask de modo a obter qual o evento a mos-
trar, os detalhes do evento e os utilizadores. Após receber as respostas dos pedidos é inicializado o gestor de localizações do Android e definido o critério de escolha do provedor da localização: o
que menos consuma bateria. De seguida é executada uma outra AsyncTask para obter a locali-
zação das coordenadas do evento e é inicializado o objeto MapView. Após a obtenção dos dados
são criados os overlays para cada utilizador e evento.
Figura 64 - Fluxograma da função onCreate da atividade MapScreen
1
ActionBar é a barra da aplicação onde estão colocados o nome da atividade, os botões de menu e o
56
Cada vez que ocorra uma alteração na posição atual do utilizador é feita uma atualização às
posições de todos os utilizadores. Nesta atividade existe também uma thread responsável por
obter as novas posições dos utilizadores que é executada a cada 5 minutos, tendo sido utilizado para isso a função Thread.sleep() de forma a que a thread só execute os pedidos ao servidor a cada 5 minutos.
Na atividade MapScreen o utilizador pode navegar para outras atividades através dos botões
presentes na Action Bar ou através das setas nos balões, tanto dos utilizadores como do evento. Estas atividades apresentam os detalhes do utilizador ou do evento dependendo da atividade iniciada.