Adobe Flex: Consumir um serviço YQL (Yahoo Query) com JSON via Adobe Flex (SDK 4,6)

sexta-feira, 13 de janeiro de 2012


Recentemente descobri um serviço muito útil chamado YQL que mistura a facilidade dos comandos SQL com a integração de APIs públicas para consumir diversos serviços, tanto nacionais quanto internacionais. Há uma postagem sobre o YQL que pode ser visto aqui.

Depois de conhecer esse serviço decidi fazer um exemplo de integração com o Adobe Flex para coletar dados de tracking dos Correios.

Primeiramente devemos verificar a consulta no YQL:

Ao acessar o YQL, clicar em Open Console.
Clicar em Show Comunity Tables.
Depois em Data Tables, buscar as tabelas dos Correios, vamos utilizar a tabela Encomendas (brazil.correios.encomendas).



Em seguida, vamos testar quais campos a consulta deverá trazer. Coloquei uma encomenda minha no número para verificarmos os campos. Lembre-se que vamos utilizar o JSON, portanto marque esta opção e no campo ao lado do JSON deixe em branco. A consulta ficou assim:

select * from brazil.correios.encomendas where numero='RQ085265743BR';

O resultado típico de um retorno JSON:

{
 "query": {
  "count": 5,
  "created": "2011-12-28T11:07:30Z",
  "lang": "en-US",
  "results": {
   "status": [
    {
     "data": "14/12/2011 12:39",
     "local": "AC HADDOCK LOBO - SAO PAULO/SP",
     "situacao": "Postado",
     "detalhes": ""
    },
    {
     "data": "14/12/2011 17:17",
     "local": "AC HADDOCK LOBO - SAO PAULO/SP",
     "situacao": "Encaminhado",
     "detalhes": "Em trânsito para CTC MOOCA - SAO PAULO/SP"
    },
    {
     "data": "15/12/2011 11:23",
     "local": "CDD FARIA LIMA - SAO PAULO/SP",
     "situacao": "Mal encaminhado",
     "detalhes": "Em tratamento, aguarde. "
    },
    {
     "data": "16/12/2011 12:12",
     "local": "AC BELA VISTA - SAO PAULO/SP",
     "situacao": "Disponível em Caixa Postal",
     "detalhes": "Endereço: AV BRIGADEIRO LUIS ANTONIO,996 - BELA VISTA"
    },
    {
     "data": "19/12/2011 17:37",
     "local": "AC BELA VISTA - SAO PAULO/SP",
     "situacao": "Entregue",
     "detalhes": ""
    }
   ]
  }
 }
}


Por fim, precisamos da URL que gerou a consulta, ela fica no rodapé do console (The Rest Query):

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20brazil.correios.encomendas%20where%20numero%
3D'RQ085265743BR'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=

Agora que já verificamos o retorno OK da parte de serviços, vamos construir o interpretador no Flash Builder.

Vamos utilizar apenas 3 componentes principais: um textInput para o usuário colocar o número do tracking, um button para processar e um datagrid para os resultados.

A tela principal ficará da seguinte forma:


O dataGrid ficará configurado conforme abaixo, lembrando das variáveis do serviço que foi apresentado acima (data, local, situacao e detalhes):

<s:DataGrid id="dgCorreios" left="4" right="10" top="63" bottom="10" requestedRowCount="4">
  <s:columns>
   <s:ArrayList>
    <s:GridColumn dataField="data" headerText="Data"></s:GridColumn>
    <s:GridColumn dataField="local" headerText="Local"></s:GridColumn>
    <s:GridColumn dataField="situacao" headerText="Situação"></s:GridColumn>
    <s:GridColumn dataField="detalhes" headerText="Detalhes"></s:GridColumn>
   </s:ArrayList>
  </s:columns>
 </s:DataGrid>
Para consumir o serviço, vamos utilizar o HTTPService:

 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
  <s:HTTPService resultFormat="text" id="hsYQL" showBusyCursor="true"/>
 </fx:Declarations>

Para consumir o serviço, vamos utilizar o seguinte método: 
private function searchYQL():void
{
     hsYQL.url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20brazil.correios.encomendas%
20where%20numero%3D'"+tiTracking.text+"'&
format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
    hsYQL.addEventListener(ResultEvent.RESULT, resultHandler);
    hsYQL.send();
}
Lembrando que o valor da url acima é o mesmo que coletamos no The Rest Query, apenas modificando o valor do número do tracking que estava fixado pelo valor do controle do textInput (tiTracking).

O resultado será tratado pelo resultHandler:
private function resultHandler(e:ResultEvent):void
{

    var dadosJSON:Object = JSON.parse(e.result.toString());

    var dadosArr:Array=dadosJSON.query.results.status as Array;
     var dadosArrList:ArrayCollection=new ArrayCollection(dadosArr);
    dgCorreios.dataProvider=dadosArrList;
}

Como os dados do JSON não são compatíveis diretamente com o dataProvider do componente dataGrid preciamos realizar 2 passos para transformar os dados no formato padrão IList, que é converter para um Array e depois para o ArrayCollection.

O resultado final:



Nenhum comentário:

Postar um comentário