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.

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

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.

6 – Adicionamos um Botão Reset, para recomeçar o jogo

7 – Adicionamos uma notificação para indicar qual dos jogadores ganhou o jogo ou se terminou em empate.

8 – Renomeamos o botão 10 para “Reset”

9 – Agora iremos acessar a aba “Blocks”, localizada com canto superior direito, para fazer a codificação em blocos do aplicativo.

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.

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.

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.

13 – Adicionamos uma variável local chamada “grade” que terá uma lista para armazenar os valores dos botões.

13.1 – Adicionamos 9 itens para a lista, e colocamos um botão para cada item.

14 – Adicionamos um for para trabalhar com os itens da lista “grade”.

15 – Ajustaremos a largura e o tamanho da fonte nos botões.

16 – Adicionamos um bloco para chamar esse procedimento quando inicializamos o aplicativo.

16.1 – Além de quando iniciamos, também chamaremos esse procedimento para o caso de quando clicarem no botão “Reset”.

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.

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.

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.

20 – Caso o texto dos 3 botões seja igual, teremos um vencedor, então precisaremos mudar a nossa variável “vencedor”.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

31 – Com isso nós precisaremos aumentar em 1 a variável “numeroTurnos”, porque agora outra pessoa estará jogando o turno.

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.

33 – Precisamos atualizar também a Label1, para que mostre escrito de quem é o turno.

34 – Feito isso, precisamos ver se o procedimento “quandoClicado” gerou uma vitória, então adicionamos uma chamada do procedimento “ganhouJogo”.

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.

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

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.

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.

39 – Utilize a opção “scan QR code” do aplicativo.

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.