API de Consulta a Tabela FIPE

Nesta última semana em algumas horas livres desenvolvi uma nova API que pretendo utilizar em alguns projetos futuros. Esta API tem por objetivo facilitar o acesso aos dados disponibilizados pela Fundação Instituto de Pesquisas Econômicas – FIPE  relacionando os preços médios de veículos no mercado nacional.

Como a FIPE não fornece nenhuma ferramenta para este acesso facilitado, criei este wrapper que utiliza os resultados fornecidos de forma aberta na página da FIPE e os transforma em um retorno JSON simplificado.

O endereço de acesso a API é:

http://fipeapi.appspot.com/

Por exemplo, se você quiser consultar a listagem de marcas de carros nacional da Tabela FIPE, utilize esta requisição abaixo:

GET: http://fipeapi.appspot.com/api/1/carros/marcas.json

Todos os dados disponibilizados nesta API de consulta simples, são de propriedade da Fundação Instituto de Pesquisas Econômicas – FIPE, só estou dando uma ajudinha na consulta ;)

CakePHP + Amazon SES

Há algum tempo a Amazon lançou um serviço muito interessante relacionado ao envio de e-mail em grande escala com um custo bem baixo. Este serviço chamado Amazon SES fornece uma boa API para envio de e-mails.

Um dos frameworks que mais utilizo em minha rotina de trabalho é o CakePHP, um ótimo framework MVC escrito em PHP.

O CakePHP possui um componente para envio de e-mails sobre a função mail do PHP ou por SMTP.

Como estava querendo testar o serviço da AWS de envio de e-mails resolvi criar uma solução compatível com o CakePHP.

Criei um novo componente que estende o EmailComponent chamado EmailServiceComponent para ter as habilidades de operar com o Amazon SES.

O código fonte deste componente pode ser baixado no projeto que crie no GitHub, clicando aqui.

Como utilizar:

Primeiro devemos baixar o Amazon SDK PHP, neste link.

Descompacte o arquivo na pasta vendors de sua aplicação, e renomeie a pasta principal da SDK para aws-sdk.

Logo após renomeie o arquivo config-sample.inc.php para config.inc.php e insira suas credenciais de acesso nele.

Uma vez a SDK estando configurada e devidamente colocada em seu projeto, baixe o EmailServiceComponent disponível aqui e coloque em sua pasta controllers/components.

Quando for necessário enviar um e-mail usando o Amazon SES basta carregar o componente no controller:

var $components = array('EmailService');

E habilitar o aws_ses como função padrão para envio de e-mails:

$this->EmailService->delivery = 'aws_ses'; // ou 'aws_ses_raw' se você desejar enviar um e-mail complexo ou com anexos...

Depois disso é só seguir o procedimento padrão de envio de e-mails do Cake, só lembrando de sempre usar EmailService ao invés de Email.

Se tiverem dúvidas deixem no espaço de comentários deste post.

Twitavatar

Após um pequeno hiato de 2 anos estou de volta no Blog ;)

Nos últimos meses venho estudando Python focado no Google App Engine. Para quem não conhece o Google App Engine ou GAE é um serviço de desenvolvimento e hospedagem baseado em Python ou Java cedido pelo Google para uso dos desenvolvedores em geral. Ou como eles mesmos definem:

O Google App Engine oferece um conjunto completo de desenvolvimento que utiliza tecnologias familiares para criar e hospedar aplicativos da web.

Estou achando as possibilidades de desenvolvimento em Python muito interessante, em especial com a facilidade de desenvolver algo para o GAE e em como hospedar lá.

Meu primeiro “projetinho” público hosteado e desenvolvido para o GAE sobre Python é o Twitter Avatar Image Cache ou Twitavatar. É um serviço bem simples com apenas uma finalidade (inicialmente) que é acessar de forma fácil a imagem de avatar de um usuário do twitter.

A forma de se utilizar é a mais direta possível, confira:

http://twitavatar.appspot.com/COLOQUE_O_USUARIO_DO_TWITTER_AQUI.png

Normalmente um avatar do twitter têm uma URL complexa baseada nos servidores de armazenagem de arquivo deles. Resumindo seria pegar uma URL de avatar assim:

http://a1.twimg.com/profile_images/1124040897/at-twitter_reasonably_small.png

E deixa-la assim:

http://twitavatar.appspot.com/twitter.png

E você ainda têm a vantagem que se o usuário mudar sua imagem de exibição o seu link estará automaticamente atualizado já que ele se baseia no usuário do twitter e não no nome do arquivo de imagem.

Simples não?

Espero que este não seja o meu único projeto no GAE, já estou com outras idéias legais e depois contarei as novidades por aqui.

Abs!

Lightbox + Flash: A missão II

Olá,

Devido a grande quantidade comentários em um post sobre este mesmo assunto, resolvi dar uma revisada na técnica.

Fato que eu prefiro e utilizo em meus projetos o Shadowbox por ser muito mais completo, extensível, adaptável e ainda por cima funciona com jQuery. Se alguém quiser saber como operar Flash + Shadowbox confira aqui.

Porém neste post iremos trabalhar novamente com Lightbox, dado a quantidade de dúvidas e também por ser mais popular.

Abordarei inicialmente e como sempre com ActionScript 2.0 porém farei também em outro post como utilizar a solução em AS 3.0.

A idéia é a mesma, baixa-se o script do Lightbox, descompacte-o na pasta de seu projeto e depois é só ligar o flash ao mesmo.

O objetivo final é termos uma ação semelhante a este exemplo que disponibilizarei no final do artigo. Não abordarei, assim como no outro post, como instalar o Lightbox em sua página HTML, dado que isto está na página do script.

Mãos a obra

Um dos problemas mais relatados em comentários no artigo/post anterior é a questão de que as últimas versões do Lightbox estarem com uma ação embutida na sua execução que esconde os SWFs da página, o que para muitos esteticamente não é interessante.

É aí que entra o foco principal desta nova postagem. Eu fiz um hack em JavaScript para o Lightbox afim de evitar essa ação de esconder os SWFs o máximo possível e também facilitar a chamada de ação junto ao flash. Este script pode ser baixado aqui e deverá ser carregado junto com o seu HTML. Desde que o SWF tenha fundo(wmode) transparent ou opaque, e com excessão de versões mais antigas do FlashPlayer em ambiente linux, no restante dos sistemas operacionais e navegadores não terá problema algum com SWFs.

Além deste pequeno hack, criei uma função para auxiliar a chamada do Lightbox pelo Flash, confiram:

actionscript
< view plain text >
  1. //lightBox function for call JavaScript...
  2. function Lightbox(src, title)
  3. {
  4. if(typeof src == "string") src = [src];
  5. if(typeof title == "string") title = [title];
  6. if(typeof title == "undefined") title = [];
  7.  
  8. function addSlashes(str) { return "'" + escape(str) + "'"; }
  9.  
  10. if(flash.external.ExternalInterface && flash.external.ExternalInterface.available)
  11. {
  12. flash.external.ExternalInterface.call("Lightbox.start", src, title);
  13. }
  14. else
  15. {
  16. for(var i=0; i<src.length; i++) src[i] = addSlashes(src[i]);
  17. for(var i=0; i<title.length; i++) title[i] = addSlashes(title[i]);
  18.  
  19. getURL("javascript:Lightbox.start([" + src.join(",") + "],[" + title.join(",") + "]);void(0);");
  20. }
  21. }

Com essa função podemos chamar a execução com maior facilidade, também implementei a possibilidade abrir um grupo de fotos por vez, aproveitando dos recursos de galeria do Lightbox. Coloquei a possibilidade de colocar uma legenda/title por foto. Ficou bem mais completo que a nossa primeira tentativa.

Copie a função acima e coloque dentro de seu arquivo .fla e depois basta colocar uma chamada para função Lightbox em seu objeto para que a mágica aconteça. Exemplo:

actionscript
< view plain text >
  1. bt1.onRelease = function()
  2. {
  3. Lightbox(['images/image-1.jpg', 'images/thumb-1.jpg'], ['Legend Test', 'çóh?']);
  4. };

No código acima, estamos setando uma ação de clique/release a um botão chamado bt1. Ao clicar, será aberto um grupo de imagens(array de valores no primeiro argumento), com suas respectivas legendas(array de valores do segundo argumento).

Finalizando

Então é isso pessoal, creio que agora ficou redondinho. Se alguém achar algum bug ou quiser testar melhor no Internet Explorer(só dei uma testada assim por cima :P ) fiquem a vontade.

Para baixar um exemplo completo de utilização junto com todos os scripts clique aqui.

Abraços!

jQuery – Belas introduções

Bom,

Quero ver se tiro um tempinho para falar sobre a super biblioteca de funções JavaScript chamada jQuery, que muda/facilita a vida de qualquer desenvolvedor web, chega até a ser um caso de depedencia :P

Pois bem, vo indicar aos leitores dois belos tutoriais para iniciantes, overview geral mesmo:

Usando jQuery na prática do Nando Vieira

e este Guia completo sobre jQuery para iniciantes que vi no site Pinceladas da Web

Abracetas.. ;)

Correios, SEDEX e o tão famigerado Cálculo de Frete

Opa?

Nesta vida de desenvolvedor web alguns desafio tendem a surgir em nosso caminho, um deles sem dúvida será este que abordarei aqui, de forma rápida de direta, o Cálculo de Frete dos Correios. Com base em cep de origem, cep de destino e o peso da encomenda, obteremos o valor do SEDEX. Recurso muito utilizado em lojas virtuais e sistemas com delivery na web =)

Algo que muitas pessoas não sabem, é que os Correios disponibilizam um serviço de consulta web, com resposta em XML(as possibilidades iniciam aí :P ), de forma simples, acessado via URL, sem webservices, ai vai um exemplo deste acesso:

http://www.correios.com.br/encomendas/precos/calculo.cfm?resposta=xml&servico=40010& cepOrigem=17012-350&cepDestino=01102-000&peso=0.31

Percebam que ao acessarmos o endereço acima, obtemos um XML simples, com todos os dados necessários para a consulta. Tudo que devemos fazer é completar a URL acima com nossos dados, da seguinte forma:

servico=40010 é sedex, outros serviços tem que procurar no site dos correios
cepOrigem=17012-350 -> CEP de Origem (do teu cliente no caso)
cepDestino=88818-400 -> de quem vai receber
peso=0.62 -> peso da encomenda

Uma vez com nossa requisição devidamente configurada, basta tratarmos o XML da forma mais interessante para seu projeto. Javascript, Flash, PHP, Java, Ruby on Rails e por aí vai =P

Neste caso, criaremos uma função de exemplo em PHP para tratarmos esta resposta, e obtermos os dados de forma fácil e direta. Aí vai ela “mastigadinha”:

  1. < ?php
  2.    
  3.     function getSEDEX($cepOrigem = "88818-520", $cepDestino = "88818-400", $peso = 0.5)
  4.     {
  5.         $urlCorreios = "http://www.correios.com.br/encomendas/precos/calculo.cfm?resposta=xml&servico=40010&cepOrigem=%s&cepDestino=%s&peso=%s";
  6.        
  7.         $urlCorreios = sprintf($urlCorreios, $cepOrigem, $cepDestino, $peso);
  8.        
  9.         //carregando url dos correios...
  10.         //caso o seu servidor não permita o uso da função file para url's externas
  11.         //recomenda-se a utilização de CURL - http://www.php.net/manual/en/ref.curl.php
  12.         $carrega = file($urlCorreios) or die("Problemas em obter os dados dos correios");
  13.        
  14.         //tratando string xml obtida. Removendo espaços e linhas para facilitar...
  15.         $conteudo = trim(str_replace(array("\n", chr(13)), "", implode($carrega, "")));
  16.        
  17.         if(strlen($conteudo) < 1) return false;
  18.        
  19.         //informações de origem tratadas com RegExp...
  20.         preg_match_all("/<uf_origem>(.+)< \/uf_origem>/", $conteudo, $uf_origem);
  21.         preg_match_all("/<local_origem>(.+)< \/local_origem>/", $conteudo, $local_origem);
  22.         preg_match_all("/<cep_origem>(.+)< \/cep_origem>/", $conteudo, $cep_origem);
  23.        
  24.         //informações de destino tratadas com RegExp...
  25.         preg_match_all("/<uf_destino>(.+)< \/uf_destino>/", $conteudo, $uf_destino);
  26.         preg_match_all("/<local_destino>(.+)< \/local_destino>/", $conteudo, $local_destino);
  27.         preg_match_all("/<cep_destino>(.+)< \/cep_destino>/", $conteudo, $cep_destino);
  28.        
  29.         //informações sobre a encomenda tratadas com RegExp...
  30.         preg_match_all("/<peso>(.+)< \/peso>/", $conteudo, $peso);
  31.         preg_match_all("/<preco_postal>(.+)< \/preco_postal>/", $conteudo, $preco_postal); 
  32.        
  33.         //objeto contendo as informações sobre o frete...
  34.         $sedex = array(
  35.             "uf_origem" => $uf_origem[1][0],
  36.             "local_origem" => $local_origem[1][0],
  37.             "cep_origem" => $cep_origem[1][0],
  38.             "uf_destino" => $uf_destino[1][0],
  39.             "local_destino" => $local_destino[1][0],
  40.             "cep_destino" => $cep_destino[1][0],
  41.             "peso" => floatval($peso[1][0]),
  42.             "valor" => floatval($preco_postal[1][0])
  43.         );
  44.        
  45.         return $sedex;
  46.     }
  47.    
  48.     //informações processadas. Cep de Origem, Cep destino, Peso...
  49.     $sedex = getSEDEX("88818-520", "88818-400", 0.750);
  50.    
  51.     //enfim exibimos o valor de nossa encomenda...
  52.     echo "R$ " . number_format($sedex["valor"], 2, ",", ","); //valor do sedex, já formatado em reais...
  53.  
  54. ?>

Uma vez com a função getSEDEX executada, obtemos todos os dados tratado no retorno da mesma.

Fácil não?

Abracetas… ;)

Lightbox + Flash

UPDATE: Atenção povo, fiz um novo artigo sobre este mesmo assunto, desta vez melhorado, cliquem aqui para acompanhar.

Opa?

Acho que a maioria dos desenvolvedores web já conhecem o Lightbox. É um efeitinho super supimpa (tirando o peso) de ampliar imagens, baseado em Javascript e CSS.

Pois bem, devido ao fato de ser JS e CSS, muita gente fica na mão se deseja utilizar o recurso no Flash, contando que estejam sem tempo ou sem conhecimento, para desenvolver tal efeito 100% Flash. Aí que entra a integração que apresentarei aqui ;)

Lightbox + Flash

Para utilizar o LightBox acionado a partir do flash, primeiro você deve fazer o de praxe como apresentado neste link(carregar os arquivos .js e .css, as imagens e etc), deixar tudo certinho como se fosse usar o LightBox normalmente, isso tudo você acerta no HTML que receberá o SWF(Flash) com a ação em questão.

Depois coloque a seguinte função JavaScript(entre as tags SCRIPT) no mesmo HTML:

  1. function showFoto(src)
  2. {
  3. //criando um link falso, para o LightBox captar as informações
  4. var a_false = document.createElement("A");
  5. a_false.rel = "lightbox";
  6. a_false.href = src;
  7. //chamando a função do lightbox responsável pelo início das ações
  8. myLightbox.start(a_false);
  9. //anulando o link
  10. a_false = null;
  11. }

E no Flash, em nosso botão, chamamos na ação onRelease, o seguinte AS:

actionscript
< view plain text >
  1. getURL("javascript:showFoto('MINHAFOTOAQUI.jpg');", "_self");

Agora, é só publicar, botar o SWF no html preparado e só alegria =D

Obs.: Para o efeito ficar completo, é necessário o SWF estar com fundo transparent(wmode=transparent) ou opaco(wmode=opaque), para que o lightbox não fique por trás do SWF.

[update]

Na ultima versão do LightBox, colocaram uma função para esconder os SWFs da página na hora do efeito, logo quem notar que seu SWF sumiu do fundo ao aciona-lo, já sabe o porque :S

Neste link http://www.huddletogether.com/projects/lightbox2/#download tem o changelog da versão, com as mudanças que teve.

Abracetas… ;)