Saga do programador » busca de cep http://www.sagadoprogramador.com.br Wed, 18 Aug 2010 13:34:02 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Receita para um formulário com busca de cep à la Rails :p http://www.sagadoprogramador.com.br/2008/11/receita-para-um-formulario-com-busca-de-cep-a-la-rails-p/ http://www.sagadoprogramador.com.br/2008/11/receita-para-um-formulario-com-busca-de-cep-a-la-rails-p/#comments Sat, 15 Nov 2008 16:47:18 +0000 Iuri Menescal http://www.sagadoprogramador.com.br/?p=23 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

]]> http://www.sagadoprogramador.com.br/2008/11/receita-para-um-formulario-com-busca-de-cep-a-la-rails-p/feed/ 7