Receita para um formulário com busca de cep à la Rails :p
Ingredientes:
- Brazilian-rails
- Jquery
- Ruby-json
Modo de preparo:
Coloque uma porção generosa de utilitários que facilitam o dia a dia de nos Brasileiros em seu caldeirão Rails:
> gem --install brazilian-rails
“O gem brazilian-rails possui vários ingredientes para temperar a sua aplicação, mas no momento vamos nos concentrar na busca por cep. Você pode saber mais sobre o brazilian-rails no site da improve It.”
Em seguida acrescente uma medida de ruby-json:
> gem –install ruby-json
“O ruby-json é um utilitário para serializar as suas classes ruby para os padrões Json.”
Só para lembrar vamos utilizar Jquery também, mas isso já é um ingrediente padrão em qualquer receita Web sua, certo?
Não?? Como assim? Você ainda não utiliza JQuery? putz.. tsc.. tsc..
Se você ainda não usa, chegou a hora. http://jquery.com/ Instale na pasta /public/javascript na estrutura de diretórios do seu projeto Rails.
(Pretendo colocar alguns tutoriais de Jquery aqui no blog em breve ou nem tão breve assim rs.. “O blog é meu e eu post a hora que eu quiser hahahaa!”)
Bom, agora que temos todos os ingredientes necessários em seus devidos lugares, deixe eles cozinhando em quanto preparamos o nosso prato.
No controller, vamos criar um método para fazer a busca do cep e retornar o resultado para o cliente utilizando Json.
Você já tem o seu formulário pronto né? (model, view, controller)
Não??
**##%%!!
Você só quer moleza em? :p
Quer tudo na mão! ok ok vou fazer do zero, mas vê se presta atenção nessa porra e não vai só copiar e colar o código, pois é tão fácil que até comigo explicando você vai entender hehehe!
Vamos criar um controller:
> script/generate controller enderecos
Em seguida edite o seu controller enderecos_controller.rb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #classe do utilitario para serializar as classes ruby para o padrão json require 'json/objects' def localizar_endereco retorno = 1 # Classe do brazilian-rails responsavél pela busca de endereco. @endereco = BuscaEndereco.por_cep params[:cep] endereco = @endereco.fetch(0) numero = @endereco.fetch(1) bairro = @endereco.fetch(2) estado = @endereco.fetch(3) cidade = @endereco.fetch(4) rescue retorno = 0 ensure # preste atenção nesse bloco e veja como é dificil serializar um objeto JSon no Ruby # objeto = {:nome do atributo => valor do atributo} data = {:retorno => retorno, :endereco => endereco, :bairro => bairro, :cidade => cidade, :estado => estado} render :text => data.to_json #aqui acontece a mágica! end |
Vamos criar um formulário para testar a nosso busca:
Crie um arquivo /app/views/enderecos/index.html.erb e logo depois da tag “html” insira o código abaixo:
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 | <!-- Arquivo do framework jquery --> <script src="/javascripts/jquery.js" type="text/javascript"></script> Busca de endereço por cep <!-- Aqui vai o nosso código utilizando Jquery --> <script type="text/javascript"> $(document).ready(function() { $("#btncep").click(function(){ if ($.trim(endereco_cep.value) != "") { <!-- Aqui é uma firula, para o usuário não achar que não esta acontecendo nada--> $("#lbcep").html(" Pesquisando cep...") <!-- função do JQuery que Recebe o objeto serializado via ajax. --> <!-- Ta vendo como o JQuery é foda? --> $.getJSON("/enderecos/localizar_endereco", { cep: $("#endereco_cep").val()},function(json){ <!-- Atribuindo os valores para os componentes da página--> if (json.retorno == 1) { $("#endereco_endereco").val(json.endereco); $("#endereco_bairro").val(json.bairro); $("#endereco_cidade").val(json.cidade); $("#endereco_estado").val(json.estado); $("#endereco_numero").focus(); } else { alert("Cep não encontrado."); } $("#lbcep").html(" cep:")}); } else { alert("Informe um cep."); } }); }); </script> |
Agora vamos colocar o código do formulário no “body” da nossa página:
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 | <body>
<form id="frmBuscaCep" >
<fieldset>
<legend>Endereço</legend>
<table>
<tr><td>
<label for="endereco_cep" id="lbcep"> cep:</label><br />
<input type="text" id="endereco_cep" name="endereco[cep]" size="12" />
<a id="btncep" href="#"> Pesquisar Cep</a><span id="msgbuscacep"></span>
</td></tr>
<tr><td>
<label for="endereco_endereco"> endereco:</label><br />
<input type="text" id="endereco_endereco" name="endereco[endereco]" size="50" />
</td><td>
<label for="endereco_numero"> numero:</label><br />
<input type="text" id="endereco_numero" name="endereco[numero]" size="10" />
</td></tr>
</table>
<table>
<tr><td>
<label for="endereco_bairro"> bairro:</label><br />
<input type="text" id="endereco_bairro" name="endereco[bairro]" size="20" />
</td><td>
<label for="endereco_cidade"> cidade:</label><br />
<input type="text" id="endereco_cidade" name="endereco[cidade]" size="20" />
</td><td>
<label for="endereco_estado"> estado:</label><br />
<input type="text" id="endereco_estado" name="endereco[estado]" size="5" />
</td></tr>
</table>
</fieldset>
</form>
</body> |
Ufa!! terminamos 
Agora é só iniciar o seu servidor:
>> script/server
e acessar o endereço: http://localhost:3000/enderecos
E ai funcionou?
…
…
..
Não?? como assim? vc acompanhou o tutorial todo?
#!**#$!!!
Eu falei para você não ficar só copiando e colando o código….
HAHHAAA!! brincadeira, ainda falta um pequeno detalhe 
edite o arquivo: config/environment.rb
1 2 3 4 5 | if Rails::VERSION::STRING > '2.0.2' config.gem 'brazilian-rails' else require 'brazilian-rails' end |
Agora sim é só testar!
Abraço!
Iuri
ó, adicionei vcs no meu blog tb hein.
meu blog vai falar nada de porra nenhuma, mas é só pra passar o tempo …. heheheh
Nice post u have here
Added to my RSS reader
Inicialmente, parabéns pelo post!
Eu tentei o passo a passo e infelizmente não funcionou.
Agora pintou algumas dúvidas: Como é que o método localizar_endereco está sendo chamado a partir do controller enderecos?
A linha vai
$.getJSON(“/enderecos/localizar_endereco”… vai fazer o que?
Eu tentei colocar fixo um cep em um novo link e aí ele está retornando o objeto serializado…
“enderecos”,:action => :localizar_endereco, :cep => “13310200″ %>
Valeu!
Ola Ricardo,
o metodo localizar_endereco pega o valor do input endereco_cep:
$.getJSON(“/enderecos/localizar_endereco”, { cep: $(“#endereco_cep”).val()},function
@endereco = BuscaEndereco.por_cep params[:cep]
Muito bacana o post Iuri.
Aqui para mim, na linha 9 do JS:
if ($.trim(endereco_cep.value) != “”) {
Deu erro… fiz assim:
if ( $.trim($(“#endereco_cep”).val()) != “”) {
Funcionou blz…
Gostei bastante da dica… até pq não sabia como fazer essa busca por cep por ajax, e o jQuery é show.
Outra coisa que fiz, foi colocar o código javascript dentro do arquivo “application.js” e incluí esse arquivo no application.erb.html
Valeu pela dica.
Abração
Seria possivel essa busca de cep ser feita usando “Protocol Buffer” da google? Acho que ficaria bem mais rapido, apesar de json ser muito bom.
Oi Elverone, nunca usei o Protocol Buffer, mas posso te dizer que o json é bem rapido, pois se trata apenas de uma serialização de um objeto, não creio que você teria ganho, mesmo o outro sendo mais rápido.
Muito bom cara….
Funciona que é uma beleza…