Web app

334 visualizações

Publicada em

Example of a webservice based web application

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
334
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Web app

  1. 1. 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
  2. 2. IndíceIndíce ................................................................................................................................................................... 21. Introdução........................................................................................................................................................ 32. Planeamento.................................................................................................................................................... 43. Arquitectura ..................................................................................................................................................... 54. Requisitos Estruturais ..................................................................................................................................... 65. Requisitos Funcionais ...................................................................................................................................... 76. Back-end........................................................................................................................................................... 77. Web Service ................................................................................................................................................... 208. Front-end (admin e user) .............................................................................................................................. 439. Conclusão ....................................................................................................................................................... 5310. Discussão...................................................................................................................................................... 5411. Anexos ......................................................................................................................................................... 55 2
  3. 3. 1. IntroduçãoA web é hoje em dia um grande repositório de informação. Com o projecto de Aplicações na Webpretende-se utilizar esta informação para obter notícias relacionando políticos e indicar a localizaçãogeográ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 WebServices para aceder á informação da Base de Dados e um Front-End aonde é possivel visualizar asnotícias por local geográfico.O presente relatório apresenta um planeamento de todo o trabalho a ser realizado. É também abordadaa arquitectura SOA da aplicação, feito um levantamento dos requisitos estruturais e funcionais dosistema. De seguida aborda-se com detalhe os pormenores do Back-End, os Web Services criados e oFront-End. No Front-End é apresentado as tecnologias com que foi implementado, os Web Services queutiliza e aonde são usados e finalmente uma pequena introdução á interface e funcionalidades. Sãoapresentadas algumas dificuldades tidas na implementação do Back-End, Web Services e Front-End, epor fim os anexos listam o código desenvolvido para o Back-End, Web Services e Front-End. 3
  4. 4. 2. PlaneamentoSemana 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
  5. 5. 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 EndPointAdmin 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
  6. 6. 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
  7. 7. 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 asfuncionalidades que permitem a ligação ao SGBD MySQL. Assim a extracção de informação da Web foiefectuada com scripts PHP, utilizando o cURL para obtenção dos dados. Os dados podem ser HTML ouXML. No caso do HTML a extracção de informação foi efectuada recorrendo a Expressões Regulares. Nocaso do XML a extracção foi efectuada recorrendo a funções de parsing. Obtidos os dados, as funções doMySQL 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íciasatravés de Web Scraping, o Publico para obter noticias através de Web Scraping, o Sapo Voxx para obternoticias através de Web Scraping, o Geo-Net para obter o nome de localidades com as respectivascoordenadas geográficas também com Web Scraping uma vez que não estava a retornar XML, aontologia política web para obter o nome dos políticos também por Web Scraping e finalmente o SapoVerbetes para obter os cargos dos políticos por parsing de XML. 7
  8. 8. 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 Politicada Web. Para isso foi definida uma query SPARQL que retorna o nome dos políticos. Esta query foipassada a URL e este URL foi lido. Obteve-se assim uma string cujo conteúdo é uma tabela HTML com onome dos políticos. Desta tabela foram retirados os nomes dos políticos recorrendo a ExpressõesRegulares, 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%3E%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
  9. 9. Output obtido na Base de Dados: 9
  10. 10. b) Geonet-PT A localização geográfica e nome das principais cidades do país foram obtidos num script PHP, oqual leu um URL obtido após execução de uma query SPARQL ao Geo-Net. O URL carrega uma tabelaHTML 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
  11. 11. 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+gn%3Afootprint+%3Ffootprint+.%0D%0A++%3Ffootprint+geo%3Alat+%3Flatitude+.%0D%0A++%3Ffootprint+geo%3Along+%3Flongitude+.%0D%0A%7D+ORDER+BY+%3Ftitle%0D%0A&format=text%2Fhtml&debug=on Página Web correspondendo ao URL: Output obtido na Base de Dados: 11
  12. 12. c) Sapo VerbetesFoi usado ainda o Sapo Verbetes para ler os cargos políticos (script PHP), dado um nome de umpolítico guardado na base de dados. O resultado foi um ficheiro XML com os cargos ocupados pelopolítico e respectivas datas de ínicio e fim. Após parsing ao ficheiro os dados dos cargos foramguardados na base de dados, tendo sido ainda efectuada noutra tabela a correspondência entre oscargos e os políticos.URL de input:http://services.sapo.pt/InformationRetrieval/Verbetes/WhoIs?name=sócrates&format=xmlPágina Web correspondendo ao URL: 12
  13. 13. Output obtido na Base de Dados:d) Arquivo Web PortuguesaNoutro script fez-se o scraping de notícias do Arquivo Web. Este script faz uma busca por nome depolítico formatando um URL, obtendo uma página com os resultados da pesquisa. Esta página é lidapara uma string, sendo depois efectuado o scraping com Expressões Regulares. O scraping permite 13
  14. 14. 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 quese encontram armazenadas na Base de Dados. Toda esta informação bem como referências sãoguardadas na base de dados.URL de input:http://arquivo.pt/search.jsp?query=cavaco+silva&hitsPerPage=10&dateStart=01%2F01%2F1996&dateEnd=31%2F12%2F2010Página Web correspondendo ao URL: Output obtido na Base de Dados: 14
  15. 15. e) PublicoObteve-se também notícias do Jornal Publico. As notícias foram obtidas com um script no qual se fezo scraping da página Web do Publico. Este script faz uma busca por nome de político formatandoum 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 dasnotícias dos políticos, a data da notícia e o título. De seguida cada um dos URLs é carregado paraprocurar pelo nome de outros políticos nas notícias bem como das localidades que se encontramarmazenadas na Base de Dados. Toda esta informação bem como referências são guardadas na basede dados.URL de input:http://www.publico.pt/Search/1/?q=cavaco silvaPágina Web correspondendo ao URL: 15
  16. 16. Output obtido na Base de Dados: 16
  17. 17. f) Sapo VoxxFoi também usado como fonte de notícias o Sapo Voxx. Tal como anteriormente as notícias foramobtidas por Web Scraping.URL de input:http://voxx.sapo.pt/autor/Jos%C3%A9%20S%C3%B3cratesPágina Web correspondendo ao URL: 17
  18. 18. Output obtido na Base de Dados:g) Outros aspectosFoi também desenvolvido um script com funções para aceder a base de dados. Finalmente foidesenvolvida uma interface Web de configuração do sistema. 18
  19. 19. 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-EndA figura seguinte apresenta a sequência com que devem ser corridos os Scripts de modo a que asoperações de carregamento de dados no Back-End corram com sucesso. 19
  20. 20. 7. Web Service 7.1. Tecnologias usadas Para criação dos Web Services utilizou-se a tecnologia REST de acordo com o que foi abordadona aula sobre criação de Web Services. A implementação dos Web Services (no lado do servidor) foi feitaem Scripts PHP. Todos os Web Services criados retornam XML. Eventualmente no futuro está previstoque 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 WebServices criados. Esta página utiliza javascript para chamar os Web Services que se encontramimplementados em ficheiros PHP. De seguida apresenta-se uma imagem da página Web a qual pode seracedida através da seguinte hiperligação:http://appserver.di.fc.ul.pt/~aw40571/webserviceapi.html 20
  21. 21. 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 osata_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 fimhttp://appserver.di.fc.ul.pt/~aw40571/localidade.php/notici GET Noticias1 – Identificador de notícia Retorna XML com todas asa/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 osoticia/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 oscia/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 deolitico/idPrincipal/limit/lim1/lim2/dataInicio/dataI/dataFim/ escolhido. políticos relacionados com odataF 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 aoolitico/idPrincipal/limit/lim1/lim2 escolhido. anterior mas sem filtro lim1 e lim2 – Limites para os dados a obter da temporal. BDhttp://appserver.di.fc.ul.pt/~aw40571/cargo.php/politico/id GET IdPrincipal – Identificador de politico Retorna XML com os cargosPrincipal/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 deke/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 detring/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 umaoticia1/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 porentario/comentario1 identificador.http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/n DELETE Noticia1 – identificador de noticia Permite dessassociar umoticia1/politico/politico1 politico1 – identificador de politico politico de uma noticia. 21
  22. 22. 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 uma/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 umcia/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çãooticia1/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çãooticia1/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 osoticia1 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 osentario/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 osolitico/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
  23. 23. 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_fimO resultado obtido é o seguinte: 23
  24. 24. c) URL: http://appserver.di.fc.ul.pt/~aw40571/localidade.php/noticia/noticias1O resultado obtido é o seguinte:d) URL: http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/noticia/noticia1O resultado obtido é o seguinte: 24
  25. 25. e) URL: http://appserver.di.fc.ul.pt/~aw40571/comentario.php/noticia/noticia1O resultado obtido é o seguinte:f) URL: http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/politico/idPrincipal/limit/lim1/lim2/dataInicio/dataI/d ataFim/dataFO resultado obtido é o seguinte: 25
  26. 26. g) URL: http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/politico/idPrincipal/limit/lim1/lim2O resultado obtido é o seguinte:h) URL: http://appserver.di.fc.ul.pt/~aw40571/cargo.php/politico/idPrincipal/limit/limCargo1/limCargo2O resultado obtido é o seguinte: 26
  27. 27. i) URL: http://appserver.di.fc.ul.pt/~aw40571/personalidade.php/like/string/limit/0/10O resultado obtido é o seguinte:j) URL: http://appserver.di.fc.ul.pt/~aw40571/localidade.php/like/string/limit/0/10O resultado obtido é o seguinte:k) URL: http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/noticia1/localidade/localidade1O resultado obtido é o seguinte: 27
  28. 28. Apaga a relação entre uma notícia e localidade na BD.l) URL: http://appserver.di.fc.ul.pt/~aw40571/comentario.php/comentario/comentario1O resultado obtido é o seguinte:Apaga um comentário.m) URL: http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/noticia1/politico/politico1O resultado obtido é o seguinte: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/noticia1O resultado obtido é o seguinte: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/noticia1O resultado obtido é o seguinte:Insere o seguinte comentário,<comentarios><comentario><texto>comentario</texto></comentario></comentarios>na BD e relaciona-a com a noticia. 28
  29. 29. p) URL: http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/noticia1/politico/novoIdO resultado obtido é o seguinte:Cria uma relação entre notícia e politico.q) URL: http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/noticia1/localidade/novoIdO resultado obtido é o seguinte:Cria uma relação entre notícia e localidade.r) URL: http://appserver.di.fc.ul.pt/~aw40571/noticia.php/noticia/noticia1O resultado obtido é o seguinte: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/comentario1O resultado obtido é o seguinte: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/politico1O resultado obtido é o seguinte:Envia o seguinte xml para editar os contéudos de um político.<personalidades><personalidade><nome>nome</nome></personalidade></personalidades> 29
  30. 30. 7.4. Ficheiro WADL descrevendo os Web Services criadosDe seguida apresenta-se o contéudo do ficheiro WADL que contém a descrição dos Web Servicescriados. 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/"> <!-- PERSONALIDADE --> <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
  31. 31. style="plain" required="true"/> <param name="limit" type="xsd:string" style="plain" required="true"/> <param name="limit" type="xsd:string" style="plain" required="true"/> <param name="dataInicio" type="xsd:date" style="plain" required="true"/> <param name="dataFim" type="xsd:date" style="plain" required="true"/> </request> <response status="200"> <representation mediaType="text/xml" element="ws:Noticia"/> </response></method><method name="GET" id="politicosLimit"> <request> <param name="politico" type="xsd:string" style="plain" required="true"/> <param name="limit" type="xsd:string" style="plain" required="true"/> <param name="limit" type="xsd:string" style="plain" required="true"/> </request> <response status="200"> 31
  32. 32. <representation mediaType="text/xml" element="ws:Noticia"/> </response></method><method name="GET" id="politicosLike"> <request> <param name="like" type="xsd:string" style="plain" required="true"/> <param name="limit" type="xsd:string" style="plain" required="true"/> <param name="limit" type="xsd:string" style="plain" required="true"/> </request> <response status="200"> <representation mediaType="text/xml" element="ws:Noticia"/> </response></method><method name="PUT" id="adicionaPolitico"> <request> <param name="politico" type="xsd:string" style="plain" required="true"/> <param name="personalidade" type="xs:Politico" style="plain" required="true"/> </request> 32
  33. 33. </method> <method name="DELETE" id="apagaPolitico"> <request> <param name="politico" type="xsd:string" style="plain" required="true"/> </request> <response status="200"> <representation mediaType="text/xml" element="ws:Politico"/> </response> <response status="400"> <representation mediaType="text/xml" element="ws:Error"/> </response> </method></resource><!-- NOTICIA --><resource path="noticia"> <method name="GET" id="noticiasPoliticos"> <request> <param name="politico1" type="xsd:string" style="plain" required="true"/> <param name="politico2" type="xsd:string" style="plain" required="true"/> <param name="limit" type="xsd:string" 33
  34. 34. style="plain" required="true"/> </request> <response status="200"> <representation mediaType="text/xml" element="ws:Noticia"/> </response></method><method name="GET" id="noticiasPoliticosDatas"> <request> <param name="politico1" type="xsd:string" style="plain" required="true"/> <param name="politico2" type="xsd:string" style="plain" required="true"/> <param name="limit" type="xsd:string" style="plain" required="true"/> <param name="dataInicio" type="xsd:date" style="plain" required="true"/> <param name="dataFim" type="xsd:date" style="plain" required="true"/> </request> <response status="200"> <representation mediaType="text/xml" element="ws:Noticia"/> </response></method> 34
  35. 35. <method name="POST" id="adicionaNoticiaPolitico"> <request> <param name="noticia" type="xsd:string" style="query" required="true"/> <param name="politico" type="xsd:string" style="query" required="true"/> </request></method><method name="POST" id="adicionaNoticiaLocalidade"> <request> <param name="noticia" type="xsd:string" style="query" required="true"/> <param name="localidade" type="xsd:string" style="query" required="true"/> </request></method><method name="PUT" id="adicionaNoticia"> <request> <param name="noticia" type="xsd:string" style="plain" required="true"/> <param name="noticiacont" type="xs:Noticia" style="plain" required="true"/> </request></method><method name="DELETE" id="apagaNoticia"> 35
  36. 36. <request> <param name="noticia" type="xsd:string" style="plain" required="true"/> <param name="localidade" type="xsd:string" style="plain" required="true"/> </request> </method></resource><!-- COMENTARIO --><resource path="comentario"> <method name="GET" id="comentariosNoticia"> <request> <param name="noticia" type="xsd:string" style="plain" required="true"/> </request> <response status="200"> <representation mediaType="text/xml" element="ws:Comentario"/> </response> </method> <method name="POST" id="adicionaComentarioPost"> <request> <param name="noticia" type="xsd:string" style="plain" required="true"/> <param name="comentario" type="xs:Comentario" 36
  37. 37. style="plain" required="true"/> </request> </method> <method name="PUT" id="adicionaComentarioPut"> <request> <param name="comentario" type="xsd:string" style="plain" required="true"/> <param name="comentariocont" type="xs:Comentario" style="plain" required="true"/> </request> </method> <method name="DELETE" id="apagaComentario"> <request> <param name="comentario" type="xsd:string" style="plain" required="true"/> </request> </method></resource><!-- LOCALIDADE --><resource path="localidade"> <method name="GET" id="localidadesNoticia"> <request> <param name="noticia" type="xsd:string" style="plain" required="true"/> </request> 37
  38. 38. <response status="200"> <representation mediaType="text/xml" element="ws:Localidade"/> </response></method><method name="GET" id="localidadesLike"> <request> <param name="like" type="xsd:string" style="plain" required="true"/> <param name="limit" type="xsd:string" style="plain" required="true"/> <param name="limit" type="xsd:string" style="plain" required="true"/> </request> <response status="200"> <representation mediaType="text/xml" element="ws:Localidade"/> </response></method><method name="POST" id="adicionaLocalidadNoticia"> <request> <param name="noticia" type="xsd:string" style="plain" required="true"/> <param name="localidade" type="xs:Localidade" style="plain" required="true"/> 38
  39. 39. </request> </method> </resource> <!-- CARGO --> <resource path="cargo"> <method name="GET" id="cargoPolitico"> <request> <param name="politico" type="xsd:string" style="plain" required="true"/> <param name="limit" type="xsd:string" style="plain" required="true"/> <param name="limit" type="xsd:string" style="plain" required="true"/> </request> <response status="200"> <representation mediaType="text/xml" element="ws:Cargo"/> </response> </method> </resource> </resources></application><?xml version="1.0" encoding="utf-8" ?> <cargos> 39
  40. 40. <funcao> <nome>cargo1</nome> <inicio>inicio1</inicio> <fim>fim1</fim> </funcao> </cargos><?xml version="1.0" encoding="utf-8" ?> <comentarios> <comentario> <texto>comentario1</texto> </comentario> </comentarios><?xml version="1.0" encoding="utf-8" ?> <localidades> <localidade> <nome>localidade1</nome> <lat>lat1</lat> <lon>lon1</lon> </localidade> </localidades><?xml version="1.0" encoding="utf-8" ?> <noticias> 40
  41. 41. <noticia> <url>url1</url> <titulo>titulo1</titulo> <amd>amd1</amd> </noticia> </noticias><?xml version="1.0" encoding="utf-8" ?> <personalidades> <personalidade> <nome>politico1</nome> </personalidade> </personalidades> 41
  42. 42. 8. Front-end (admin e user) 8.1. Tecnologias usadas 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. Todosos Web Services foram utilizados assincronamente utilizando a tecnologia AJAX, com excepção dosseguintes 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/10Estes dois Web Services foram implementados de forma sincrona em PHP, fazendo parte da ferramentade auto-complete ou auto-sugestão. Esta ferramenta de auto-complete foi obtida de várias bibliotecasde 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 umXMLHttpRequest object, o qual comunica assincronamente com o servidor. Foi tomada a opção dechamar os Web Services de forma assincrona de forma a que o utilizador do Front-End tenha a melhorexperiência possivel, nomeadamente sem ficar bloqueado á espera que a chamada ao servidorcomplete. De seguida apresenta-se os Web Services implementados no Front-End, bem como qual aparte 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
  43. 43.  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
  44. 44.  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
  45. 45.  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
  46. 46. 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
  47. 47.  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
  48. 48. 8.3. Screenshots 8.3.1 Front-End Admin Apresenta-se de seguida uma imagem do Front-End admin. Neste momento o Front-End adminpermite o carregamento de um ficheiro SQL para criação das tabelas na Base de Dados. Permitetambém chamar o script de cada fonte de dados para carregá-la na Base de Dados. 8.3.2 Front-End de utilizadorDe seguida é apresentado um link para um video com a demonstração do Front-End de utilizador. Ovideo encontra-se disponivel no YouTube:http://www.youtube.com/watch?v=H4pDX19Oz0QSão apresentados a seguir várias imagens do Front-End do utilizador, ou apenas Front-End, comexplicação de algumas funcionalidades: 48
  49. 49. Esta é a janela inicial da aplicação, contém uma caixa de texto (Escolha o nome do politico) onde seintroduz o nome do político que pretendemos pesquisar e duas caixas de texto (Pesquisa por data) ondese 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 pelopolítico e uma caixa com todos os políticos que estão relacionados com o politico escolhidoanteriormente. Após escolher-se um dos políticos da lista dos políticos relacionados é apresentado alista das notícias que relacionam estes dois políticos. 49
  50. 50. Para ver os detalhes de uma das notícias escolhe-se uma notícia na lista, pelo que são apresentados nomapa todas as localidades disponíveis na notícia e numa caixa por baixo do mapa são apresentados osrestantes detalhes da notícia. 50
  51. 51. 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 quepretende editar ou remover pelo que é apresentado uma caixa no lado esquerdo onde se pode optarpor 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 nomapa. 51
  52. 52. 9. ConclusãoO trabalho desenvolvido neste projecto permitiu desenvolver uma aplicação Web. Com o projecto foiestabelecido 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 dadosarmazenados na Base de Dados e alterá-los, não tendo sido encontrados problemas na interação entreas 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 elasdestaca-se a inclusão de mais Web Services com fontes de notícias, o que permitia aumentar ainformação disponibilizada e sua qualidade. Outro aspecto a melhorar é a obtenção dos dados para aBase de Dados, no Back-End. Actualmente esta obtenção de dados encontra-se limitada por forma a nãodemorar infinitamente. O aumento deste limite permitiria obter mais noticias. Finalmente os WebServices desenvolvidos devolvem apenas XML. Uma melhoria a fazer seria a inclusão de resultados emJSON.Relativamente aos problemas encontrados eles encontram-se descritos numa secção própria, masconvém realçar o maior deles. Nomeadamente o problema com os caracteres, o qual criou grandesproblemas tanto no correlacionamento dos dados como na transmissão dos mesmos em XML. No fimencontrou-se um esquema de codificação que permitiu minorar este problema. 52
  53. 53. 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
  54. 54. 11. AnexosOs anexos consistem no código. Para tal foi enviado um ficheiro ZIP juntamente com o relatório quecontém todo o código da aplicação. 54

×