.NET

24 nov, 2014

ASP .NET – Gerando QRCode com a API do Google

Publicidade

Hoje eu vou mostrar como podemos gerar QRCode usando a API do Google de forma bem simples.

A API do Google Chart Tools, também conhecida como Chart API, faz parte do projeto Google Visualization que engloba a ferramenta Interactive Charts. Sua principal vantagem é a simplicidade, já que tudo o que você precisa fazer para usá-la é uma chamada para sua URL, enviando os dados do gráfico via query string. A chamada retornará a imagem do gráfico.

Neste artigo, eu vou  mostrar como podemos gerar QRCode usando os recursos da Chart API do Google.

A API é possui três especificações principais:

  1. cht=qr – é o tipo de gráfico a utilizar, que neste caso será o QRCode;
  2. chl=<texto do código> – é o texto que vamos incluir no código gerado;
  3. choe=<tipo de output encoding> – será o UTF pretendido, Shift_JIS, UTF-8, ou ISO-8859-1 (valor opcional).

Também podemos colocar as dimensões da imagem gerada no código com a especificação chs.

O url deverá ficar da seguinte forma: http://chart.apis.google.com/chart?cht=qr&chl=http://www.macortti.net&chs=120×120

Se digitar este endereço no seu navegador, você deverá visualizar o QRCode gerado:

aspn_qrgoo1

Recursos usados:

Criando o projeto no Visual Studio 2013 Express for web

Abra o VS Express 2013 for web e clique em New Web Site. A seguir, selecione a linguagem Visual C# e o template ASP .NET Web Application.

Informe o nome QRCode_GoogleAPI e clique no botão OK.

aspn_qrgoo2

No menu WEBSITE, clique em Add New Item. Em seguida, selecione o template Web Form e informe o nome Default.aspx e clique no botão Add.

A seguir, a partir da ToolBox, inclua um controle Button com ID=btnGerarQRCode e um TextBox  com ID=txtTexto a partir da Toolbox na página Default.aspx;

Informe um texto acima da caixa de texto e disponha os controles conforme o leiaute da figura abaixo:

aspn_qrgoo3

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>Macoratti.net</h2>
    <hr />
        Informe um link ou texto<br />
    <asp:TextBox ID="txtTexto" runat="server" name="site" value="www." Width="200px"></asp:TextBox>
    <p/>
    <asp:Button ID="btnGerarQRcode" runat="server" Text="Gerar QRCode" Width="145px" />
    </div>
    </form>
</body>
</html>

Agora  no arquivo code-behind Default.aspx.vb inclua o código abaixo no evento Click do botão de comando Gerar QRCode:

Protected Sub btnGerarQRcode_Click(sender As Object, e As EventArgs) Handles btnGerarQRcode.Click
        Dim url As String
        url = "QrCode.aspx?texto=" + txtTexto.Text
        Response.Redirect(url)
    End Sub

Este código redireciona o usuário para a página QrCode.aspx, passando uma querystring com o nome texto com o conteúdo do texto, informando na caixa de textotxtTexto do formulário Default.aspx.

Vamos então incluir a página QrCode.aspx no projeto: no menu WEBSITE clique em Add New Item e selecione o template Web Form, informando o nome QrCode.aspx e clicando depois no botão Add.

A seguir, abra esta página no modo Source e defina o código abaixo:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="QrCode.aspx.vb" Inherits="QrCode" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="refresh" content="5; url=http://chart.apis.google.com/chart?cht=qr&chl=http://<%= Request.QueryString("texto") %>&chs=120x120"/>
    <title>QR Code em ASP .NET Utilizando Google API</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         Aguarde ................
    </div>
    </form>
</body>
</html>

Agora, executando o projeto, teremos a página Default.aspx apresentada.

aspn_qrgoo4

Digitando um texto na caixa de texto e clicando no botão de comando – Gerar QRCode, após alguns segundos, teremos a geração do QRCode conforme a figura a seguir:

aspn_qrgoo5

Pegue o projeto completo aqui: QrCode_GoogleAPI.zip

Veja também vídeo aula para este artigo em: VB .NET – Gerando, Salvando e Lendo QRCode