Tutorial produzido pelos integrantes do grupo “Neumann Tech” da Faculdade de Tecnologia da Unicamp Limeira.
Videoaula disponível em:
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-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-1-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-2-1024x521.png)
4 – Para começar iremos colocar um “Label” na tela, para isso devemos clicar em cima dela e arrastá-la para dentro do celular. Ela será usada para indicar de quem é a vez de jogar. Não precisamos renomeá-la ainda. No nosso caso, vamos colocar o tamanho da fonte em 30.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-3-1024x495.png)
5 – Adicionamos uma tabela que conterá os botões que os jogadores poderão clicar para colocar os Xs e os Os. Modificamos a tabela para termos 3 linhas e 3 colunas e após isso adicionamos 9 botões. Ajustaremos o tamanho dos botões depois.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-4-1024x504.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-5-1024x495.png)
6 – Adicionamos um Botão Reset, para recomeçar o jogo
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-6-1024x493.png)
7 – Adicionamos uma notificação para indicar qual dos jogadores ganhou o jogo ou se terminou em empate.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-7-1024x500.png)
8 – Renomeamos o botão 10 para “Reset”
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-8-1024x496.png)
9 – Agora iremos acessar a aba “Blocks”, localizada com canto superior direito, para fazer a codificação em blocos do aplicativo.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-9-1024x496.png)
10 – Começamos definindo as variáveis, chamadas “numeroTurno”, que representa o número de turnos, uma chamada “turno”, indicando de quem é a vez de jogar e outra chamada “vencedor” para mostrar se alguém ganhou a partida.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-10-1024x457.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-11-1024x490.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-13-1024x496.png)
11 – Definiremos um procedimento chamado “novoJogo” para começar um jogo novo quando o jogador abrir o jogo pela primeira vez ou apertar o botão Reset.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-14-1024x496.png)
12 – Adicionamos os blocos “set numeroTurnos to”, “set turnos to”, “set vencedor to” e “set Label1 Text to”, que irão reiniciar os nossos dados para uma nova partida.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-15-1024x482.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-16-1024x488.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-17-1024x491.png)
13 – Adicionamos uma variável local chamada “grade” que terá uma lista para armazenar os valores dos botões.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-18-1024x490.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-19-1024x489.png)
13.1 – Adicionamos 9 itens para a lista, e colocamos um botão para cada item.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-20-1024x485.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-21-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-23-1024x488.png)
14 – Adicionamos um for para trabalhar com os itens da lista “grade”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-24-1024x496.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-25-1024x494.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-26-1024x488.png)
15 – Ajustaremos a largura e o tamanho da fonte nos botões.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-27-1024x489.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-28-1024x500.png)
16 – Adicionamos um bloco para chamar esse procedimento quando inicializamos o aplicativo.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-29-1024x499.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-30-1024x494.png)
16.1 – Além de quando iniciamos, também chamaremos esse procedimento para o caso de quando clicarem no botão “Reset”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-31-1024x490.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-32-1024x494.png)
17 – Criaremos um procedimento “ganhouJogo” que será chamado a cada novo turno para verificar se alguém ganhou o jogo. Para isso, esse procedimento deverá verificar as 3 linhas, as 3 colunas e as 2 diagonais.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-33-1024x492.png)
18 – Começamos verificando o Botão 1 e as possibilidades de vitória que o incluem. Se ele não estiver vazio, ou seja, se tiver um X ou um O, significa que tanto a primeira linha como a primeira coluna como a diagonal do canto superior esquerdo para o canto inferior direito são possibilidades de vitória, então precisamos verificar essas possibilidades.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-34-1024x496.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-35-1024x497.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-36-1024x487.png)
19 – Para facilitar o trabalho, é bom termos outro procedimento que chamaremos de “estaGanhando” para verificar se o texto de 3 botões é o mesmo. Para isso, precisaremos de 3 entradas que serão os textos dentro dos botões que verificaremos se são iguais.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-37-1024x479.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-38-1024x486.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-39-1024x488.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-40-1024x495.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-41-1024x489.png)
20 – Caso o texto dos 3 botões seja igual, teremos um vencedor, então precisaremos mudar a nossa variável “vencedor”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-42-1024x497.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-43-1024x489.png)
21 – Podemos usar o procedimento “estaGanhando” no “ganhouJogo”. Para o primeiro caso, dos botões da primeira linha serem iguais, verificaremos a possibilidade dos botões 1, 2 e 3 serem iguais.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-44-1024x494.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-45-1024x484.png)
22 – Para o segundo caso, dos botões da primeira coluna serem iguais, verificaremos a possibilidade dos botões 1, 4 e 7 serem iguais.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-46-1024x494.png)
23 – Para o terceiro caso, dos botões da diagonal começando do botão 1, verificaremos a possibilidade dos botões 1, 5 e 9 serem iguais.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-47-1024x489.png)
24 – Agora faremos o mesmo que fizemos para o Botão 1 para o Botão 2, mas não precisaremos cobrir todas as possibilidades, pois a possibilidade de vitória com a primeira linha, dos botões 1, 2 e 3, já foi coberta pelos casos do Botão 1, então só precisaremos cobrir a possibilidade de vitória da coluna 2, com os botões 2, 5 e 8.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-48-1024x494.png)
25 – Cobriremos agora as possibilidades de vitória do Botão 3 que ainda não cobrimos, que no caso vão ser a possibilidade de vitória com a coluna do botão 3, que são os botões 3, 6 e 9, mais a diagonal que ele se encontra, dos botões 3, 5 e 7.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-49-1024x487.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-50-1024x493.png)
26 – Cobriremos agora as possibilidades de vitória do Botão 4 que ainda não cobrimos, que no caso será apenas a linha que ele se encontra, a linha dos botões 4, 5 e 6.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-51-1024x490.png)
27 – Cobriremos agora as possibilidades de vitória do Botão 7, pois as dos botões 5 e 6 já estão cobertas. No caso do botão 7, a única possibilidade não coberta ainda é a de sua linha, com os botões 7, 8 e 9.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-52-1024x496.png)
28 – Com o procedimento “ganhouJogo” terminado, faremos outro procedimento que acontecerá quando muda o turno, e ele então chamará o procedimento “ganhouJogo”. Chamaremos esse procedimento de “quandoClicado”, pois ele funcionará quando um dos botões for clicado. Para isso funcionar, adicionaremos uma entrada, que representará o botão clicado.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-53-1024x491.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-54-1024x491.png)
29 – Para garantirmos que o procedimento “quandoClicado” funcione corretamente, temos que garantir que ele apenas será acionado em um botão ainda vazio, ou seja, o texto do botão não tem nada escrito ainda.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-55-1024x489.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-56-1024x501.png)
30 – Temos que garantir também que quando clicado o botão mostrará ou um X ou um O, assim deixando de ficar vazio. Para isso, precisaremos mudar o texto do botão. Se for o turno do X, aparecerá um X, se for do O, aparecerá um O.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-57-1024x495.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-58-1024x488.png)
31 – Com isso nós precisaremos aumentar em 1 a variável “numeroTurnos”, porque agora outra pessoa estará jogando o turno.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-59-1024x489.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-60-1024x491.png)
32 – Precisamos agora atualizar a variável “turno” para que ele mude para X ou O, dependendo de quem for a vez. Se era o turno de X jogar, então passa a ser O, e vice-versa.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-61-1024x493.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-62-1024x496.png)
33 – Precisamos atualizar também a Label1, para que mostre escrito de quem é o turno.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-63-1024x490.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-64-1024x491.png)
34 – Feito isso, precisamos ver se o procedimento “quandoClicado” gerou uma vitória, então adicionamos uma chamada do procedimento “ganhouJogo”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-65-1024x491.png)
35 – Devemos programar a notificação para que mostre uma mensagem no caso de um jogador ter vencido. Isso acontecerá caso a nossa variável “vencedor” for diferente de asterisco.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-66-1024x485.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-67-1024x486.png)
36 – Para a mensagem do vencedor, nós juntaremos a variável “vencedor”, que indicará se X ou O venceu, com uma mensagem “venceu o jogo”. O título da mensagem será “Fim de Jogo”. O texto do botão será um “ok”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-68-1024x494.png)
37 – Precisamos verificar se houve um empate. Para isso, adicionamos um else if, e nele verificamos se o “numeroTurnos” é igual a 9, pois se isso ocorrer antes de ter um ganhador, todos os espaços já estarão preenchidos, ou seja, o jogo empatou. Também será exibida uma notificação indicando que terminou empatado.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-69-1024x490.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-70-1024x486.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-71-1024x488.png)
38 – Com o procedimento finalizado, ele precisa ser chamado, e isso ocorrerá sempre que alguém clicar em um dos botões. Para isso, precisamos programar uma chamada individual para cada um dos botões, cujo valor da entrada será o botão que foi clicado.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-72-1024x497.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-73-1024x494.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-74-1024x492.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-75-1024x493.png)
39 – Utilize a opção “scan QR code” do aplicativo.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-76.png)
40 – No seu computador clique em “Connect”, depois “Ai Companion”, e por fim, faça o scan do QR Code que aparecer no monitor com a câmera do seu celular.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-77-1024x493.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-78-1024x492.png)