Para quem n�o sabe, a f�rmula para converter graus Celsius em Fahrenheit � a seguinte:

  F = C x 9 / 5 + 32

  Exemplo 1:

  Se voc� quiser saber qual o equivalente em Fahrenheit para 0 graus Celsius, � s� usar a f�rmula:

  F = 0 x 9 / 5 + 32
  F = 32

  Exemplo 2:

  Se voc� quiser saber qual o equivalente em Fahrenheit para 100 graus Celsius, � s� usar a f�rmula:

  F = 100 x 9 / 5 + 32
  F = 212

  Da mesma forma, a f�rmula para converter graus Fahrenheit em Celsius � a seguinte:

  C = (F � 32) x 5 / 9

  Exemplo 1:

  Se voc� quiser saber qual o equivalente em Celsius para 0 graus Fahrenheit, � s� usar a f�rmula:

  C = (0 � 32) x 5 / 9
  C = 17,778

  Exemplo 2:

  Se voc� quiser saber qual o equivalente em Celsius para 100 graus Fahrenheit, � s� usar a f�rmula:

  F = (100 - 32) x 5 / 9
  F = 37,778

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

  Vamos agora alterar algumas propriedades da Tela Principal (Screen1):

  � Clique em Screen1 na se��o Componentes.
  � Altere a propriedade AlinhamentoHorizontal para: Centro: 3.
  � Altere a propriedade CorDeFundo para: Amarelo.
  � Na propriedade Theme, selecione a op��o: Dark.
  � Na caixa de texto T�tulo, digite: Convers�o de Graus � C <> F, e tecle Enter para confirmar.

  Iremos agora inserir os componentes do nosso projeto, ou seja, o bot�o, a caixa de texto e as duas legendas.

  Para isso, insira os componentes na seguinte ordem:

  � 1 Legenda.
  � 1 Deslizador.
  � 1 Layout Organiza��oHorizontal.
  � 2 Legendas (devem ser inseridas dentro do Layout).
  � 1 Layout Organiza��oHorizontal (utilizado para separar as duas opera��es).
  � 1 Legenda.
  � 1 Deslizador.
  � 1 Layout Organiza��oHorizontal.
  � 2 Legendas (devem ser inseridas dentro do Layout).

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

Figura 10.1 � Componentes inseridos no projeto.

  Agora vamos alterar as propriedades dos componentes:

  Alterando as propriedades da primeira Legenda:

  � Nome: legGrausCelsius. 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.
  � Altura: 30 pontos.
  � Largura: selecione a op��o percentagem e digite: 90.
  � Texto: digite: Selecione um Valor em Graus Celsius:
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Cinza Escuro.

  Alterando as propriedades do primeiro Deslizador:

  � Nome: desCelsius. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � Largura: selecione a op��o percentagem e digite: 80.
  � ValorM�ximo: 100.
  � ValorM�nimo: 0.
  � Posi��oDoIndicador: 0.

  Alterando as propriedades da segunda Legenda:

  � Nome: legCelsius. 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: 20.
  � Altura: 30 pontos.
  � Largura: selecione a op��o percentagem e digite: 20.
  � Texto: digite: 0.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Branco.

  Alterando as propriedades da terceira Legenda:

  � Nome: legFahrenheit. 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: 20.
  � Altura: 30 pontos.
  � Largura: selecione a op��o percentagem e digite: 20.
  � Texto: digite: 0.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Branco.

  Alterando as propriedades da quarta Legenda:

  � Nome: legGrausFahrenheit. 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: 20.
  � Altura: 30 pontos.
  � Largura: selecione a op��o percentagem e digite: 90.
  � Texto: digite: Selecione um Valor em Graus Fahrenheit:
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Cinza Escuro.

  Alterando as propriedades do segundo Deslizador:

  � Nome: desFahrenheit. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
  � Largura: selecione a op��o percentagem e digite: 80.
  � ValorM�ximo: 100.
  � ValorM�nimo: 0.
  � Posi��oDoIndicador: 0.

  Alterando as propriedades da quinta Legenda:

  � Nome: legFahrenheit2. 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: 20.
  � Altura: 30 pontos.
  � Largura: selecione a op��o percentagem e digite: 20.
  � Texto: digite: 0.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Branco.

  Alterando as propriedades da sexta Legenda:

  � Nome: legCelsius2. 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: 20.
  � Altura: 30 pontos.
  � Largura: selecione a op��o percentagem e digite: 20.
  � Texto: digite: 0.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Branco.

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

Figura 10.2 � Componentes 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 propriamente ditos, precisamos criar duas vari�veis globais para armazenar os graus Celsius e Fahrenheit.

  Ent�o vamos l�:

  C�digo para a primeira 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: celsius (essa ser� a vari�vel utilizada para armazenar o valor dos graus Celsius).
  � Feito isso, clique na categoria Matem�tica e arraste o primeiro bloco para o final do bloco existente.

  C�digo para a 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: fahrenheit (essa ser� a vari�vel utilizada para armazenar o valor dos graus Fahrenheit).
  � 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 essas vari�veis ser�o criadas assumindo o valor 0 (zero). Veja na Figura 10.3 como dever� ficar o seu c�digo:

Figura 10.3 � Declara��o das vari�veis:

  Agora que terminamos a parte visual e criamos as vari�veis necess�rias para o nosso projeto, vejamos ent�o como criar o c�digo dos componentes.

  C�digo para o primeiro Deslizador:

  � Na tela Blocos, clique no componente desCelsius e arraste o primeiro bloco para a �rea em branco.
  � Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe na lacuna �fazer� do bloco existente. Clique na pequena seta e selecione a op��o global celsius.
  � Clique na op��o Posi��oDoIndicador do bloco marrom e encaixe no final do bloco vermelho.
  � Clique no componente legCelsius, arraste o segundo bloco verde e encaixe logo abaixo do bloco vermelho. Altere a op��o CorDeFundo para: Texto.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco verde. Clique na pequena seta e selecione a op��o: global celsius.
  � Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe logo abaixo do bloco verde. Clique na pequena seta e selecione a op��o: global fahrenheit.   � Clique na categoria Matem�tica, arraste o sexto bloco e encaixe no final do bloco vermelho.
  � 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 celsius.
  � Clique na categoria Matem�tica, arraste o s�timo bloco e encaixe na segunda lacuna do bloco azul.
  � Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe na primeira lacuna do bloco azul. Altere o valor �0� para �9�.
  � Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe na segunda lacuna do bloco azul. Altere o valor �0� para �5�.
  � Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe logo abaixo do bloco vermelho. Clique na pequena seta e selecione a op��o global fahrenheit.
  � Clique na categoria Matem�tica, arraste o quarto bloco e encaixe no final do bloco vermelho.
  � 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 fahrenheit.
  � Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe na segunda lacuna do bloco azul. Altere o valor �0� para �32�.
  � Clique no componente legFahrenhheit, arraste o segundo bloco verde e encaixe logo abaixo do bloco vermelho. Altere a op��o CorDeFundo para: Texto.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco verde. Clique na pequena seta e selecione a op��o: global fahrenheit.

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

Figura 10.4 � C�digo finalizado do primeiro Deslizador.

  Esse bloco nos diz o seguinte:

  Armazene na vari�vel global celsius o valor atual selecionado no Deslizador pelo usu�rio. Em seguida, mostre esse valor (global celsius) na legenda legCelsius. Depois disso, armazene na vari�vel global fahrenheit o resultado dos graus celsus (global celsius) vezes 9 dividido por 5. Em seguida adicione 32 � mesma vari�vel. Por fim, mostre na legenda legFahrenheit o valor dos graus Fahrenheit.

  E para finalizar, vamos criar o c�digo do segundo Deslizador:

  � Na tela Blocos, clique no componente desFahrenheit e arraste o primeiro bloco para a �rea em branco.
  � Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe na lacuna �fazer� do bloco existente. Clique na pequena seta e selecione a op��o global fahrenheit.
  � Clique na op��o Posi��oDoIndicador do bloco marrom e encaixe no final do bloco vermelho.
  � Clique no componente legFahrenheit2, arraste o segundo bloco verde e encaixe logo abaixo do bloco vermelho. Altere a op��o CorDeFundo para: Texto.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco verde. Clique na pequena seta e selecione a op��o global fahrenheit.
  � Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe logo abaixo do bloco verde. Clique na pequena seta e selecione a op��o global celsius.
  � Clique na categoria Matem�tica, arraste o quinto bloco e encaixe no final do bloco vermelho.
  � 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 fahrenheit.
  � Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe na segunda lacuna do bloco azul. Altere o valor �0� para �32�.
  � Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe abaixo do bloco vermelho. Clique na pequena seta e selecione a op��o: global celsius.
  � Clique na categoria Matem�tica, arraste o sexto bloco e encaixe no final do bloco vermelho.
  � 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 fahrenheit.
  � Clique na categoria Matem�tica, arraste o s�timo bloco e encaixe na segunda lacuna do bloco azul.
  � Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe na primeira lacuna do bloco azul. Altere o valor �0� para �5�.
  � Clique na categoria Matem�tica, arraste o s�timo bloco e encaixe na segunda lacuna do bloco azul.
  � Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe na primeira lacuna do bloco azul. Altere o valor �0� para �9�.
  � Clique no componente legCelsius2, arraste o segundo bloco verde e encaixe logo abaixo do bloco vermelho. Altere a op��o CorDeFundo para: Texto.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco verde. Clique na pequena seta e selecione a op��o global celsius.

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

Figura 10.5 � C�digo finalizado do segundo Deslizador.

  Esse bloco nos diz o seguinte:

  Armazene na vari�vel global fahrenheit o valor atual selecionado no Deslizador pelo usu�rio. Em seguida, mostre esse valor (global fahrenheit) na legenda legFahrenheit2. Depois disso, armazene na vari�vel global celsius o resultado dos graus fahrenheit (global fahrenheit) menos 32. Em seguida armazene novamente na vari�vel global celsius o valor anterior de global celsius multiplicado por 5 e dividido por 9. Por fim, mostre na legenda legCelsius2 o valor dos graus Fahrenheit.

  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:

  ConversaoDeGraus.aia

  ConversaoDeGraus.apk