Para isso:

  � Abra o App Inventor acessando o link:

  App Inventor 2

  � Na tela principal selecione a op��o: Iniciar novo projeto do menu superior Projetos, conforme mostra a Figura 5.1:

Figura 5.1 � Menu para criar um novo Projeto.

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

Figura 5.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

  Na tela principal (Screen1), vamos alterar apenas o t�tulo, o tema e a forma de entrada do projeto, utilizando para isso uma anima��o j� existente.

  Para isso:

  � Clique na tela principal (Screen1) na se��o Componentes.
  � Na propriedade Anima��oAberturaDeTela, selecione a op��o DeslizarHorizontalmente.
  � No combobox Theme selecione a op��o Dark.
  � Na caixa de texto T�tulo, digite: Envia Mensagem para Legenda, e tecle Enter para confirmar.

  Iremos agora inserir os componentes do nosso projeto, ou seja, o bot�o e a legenda:

  � Clique no componente Bot�o na Paleta e insira no emulador.
  � Da mesma forma, clique no componente Legenda e insira no emulador. Ele dever� ficar logo abaixo do bot�o, por padr�o.
  � Feito isso, o seu projeto dever� ficar igual ao da Figura 5.3:

Figura 5.3 � Projeto com os componentes inseridos.

  Alterando as propriedades do Bot�o:

  Agora vamos alterar algumas propriedades do bot�o. Primeiramente vamos criar um nome mais apropriado para o bot�o para utilizarmos no c�digo.

  Para isso:

  � Clique no bot�o, na tela do emulador ou na se��o Componentes.
  � Logo abaixo, na se��o Componentes, clique no bot�o Renomear.
  � Ser� mostrada uma pequena janela para criarmos um novo nome para o bot�o. Digite o nome que se encontra na caixa de texto, conforme mostra a Figura 5.4:

Figura 5.4� Janela para nomear o bot�o.

  Esse nome ser� utilizado para identificar o bot�o no c�digo, portanto, n�o utilize espa�os, caracteres especiais nem comece com um n�mero. Al�m disso, crie um nome compat�vel com sua fun��o, assim ser� mais f�cil identific�-lo no c�digo e saber o que ele faz.

  Agora vamos alterar algumas propriedades dele.

  Para isso:

  Na se��o Propriedades, altere as seguintes:

  � CorDeFundo: Azul.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � Forma: arredondado.
  � Texto: Enviar Mensagem.
  � CorDeTexto: Branco.

  Alterando as propriedades da Legenda:

  Na se��o Propriedades, altere as seguintes:

  � Nome: legMensagem. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � CorDeFundo: Ciano.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � CorDeTexto: Cinza Escuro.

  Depois disso, o seu projeto dever� ficar igual ao da Figura 5.5:

Figura 5.5� Projeto com os componentes finalizados.

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

  C�digo para o Bot�o:

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

  Para isso:

  � Clique no bot�o Blocos, no canto superior direito da tela.
  � Feito isso, ser� mostrada a tela da Figura 5.6:

Figura 5.6� Tela Blocos.

  O que vamos fazer agora � arrastar os blocos que queremos e montar o c�digo do nosso aplicativo.

  Ent�o vamos l�:

  � Na se��o Blocos, clique no bot�o btnEnviaMensagem.
  � Feito isso, ser�o apresentados todos os blocos de c�digo referente a esse bot�o, conforme mostra a Figura 5.7:

Figura 5.7 � Blocos de c�digo para o bot�o btnEnviaMensagem.

  Para ver mais op��es gire o bot�o central do mouse para baixo ou arraste a barra de rolagem vertical.

  � Agora, clique no primeiro bloco e arraste para a �rea em branco. Veja na Figura 5.8:

Figura 5.8 � C�digo utilizado para o bot�o btnEnviaMensagem.

  Esse c�digo est� dizendo o seguinte:

  Quando o bot�o btnEnviaMensagem for clicado, fa�a alguma coisa. E essa alguma coisa � mostrar uma mensagem no componente Legenda.

  Para isso, vamos criar o c�digo para cumprir essa tarefa:

  � Na se��o Blocos, clique no bot�o legMensagem, e arraste o bloco marcado na Figura 5.9 para a �rea branca:

Figura 5.9 � C�digo utilizado para o componente legMensagem.

  � Em seguida, encaixe esse bloco na lacuna fazer do bloco j� existente. Em seguida, altere a op��o CorDeFundo para Texto.

  Veja na Figura 5.10 como seu c�digo dever� ficar:

Figura 5.10 � Inser��o do c�digo para a legenda.

  Esse c�digo nos diz que, quando o bot�o btnEnviaMensagem for clicado, ajuste o texto da legenda legMensagem para alguma coisa. Essa alguma coisa � a mensagem que queremos que apare�a na legenda.

  Para isso:

  � Clique no bloco Texto, arraste o primeiro bloco da lista e encaixe no final do c�digo j� existente.
  � Digite na lacuna entre aspas: Ol�, Pessoal.

  Seu c�digo dever� ficar igual ao da Figura 5.11:

Figura 5.11 � Primeira etapa do c�digo completada.

  Queremos tamb�m que a cor de fundo da legenda seja alterada para a cor amarela quando o bot�o for clicado. Para isso:

  � Na se��o Blocos, clique no bot�o legMensagem.
  � Clique e arraste o bloco marcado na Figura 5.12 e encaixe abaixo do �ltimo bloco:

Figura 5.12 � C�digo para alterar a cor de fundo da legenda.

  � Agora, clique na categoria Cores, arraste bloco com a cor amarela e encaixe no final do bloco verde.

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

Figura 5.13 � Segunda etapa do c�digo finalizada.

  Finalmente, queremos que o tamanho da fonte da mensagem da legenda seja alterado para 20 pontos.

  Para isso:

  � Na se��o Blocos, clique no bot�o legMensagem.
  � Clique e arraste o bloco marcado na Figura 5.14 e encaixe abaixo do �ltimo bloco:

Figura 5.14 � C�digo para alterar o tamanho da fonte do texto da legenda.

  � Agora, clique no bloco Matem�tica e arraste o primeiro bloco da lista e encaixe no final do �ltimo c�digo.
  � No espa�o em branco, digite: 20.

  E assim conclu�mos o c�digo do nosso projeto. Veja na Figura 5.15 o c�digo completo:

Figura 5.15 � C�digo final do projeto.

  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:

  mensagemLegenda.aia

  mensagemLegenda.apk