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.

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.

3. Agora iremos iniciar o projeto, para isso clique em “Start New Project” e dê um nome a ele.

4. Para começar iremos colocar um TableArrangement da aba de Layout.

5. Após isso, adicionaremos duas Labels e duas TextBoxs.

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.

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.

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”.

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”.

10. Após isso, adicionamos um botão que renomeamos para “botãoMultiplicação” e mudamos o seu texto para “Gerar tabuada”.

11. Adicionamos agora uma nova label que renomeamos para “resultado” e apagamos o texto nela.

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.

13. Após isso, nós vamos para a parte “Blocks” do App Inventor, para fazer a codificação do aplicativo.

14. Para começar, adicionamos 3 variáveis que chamaremos de “multi”, “numero” e “numero2”, todas inicializando com o valor 0.

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.

16. Vamos nos blocos oferecidos pela TextBox1 e selecionamos o procedimento “call TextBox1 HideKeyBoard” e encaixamos ele no bloco do botãoMultiplicação.

17. Vamos nos blocos oferecidos pela label “resultado” e pegamos o bloco “set resultado Text to” e adicionamos uma caixa de texto vazia.

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.

19. Adicionamos um “set resultado FontSize to”, para modificar o tamanho da fonte da label “resultado” e adicionamos um bloco Math de valor 28.

20. Vamos criar um ciclo para calcularmos os resultados da tabuada. Vamos na aba Control e pegamos um for e encaixamos no bloco principal.

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”.

22. No “do”, encaixamos um bloco “set global multi to”, para modificarmos a nossa variável “multi”.

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.

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.

25. Adicionamos mais 5 strings para a nossa label, totalizando 7 strings no final.

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.

27. Com o aplicativo pronto, clique em “Connect”, depois “AI Companion”, aparecerá um QR Code no seu monitor.

28. Abra o aplicativo do seu celular e utilize a opção “scan QR code” do aplicativo.