0 Compartilhamentos 353 Views 1 Comments

Como gerar facilmente um QR Code com a API do Google

15 de dezembro de 2014

Os QR Codes vêm sendo bastante utilizados atualmente, em várias áreas, para as mais diversas finalidades. Um QR Code (Quick Response Code, ou Código de Resposta Rápida) é um código de barras bidimensional. Trata-se de um tipo de código de barras desenvolvido pela empresa Denso-Wave (parte do grupo Toyota) no Japão, em 1994, inicialmente para utilização na indústria automobilística.

Ele foi criado para permitir o rastreamento de veículos durante o processo de fabricação, permitindo a verificação de diversos componentes em alta velocidade. Ao dizermos que o código é bidimensional (2D), queremos dizer que ele funciona tanto na horizontal quanto na vertical. Trocando em miúdos, isto significa que as informações podem ser armazenadas na horizontal e na vertical.

Capazes de armazenar uma quantidade bem maior de informações que os códigos de barras tradicionais (que trabalham apenas com uma dimensão), os QR Codes são passíveis de leitura por câmeras de smartphones e tablets (ao contrário dos códigos tradicionais, que requerem um leitor especial), desde que um aplicativo específico seja utilizado em conjunto, para a compreensão e extração dos dados contidos.

QR Code

Hoje temos QR Codes em revistas, websites, cartões de visita, anúncios, embalagens de produtos os mais diversos, e até mesmo em jogos eletrônicos (fornecendo mais informações a respeito do título e/ou do enredo, por exemplo, como no caso de Alan Wake, da Remedy Entertainment).

Alguns pontos de ônibus no país também contam com os códigos de barras bidimensionais, e assim os usuários podem obter informações sobre a previsão de chegada de várias linhas e também sobre itinerários (após escanearem os códigos, é claro).

Criando QR Codes com a Google API

Vamos agora ensinar a você, leitor do Código Fonte, a gerar QR Codes rápida e facilmente, sem que seja preciso instalar ou utilizar nenhum software, online ou offline. Dentro de alguns dias publicaremos um outro artigo a respeito deste mesmo assunto, aí sim falando a respeito de ferramentas e opções extras. Mas por agora, vamos te ensinar a gerar um QR code com a API do Google. Um processo extremamente simples.

O Google possui uma API chamada “Google Chart API”, a qual permite a criação de gráficos e a posterior inclusão (embed) dos mesmos em um website ou blog. Ocorre que a “Google Chart API” possui um parâmetro específico para a criação de “charts” do tipo “QR Code”. Trata-se do “cht”.

Na verdade, criar um QR Code utilizando esta API requer apenas a montagem de uma URL específica, incluindo na mesma os dados necessários. Por exemplo, para criar um QR Code do Código Fonte, basta fazer o seguinte:

No exemplo acima, “chamamos” a Google API e definimos que desejamos criar um gráfico do tipo QR Code, através do “cht=qr”. Já as dimensões do QR code são fornecidas através do “chs=150×150”, e após “chl=”, devemos informar o texto, ou, no caso, a URL.

Vamos deixar mais claro, utilizando o exemplo acima. Vamos destrinchá-lo, para que você entenda melhor. Desconsidere as aspas abaixo:

  • “https://chart.googleapis.com/chart?” : parte fixa. Chama a API;
  • chs=150×150″ : aqui, indicamos as dimensões, em pixels, do código a ser gerado. Poderia ser também 200×200, 250×250, e assim por diante;
  • “&cht=qr” : aqui indicamos que o tipo de gráfico será “QR”;
  • “&chl=https://codigofonte.uol.com.br” : finalmente indicamos o texto ou a URL.  Altere “codigofonte.uol.com.br” para o texto ou URL de sua preferência;

Perceba os parâmetros utilizados: “chs” (dimensões), “cht” (tipo de gráfico) e “chl” (texto).

Se você utilizar o link que montamos acima, para o QR Code do Código Fonte, você será redirecionado para uma página contendo o mesmo. Confira abaixo:

https://chart.googleapis.com/chart?chs=150×150&cht=qr&chl=https://codigofonte.uol.com.br

Você pode utilizar o código QR gerado de duas maneiras: salvando-o como uma imagem em seu computador e então o inserindo no local desejado, em seu site, ou então utilizando html, da maneira abaixo:

<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://codigofonte.uol.com.br">

E o resultado do código acima você vê abaixo, já “embedado”. Escaneie o código abaixo com algum aplicativo leitor de QR Codes:

Você pode se interessar

A horrível vida dos moderadores do Facebook
Artigos
3 visualizações
Artigos
3 visualizações

A horrível vida dos moderadores do Facebook

Carlos L. A. da Silva - 23 de maio de 2019

As condições de trabalho não poderiam ser piores e uma investigação revelou a dura batalha cotidiana desses heróis anônimos.

IBM lança Maratona Behind The Code no Brasil
Notícias
11 visualizações
Notícias
11 visualizações

IBM lança Maratona Behind The Code no Brasil

Redação - 22 de maio de 2019

IBM convoca desenvolvedores de todo o Brasil para participar da Maratona Behind The Code

NodeJS // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,808 visualizações
Vídeos
1,655 compartilhamentos6,808 visualizações

NodeJS // Dicionário do Programador

Thais Cardoso de Mello - 20 de maio de 2019

Nesse episódio vamos abordar o Node.js, esse ambiente para execução do códigos JavaScript, que foi o responsável pelo crescimento dessa linguagem. 📝 Links Citados → Documentação Oficial Node.Js: https://nodejs.org/en/docs/ → Callback // Dicionário do Programador: https://youtu.be/zUtqTM6_-PM ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ 🤝 Parceiro do CDFTV ▸ HOSTGATOR → Acesse: https://codft.me/hostgator → Cupom Exclusivo com 50% de desconto: CODIGOFONTE 📢 […]

One Response

  1. Boa tarde!

    Primeiramente parabéns pelo post.

    Tenho uma dúvida, utilizando este QR –

    É possível limitar a quantidade de caracteres do campo TEL.
    Estou pegando informações de atributos do meu Active Directory mas no atributo PHONENUMBER temo o ramal junto ao telefone EX: (99) 9999-9999 Ramal 999.
    Eu gostaria de limitar o campo TEL no QR em 10 caracteres, assim meu QR ficaria top.
    É possível ?
    Se sim, poderia me dar uma dica por favor.

    Resposta

Deixe uma Resposta para Dione Santos Cancelar resposta

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (17/05)
Notícias
6 visualizações
6 visualizações

Promoções de Jogos do Final de Semana (17/05)

Carlos L. A. da Silva - 17 de maio de 2019
Kernel Linux do Windows 10 é real!
Artigos
24 visualizações
24 visualizações

Kernel Linux do Windows 10 é real!

Carlos L. A. da Silva - 17 de maio de 2019
WordPress // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,808 visualizações
1,655 compartilhamentos6,808 visualizações

WordPress // Dicionário do Programador

Thais Cardoso de Mello - 13 de maio de 2019