Skip to content

Instantly share code, notes, and snippets.

@alberane

alberane/Aula 13_1 - App Inventor.md

Created November 5, 2025 22:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alberane/82cd3f3b2d4b9cbe2f46986b1d6b6536 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alberane/82cd3f3b2d4b9cbe2f46986b1d6b6536 to your computer and use it in GitHub Desktop.
Download ZIP
Aula 13_1 - App Inventor.md
Raw
Aula 13_1 - App Inventor.md

Tutorial: Criando uma Calculadora de IMC com App Inventor

Este tutorial completo guiará você, passo a passo, na criação de um aplicativo Android simples para calcular o Índice de Massa Corporal (IMC) usando o MIT App Inventor 2.

O que o aplicativo fará:

  • Terá uma única tela.
  • Solicitará ao usuário sua altura em centímetros (cm).
  • Solicitará ao usuário seu peso em quilogramas (kg).
  • Calculará e exibirá o IMC do usuário quando um botão for pressionado.

Fórmula do IMC: Peso (kg) / (Altura (m) * Altura (m))

Parte 1: Configurando o Projeto

  • Acesse o App Inventor: Abra seu navegador e vá para o site MIT App Inventor 2.
  • Faça Login: Você precisará de uma conta Google para fazer login.
  • Inicie um Novo Projeto:
    • Clique em "Create Apps!".
    • No menu superior, vá em "Projects" > "Start new project...".
    • Dê um nome ao seu projeto, por exemplo: CalculadoraDeIMC. (Não use espaços ou caracteres especiais).

Parte 2: Desenhando a Interface (View "Designer")

Agora vamos adicionar os elementos visuais que o usuário verá. Estamos na aba "Designer".

1. Organização da Tela (Layout)

Para manter nosso aplicativo centralizado e organizado, usaremos um componente de layout.

  • Na paleta "Layout" (à esquerda), arraste um "VerticalArrangement" para a tela (o "Viewer").
  • Com o VerticalArrangement1 selecionado, vá ao painel "Properties" (à direita):
    • Defina AlignHorizontal como "Center".
    • Defina AlignVertical como "Center".
    • Defina Height como "Fill Parent...".
    • Defina Width como "Fill Parent...".

Isso garante que tudo o que colocarmos dentro dele ficará centralizado na tela.

2. Adicionando Componentes

Arraste os seguintes componentes da paleta "User Interface" para dentro do VerticalArrangement que você acabou de adicionar:

  • Label (Rótulo da Altura):
    • Arraste um Label.
    • Em "Properties", mude o Text para: "Digite sua altura (em cm):".
  • TextBox (Caixa de Texto da Altura):
    • Arraste um TextBox.
    • Em "Properties", marque a opção NumbersOnly (Isso impede o usuário de digitar letras).
    • No campo Hint, digite: Ex: 175. (O Hint é um texto de exemplo que desaparece quando o usuário digita).
    • Importante: Renomeie este componente. Selecione-o, clique em "Rename" (abaixo do painel "Components") e mude o nome para TextBoxAltura.
  • Label (Rótulo do Peso):
    • Arraste outro Label.
    • Mude o Text para: "Digite seu peso (em kg):".
  • TextBox (Caixa de Texto do Peso):
    • Arraste um TextBox.
    • Marque a opção NumbersOnly.
    • No Hint, digite: Ex: 70.
    • Renomeie este componente para TextBoxPeso.
  • Button (Botão de Cálculo):
    • Arraste um Button.
    • Mude o Text para: "Calcular IMC".
    • Renomeie este componente para BotaoCalcular.
  • Label (Rótulo do Resultado):
    • Arraste um último Label.
    • Mude o Text para: "Seu IMC aparecerá aqui".
    • Você pode aumentar o FontSize (Tamanho da Fonte), por exemplo, para 20.0.
    • Renomeie este componente para LabelResultado.

Ao final, sua tela no "Designer" deve parecer com isto:

+-------------------------------------+
|                                     |
|     Digite sua altura (em cm):      |
|     [     Ex: 175     ]             |
|                                     |
|      Digite seu peso (em kg):       |
|      [      Ex: 70     ]             |
|                                     |
|     [     Calcular IMC     ]        |
|                                     |
|     Seu IMC aparecerá aqui          |
|                                     |
+-------------------------------------+

Parte 3: Adicionando a Lógica (View "Blocks")

Agora vamos fazer o aplicativo funcionar. Clique no botão "Blocks" no canto superior direito da tela.

1. O Evento do Botão

Queremos que o cálculo aconteça quando o usuário clicar no botão.

  • No painel "Blocks" (à esquerda), clique em BotaoCalcular.
  • Arraste o bloco when BotaoCalcular.Click do para a área de trabalho.

2. A Lógica do Cálculo

Tudo o que colocarmos dentro desse bloco Click será executado quando o botão for pressionado.

Lembre-se da fórmula: Peso / (Altura * Altura). Importante: A altura na fórmula deve estar em metros, mas o usuário a digita em centímetros. Portanto, precisamos dividir a altura por 100 antes de usá-la.

IMC = TextBoxPeso.Text / ( (TextBoxAltura.Text / 100) * (TextBoxAltura.Text / 100) )

Vamos construir isso com blocos:

  • Clique em LabelResultado (no painel "Blocks") e arraste o bloco set LabelResultado.Text to. Encaixe-o dentro do bloco when BotaoCalcular.Click.
  • Agora, precisamos construir a fórmula. Ela pode ficar com muitos decimais, então vamos formatar o resultado para ficar mais bonito.
  • Vá em "Built-in" > "Text" e arraste um bloco join. Encaixe-o no set LabelResultado.Text to.
  • No bloco join, clique na engrenagem azul para adicionar mais um string (totalizando 2).
  • No primeiro espaço do join, vá em "Text" e arraste um bloco de texto (o que tem aspas vazias). Digite nele: Seu IMC é: (com um espaço no final).
  • No segundo espaço do join, vamos colocar o resultado formatado. Vá em "Built-in" > "Math" e arraste o bloco format as decimal.
  • No bloco format as decimal, no campo places, vá em "Math" e arraste um bloco de número (o que tem um 0). Mude o valor para 2. (Isso limitará o resultado a 2 casas decimais).
  • No campo number do format as decimal, vamos finalmente colocar a fórmula.
  • Vá em "Math" e arraste o bloco de divisão /.
  • No primeiro espaço da divisão (numerador), vá em TextBoxPeso e arraste o bloco TextBoxPeso.Text.
  • No segundo espaço da divisão (denominador), vá em "Math" e arraste o bloco de multiplicação *.
  • Agora precisamos dos dois termos da altura em metros: (Altura / 100).
  • Para o primeiro campo da multiplicação, arraste outro bloco de divisão / (de "Math").
    • No numerador, coloque TextBoxAltura.Text.
    • No denominador, coloque um bloco de número 100 (de "Math").
  • Para o segundo campo da multiplicação, faça o mesmo: arraste um bloco de divisão /, coloque TextBoxAltura.Text no numerador e 100 no denominador.

Pronto! Seus blocos finais devem se parecer com esta estrutura lógica:

when BotaoCalcular.Click do
  set LabelResultado.Text to
    join
      "Seu IMC é: "
      format as decimal
        number:
          (TextBoxPeso.Text) / ( ((TextBoxAltura.Text) / (100)) * ((TextBoxAltura.Text) / (100)) )
        places: 2

Parte 4: Testando seu Aplicativo

A melhor forma de testar é usando seu próprio celular Android:

  • Instale o App "MIT AI2 Companion": Baixe-o da Google Play Store.
  • No App Inventor (computador):
    • Clique no menu "Connect".
    • Selecione "AI Companion".
  • No Celular:
    • Abra o app AI2 Companion.
    • Clique em "Scan QR Code" e aponte para o código QR que apareceu no seu computador.
  • Magicamente, o aplicativo que você criou aparecerá no seu celular para testes em tempo real!

Digite uma altura e um peso, clique no botão e veja o resultado do IMC aparecer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment