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.

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, nesse caso, chamaremos de “Quiz_Geografia”.

4. Adicione uma Label.

5. Adicione um TextBox.

6. Adicione um Button.

7. Adicione mais duas Labels.

8. Altere o texto da Label1 para: “Escreva a sigla do estado em letras maiúsculas”.

9. Altere o texto do botão para “Checar Resposta”.

10. Altere o texto da Label2 para “Pontuação”.

11. Adicione um Canvas.

12. Adicione a imagem do mapa do Brasil.

13. Altere os valores da imagem, a altura para 270 pixels e a largura para 320 pixels

14. Adicione um ImageSprite.

14.1. Adicione a imagem do pin no ImageSprite.

14.2. Renomeie a ImageSprite para “SP”.

14.3. Desmarque a opção Visible.

14.4. Repita esse procedimento para os outros estados.

15. Ative a opção para mostrar componentes escondidos.

16. Na aba Blocks pegue uma variável global e dê o nome de “pontuacao”.

16.1. Adicione uma variável Math com valor 0.

17. Repita o procedimento anterior alterando o nome da variável para “estado_atual” e a math para 1.

18. Adicione uma nova variável global, de o nome de “siglas” e conecte a um bloco “make a list”.

19. Adicione um bloco de texto e altere seu conteúdo para “SP”.

20. Adicione itens na lista até ficar com a quantidade de pins que você adicionou para os estados.

21. Adicione o bloco de textos para as siglas dos outros estados.

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

22.1.  Agora repita para os outros ImageSprite.

23. Adicione um bloco “when Initialize do” correspondente a Screen1.

24. Adicione um “set Label3 Text to”.

24.1. Conecte a uma variável “get pontuacao”.

25. Adicioneum bloco “set ImageSprite Visible”

26. Adicione um bloco “select list item”.

27. Adicione um get “estados” e outro “estado_atual”.

28. Adicione um bloco Logic true.

29. Adicione um bloco “when Click do” correspondente ao Button1.

30. Em Control, pegar e adicionar um bloco “if then e else”.

31. Em Logic, pegar um bloco de comparação.

31.1. Adicione um bloco “TextBox1 Text” no primeiro espaço do bloco de comparação.

31.2. Adicione um bloco “select list item”, porém, utilize “get siglas” e “get estado_atual”.

32. Adicione em “set global pontuacao to”.

32.1. Adicione um bloco de soma Math.

32.2. Adicione um bloco “get global pontuacao” e um número com valor 1.

33. Copie o bloco “set Label3 Text to” e cole no then.

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

35. Adicione um “set Label1 BackgroundColor to”.

35.1. Adicione um bloco de cor verde.

36. Adicione um bloco “if then else”.

36.1. Adicione um bloco Math de comparação e altere para ≥.

36.2. Adicione um bloco “length of list”.

36.3. Adicione um “get global siglas”.

36.4. Adicione um “get global estado_atual” no primeiro espaço.

37. Adicione um “set global estado_atual to” conectado a um bloco Math de valor 1.

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.

39. Copie o bloco “set ImageSprite” e cole no primeiro “then” alterando o valor da variável Logic para “false”.

40. Cole novamente o bloco “set ImageSprite” porém, mantenha o bloco Logic com o valor true.

41. Adicione um bloco “set Label1 Text to” junto a um bloco “join”.

41.1. Adicione mais um item à lista.

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

42. Adicione um bloco “set Label1 BackgroundColor to”, porém, altere o bloco de cor para vermelho.

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

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