leitura do artigo >

03
abr

Boulevart Google API, AS3CoreLib API e Google Search no Flash

Neste artigo mostrarei – superficialmente – a importância de se conhecer e trabalhar com APIs de outros desenvolvedores juntamente com API kits e WebServices de grandes provedores de conteúdo e serviços na internet, no exemplo o Google Search.

Comentários (3) Comentários(1) Categorias Action Script3, Classes, IDEs e APIs

Olá amigos e leitores da FlashPedia.
Hoje faço um pequeno artigo sobre APIs e WebServices de grandes provedores de conteúdo e serviços sendo utilizados no flash.

Introduzindo

Muitos provedores de serviços e conteúdo, ou comunidades de web 2.0 oferecem os API Kits, que são kits de desenvolvimento, documentação e exemplos de como acessar seus dados e conteúdo utilizando diversas interfaces, dispositivos e claro, linguagens.

Procurando na internet (Google) sobre APIs e WebServices, encontrei um blog de uma agência Belga muito interessante, que lançou há pouco uma API excelente para trabalhar o WebService do Google Search, é o blog da Boulevart.be (http://labs.boulevart.be).

Essa API, que foi desenvolvida nos padrões da AjaxToolKit do Google, permite que utilizemos o webservice de pesquisa completo do google (blogs, imagens, web, livros) de forma rápida e prática.

Pré requisitos

O Resultado

Objetivo e Execução

Criaremos um pequeno sistema de busca localizado (somente em Português) que exibirá resultados formatos em html em uma caixa de texto dinâmica com título, resumo e link (na mesma janela) para o resultado.

Utilizaremos as duas bibliotecas citadas acima, a API Boulevart.be Google API tem dependência da As3CoreLib (tenha sempre essa biblioteca), pois precisa da Classe Json para codificar os resultados em XML (vindos do Webservice do Google). Explicar todo esse funcionamento é complicado, por este motivo disse que ensino superficialmente a utilizar estas APIs. Desculpem as constantes trocas entre API e Biblioteca.

Da Google API utilizaremos dois objetos de duas Classes e a Classe de Eventos, são eles:

  • GoogleWebSearch (be.boulevart.google.GoogleWebSearch)
    Para procurar resultados na Web
  • GoogleWebItem (be.boulevart.google.data.GoogleWebItem)
    Que é uma classe de Objeto que nos retorna as informações recebidas do WebService do Google
  • GoogleSearchEvent (be.boulevart.google.events.GoogleSearchEvent)
    Que controla os eventos de resposta do WebService do Google através da Google API

A GoogleWebSearch (Classe para pesquisa na web) fornece um método search que possui três parâmetros, criando o objeto e acessando o método, temos:

objetoSearch.search(searchString:String, index:int, language:String) onde:

  • searchString é o parâmetro de busca, ou seja, o que você deseja buscar
  • index é o número do resultado de onde você quer exibir, por padrão é exibe 8 resultados por página (pode ser personalizado)
  • language é a linguagem em que você quer buscar os resultados, no caso utilizarei “pt-BR”, para buscar somente em português

A Classe GoogleWebItem (Classe de Objeto que retorna os resultados) retorna vários itens, onde utilizaremos:

  • title que retorna o título da página da web
  • content que retorna o meta description da página e
  • url que retorna a url da página

Então, dessa forma, criaremos um script que nos permita buscar o parâmetro digitado em uma caixa de texto e, para cada resultado encontrado, exibir na caixa de texto um retorno em html.

Como os resultados por padrão são exibidos de 8 em 8 (isso pode ser modificado), criaremos dois botões de paginação, que farão novas buscas incrementando um contador e assim conseguiremos no mesmo formulário exibir várias páginas do mesmo resultado ou realizar novas pesquisas a qualquer momento, segue o código:

Código (ActionScript3)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
package
{
	/**
	 * Google Search
	 * @author Eder Lima
	 */
 
	import flash.display.Sprite;
	//importando a API Boulevart.be Google Api
	//disponível em labs.boulevart.be
	import be.boulevart.google.GoogleWebSearch;
	import be.boulevart.google.data.GoogleWebItem;
	import be.boulevart.google.events.GoogleSearchEvent;
	//importando eventos e classes do flash
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import fl.controls.UIScrollBar;	
 
	public class GoogleFlashSearch extends Sprite
	{
		//criando nossos objetos
		//objeto GoogleWebSearch
		private var _search:GoogleWebSearch = new GoogleWebSearch();
		//array para receber o título
		private var _resultsName:Array = new Array();
		//aray para receber a url
		private var _resultsUrl:Array = new Array();
		//array para receber a descrição
		private var _resultsInfo:Array = new Array();
		//contador para a pesquisa
		private var index:int = 0;
		//contador de resultados para paginação
		private var resultCount:int = 0;
		//variável de texto para a pesquisa
		private var queryString:String = "";
		//criando um scrollbar
		private var scroller:UIScrollBar = new UIScrollBar();
 
		//construtor da nossa Document Class
		public function GoogleFlashSearch():void
		{
			//criando um valor inicial para a caixa de texto
			resultinfo.htmlText = "Digite um termo e clique em \"Buscar\"";
			//executando a função que configura o ambiente
			configure();
		}
		//função que configura o ambiente
		private function configure():void
		{
			//adicionando buttonmode aos botões
			bp.buttonMode = true;
			bn.buttonMode = true;
			btsearch.buttonMode = true;
			//adicionando o evento click para o botão de busca e fazendo a chamada
			//da função search
			btsearch.addEventListener(MouseEvent.CLICK, search);
			//configurando a barra de rolagem
			configureScroll();
		}
		//função search, executa no clique do botão
		private function search(e:MouseEvent):void
		{
			//se o campo não estiver vazio
			if (queryfield.text != "") {
				//recebe o texto contido no campo e insere ele na variável de texto criada
				queryString = queryfield.text;
			}
			//realiza a busca
			startSearch();
		}
		//função startsearch, que realiza a busca com os argumentos informados
		private function startSearch():void
		{
			//removendo eventos dos botões de paginação durante a busca
			bn.removeEventListener(MouseEvent.CLICK, nextPage);
			bp.removeEventListener(MouseEvent.CLICK, previousPage);
			//exibindo um texto na caixa de texto durante a busca
			resultinfo.htmlText = "<strong>aguardando resultados...</strong>";
			//executando a busca utilizando o método search do objeto GoogleWebSearch
			//utilizando como argumento o texto armazenado na variável (queryString) de texto
			//informando de qual resultado começar a exibação (index = 0)
			//informando a linguagem "pt-BR"
			_search.search(queryString, index, "pt-BR");
			//adicionando uma função para o evento WEB_SEARCH_RESULT, que vai popular os arrays previamente criados
			_search.addEventListener(GoogleSearchEvent.WEB_SEARCH_RESULT, popArrays);
			//adicionando uma função para o erro do mesmo evento
			_search.addEventListener(GoogleSearchEvent.ON_ERROR, errorMessage);
		}
		//função que preenche os arrays com os dados recebidos
		private function popArrays(e:GoogleSearchEvent):void
		{
			//limpando arrays de resultados anteriores (paginação e novas consultas)
			_resultsName = [];
			_resultsUrl = [];
			_resultsInfo = [];
			//criando uma condicional onde para cada item encontrado como objeto da classe GoogleWebItem
			for each(var resultitem:GoogleWebItem in e.data as Object)
			{
				//inserimos o resultado de cada item title no array
				_resultsName.push(String(resultitem.title));
				//inserimos o resultado de cada item url no array
				_resultsUrl.push(String(resultitem.url));
				//inserimos o resultado de cada item content (description) no array
				_resultsInfo.push(String(resultitem.content));
				trace("a")
			}
			//ao final da condicional, chamamos a função que exibe os resultados
			showResults();
		}
		//função que exibe os resultados
		private function showResults():void
		{
			//limpa a caixa de texto
			resultinfo.htmlText = "";
			//como eu sei que a quantidade de resultados é 8 e não personalizei
			//vou utilizar um contador numérico para inserir os resultados
			//então enquanto existirem resultados
			for (var i:int = 0 ; i &lt; 8; i++)
			{
				//insiro o título em negrito vermelho
				resultinfo.htmlText += String("<span style="color: #000000;">" + _resultsName[i] + "</span>
");
				//insiro a descrição em cinza claro
				resultinfo.htmlText += String("<span style="color: #000000;">" + _resultsInfo[i] + "</span>
");
				//insiro o link
				resultinfo.htmlText += String("<span style="text-decoration: underline;"><a href="\">Abrir endereço</a></span>\n\n");
			}
			//ao final das inserções, atualizo a scrollbar
			updateScroll();
			//e readiciono os eventos para os botões de paginação
			bn.addEventListener(MouseEvent.CLICK, nextPage);
			bp.addEventListener(MouseEvent.CLICK, previousPage);
		}
		//função que vai para a página seguinte
		private function nextPage(e:MouseEvent):void
		{
			//incrementa nosso index
			index += 8;
			//realiza uma nova pesquisa
			startSearch();
		}
		//função que vai para a página anterior
		private function previousPage(e:MouseEvent):void
		{
			//decrementa nosso index
			if (index &gt;= 8) {
				index -= 8;
				//realiza uma nova pesquisa
				startSearch();
			}
		}
		//função que informa o erro, caso ocorra
		private function errorMessage(e:GoogleSearchEvent):void
		{
			trace("Sem resultados");
			resultinfo.htmlText = String("<span style="text-decoration: underline;"><span style="color: #00fff0;">Não foram encontrados resultados para a sua pesquisa.</span></span>
");
		}
		//função que configura a scrollbar
		private function configureScroll():void
		{
			scroller.scrollTarget = resultinfo;
			scroller.x = resultinfo.x + resultinfo.width;
			scroller.y = resultinfo.y;
			scroller.height = resultinfo.height;
			addChild(scroller);
		}
		//função que atualiza a scrollbar
		private function updateScroll():void
		{
			scroller.update();
		}
 
	}
 
}

E não é só isso. Essa API nos permite fazer sitemas mais complexos de busca, inserindo opção de pesquisa por imagens, tradução e outros serviços do Google.

Para quem quiser fazer mais, recomendo o blog dos criadores (no topo do artigo) para estudo, e quem quiser pode baixar os fontes utilizados neste tutorial no link abaixo.

Download dos Fontes

Exemplo do Google Search
Baixado 351 vezes
Tamanho 201.75 KB
Clique para fazer o download

E isso aí pessoal, esperam que tenha sido de valia esse artigo. Os comentários estão abertos, quem quiser falar fique a vontade, é bem-vindo.

Até o próximo, enjoy! ;)

Postado em 03-04-2009 por Eder Lima
em Action Script3, Classes, IDEs e APIs

Share/Save/Bookmark

Comentários

  • Bruno Monteiro disse:
    em 24 de setembro de 2009

    supimpa! ;p

 Escreva um Comentário

Seu nome

E-mail (não será publicado) (obrigatório)

Website

Comente

Spam protection by WP Captcha-Free