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: MaiorDeDois.

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

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

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

  � 1 Legenda.
  � 1 layout Organiza��oHorizontal.
  � 2 Caixas de Texto. Utilize o layout Organiza��oHorizontal para disponibilizar as caixas de texto lado a lado. Os layouts ser�o explicados em detalhes mais adiante.
  � 1 Bot�o.
  � 1 Legenda.

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

Figura 8.1 � Componentes inseridos no projeto.

  Agora vamos alterar as 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 2 n�meros quaisquer".
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Branco.

  Alterando as propriedades da primeira Caixa de Texto:

  � Nome: ctNum1. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � CorDeFundo: Amarelo.
  � 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: Azul.

  Alterando as propriedades da segunda Caixa de Texto:

  � Nome: ctNum2. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � CorDeFundo: Amarelo.
  � 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: Azul.

  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: legMensagem2. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � CorDeFundo: Amarelo.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhDaFonte: 16.
  � Largura: selecione a op��o percentagem e digite: 60.
  � Texto: Deixe em branco.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Azul.

  Agora vamos centralizar todos os componentes na tela para ficar com uma apar�ncia mais profissional.

  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 8.2:

Figura 8.2 � Componentes inseridos e configurados.

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

  Mas antes de criarmos os blocos dos componentes propriamente ditos, precisamos criar duas vari�veis globais, ambas para armazenar os n�meros digitados pelo usu�rio.

  Ent�o vamos l�:

  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: num1 (essa ser� a vari�vel utilizada para armazenar o valor do primeiro n�mero digitado pelo usu�rio).
  � 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: num2 (essa ser� a vari�vel utilizada para armazenar o valor do segundo n�mero 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 8.3 como dever� ficar o seu c�digo:

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

  Nesse projeto, somente o componente Bot�o receber� c�digo, os outros componentes s�o apenas informativos e para entrada de dados, n�o necessitando de nenhum c�digo.

  Ent�o vejamos o c�digo do bot�o passo a passo.

  Agora que terminamos a parte visual e criamos as vari�veis 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 pequena seta e selecione a op��o: global num1.
  � Clique no componente ctNum1, arraste o primeiro bloco verde e encaixe no final do �ltimo bloco (vermelho). Altere a op��o CorDeFundo para: Texto.
  � Agora clique de novo na categoria Vari�veis, arraste o terceiro bloco e encaixe logo abaixo do bloco vermelho j� existente.
  � Clique na pequena seta e selecione a op��o: global num2.
  � Clique no componente ctNum2, arraste o primeiro bloco verde e encaixe no final do �ltimo bloco (vermelho). Altere a op��o CorDeFundo para: Texto.

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

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

  Isso quer dizer que, quando o bot�o btnVerificar for clicado, armazene na vari�vel global num1 o valor digitado na caixa de texto ctNum1, e armazene na vari�vel global num2 o valor digitado na caixa de texto ctNum2.

  Agora:

  � Clique na categoria Controle, arraste o segundo bloco e encaixe logo abaixo do �ltimo bloco vermelho.
  � Clique na categoria Matem�tica, arraste o terceiro bloco e encaixe na op��o �se�. 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 e selecione a op��o: global num1.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na segunda lacuna do bloco azul. Clique na pequena seta e selecione a op��o: global num2.
  � Clique no componente legMensagem2, arraste o segundo bloco e encaixe na op��o �ent�o�. Altere a op��o CorDeFundo para: Texto.
  � Clique na categoria Texto, arraste o segundo bloco e encaixe no final do bloco verde.
  � Clique na categoria Texto, arraste o primeiro bloco e encaixe na primeira op��o do bloco �juntar�. Digite no espa�o entre aspas: �O n�mero �.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na segunda op��o do bloco �juntar�. Clique na pequena seta e selecione a op��o: global num1.

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

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

  Esse bloco nos diz o seguinte:

  Se o primeiro valor (num1) for maior do que o segundo (num2), ent�o ser� impresso na legenda legMensagem2 o primeiro valor.

  E para finalizar o nosso c�digo:

  � Clique no componente legMensagem2, arraste o segundo bloco e encaixe na op��o �sen�o�. Altere a op��o CorDeFundo para: Texto.
  � Clique na categoria Texto, arraste o segundo bloco e encaixe no final do bloco verde.
  � Clique na categoria Texto, arraste o primeiro bloco e encaixe na primeira op��o do bloco �juntar�. Digite no espa�o entre aspas: �O n�mero �.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na segunda op��o do bloco �juntar�. Clique na pequena seta e selecione a op��o: global num2.

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

Figura 8.6 � C�digo final do bot�o e do projeto.

  Esse bloco informa o seguinte: se a primeira op��o n�o for satisfeita, ent�o ser� impresso na legenda legMensagem2 o segundo valor.

  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:

  MaiorDeDois.aia

  MaiorDeDois.apk