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.
  � Na tela principal selecione a op��o: Iniciar novo projeto, do menu superior Projetos, conforme mostra a Figura 6.1:

Figura 6.1 � Menu para criar um novo Projeto.

  � Feito isso, ser� mostrada uma pequena janela para nomear o projeto, conforme mostra a Figura 6.2:

Figura 6.2 � Janela para nomear o Projeto.

  � Digite o nome que consta da caixa de texto e clique em OK para confirmar.

  Agora vamos alterar algumas propriedades da Tela Principal (Screen1):

  Alterando as propriedades da Tela Principal:

  � Clique em Screen1 na se��o Componentes.
  � Na caixa de texto T�tulo, digite: Par ou �mpar, e tecle Enter para confirmar.
  � Na propriedade Theme selecione a op��o: Dark.

  Iremos agora inserir os componentes do nosso projeto.

  Para isso:

  � Clique no componente Bot�o da Paleta e insira no emulador.
  � Repita o mesmo processo para a CaixaDeTexto e a Legenda
  � Feito isso, o seu projeto dever� ficar igual ao da Figura 6.3:

Figura 6.3 � Projeto com os componentes inseridos.

  Alterando as propriedades do Bot�o:

  Utilizando o mesmo procedimento dos projetos anteriores, altere as seguintes 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.
  � Texto: Verificar.
  � CorDeTexto: Branco.

  Alterando as propriedades da Caixa de Texto:

  Altere as seguintes propriedades da caixa de texto:

  � Nome: ctNumero. 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 pontos e digite: 40.
  � 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 Legenda:

  Altere as seguintes propriedades da 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: 18.
  � Largura: selecione a op��o percentagem e digite: 50.
  � Texto: digite: Mensagem.
  � 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 6.4:

Figura 6.4 � 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 digitado pelo usu�rio, e a outra para armazenar o resto da opera��o.

  Mas, o que s�o vari�veis:

  Para quem n�o sabe, vari�veis s�o reposit�rios utilizados para armazenar ou guardar informa��es. No mundo real poder�amos comparar uma vari�vel como se fosse uma gaveta de um m�vel onde voc� guarda objetos, tais como: porcas, parafusos, canetas, chaves etc. Voc� poder� alterar o conte�do dessas gavetas a qualquer momento colocando ou retirando esses objetos � medida que forem necess�rios.

  � Em programa��o, uma vari�vel serve para armazenar informa��es, como um n�mero, uma string, um valor l�gico etc. O valor dessas vari�veis pode ser alterado a qualquer momento durante todo o c�digo do programa caso seja necess�rio.

  Vejamos alguns exemplos:

  1) int x = 10;

  2) mensagem = �Digite um n�mero:�;

  No primeiro exemplo armazenamos o valor inteiro 10 na vari�vel x. No segundo, armazenamos a string: �Digite um n�mero:� na vari�vel mensagem. String � uma cadeia de caracteres ou at� mesmo um �nico caractere. Toda string deve ser colocada entre aspas duplas, caso contr�rio, ocasiona um erro. Voc� poderia alterar o valor dessas vari�veis durante todo o programa sempre que for necess�rio.

  Para criar uma vari�vel voc� precisa obedecer determinadas regras, caso contr�rio, o programa n�o funcionar�, ou seja, voc� n�o pode utilizar quaisquer nomes para as suas vari�veis.

  Vejamos algumas regras para a cria��o de vari�veis:

  1) N�o come�ar com um n�mero. Exemplos: 2x, 123valor, 10t etc.
  2) N�o usar palavras-chave da pr�pria linguagem que voc� est� usando. Exemplos: for, while, if, true etc.
  3) N�o usar espa�os em branco. Exemplos: x 1, meu nome, x y z etc. Para resolver esse problema utilize o sublinhado (_) entre as palavras ou caracteres.
  4) N�o usar caracteres especiais em nenhuma hip�tese. Exemplos: @x, /nome, ?valor etc.

  Agora que voc� j� tem ideia do que seja uma vari�vel, vamos come�ar o nosso c�digo:

  � Na tela Blocos, clique na categoria Vari�veis.
  � Arraste o primeiro bloco para a �rea em branco. Altere o r�tulo nome para: numInformado (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. Mantenha o valor 0 (zero).

  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: numResultado (essa ser� a vari�vel utilizada para armazenar o resto da opera��o).

  � Feito isso, clique na categoria Matem�tica e arraste o primeiro bloco para o final do bloco existente. Mantenha o valor 0 (zero).

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

Figura 6.5 � Declara��o das vari�veis do projeto.

  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.

  � Na se��o 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 numInformado.
  � Na se��o Blocos, clique no componente ctNumero, arraste o primeiro bloco verde da lista e encaixe no final do �ltimo bloco.
  � Altere a op��o CorDeFundo para: Texto.

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

Figura 6.6 � Primeira etapa do c�digo referente ao bot�o.

  Isso quer dizer que, quando o bot�o btnVerificar for clicado o programa armazenar� na vari�vel numInformado o valor digitado pelo usu�rio na caixa de texto.

  Agora:

  � Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe logo abaixo do �ltimo bloco vermelho. Clique na pequena seta e altere a op��o para: global numResultado.
  � Clique na categoria Matem�tica, arraste o bloco - m�dulo de e encaixe no final do �ltimo bloco.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na primeira lacuna do bloco azul.
  � Clique na pequena seta e altere a op��o para: global numInformado.
  � Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe na segunda lacuna do �ltimo azul. Altere o valor 0 para: 2.

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

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

  Esse �ltimo bloco calcula o m�dulo (resto de uma divis�o) do valor digitado pelo usu�rio (vari�vel global numInformado) por 2, e armazena o resultado na vari�vel global numResultado.

  Agora:

  � Clique na categoria Controle, arraste o segundo 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.
  � 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 numResultado.
  � Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe na segunda lacuna do bloco azul.
  � Clique no componente legMensagem, arraste o segundo bloco e encaixe na op��o �ent�o�. Altere a op��o CorDeFundo para: Texto.
  � Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do bloco verde. Altere a lacuna vazia entre aspas para: �Seu n�mero � par.�.

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

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

  Esse bloco nos diz que, se o resultado do m�dulo do n�mero informado pelo usu�rio for igual a 0, o n�mero � par, ou seja, qualquer n�mero dividido por 2 e o resto for 0, o n�mero � par.

  Continuando:

  � Clique no componente legMensagem, arraste o segundo bloco e encaixe na op��o �se n�o�. Altere a op��o CorDeFundo para: Texto.
  � Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do bloco verde. Altere a lacuna vazia entre aspas para: �Seu n�mero � �mpar�.

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

Figura 6.9 � C�digo completo do projeto.

  Esse bloco nos diz que, se o resultado do m�dulo do n�mero informado pelo usu�rio for igual a 1, o n�mero � �mpar, ou seja, qualquer n�mero dividido por 2 e o resto for 1, o n�mero � �mpar.

  Feito isso, terminamos 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:

  ParOuImpar.aia

  ParOuImpar.apk