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.
