Para isso:

  � 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: AdivinharNumero.

  Agora vamos alterar algumas propriedades da tela principal (Screen1).

  Para isso:

  � Clique na tela principal na se��o Componentes.
  � Na propriedade Theme, selecione a op��o Device Default.
  � Na caixa de texto T�tulo, digite: Adivinhe o N�mero e tecle Enter para confirmar.

  Iremos agora inserir os componentes do nosso projeto, ou seja, o bot�o, a caixa de texto e as legendas. Para isso, insira os componentes na seguinte ordem:

  � 1 Legenda.
  � 1 Caixa de Texto.
  � 1 Bot�o.
  � 3 Legendas.

  Agora vamos alterar algumas propriedades dos componentes:

  Alterando as propriedades da primeira Legenda:

  � Nome: legMensagem. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � CorDeFundo: Azul.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhDaFonte: 16.
  � Largura: selecione a op��o percentagem e digite: 80.
  � Texto: digite: Digite um n�mero entre 1 e 10.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Branco.

  Alterando as propriedades da Caixa de Texto:

  � Nome: ctNumDigitado. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � CorDeFundo: Laranja.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � Largura: selecione a op��o percentagem e digite: 10.
  � Dica: Deixe em branco.
  � SomenteN�meros: marque o checkbox para aceitar somente n�meros na caixa de texto.
  � Texto: deixe em branco.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Preto.

  Alterando as propriedades do Bot�o:

  � Nome: btnVerificar. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � CorDeFundo: Azul.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � Forma: arredondado.
  � Texto: Verificar.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Branco.

  Alterando as propriedades da segunda Legenda:

  � Nome: legResultado. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � CorDeFundo: Laranja.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhDaFonte: 16.
  � Largura: selecione a op��o percentagem e digite: 60.
  � Texto: digite: Mensagem.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Preto.

  Alterando as propriedades da terceira Legenda:

  � Nome: legNumAleatorio. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � CorDeFundo: Vermelho.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhDaFonte: 16.
  � Largura: selecione a op��o percentagem e digite: 60.
  � Texto: digite: N�mero gerado.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Preto.

  Alterando as propriedades da quarta Legenda:

  � Nome: legNumGerado. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � CorDeFundo: Azul.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhDaFonte: 18.
  � Texto: digite: 00.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Branco.

  Para que todos os componentes fiquem com uma apar�ncia mais profissional, vamos centraliz�-los na tela.

  Para isso:

  � Clique na tela principal (Screen1), selecione a op��o AlinhamentoHorizontal e clique em: Centro: 3.

  Feito isso, o seu projeto dever� ficar igual ao da Figura 7.1::

Figura 7.1 � Projeto com os componentes inseridos e configurados.

  Agora vamos criar os c�digos dos componentes e tornar nosso projeto funcional executando a tarefa para o qual foi designado.

  Mas antes de criarmos os blocos dos componentes, precisamos criar duas vari�veis globais, sendo uma para armazenar o n�mero aleat�rio gerado pelo projeto, e a outra para armazenar o valor digitado pelo usu�rio.

  Como voc� j� sabe o que s�o vari�veis, vamos come�ar o nosso c�digo:

  C�digos para as vari�veis:

  � Na tela Blocos, clique na categoria Vari�veis.
  � Arraste o primeiro bloco para a �rea em branco. Altere o r�tulo nome para: nSorteado (essa ser� a vari�vel utilizada para armazenar o valor que for gerado pelo programa).
  � Feito isso, clique na categoria Matem�tica e arraste o primeiro bloco para o final do bloco existente.

  Agora vamos criar nossa segunda vari�vel:

  � Na tela Blocos, clique na categoria Vari�veis.
  � Arraste o primeiro bloco para a �rea em branco. Altere o r�tulo nome para: nInformado (essa ser� a vari�vel utilizada para armazenar o valor digitado pelo usu�rio).
  � Feito isso, clique na categoria Matem�tica e arraste o primeiro bloco para o final do bloco existente.

  Isso significa que quando o aplicativo for executado ser�o criadas essas duas vari�veis com o valor 0 (zero). Veja na Figura 7.2 como dever� ficar o seu c�digo:

Figura 7.2 � Declara��o das vari�veis.

  Agora vamos criar os c�digos dos componentes:

  Na verdade, o �nico componente que receber� c�digo � o Bot�o, os outros componentes s�o apenas informativos, n�o necessitando de nenhum c�digo. Ent�o vejamos o c�digo do bot�o passo a passo.

  C�digo para o Bot�o:

  Agora que terminamos a parte visual do nosso projeto, vejamos como criar o c�digo desse componente.

  Para isso:

  � Na tela Blocos, clique no componente btnVerificar.
  � Arraste o primeiro bloco para a �rea em branco.
  � Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe na lacuna do bloco j� existente.
  � Clique na categoria Matem�tica, arraste o bloco denominado �inteiro aleat�rio de 1 at� 100� e encaixe no final do bloco anterior. Altere o valor 100 para: 10.

  Feito isso, seu projeto dever� ficar igual ao da Figura 7.3:

Figura 7.3 � Primeira etapa dos blocos do bot�o.

  Isso quer dizer que, quando o bot�o btnVerificar for clicado o programa gerar� um n�mero aleat�rio entre 1 e 10, e armazenar� esse valor na vari�vel nSorteado.

  Agora:

  � Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe logo abaixo do �ltimo bloco vermelho.
  � Na se��o Blocos, clique no componente ctNumDigitado, arraste o primeiro bloco verde da lista e encaixe no final do �ltimo bloco colocado.
  � Altere a op��o CorDeFundo para: Texto.

  Feito isso, seu projeto dever� ficar igual ao da Figura 7.4:

Figura 7.4 � Continua��o do c�digo do bot�o.

  Esse bloco no diz que o valor digitado pelo usu�rio na caixa de texto ctNumDigitado ser� armazenado na vari�vel nInformado.

  Agora:

  � Clique na categoria Controle, arraste o primeiro bloco e encaixe logo abaixo do �ltimo bloco inserido.
  � Clique na categoria Matem�tica, arraste o terceiro bloco e encaixe na op��o �se� do bloco marrom. Altere o sinal de: �=� para: �>�.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na primeira lacuna do bloco azul.   � Clique na pequena seta desse bloco e selecione a op��o global nSorteado.
  � Clique novamente na categoria Vari�veis, arraste o segundo bloco e encaixe na segunda lacuna do bloco azul.
  � Clique na pequena seta desse bloco e selecione a op��o: global nInformado.
  � Na se��o Blocos, clique no componente legResultado, arraste o segundo bloco verde da lista e encaixe na op��o �ent�o� do bloco marrom.
  � Altere a op��o CorDeFundo para: Texto.
  � Agora clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco. Altere a lacuna vazia entre aspas para: �Seu n�mero � menor�.

  Feito isso, seu projeto dever� ficar igual ao da Figura 7.5:

Figura 7.5 � Continua��o do c�digo do bot�o.

  Esse bloco nos diz que, se o n�mero sorteado pelo programa for maior do que o digitado pelo usu�rio ser� mostrada na legenda legResultado a mensagem �Seu n�mero � menor�.

  Continuando:

  � Clique na categoria Controle, arraste o primeiro bloco e encaixe logo abaixo do �ltimo bloco inserido.
  � Clique na categoria Matem�tica, arraste o terceiro bloco e encaixe na op��o �se� do bloco marrom. Altere o sinal de �=� para �<�.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na primeira lacuna do bloco azul. Clique na pequena seta desse bloco e selecione a op��o global nSorteado.
  � Clique novamente na categoria Vari�veis, arraste o segundo bloco e encaixe na segun-da lacuna do bloco azul.
  � Clique na pequena seta desse bloco e selecione a op��o global nInformado.
  � Na se��o Blocos, clique no componente legResultado, arraste o segundo bloco verde da lista e encaixe na op��o �ent�o� do bloco marrom.
  � Altere a op��o CorDeFundo para: Texto.
  � Agora clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco. Altere a lacuna vazia entre aspas para: �Seu n�mero � maior�.

  Feito isso, seu projeto dever� ficar igual ao da Figura 7.6:

Figura 7.6 � Continua��o do c�digo do bot�o.

  Esse bloco nos diz que, se o n�mero sorteado pelo programa for menor do que o digitado pelo usu�rio ser� mostrada na legenda legResultado a mensagem �Seu n�mero � maior�.

  Continuando:

  � Clique na categoria Controle, arraste o primeiro bloco e encaixe logo abaixo do �ltimo bloco inserido.
  � Clique na categoria Matem�tica, arraste o terceiro bloco e encaixe na op��o �se� do bloco marrom. Mantenha o sinal de �=�.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na primeira lacuna do bloco azul. Clique na pequena seta desse bloco e selecione a op��o: global nSorteado.
  � Clique novamente na categoria Vari�veis, arraste o segundo bloco e encaixe na segunda lacuna do bloco azul.
  � Clique na pequena seta desse bloco e selecione a op��o: global nInformado.
  � Na se��o Blocos, clique no componente legResultado, arraste o segundo bloco verde da lista e encaixe na op��o �ent�o� do bloco marrom. Altere a op��o CorDeFundo para: Texto.
  � Agora clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco. Altere a lacuna vazia entre aspas para: �Parab�ns, voc� acertou�.

  Feito isso, seu projeto dever� ficar igual ao da Figura 7.7:

Figura 7.7 � Continua��o do c�digo do bot�o.

  Esse bloco nos diz que, se o n�mero sorteado pelo programa for igual ao digitado pelo usu�rio ser� mostrado na legenda legResultado a mensagem �Parab�ns, voc� acertou�.

  E para finalizar o nosso c�digo:

  � Na se��o Blocos, clique no componente legNumGerado, arraste o segundo bloco verde da lista e encaixe abaixo do �ltimo bloco marrom �se...ent�o�.
  � Altere a op��o CorDeFundo para: Texto.
  � Clique na categoria Vari�veis, arraste o segundo bloco vermelho e encaixe no final do bloco anterior.
  � Clique na pequena seta desse bloco e selecione a op��o: global nSorteado.

  Veja na Figura 7.8 o c�digo completo do projeto:

Figura 7.8 � C�digo completo do projeto.

  Esse �ltimo c�digo imprime na legenda legNumGerado o n�mero gerado pelo programa para que o usu�rio possa conferir e comparar com o informado por ele.

  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:

  AdivinharNumero.aia

  AdivinharNumero.apk