|
O c�digo QR foi inventado pela ind�stria automotiva. A Toyota pediu ao seu fornecedor Denso Wave para desenvolver um c�digo de barras para
identificar os componentes com seguran�a e facilidade. Os geradores QR foram originalmente usados em aplica��es industriais. Portanto, eles tinham que
ser facilmente impressos em forma e tamanho, bem como permanecer leg�veis quando parcialmente destru�dos ou sujos.
Um c�digo QR � um c�digo de barras bidimensional que armazena informa��es em pontos pretos e brancos (chamados pixels de dados ou �m�dulos de
c�digo QR�). Al�m da vers�o em preto e branco, voc� tamb�m pode criar um c�digo QR colorido. Para que esses c�digos funcionem sem problemas, certifique-se
de que o contraste � suficiente e o resultado n�o � negativo (em termos de cor). Para tornar seu c�digo QR ainda melhor, voc� tamb�m pode obter um c�digo
QR com logotipo. Um c�digo QR pode ser um texto, uma URL, um SMS ou informa��es de contato.
Os c�digos QR s�o o caminho a percorrer para criar um link entre os produtos do mundo real (marcados com o c�digo QR) e a Internet M�vel, em
qualquer lugar, a qualquer hora. Como os c�digos QR facilitam a transfer�ncia de um link da web para um telefone celular, eles fornecem uma barreira
significativamente menor para visitar um site com um telefone inteligente. Mas voc� tamb�m pode trabalhar com outros textos e dados, como mensagens publicit�rias,
n�meros de telefone e at� cart�es de visita inteiros em formato vCard.
Nesse tutorial vamos criar um projeto para criar um QR Code com qualquer tipo de informa��o, seja um SMS, uma URL, um e-mail ou qualquer outra informa��o.
Ent�o vejamos como desenvolver esse projeto:
� Abra o App Inventor acessando o link:
App Inventor 2
� Na tela apresentada, clique no Bot�o Create Apps!, em seguida entre com sua conta.
� Crie um novo projeto com o nome: CriarQRCode.
Agora vamos alterar algumas propriedades da Tela Principal:
Alterando as propriedades da Tela Principal:
� Clique em Screen1 na se��o Componentes.
� AlinhamentoHorizontal: Centro: 3.
� CorDeFundo: Marrom Claro.
� PrimaryColor: Marrom Escuro.
� Theme: Dark.
� T�tulo: Criador de QR Code.
Agora vamos inserir os componentes do nosso projeto na seguinte ordem:
� 1 Legenda (para mostrar uma mensagem).
� 1 Caixa de Texto (para receber a informa��o).
� 1 Bot�o (para criar o QR Code).
� 1 Imagem (para mostrar o QR Code gerado).
� 1 IniciadorDeAtividades.
Agora vamos alterar algumas propriedades dos componentes:
Alterando as propriedades da Legenda:
� Nome: legTexto.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 18.
� Fam�liaDaFonte: sem serifa.
� Texto: Digite a informa��o desejada:
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades da Caixa de Texto:
� Nome: ctTexto.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 18.
� Fam�liaDaFonte: sem serifa.
� Largura: 90 por cento.
� Texto: Deixe em branco.
� AlinhamentoDoTexto: Esquerda: 0.
� CorDeTexto: Azul.
Alterando as propriedades do Bot�o:
� Nome: btnCriarQR.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 16.
� Fam�liaDaFonte: sem serifa.
� Imagem: fa�a o download da imagem do exemplo e coloque nesse componente.
� Largura: 60 por cento.
� Texto: Criar um QR Code:
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Preto.
Alterando as propriedades da Imagem:
� Nome: imgQRCode.
� Esse componente receber� o c�digo criado.
Alterando as propriedades do Iniciador de Atividades:
� Nome: iniAtividade.
Feito isso, o seu projeto dever� ficar igual ao da Figura 22.1:
Figura 22.1 � Projeto com os componentes
inseridos e configurados.
Agora vamos criar os c�digos dos componentes e tornar nosso projeto funcional.
Vamos l� ent�o:
C�digo para o Bot�o btnCriarQR:
� Na tela Blocos, clique no componente btnCriarQR e arraste o primeiro bloco para a �rea em branco.
|
� Clique no componente iniAtividade, arraste o segundo bloco verde e encaixe na lacuna �fazer� do bloco marrom.
Altere a op��o A��o por: UrlDeDados.
|
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do bloco verde.
|
� Clique na categoria Texto, arraste o segundo bloco e encaixe na primeira lacuna do bloco vermelho. Na lacuna em branco digite:
�http://qrcode.kaywa.com/img.php?s=20&d=�.
|
� Clique no componente ctTexto, arraste o segundo bloco verde e encaixe na segunda lacuna do bloco vermelho. Altere a
op��o CorDeFundo por: Texto.
|
� Clique no componente iniAtividade, arraste o segundo bloco roxo e encaixe logo abaixo do bloco verde. Altere a
op��o A��o� por: UrlDeDados.
|
Feito isso, o seu c�digo dever� ficar igual ao da Figura 22.2:
Figura 22.2 � C�digo final do Bot�o btnCriarQR.
Esse bloco nos diz o seguinte:
Quando o bot�o for clicado, chame o leitor de c�digo QR. Nessa etapa ser� mostrada uma linha vermelha em uma �rea retangular para que voc� escaneie qualquer c�digo QR.
C�digo para o c�digo do componente iniAtividade:
� Na tela Blocos, clique no componente iniAtividade e arraste o terceiro bloco para a �rea em branco.
|
� Clique no componente imgQRCode, arraste o primeiro bloco verde e encaixe na lacuna �fazer� do bloco marrom.
Altere a op��o Anima��o para: Imagem.
|
� Clique no componente iniAtividade, arraste o primeiro bloco verde e encaixe no final do bloco verde. Altere a
op��o A��o por: Resultado.
|
Feito isso, o seu c�digo dever� ficar igual ao da Figura 22.3:
Figura 22.3 � C�digo final do componente iniAtividade.
Esse bloco nos diz o seguinte:
Depois que o c�digo QR for criado, carregue e mostre o mesmo no componente imgQRCode.
Dessa forma, conclu�mos o nosso projeto. Teste seu projeto em um dispositivo real e confira o resultado.
Voc� pode baixar o c�digo completo desse projeto acessando os links:
CriarQRCode.aia
CriarQRCode.apk
|
