Tutorial produzido pelos integrantes do grupo “Neumann Tech” da Faculdade de Tecnologia da Unicamp Limeira.
1. Para começar a atividade devemos acessar o site https://appinventor.mit.edu/ e clicar na opção “Create Apps!”, então será solicitado que realize o login, para isso deverá usar sua conta google e aceitar os termos da plataforma.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-132-1024x518.png)
2. Após efetuar o login será levado para esta tela, caso ache necessário poderá alterar o idioma do site para português do Brasil.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-133-1024x522.png)
3. Agora iremos iniciar o projeto, para isso clique em “Start New Project” e dê um nome a ele.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-134-1024x521.png)
4. Para começar iremos colocar um TableArrangement da aba de Layout.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-135-1024x487.png)
5. Após isso, adicionaremos duas Labels e duas TextBoxs.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-136-1024x487.png)
6. Agora, vamos mudar o texto da label1 para “Entre com um número” e arrumar sua altura, mudando para “fill parent”, e a sua largura, mudando para 50 por cento.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-137-1024x487.png)
7. Vamos mudar o texto da label2 para “Entre com o número limite da tabuada”, que definirá o nosso limite da tabuada, e também alteramos sua altura para “fill parent” e a largura para 50 por cento.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-138-1024x487.png)
8. Vamos agora nas propriedades da TextBox1, colocamos a altura em “fill parent” e a largura em 50 por cento, apagamos o texto da caixa de dica e marcamos a opção “NumbersOnly”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-139-1024x487.png)
9. Vamos agora nas propriedades da TextBox2, colocamos a altura em “fill parent” e a largura em 50 por cento, apagamos o texto da caixa de dica e marcamos a opção “NumbersOnly”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-140-1024x487.png)
10. Após isso, adicionamos um botão que renomeamos para “botãoMultiplicação” e mudamos o seu texto para “Gerar tabuada”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-141-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-142-1024x487.png)
11. Adicionamos agora uma nova label que renomeamos para “resultado” e apagamos o texto nela.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-143-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-144-1024x487.png)
12. Vamos às propriedades da Screen1 e selecionamos a opção “Scrollable”, que vai nos permitir rolar pela tela para vermos a nossa tabuada caso essa fique muito grande.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-145-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-146-1024x487.png)
13. Após isso, nós vamos para a parte “Blocks” do App Inventor, para fazer a codificação do aplicativo.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-147-1024x487.png)
14. Para começar, adicionamos 3 variáveis que chamaremos de “multi”, “numero” e “numero2”, todas inicializando com o valor 0.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-148-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-149-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-150-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-151-1024x487.png)
15. Vamos nos blocos oferecidos pelo nosso botão e escolhemos a opção “when botãoMultiplicação click” e arrastamos ela para a tela.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-152-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-153-1024x487.png)
16. Vamos nos blocos oferecidos pela TextBox1 e selecionamos o procedimento “call TextBox1 HideKeyBoard” e encaixamos ele no bloco do botãoMultiplicação.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-154-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-155-1024x487.png)
17. Vamos nos blocos oferecidos pela label “resultado” e pegamos o bloco “set resultado Text to” e adicionamos uma caixa de texto vazia.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-156-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-157-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-158-1024x487.png)
18. Agora nós vamos salvar os números que nós digitamos nas nossas variáveis “número” e “numero2”, para isso adicionamos 2 “set global to”, uma para cada número, e encaixamos nelas, respectivamente o texto da TextBox1 e TextBox2.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-159-1024x487.png)
19. Adicionamos um “set resultado FontSize to”, para modificar o tamanho da fonte da label “resultado” e adicionamos um bloco Math de valor 28.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-160-1024x487.png)
20. Vamos criar um ciclo para calcularmos os resultados da tabuada. Vamos na aba Control e pegamos um for e encaixamos no bloco principal.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-161-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-162-1024x487.png)
21. Mudamos o nome da variável “number”, que está dentro do for, para “i” e no segundo encaixe “to”, colocamos a nossa variável “numero2”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-163-1024x487.png)
22. No “do”, encaixamos um bloco “set global multi to”, para modificarmos a nossa variável “multi”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-164-1024x487.png)
23. A variável “multi” armazenará os valores das multiplicações, ou seja, ela terá os resultados da variável “numero” vezes a variável “i”, para isso nós adicionamos um bloco de multiplicação que pegamos na aba Math.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-165-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-166-1024x487.png)
24. Para imprimirmos a nossa tabuada na nossa label “resultado”, adicionamos um “set resultado Text to” junto de um bloco “join”, que pegamos na aba Text.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-167-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-168-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-169-1024x487.png)
25. Adicionamos mais 5 strings para a nossa label, totalizando 7 strings no final.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-170-1024x487.png)
26. Adicionamos então os seguintes blocos no nosso “join”: primeiro um “resultado Text”, que é o texto anterior da nossa label “resultado”, depois a variável “numero”, que foi o nosso número escolhido para fazer a tabuada, uma caixa de texto com um asterisco, representando o símbolo de multiplicação, a variável “i”, que representa o número que está sendo multiplicado pela variável “numero”, uma caixa de texto contendo um símbolo de igual, a variável “multi”, que mostrará o resultado da multiplicação de “numero” por “i”, e pra finalizar uma caixa de texto contendo um “\n”, que representa uma quebra de linha, para que os valores da tabuada sejam cada um impressos em uma linha diferente.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-171-1024x487.png)
27. Com o aplicativo pronto, clique em “Connect”, depois “AI Companion”, aparecerá um QR Code no seu monitor.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-172-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-173-1024x487.png)
28. Abra o aplicativo do seu celular e utilize a opção “scan QR code” do aplicativo.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-174.png)