Tutorial produzido pelos integrantes do grupo “Neumann Tech” da Faculdade de Tecnologia da Unicamp Limeira.
Arquivos da aula: https://drive.google.com/drive/folders/1Sgc7tpn4GK1dSFCroCYHZqJMVv0hWHOu?usp=sharing
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/06/image-121.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/06/image-122.png)
3. Agora iremos iniciar o projeto, para isso clique em “Start New Project” e dê um nome a ele, nesse caso, chamaremos de “Quiz_Geografia”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-123.png)
4. Adicione uma Label.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-124.png)
5. Adicione um TextBox.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-125.png)
6. Adicione um Button.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-126.png)
7. Adicione mais duas Labels.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-127.png)
8. Altere o texto da Label1 para: “Escreva a sigla do estado em letras maiúsculas”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-128.png)
9. Altere o texto do botão para “Checar Resposta”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-129.png)
10. Altere o texto da Label2 para “Pontuação”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-130.png)
11. Adicione um Canvas.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-131.png)
12. Adicione a imagem do mapa do Brasil.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-132.png)
13. Altere os valores da imagem, a altura para 270 pixels e a largura para 320 pixels
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-133.png)
14. Adicione um ImageSprite.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-134.png)
14.1. Adicione a imagem do pin no ImageSprite.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-135.png)
14.2. Renomeie a ImageSprite para “SP”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-136.png)
14.3. Desmarque a opção Visible.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-137.png)
14.4. Repita esse procedimento para os outros estados.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-138.png)
15. Ative a opção para mostrar componentes escondidos.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-139.png)
16. Na aba Blocks pegue uma variável global e dê o nome de “pontuacao”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-140.png)
16.1. Adicione uma variável Math com valor 0.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-141.png)
17. Repita o procedimento anterior alterando o nome da variável para “estado_atual” e a math para 1.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-142.png)
18. Adicione uma nova variável global, de o nome de “siglas” e conecte a um bloco “make a list”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-143.png)
19. Adicione um bloco de texto e altere seu conteúdo para “SP”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-144.png)
20. Adicione itens na lista até ficar com a quantidade de pins que você adicionou para os estados.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-145.png)
21. Adicione o bloco de textos para as siglas dos outros estados.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-146.png)
22. Adicione uma nova variável global e de o nome de estados, conecte a um bloco “make a list” e por fim adicione o último bloco de “SP”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-147.png)
22.1. Agora repita para os outros ImageSprite.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-148.png)
23. Adicione um bloco “when Initialize do” correspondente a Screen1.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-149.png)
24. Adicione um “set Label3 Text to”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-150.png)
24.1. Conecte a uma variável “get pontuacao”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-151.png)
25. Adicioneum bloco “set ImageSprite Visible”
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-152.png)
26. Adicione um bloco “select list item”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-153.png)
27. Adicione um get “estados” e outro “estado_atual”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-154.png)
28. Adicione um bloco Logic true.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-155.png)
29. Adicione um bloco “when Click do” correspondente ao Button1.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-156.png)
30. Em Control, pegar e adicionar um bloco “if then e else”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-157.png)
31. Em Logic, pegar um bloco de comparação.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-158.png)
31.1. Adicione um bloco “TextBox1 Text” no primeiro espaço do bloco de comparação.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-159.png)
31.2. Adicione um bloco “select list item”, porém, utilize “get siglas” e “get estado_atual”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-160.png)
32. Adicione em “set global pontuacao to”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-161.png)
32.1. Adicione um bloco de soma Math.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-162.png)
32.2. Adicione um bloco “get global pontuacao” e um número com valor 1.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-163.png)
33. Copie o bloco “set Label3 Text to” e cole no then.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-164.png)
34. Adicione um “set Label1 Text to” e um bloco de texto com a seguinte mensagem: “Parabéns, resposta correta! Digite a próxima sigla.”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-165.png)
35. Adicione um “set Label1 BackgroundColor to”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-166.png)
35.1. Adicione um bloco de cor verde.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-167.png)
36. Adicione um bloco “if then else”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-168.png)
36.1. Adicione um bloco Math de comparação e altere para ≥.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-169.png)
36.2. Adicione um bloco “length of list”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-170.png)
36.3. Adicione um “get global siglas”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-171.png)
36.4. Adicione um “get global estado_atual” no primeiro espaço.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-172.png)
37. Adicione um “set global estado_atual to” conectado a um bloco Math de valor 1.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-173.png)
38. Adicione no espaço else um bloco “set global estado_atual to”, conectado a um bloco de soma Math, com um “get global estado_atual” no primeiro espaço e um bloco numérico com valor 1 no segundo espaço.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-174.png)
39. Copie o bloco “set ImageSprite” e cole no primeiro “then” alterando o valor da variável Logic para “false”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-175.png)
40. Cole novamente o bloco “set ImageSprite” porém, mantenha o bloco Logic com o valor true.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-176.png)
41. Adicione um bloco “set Label1 Text to” junto a um bloco “join”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-177.png)
41.1. Adicione mais um item à lista.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-178.png)
41.2. Adicione dois bloco de texto com as seguinte mensagens: “Que pena, você erro” e “não é a resposta certa, tente novamente”, e no meio desses dois blocos adicione um bloco “TextBox1 Text”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-179.png)
42. Adicione um bloco “set Label1 BackgroundColor to”, porém, altere o bloco de cor para vermelho.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-180.png)
43. 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/06/image-181.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-182.png)
44. 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/06/image-183.png)