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
- As3CoreLibrary
- Boulevart.be Google API
- Conhecimento em AS3, XML e interação
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 < 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 >= 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
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! ;)

em 24 de setembro de 2009
supimpa! ;p