Aplicações na Web Relatório Etapa 03

Aplicações na Web
Relatório do Projecto
Etapa 03

Grupo aw017
Outros Cursos

<quinta-feira, 19 de Maio de 2011>

Alunos:

 Diogo Vieira; 37834;

 Eder Lopes; 40571;

 João Baptista; 33374;

 José Fernandez; 39991

Indíce
Indíce ................................................................................................................................................................... 2
1. Introdução........................................................................................................................................................ 3
2. Planeamento.................................................................................................................................................... 4
3. Arquitectura ..................................................................................................................................................... 5
4. Requisitos Estruturais ..................................................................................................................................... 6
5. Requisitos Funcionais ...................................................................................................................................... 7
6. Back-end........................................................................................................................................................... 7
7. Web Service ................................................................................................................................................... 20
8. Front-end (admin e user) .............................................................................................................................. 43
9. Conclusão ....................................................................................................................................................... 53
10. Discussão...................................................................................................................................................... 54
11. Anexos ......................................................................................................................................................... 55

2

1. Introdução

A web é hoje em dia um grande repositório de informação. Com o projecto de Aplicações na Web
pretende-se utilizar esta informação para obter notícias relacionando políticos e indicar a localização
geográfica aonde ocorreu a notícia. O projecto é composto por três componentes principais, um Back-
End aonde é armazenado num SGBD os dados recolhidos da Web, uma interface baseada em Web
Services para aceder á informação da Base de Dados e um Front-End aonde é possivel visualizar as
notícias por local geográfico.

O presente relatório apresenta um planeamento de todo o trabalho a ser realizado. É também abordada
a arquitectura SOA da aplicação, feito um levantamento dos requisitos estruturais e funcionais do
sistema. De seguida aborda-se com detalhe os pormenores do Back-End, os Web Services criados e o
Front-End. No Front-End é apresentado as tecnologias com que foi implementado, os Web Services que
utiliza e aonde são usados e finalmente uma pequena introdução á interface e funcionalidades. São
apresentadas algumas dificuldades tidas na implementação do Back-End, Web Services e Front-End, e
por fim os anexos listam o código desenvolvido para o Back-End, Web Services e Front-End.

3

2. Planeamento

Semana Tarefa Responsável Observações
1
Todos os
2 Fazer relatório Etapa 0 elementos do
grupo
Todos os
3 Entrega da Etapa 0 elementos do
grupo
4 Geo-Net PT Diogo Vieira
4 Power José Fernández
5 Arquivo Web PT Eder Lopes
5 Sapo Verbetes José Fernandez
6 Sapo Voxx José Fernández
7 Publico João Nuno
7 Interface Admin Eder Lopes
8 Entrega da Etapa 1
Web Service Localidade; Web Service Diogo Vieira
9
Cargo; Web Service Comentario
9 Web Service Noticia João Nuno
9 Web service Personalidade Eder Lopes
9 Especificação do Wadl do Web Service José Fernandez
10 Entrega da Etapa 2 Grupo aw017
Esboço do Front-End a utilizar,
10 familiarização com o Google Maps e José Fernández
JavaScript
Inclusão de funções da Api de Google
11 maps, localizações, “drag” e eventos. José Fernández
Depuração do modulo de scraping Voxx
Implementação da parte de apresentação
11 das notícias no Front-End e da parte de Diogo Vieira
actualização da interface após alterações
11 Depuração do Web Service Noticia João Nuno
Implementação do auto-complete,
implementação da apresentação dos
12 políticos, cargos e edições no Front-End; Eder Lopes
API web Service;
Layout Front-End (HTML/CSS)
13 Implementação do Front-End Grupo aw017
Implementação do filtro de datas no
Front-End, Especificação do ficheiro Wadl
13 José Fernández
do WebService. Video da apresentação do
projecto
14 Entrega da Etapa 3 Grupo aw017

4

3. Arquitectura

De seguida apresenta-se a arquitectura SOA do projecto. A recolha da informação é efectuada na
Ontologia Política da Web para obter o nome dos políticos, o Geo-Net PT dá as localidades dos
concelhos de Portugal e a respectiva localização (latitude, longitude). O Sapo Verbetes dá informação
sobre os cargos políticos e o Arquivo da Web, Publico e Sapo Voxx as notícias, com indicação da data e
url. Toda esta informação é armazenada na base de dados sendo disponibilizada como Web Services. O
User Front-End disponibiliza a informação geográficamente recorrendo ao Google Maps, e o Admin
Front-End permite fazer configurações de administrador.

Google Maps Ontologia Politica Web;
User Front-End
Sapo Verbetes

Arquivo da Web; Geo-Net-PT EndPoint
Admin Front-End Publico; Sapo Voxx

INTERNET

Back-End

Web Service Arquivo Scrapper; Verbetes Client Geo Scrapper Ontologia Politica
Publico Scrapper;
Sapo Voxx Scrapper;

MySQL

5

4. Requisitos Estruturais

a) Ontologia de Entidades Politicas:
- Contém informação acerca de personalidades políticas (nome dos políticos)

b) Ontologia Geo-Espacial de Portugal
- Serviço Web que permite receber uma localidade com as respectivas coordenadas geográficas

c) Arquivo da Web Portuguesa
- Arquivo na Web que armazena o histórico de páginas Web portuguesas,

incluindo noticias. A referência a personalidades e datas pode ser obtida por

Web Scraping.

d) Pesquisa de notícias do Publico
- Serviço de pesquisa de notícias do site Web do jornal Publico. A referência a personalidades e
datas pode ser obtida por Web Scraping.

e) Sapo Voxx
- Serviço que permite obter noticia.

f) Sapo Verbetes
- Permite obter informação da designação dos cargos dos políticos

g) Google Maps API
- Permite representar dados geográficos num mapa.

6

5. Requisitos Funcionais

a) Funcionalidades do Web Service a criar
- Relacionar uma personalidade política (sob a forma de noticias) com outras

personalidades politicas, apresentando por exemplo as 10 primeiras

personalidades guardadas no Back-End.

- Fornecer informação geográfica e temporal juntamente com as notícias.

- Permitir receber e apresentar comentários efectuados a notícias

- Registar relações entre personalidades no Back-End.

- Permitir a configuração do sistema Back-End, como por exemplo inserir fonte de

informação, activar/desactivar fonte de informação e alterar parâmetros de acesso.

6. Back-end

6.1. Tecnologias usadas
Para desenvolver os vários componentes do Back-End foi utilizado a linguagem PHP com as
funcionalidades que permitem a ligação ao SGBD MySQL. Assim a extracção de informação da Web foi
efectuada com scripts PHP, utilizando o cURL para obtenção dos dados. Os dados podem ser HTML ou
XML. No caso do HTML a extracção de informação foi efectuada recorrendo a Expressões Regulares. No
caso do XML a extracção foi efectuada recorrendo a funções de parsing. Obtidos os dados, as funções do
MySQL do PHP permitiram a inserção dos dados na Base de Dados.

6.2. Fontes de Informação usadas
Como fontes de informação utilizamos o Arquivo da Web Portuguesa para obter as notícias
através de Web Scraping, o Publico para obter noticias através de Web Scraping, o Sapo Voxx para obter
noticias através de Web Scraping, o Geo-Net para obter o nome de localidades com as respectivas
coordenadas geográficas também com Web Scraping uma vez que não estava a retornar XML, a
ontologia política web para obter o nome dos políticos também por Web Scraping e finalmente o Sapo
Verbetes para obter os cargos dos políticos por parsing de XML.

7

6.3. Estrutura de Dados
Diagrama UML dos dados.

6.4. Componentes Implementados

a) Ontologia Politica da Web

Foi efectuado um script PHP para efectuar a recolha de nomes de políticos da Ontologia Politica
da Web. Para isso foi definida uma query SPARQL que retorna o nome dos políticos. Esta query foi
passada a URL e este URL foi lido. Obteve-se assim uma string cujo conteúdo é uma tabela HTML com o
nome dos políticos. Desta tabela foram retirados os nomes dos políticos recorrendo a Expressões
Regulares, sendo depois inseridos na base de dados.

URL de input:

http://xldb.di.fc.ul.pt/power/sparql?default-graph-
uri=http%3A%2F%2Fpower.xldb.di.fc.ul.pt&query=PREFIX+power%3A+%3Chttp%
3A%2F%2Fxldb.di.fc.ul.pt%2Fxldb%2Fpublications%2F2010%2Fpower.owl%23%3
E%0D%0ASELECT+%3Fname+WHERE+%7B%0D%0A+%3Fentity+a+power%3APolitician+.
%0D%0A+%3Fentity+rdfs%3Alabel+%3Fname+.%0D%0A%7D+order+by+%3Fname+%0D%
0A&format=text%2Fhtml&debug=on

Página Web correspondendo ao URL:

8

Output obtido na Base de Dados:

9

b) Geonet-PT

A localização geográfica e nome das principais cidades do país foram obtidos num script PHP, o
qual leu um URL obtido após execução de uma query SPARQL ao Geo-Net. O URL carrega uma tabela
HTML com o nome das cidades, a latitude e longitude respectivas. Usando Expressões Regulares obteve-
se o conteúdo desta tabela o qual foi inserido na base de dados.

URL de input:

http://xldb.di.fc.ul.pt/geonetpt02/sparql?default-graph-
uri=http%3A%2F%2Fgeonetpt02.xldb.di.fc.ul.pt&query=PREFIX+dcterms%3A+%
3Chttp%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%3E%0D%0APREFIX+geo%3A+%3Chttp%
3A%2F%2Fwww.w3.org%2F2003%2F01%2Fgeo%2Fwgs84_pos%23%3E%0D%0APREFIX+gn%
3A+%3Chttp%3A%2F%2Fxldb.di.fc.ul.pt%2Fxldb%2Fpublications%2F2009%2F10%
2Fgeo-
net%23%3E%0D%0APREFIX+gnpt%3A+%3Chttp%3A%2F%2Fxldb.di.fc.ul.pt%2Fxldb%
2Fpublications%2F2009%2F10%2Fgeo-net-
pt%23%3E%0D%0APREFIX+gnpt02%3A+%3Chttp%3A%2F%2Fxldb.di.fc.ul.pt%2Fxldb
%2Fpublications%2F2009%2F10%2Fgeo-net-pt-

10

02%23%3E%0D%0ASELECT+%3Ftitle%2C+%3Flatitude%2C+%3Flongitude+where+%7B
%0D%0A++%3Fentity+gn%3Atype+gnpt02%3Aconcelho-
ATCON+.%0D%0A++%3Fentity+dcterms%3Atitle+%3Ftitle+.%0D%0A++%3Fentity+g
n%3Afootprint+%3Ffootprint+.%0D%0A++%3Ffootprint+geo%3Alat+%3Flatitude
+.%0D%0A++%3Ffootprint+geo%3Along+%3Flongitude+.%0D%0A%7D+ORDER+BY+%3F
title%0D%0A&format=text%2Fhtml&debug=on



11

c) Sapo Verbetes

Foi usado ainda o Sapo Verbetes para ler os cargos políticos (script PHP), dado um nome de um
político guardado na base de dados. O resultado foi um ficheiro XML com os cargos ocupados pelo
político e respectivas datas de ínicio e fim. Após parsing ao ficheiro os dados dos cargos foram
guardados na base de dados, tendo sido ainda efectuada noutra tabela a correspondência entre os
cargos e os políticos.

URL de input:

http://services.sapo.pt/InformationRetrieval/Verbetes/WhoIs?name=sócrates&format=xml


12


d) Arquivo Web Portuguesa

Noutro script fez-se o scraping de notícias do Arquivo Web. Este script faz uma busca por nome de
político formatando um URL, obtendo uma página com os resultados da pesquisa. Esta página é lida
para uma string, sendo depois efectuado o scraping com Expressões Regulares. O scraping permite

13

obter os URLs das notícias dos políticos, a data da notícia e o título. De seguida cada um dos urls é
carregado para procurar pelo nome de outros politicos nas notícias bem como das localidades que
se encontram armazenadas na Base de Dados. Toda esta informação bem como referências são
guardadas na base de dados.

URL de input:

http://arquivo.pt/search.jsp?query=cavaco+silva&hitsPerPage=10&dateStart=01%2F01%2F1996&da
teEnd=31%2F12%2F2010



14

e) Publico

Obteve-se também notícias do Jornal Publico. As notícias foram obtidas com um script no qual se fez
o scraping da página Web do Publico. Este script faz uma busca por nome de político formatando
um URL, obtendo uma página com os resultados da pesquisa. Esta página é lida para uma string,
sendo depois efectuado o scraping com Expressões Regulares. O scraping permite obter os URLs das
notícias dos políticos, a data da notícia e o título. De seguida cada um dos URLs é carregado para
procurar pelo nome de outros políticos nas notícias bem como das localidades que se encontram
armazenadas na Base de Dados. Toda esta informação bem como referências são guardadas na base
de dados.

URL de input:

http://www.publico.pt/Search/1/?q=cavaco silva


15


16

f) Sapo Voxx

Foi também usado como fonte de notícias o Sapo Voxx. Tal como anteriormente as notícias foram
obtidas por Web Scraping.

URL de input:

http://voxx.sapo.pt/autor/Jos%C3%A9%20S%C3%B3crates


17


g) Outros aspectos

Foi também desenvolvido um script com funções para aceder a base de dados. Finalmente foi
desenvolvida uma interface Web de configuração do sistema.

18

Está prevista a adição futura de outras fontes de informação.

6.5. Fluxograma com a sequência de operações (scripts) a executar para
carregar dados no Back-End

A figura seguinte apresenta a sequência com que devem ser corridos os Scripts de modo a que as
operações de carregamento de dados no Back-End corram com sucesso.

19

7. Web Service

Para criação dos Web Services utilizou-se a tecnologia REST de acordo com o que foi abordado
na aula sobre criação de Web Services. A implementação dos Web Services (no lado do servidor) foi feita
em Scripts PHP. Todos os Web Services criados retornam XML. Eventualmente no futuro está previsto
que os Web Services possam devolver também JSON.

7.2. Lista de Métodos
Foi implementado uma página Web que permite o teste e exemplificação de todos os Web
Services criados. Esta página utiliza javascript para chamar os Web Services que se encontram
implementados em ficheiros PHP. De seguida apresenta-se uma imagem da página Web a qual pode ser
acedida através da seguinte hiperligação:

http://appserver.di.fc.ul.pt/~aw40571/webserviceapi.html

20

A tabela apresentada a seguir contém informação acerca de todos os Web Services criados, incluindo o
recurso sob o qual o Web Service actua, o método usado pelo Web Service, os parâmetros usados na
invocação do Web Service (input) e o resultado obtido (output). Todos os Web Services são
implementados em scripts PHP onde é efectuado um acesso á Base de Dados MySQL através de strings
representando queries para inserir, obter ou apagar dados de tabelas específicas (dependendo do
recurso considerado).

Recurso Método Parâmetros (input) Resultado (output)
http://appserver.di.fc.ul.pt/~aw40571/noticia.php/politico1 GET id_politico1 – identificador do politico 1 Retorna XML com a lista de
/id_politico1/politico2/id_politico2/limit/LIMIT id_politico2 – identificador do politico 2 notícias relacionando
LIMIT – Posição dos dados na base de dados id_politico1 com
id_politico2. Os dados são
obtidos na BD a partir de
LIMIT.
http://appserver.di.fc.ul.pt/~aw40571/noticia.php/politico1 GET id_politico1 – identificador do politico 1 Web service semelhante ao
/id_politico1/politico2/id_politico2/limit/LIMIT/datainicio/d id_politico2 – identificador do politico 2 anterior mas desta vez os
ata_inicio/datafim/data_fim LIMIT – Posição dos dados na base de dados resultados são filtrados por
data_inicio – Filtro por data de inicio data.
data_fim – Filtro por data de fim
http://appserver.di.fc.ul.pt/~aw40571/localidade.php/notici GET Noticias1 – Identificador de notícia Retorna XML com todas as
a/noticias1 localidades referenciadas
pela noticias1.
http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/n GET Noticia1 – Identificador de notícia Retorna XML com todos os
oticia/noticia1 politicos referenciados pela
noticia1.
http://appserver.di.fc.ul.pt/~aw40571/comentario.php/noti GET Noticia1 – Identificador de notícia Retorna XML com todos os
cia/noticia1 comentários relativos á
noticia1.
http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/p GET IdPrincipal – Identificador de primeiro politico Retorna XML com lista de
olitico/idPrincipal/limit/lim1/lim2/dataInicio/dataI/dataFim/ escolhido. políticos relacionados com o
dataF lim1 e lim2 – Limites para os dados a obter da politico idPrincipal, com os
BD limites na BD dados por
datai e dataF – Filtro dos resultados por data lim1 e lim2 e o filtro
de inicio e data de fim temporal dado por datai e
dataf.
http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/p GET IdPrincipal – Identificador de primeiro politico Web Service semelhante ao
olitico/idPrincipal/limit/lim1/lim2 escolhido. anterior mas sem filtro
lim1 e lim2 – Limites para os dados a obter da temporal.
BD
http://appserver.di.fc.ul.pt/~aw40571/cargo.php/politico/id GET IdPrincipal – Identificador de politico Retorna XML com os cargos
Principal/limit/limCargo1/limCargo2 escolhido. ocupados pelo politico
limCargo1 e limCargo2 – Limites para os dados IdPrincipal, com os limites
a obter da BD para os dados na BD dados
por limCargo1 e limCargo2.
http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/li GET String – uma sequencia de caracteres que vai Retorna XML com lista de
ke/string/limit/0/10 servir para encontrar politicos 10 políticos cujo nome é
semelhante a string.
http://appserver.di.fc.ul.pt/~aw40571/localidade.php/like/s GET String – uma sequencia de caracteres que vai Retorna XML com lista de
tring/limit/0/10 servir para encontrar localidades 10 localidades cujo nome é
semelhante a string.
http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/n DELETE Noticia1 – identificador de noticia Permite dessassociar uma
oticia1/localidade/localidade1 localidade1 – identificador de localidade localidade de uma noticia.
http://appserver.di.fc.ul.pt/~aw40571/comentario.php/com DELETE Comentario1 – identificador de comentário Apaga comentário dado por
entario/comentario1 identificador.
http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/n DELETE Noticia1 – identificador de noticia Permite dessassociar um
oticia1/politico/politico1 politico1 – identificador de politico politico de uma noticia.

21

Recurso Método Parâmetros (input) Resultado (output)
http://appserver.di.fc.ul.pt/~aw40571/localidade.php/notici POST Noticia1 – Identificador de noticia Envia para o servidor um
a/noticia1 XML para ser inserida uma
nova localidade e associa
essa localidade á noticia
dada por noticia1.
http://appserver.di.fc.ul.pt/~aw40571/comentario.php/noti POST Noticia1 – Identificador de noticia Envia para o servidor um
cia/noticia1 XML para ser inserido um
novo comentário e associa
esse comentario á noticia
dada por noticia1.
http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/n POST Noticia1 – Identificador de noticia Insere uma nova relação
oticia1/politico/novoId novoId – Identificador de politico entre uma noticia e um
politico.
http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/n POST Noticia1 – Identificador de noticia Insere uma nova relação
oticia1/localidade/novoId novoId – Identificador de localidade entre uma noticia e uma
localidade.
http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/n PUT Noticia1 – identificador de noticia Envia para o servidor os
oticia1 dados editados de uma
notícia dada por noticia1.
http://appserver.di.fc.ul.pt/~aw40571/comentario.php/com PUT Comentario1 – identificador de comentario Envia para o servidor os
entario/comentario1 dados editados de um
comentario dado por
comentario1.
http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/p PUT Politico1 – identificador de politico Envia para o servidor os
olitico/politico1 dados editados de um
político dado por politico1.

Tabela 1- Lista de Web Services criados.

7.3. Exemplos
De seguida apresenta-se exemplos de todos os Web Services apresentados na tabela anterior.

a) URL:
http://appserver.di.fc.ul.pt/~aw40571/noticia.php/politico1/id_politico1/politico2/id_politico2/limit/LIMIT

O resultado obtido é o seguinte:

22

b) URL:
http://appserver.di.fc.ul.pt/~aw40571/noticia.php/politico1/id_politico1/politico2/id_politico2/limit/LIMIT/datai
nicio/data_inicio/datafim/data_fim


23

c) URL: http://appserver.di.fc.ul.pt/~aw40571/localidade.php/noticia/noticias1


d) URL: http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/noticia/noticia1


24

e) URL: http://appserver.di.fc.ul.pt/~aw40571/comentario.php/noticia/noticia1


f) URL:
http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/politico/idPrincipal/limit/lim1/lim2/dataInicio/dataI/d
ataFim/dataF


25

g) URL: http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/politico/idPrincipal/limit/lim1/lim2


h) URL: http://appserver.di.fc.ul.pt/~aw40571/cargo.php/politico/idPrincipal/limit/limCargo1/limCargo2


26

i) URL: http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/like/string/limit/0/10


j) URL: http://appserver.di.fc.ul.pt/~aw40571/localidade.php/like/string/limit/0/10


k) URL: http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/noticia1/localidade/localidade1


27

Apaga a relação entre uma notícia e localidade na BD.

l) URL: http://appserver.di.fc.ul.pt/~aw40571/comentario.php/comentario/comentario1


Apaga um comentário.

m) URL: http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/noticia1/politico/politico1


Apaga a relação entre uma notícia e um politico na BD.

n) URL: http://appserver.di.fc.ul.pt/~aw40571/localidade.php/noticia/noticia1


Insere a seguinte localidade,

<localidades><localidade>
<nome>nome_localidade</nome>
<lat>latitude</lat>
<lon>longitude</lon>
</localidade></localidades>

na BD e relaciona-a com a noticia.

o) URL: http://appserver.di.fc.ul.pt/~aw40571/comentario.php/noticia/noticia1


Insere o seguinte comentário,

<comentarios><comentario>

<texto>comentario</texto>

</comentario></comentarios>

na BD e relaciona-a com a noticia.

28

p) URL: http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/noticia1/politico/novoId


Cria uma relação entre notícia e politico.

q) URL: http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/noticia1/localidade/novoId


Cria uma relação entre notícia e localidade.

r) URL: http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/noticia1


Envia o seguinte xml para editar os contéudos de uma dada noticia.

<noticias><noticia>
<url>url</url>
<titulo>titulo</titulo>
<amd>amd</amd>
</noticia></noticias>

s) URL: http://appserver.di.fc.ul.pt/~aw40571/comentario.php/comentario/comentario1


Envia o seguinte xml para editar os contéudos de um comentário.

<comentarios><comentario>
<texto>texto</texto>
</comentario></comentarios>

t) URL: http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/politico/politico1


Envia o seguinte xml para editar os contéudos de um político.

<personalidades><personalidade>
<nome>nome</nome>
</personalidade></personalidades>

29

7.4. Ficheiro WADL descrevendo os Web Services criados

De seguida apresenta-se o contéudo do ficheiro WADL que contém a descrição dos Web Services
criados. Este ficheiro foi validado, tendo a validação sido bem sucedida.

<?xml version="1.0" encoding="utf-8" ?>

<application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://wadl.dev.java.net/2009/02 wadl.xsd"

xmlns:ws="http://appserver.di.fc.ul.pt/~aw40571"

xmlns:xsd="http://www.w3.org/2001/XMLSchema"

xmlns="http://wadl.dev.java.net/2009/02">

<resources base="http://appserver.di.fc.ul.pt/~aw40571/">



<resource path="personalidade">

<method name="GET" id="politicoNoticias">

<request>

<param name="noticia" type="xsd:string"

style="plain" required="true"/>

</request>

<response status="200">

<representation mediaType="text/xml"

element="ws:Noticia"/>

</response>

</method>

<method name="GET" id="politicosData">

<request>

<param name="politico" type="xsd:string"

30


<param name="limit" type="xsd:string"




<param name="dataInicio" type="xsd:date"


<param name="dataFim" type="xsd:date"


</request>




</response>

</method>

<method name="GET" id="politicosLimit">

<request>







</request>


31



</response>

</method>

<method name="GET" id="politicosLike">

<request>

<param name="like" type="xsd:string"






</request>




</response>

</method>

<method name="PUT" id="adicionaPolitico">

<request>



<param name="personalidade" type="xs:Politico"


</request>

32

</method>

<method name="DELETE" id="apagaPolitico">

<request>



</request>



element="ws:Politico"/>

</response>



element="ws:Error"/>

</response>

</method>

</resource>



<resource path="noticia">

<method name="GET" id="noticiasPoliticos">

<request>

<param name="politico1" type="xsd:string"





33


</request>




</response>

</method>

<method name="GET" id="noticiasPoliticosDatas">

<request>







<param name="dataInicio" type="xsd:date"


<param name="dataFim" type="xsd:date"


</request>




</response>

</method>

34

<method name="POST" id="adicionaNoticiaPolitico">

<request>


style="query" required="true"/>



</request>

</method>

<method name="POST" id="adicionaNoticiaLocalidade">

<request>



<param name="localidade" type="xsd:string"


</request>

</method>

<method name="PUT" id="adicionaNoticia">

<request>



<param name="noticiacont" type="xs:Noticia"


</request>

</method>

<method name="DELETE" id="apagaNoticia">

35

<request>



<param name="localidade" type="xsd:string"


</request>

</method>

</resource>



<resource path="comentario">

<method name="GET" id="comentariosNoticia">

<request>



</request>



element="ws:Comentario"/>

</response>

</method>

<method name="POST" id="adicionaComentarioPost">

<request>



<param name="comentario" type="xs:Comentario"

36

</request>

</method>

<method name="PUT" id="adicionaComentarioPut">

<request>

<param name="comentario" type="xsd:string"


<param name="comentariocont" type="xs:Comentario"


</request>

</method>

<method name="DELETE" id="apagaComentario">

<request>

<param name="comentario" type="xsd:string"


</request>

</method>

</resource>



<resource path="localidade">

<method name="GET" id="localidadesNoticia">

<request>



</request>

37



element="ws:Localidade"/>

</response>

</method>

<method name="GET" id="localidadesLike">

<request>

<param name="like" type="xsd:string"






</request>



element="ws:Localidade"/>

</response>

</method>

<method name="POST" id="adicionaLocalidadNoticia">

<request>



<param name="localidade" type="xs:Localidade"


38

</request>

</method>

</resource>



<resource path="cargo">

<method name="GET" id="cargoPolitico">

<request>







</request>



element="ws:Cargo"/>

</response>

</method>

</resource>

</resources>

</application>


<cargos>

39

<funcao>

<nome>cargo1</nome>

<inicio>inicio1</inicio>

<fim>fim1</fim>

</funcao>

</cargos>


<comentarios>

<comentario>

<texto>comentario1</texto>

</comentario>

</comentarios>


<localidades>

<localidade>

<nome>localidade1</nome>

<lat>lat1</lat>

<lon>lon1</lon>

</localidade>

</localidades>


<noticias>

40

<noticia>

<url>url1</url>

<titulo>titulo1</titulo>

<amd>amd1</amd>

</noticia>

</noticias>


<personalidades>

<personalidade>

<nome>politico1</nome>

</personalidade>

</personalidades>

41

8. Front-end (admin e user)

Foram utilizadas as seguintes tecnologias no desenvolvimento do Front-End:

 HTML, para a criação dos conteúdos da página;

 CSS, formatação da página;

 Javascript, na criação dinâmica dos conteúdos da página;

 AJAX, na comunicação assíncrona com os Web services;

 PHP e a biblioteca jquery, para a criação do auto-complete;

 API Javascript do Google Maps, na implementação do mapa;

8.2. Web Services usados
No Front-End foram utilizados todos os Web Services apresentados na Tabela 1 em 7.2. Todos
os Web Services foram utilizados assincronamente utilizando a tecnologia AJAX, com excepção dos
seguintes que foram utilizados sincronamente:

 http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/like/string/limit/0/10

 http://appserver.di.fc.ul.pt/~aw40571/localidade.php/like/string/limit/0/10

Estes dois Web Services foram implementados de forma sincrona em PHP, fazendo parte da ferramenta
de auto-complete ou auto-sugestão. Esta ferramenta de auto-complete foi obtida de várias bibliotecas
de auto-complete disponiveis na Internet e faz uso do jQuery para implementar o auto-complete.
Todos os outros Web Services foram implementados recorrendo ao Ajax, através da criação de um
XMLHttpRequest object, o qual comunica assincronamente com o servidor. Foi tomada a opção de
chamar os Web Services de forma assincrona de forma a que o utilizador do Front-End tenha a melhor
experiência possivel, nomeadamente sem ficar bloqueado á espera que a chamada ao servidor
complete. De seguida apresenta-se os Web Services implementados no Front-End, bem como qual a
parte do Front-End que utiliza o Web Service. Como foi dito os Web Services utilizam a tecnologia AJAX.

 http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/noticia/11 ->assíncrona
Permite obter todos os políticos de uma determinada notícia:

42

 http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/politico/1/limit/0/10/dataInic
io/2000-01-01/dataFim/2011-01-01 ->assíncrona
 http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/politico/1/limit/0/10
->assíncrona
Permitem obter a lista dos políticos que estão relacionados com um dado político, o
primeiro faz a limitação por datas.

 http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/like/silva/limit/0/10 ->
síncrona
Permite obter uma lista de políticos cujos nomes sejam semelhantes ao introduzido.

 http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/politico/1 ->assíncrona
Permite editar o nome de uma personalidade.

43

 http://appserver.di.fc.ul.pt/~aw40571/localidade.php/like/por/limit/0/10 ->síncrona
Permite obter uma lista de localidades cujos nomes sejam semelhantes ao introduzido

 http://appserver.di.fc.ul.pt/~aw40571/localidade.php/noticia/1 ->assíncrona
Devolve a lista das localidades de uma dada notícia.

 http://appserver.di.fc.ul.pt/~aw40571/localidade.php/noticia/1 ->assíncrona
Permite introduzir uma nova localidade na base de dados através do arrastamento de
um dos marcadores no mapa e associar essa localidade a uma notícia.

 http://appserver.di.fc.ul.pt/~aw40571/cargo.php/politico/91/limit/0/10 ->assíncrona
Devolve a lista dos cargos desempenhados pelo político.

44

 http://appserver.di.fc.ul.pt/~aw40571/comentario.php/noticia/1 ->assíncrona
Permite obter todos os comentários de uma notícia.

 http://appserver.di.fc.ul.pt/~aw40571/comentario.php/noticia/1 ->assíncrona
Permite introduzir um comentário numa notícia.

 http://appserver.di.fc.ul.pt/~aw40571/comentario.php/comentario/1 ->assíncrona
Permite editar um comentário.

 http://appserver.di.fc.ul.pt/~aw40571/comentario.php/comentario/1 ->assíncrona
Permite eliminar um comentário.

 http://appserver.di.fc.ul.pt/~aw40571/noticia.php/politico1/1/politico2/48/limit/0 -
>assíncrona
 http://appserver.di.fc.ul.pt/~aw40571/noticia.php/politico1/1/politico2/48/limit/0/data
inicio/2000-01-01/datafim/2011-01-01 ->assíncrona

45

Devolve uma lista com as noticias que relacionam os dois políticos, a segunda faz um
filtro temporal.

 http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/1/politico/2 ->assíncrona
Permite adicionar um político a uma determinada notícia.

 http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/1/localidade/1 ->assíncrona
Permite adicionar uma localidade a uma notícia.

 http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/1 ->assíncrona
Permite editar o título, url e data de uma notícia.

 http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/1/localidade/52 ->assíncrona
Permite remover uma localidade de uma notícia.

46

 http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/1/politico/1 ->assíncrona
Permite remover um político de uma notícia.

47

8.3. Screenshots

8.3.1 Front-End Admin

Apresenta-se de seguida uma imagem do Front-End admin. Neste momento o Front-End admin
permite o carregamento de um ficheiro SQL para criação das tabelas na Base de Dados. Permite
também chamar o script de cada fonte de dados para carregá-la na Base de Dados.

8.3.2 Front-End de utilizador

De seguida é apresentado um link para um video com a demonstração do Front-End de utilizador. O
video encontra-se disponivel no YouTube:

http://www.youtube.com/watch?v=H4pDX19Oz0Q

São apresentados a seguir várias imagens do Front-End do utilizador, ou apenas Front-End, com
explicação de algumas funcionalidades:

48

Esta é a janela inicial da aplicação, contém uma caixa de texto (Escolha o nome do politico) onde se
introduz o nome do político que pretendemos pesquisar e duas caixas de texto (Pesquisa por data) onde
se pode limitar temporalmente os resultados da pesquisa.

Para escolha do nome do político é utilizado para ajuda um auto-complete:

Após escolher o nome do político é apresentado uma caixa de texto com os cargos desempenhados pelo
político e uma caixa com todos os políticos que estão relacionados com o politico escolhido
anteriormente. Após escolher-se um dos políticos da lista dos políticos relacionados é apresentado a
lista das notícias que relacionam estes dois políticos.

49

Para ver os detalhes de uma das notícias escolhe-se uma notícia na lista, pelo que são apresentados no
mapa todas as localidades disponíveis na notícia e numa caixa por baixo do mapa são apresentados os
restantes detalhes da notícia.

50

Nesta caixa são apresentados todos os detalhes da notícia.
Para editar ou remover uma determinada informação da notícia tem-se que escolher a informação que
pretende editar ou remover pelo que é apresentado uma caixa no lado esquerdo onde se pode optar
por editar ou remover os dados. Relativamente a inserção de informação tem-se que “clicar” no título
(cabeçalho) do campo que se pretende introduzir (Localidades, Políticos e Comentários).
Também é possível editar uma localidade de uma notícia através do arrastamento do marcador no
mapa.

51

9. Conclusão

O trabalho desenvolvido neste projecto permitiu desenvolver uma aplicação Web. Com o projecto foi
estabelecido contacto com várias tecnologias da Web, entre outras PHP, Javascript, XML e HTML,
criação e utilização de Web Services e AJAX, enriquecendo o conhecimento dos alunos.

A aplicação desenvolvida apresenta uma série de funcionalidades que permitem apresentar os dados
armazenados na Base de Dados e alterá-los, não tendo sido encontrados problemas na interação entre
as várias componenentes e funcionalidades, nem na utilização com os Browsers mais comuns.

Apesar do aspecto funcional satisfactório do trabalho, várias melhorias podiam ter sido feitas. Entre elas
destaca-se a inclusão de mais Web Services com fontes de notícias, o que permitia aumentar a
informação disponibilizada e sua qualidade. Outro aspecto a melhorar é a obtenção dos dados para a
Base de Dados, no Back-End. Actualmente esta obtenção de dados encontra-se limitada por forma a não
demorar infinitamente. O aumento deste limite permitiria obter mais noticias. Finalmente os Web
Services desenvolvidos devolvem apenas XML. Uma melhoria a fazer seria a inclusão de resultados em
JSON.

Relativamente aos problemas encontrados eles encontram-se descritos numa secção própria, mas
convém realçar o maior deles. Nomeadamente o problema com os caracteres, o qual criou grandes
problemas tanto no correlacionamento dos dados como na transmissão dos mesmos em XML. No fim
encontrou-se um esquema de codificação que permitiu minorar este problema.

52

10. Discussão

10.1. Problemas encontrados no Back-End
1) Um dos problemas que ocorreu no desenvolvimento do Back-End foi a não possibilidade
de extracção dos nomes dos políticos por parsing do XML. Foi desenvolvido código para fazer o
parsing dos políticos mas não estava a funcionar. A solução encontrada foi obter os dados dos
políticos numa tabela HTML e fazer o scraping á tabela. Desta forma foi possível a obtenção dos
nomes dos políticos e resolver este impasse.
Também houve problemas semelhantes com o Geo-Net, os quais foram resolvidos de forma
semelhante.

2) Foi também encontrado um problema relativamente a como comparar o nome de um
político da base de dados com os nomes existentes nas notícias, dado que cada politica escolhe a
forma com que quer escrever o seu nome, alguns escolhem o primeiro e o ultimo, outros
escolhem os dois primeiros ou os dois últimos. Sendo que na base de dados encontra-se o nome
completo de cada um devolvido pela ontologia (POWER) pelo que foi preciso encontrar uma
forma eficaz para procurar pelos políticos nas notícias.
A solução encontrada foi: para cada nome de político existente na base de dados são criadas
quatro versões do nome (nome completo, primeiro e ultimo nome, os dois primeiros nomes, os
dois últimos nomes), pelo que essas quatro versões são utilizadas de forma sequencial (só
verifica a outra versão se não encontrar a anterior) para a procura nas notícias.

10.2. Problemas encontrados nos Web Services
1) Um dos problemas tido no desenvolvimento dos Web Services foi efectuar testes aos mesmos.
Os Web Services que utilizavam o método GET foram testados com um browser sem problemas.
No entanto para os outros métodos este procedimento não resultou. Uma solução foi utilizar
uma aplicação para Windows que permitia configurar o pedido HTTP. Esta aplicação permitiu
testar os métodos DELETE. Contudo os métodos PUT e POST como possuem um ficheiro XML
anexado, não puderam ser testados desta maneira. Para estes a única solução foi a criação de
scripts PHP utilizando o cURL para compor os pedidos HTTP.

2) Outro problema encontrado foram os caracteres especiais no XML (<,&,etc.), esses caracteres
apareciam sempre nos urls pelo que foi preciso converter os urls antes de os introduzir na base
de dados. No front-end esses urls são descodificados antes de serem apresentados aos
utilizadores.

53

11. Anexos

Os anexos consistem no código. Para tal foi enviado um ficheiro ZIP juntamente com o relatório que
contém todo o código da aplicação.

54

Aplicações na Web Relatório Etapa 03

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Aplicações na Web Relatório Etapa 03

Ähnlich wie Aplicações na Web Relatório Etapa 03 (20)

Aplicações na Web Relatório Etapa 03