Tiago Crizanto

Criando componente para exibição de cotação de moedas e ações

Olá Pessoal!

O último post que fiz referente a cotação de moedas gerou algumas dúvidas e a solução foi utilizada por muitos leitores.
Pelo “movimento” que o último tópico referente a cotação do dólar teve, resolvi dar uma continuação a saga.
Dessa vez vamos fazer um componente para exibir cotações de moedas e de ações em um aplicação web qualquer. A última vez que precisei fazer um componente deste tipo eu construí um componente para ser exibido em um site desenvolvido em JQuery Mobile.

Neste exemplo você vai precisar do Visual Studio onde vamos desenvolver uma aplicação ASP NET MVC 4 para exibir os dados.

Nossa fonte de dados

Vamos utilizar um webservice disponibilizado pela infoinvest. Essa fonte de dados nos retorna os dados no formato json de acordo com os parametros passados através de uma url.
O webservice que vamos utiliza é o http://webservices.infoinvest.com.br/cotacoes/cotacoes_handler.asp. Se você tentar usar somente essa url não vai obter nenhum resultado, pois, ainda não passamos os parâmetros necessários.
Veja abaixo o retorno da chamada do webservice efetuando uma consulta da ação ITUB4 (Itaú).

{
	SP.ITUB4: {
		stock_id: "SP.ITUB4",
		display: "ITUB4",
		tendencia: "",
		valor: "33.94",
		unidade_valor: "R$",
		data_atualizacao: "6/17/2015 5:07:00 PM",
		variacao_pontos: "-0.609999999999999",
		variacao_percentual: "-1.76555716353111",
		abertura: "34.33",
		fechamento: "34.55",
		aftermarket: "",
		aftermarket_datetime: "",
		min: "33.8",
		max: "34.59",
		media: "34.05",
		qtd_negocios: "26980",
		volume_financeiro: "",
		qtd_acoes_negociadas: "15615500",
		media_52: "",
		variacao_52: "",
		data_do_min_52: "",
		data_do_max_52: "",
		min_ytd: "",
		max_ytd: "",
		media_ytd: "",
		base_ytd: "",
		variacao_pontos_ytd: "",
		variacao_percentual_ytd: "",
		min_52: "",
		max_52: "",
		_cache_last_update: "4/5/2016 10:32:17 PM",
		_cache_misses_since_always: "1",
		_from_cache: "false",
		_now: "4/5/2016 10:32:17 PM"
	}
}

Mãos a obra!

Após conhecer um pouco sobre nossa fonte de dados, vamos realmente ao que interessa. Vamos criar um componente para exibir as cotações do dólar de Petrobrás (PETR4), Itaú (ITUB4) e Pão de Açucar (PCAR4).

Vamos inciar criando um projeto ASP NET MVC 4 chamado Cotacoes. Não é meu objetivo neste artigo fazer um componente bem desenha etc, etc, etc. Ele irá funcionar! E isso que nos importa neste momento. Mas claro, se você quiser contribuir com uma solução bem desenhada será muito bem vindo! \0/

Vamos começar pelo controller. Vamos obter as informações do webservice e mandar para nossa view. Crie um método chamado GetCotacoes para retornar um Json conforme abaixo:

public JsonResult GetCotacoes()
{
	string json_data = "";
	using (var w = new WebClient())
	{
		try
		{
			IWebProxy defaultWebProxy = WebRequest.DefaultWebProxy;
			defaultWebProxy.Credentials = CredentialCache.DefaultCredentials;
			w.Proxy = defaultWebProxy;
			json_data = w.DownloadString("http://webservices.infoinvest.com.br/cotacoes/cotacoes_handler.asp?"es="es=sp.petr4"es=sp.itub4"es=sp.pcar4"es=BR.IBOVESPA"es=US.DOLARC);
		}
		catch (Exception ex)
		{
			throw new Exception("", ex);
		}
	}
	return Json(json_data, JsonRequestBehavior.AllowGet);
}

Pausa para algumas observações:

Observação 1
Se você estiver em uma rede em um domínio provavelmente você precisará autenticar para conectar no webservice. O código abaixo passa as credenciais padrão.

IWebProxy defaultWebProxy = WebRequest.DefaultWebProxy;
defaultWebProxy.Credentials = CredentialCache.DefaultCredentials;
w.Proxy = defaultWebProxy;

Observação 2

Se desejar cotação de outras ações basta alterar a linha de código abaixo informando o código da ação.

json_data = w.DownloadString("http://webservices.infoinvest.com.br/cotacoes/cotacoes_handler.asp?"es="es=sp.petr4"es=sp.itub4"es=sp.pcar4"es=BR.IBOVESPA"es=US.DOLARC");

O código sp indica que você está solicitando informações da BOVESPA. Também é possível consultar outros índices. Um exemplo é o NY.USDMY – que é o código de negociação no mercado de balcão norte-americano de Usiminas.
Não possuo a documentação completa dos índices suportados por este webservice. Assim que conseguir atualizo aqui no post. Se você souber e puder contribuir é só informar nos comentários abaixo que eu atualizo o post.

Continuando…

Para facilitar o entendimento vamos por partes. Ao final fica fácil juntar tudo.
Crie um arquivo javascript dentro da pasta scripts chamados cotacoes.js e coloque o código abaixo:

$(function() {
$(function() {
    $.ajax({
        type: 'GET',
        cache: false,
        url: '/Home/GetCotacoes/',
        dataType: 'json',
        contentType: "application/json; charset=utf-8"
    })
    .then(function (data) {

        var json = $.parseJSON(data);

        $.each(json, function (i, item) {
            var tr = $("");
            var display = $("");
            $(display).html(item.display);

            var valor = $("");
            $(valor).html(item.valor);
            
            var img = createImage(parseFloat(item.variacao_percentual).toFixed(2));
            var variacao = $("").append(img);

            $(tr).append(display);
            $(tr).append(valor);
            $(tr).append(variacao);

            $("#cotacoes").append(tr);
            
        });
    })
    .fail(function (e) {
        //Em caso de erro
    });
});

function createImage(stats) {
    var img;
    if (stats > 0)
        img = $("").attr("src", "/Content/Images/setinha_up.gif");
    else if (stats < 0)
        img = $("").attr("src", "/Content/Images/setinha_down.gif");

    return img;
}

O código acima percorre o json retornado pelo webservice, constrói elementos html e os insere em uma tabela.
Agora vamos criar o HTML base para exibir as cotações em uma tabela:

@{
    ViewBag.Title = "Exibição de cotações";
}

@section scripts{
    
}


    

        

            Cotações de moedas / ações
        
        

            

                

                    
Display
                    
Cotação
                
            
        

    

Pronto! Execute o visual studio e veja o resultado!

Veja o código do projeto no GIT.