Archive for the 'AJAX' Category

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

Monday, February 11th, 2008

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":

PHP:
  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

Thursday, March 29th, 2007

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:

JavaScript:
  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:
  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... ;)

JS Delegate

Monday, January 16th, 2006

Pra quem conhece a Delegate do Flash, e sabe de sua importância e grande utilização, vai apreciar, a minha versão para JS:

JavaScript:
  1. Delegate = {
  2. version: "1.0"
  3. }
  4. Delegate.create = function(obj, func, args){
  5. var f = function(){
  6. var target = arguments.callee.target;
  7. var func = arguments.callee.func;
  8. var args = arguments.callee.args;
  9. return func.apply(target, (args.length <1 ? arguments : args));
  10. };
  11. f.args = (args != undefined && args.length> 0 ? args : new Array());
  12. f.target = obj;
  13. f.func = func;
  14. return f;
  15. }

Funciona igualzim:

JavaScript:
  1. window.teste = "Dae?";
  2. document.getElementById("seuBotao").onclick = Delegate.create(window, function(){alert(this.teste)});

Abracetas... ;)