Tutorial produzido pelos integrantes do grupo “Neumann Tech” da Faculdade de Tecnologia da Unicamp Limeira

Assista também a video aula:

Imagens utilizadas na aula: https://drive.google.com/drive/folders/1eYFzwld-DjEEvij0piJ9tJQDmnTYyNN4?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.

4 – Para começar iremos colocar um “Label” na tela, para isso devemos clicar em cima dela e arrastá-la para dentro do celular, e então renomeá-la para “digite uma letra”

5 – Depois adicionaremos uma “Text Box” para o usuário digitar o caractere desejado e adicionar uma mensagem que será apresentada caso cliquem sobre a caixa de texto, que será: ”Apenas letras”.

6 – Agora devemos adicionar um “Button” para que o sistema receba o caractere digitado pelo usuário e alterar o nome do botão para um nome mais intuitivo.

7 – Agora teremos uma “Label” que irá representar o progresso do jogador, a qual iremos renomear para progresso utilizando a aba “components”.

8 – Agora mais duas “Labels” para mostrar as chances que ainda restam para o jogador tentar adivinhar, na primeira devemos alterar o “Text” na aba “Properties” para “chances restantes” e na segunda devemos colocar o número total de tentativas. Depois repetiremos aquele processo de renomear a “Label” utilizando a aba “Components”, iremos renomear para ”chancesRestantes”.

9 – Agora iremos adicionar uma imagem à tela.

10 – Agora iremos adicionar dois “Notifier” que irá mostrar se o jogador digitou uma opção certa ou errada.

11 – Adicione as imagens da forca e de cada uma das partes do boneco.

12 – Adicione dois layouts horizontais e ajuste sua largura.

12.1 – Mova a label “Digite uma letra” e a caixa de texto para dentro do primeiro layout horizontal, e as labels “Chances restantes” e “Text fo Label4” para dentro do segundo layout.

12.2 – Ao final desta operação teremos algo assim.

13 – Ajustar o tamanho da imagem para 275 pixels de altura e preenchimento máximo de largura.

14 – Apague o texto do “Text for Label2”.

15 – Alterar o texto dentro da “Label4” para o número 6.

16 – Selecionar a imagem da forca vazia.

17 – Renomear o item “image1” para “imagemForca”, e depois repetir o processo para “HorizontalArrangement1” colocando “blocoDescreveLetra”, “TextBox1” por “escreveLetra”, “Button1” por “enviar”, “Label2 ”para “progresso”, “HorizontalArrangement2” por “blocoTentativas”, “Label4” por “chancesRestantes”, “Notifer1” por “notificaSobreLetra”, “Notifer2” por “reinicia o jogo”.

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

19 – Agora vamos criar uma variável para armazenar uma lista de palavras, permitindo assim uma boa diversidade de palavras para o jogo. Para isso vamos selecionar a opção “Variables” e escolher a primeira opção e mudar “name” para “palavras”.

20 – Agora faremos uma lista, para isso devemos selecionar a opção “List” e escolher a segunda opção.

21 – Agora vamos adicionar algumas palavras à nossa lista, para isso devemos selecionar a opção “Text”, escolher a primeira peça oferecida e então digitar as palavras desejadas dentro do espaço em branco da peça, no exemplo foram escolhidas as palavras “arara” e “carro”.

22 – Caso queira acrescentar mais opções basta clicar na engrenagem presente na peça azul (make a list), clicar em “item” e arrastá-lo para “list” dentro desse mesmo menu azul. Repare que mais um espaço para encaixar uma peça de texto foi adicionado ao final deste processo.

23 – Agora faremos uma variável que irá representar a palavra que será usada na partida, iniciando uma nova variável e adicionando uma caixa de texto vazia já que ainda não sabemos qual será a palavra correta nomeada como ”palavra”. Também adicionamos uma variável para representar o número de chances que o jogador ainda possui chamada “chancesRestantes”. Selecionando a opção “Math” e escolhendo a primeira peça, digite o número de tentativas que o jogador vai possuir (6).

24 – Agora faremos uma variável para descobrir as letras corretas que o jogador descobriu até então, ela será semelhante à variável utilizada para o número de chances restantes, porém, seu número será 0 e o nome deve ser correspondente a sua nova função.

25 – Agora faremos um procedimento que será utilizado muitas vezes durante a nossa aplicação, tanto para quando abrirmos a tela pela primeira vez quanto para caso seja preciso reiniciar o jogo ou encerrá-lo. Para isso, devemos acessar a opção “Procedures”, selecionar a primeira peça da lista e nomeá-la como “novaPalavra”.

26 – Neste passo definiremos o que o procedimento fará, que no caso é escolher uma palavra aleatória para a partida, para que isso aconteça devemos posicionar o cursor do mouse acima da variável “palavra”, isso irá abrir duas opções, devemos escolher a segunda (set) e arrastá-la para dentro da nossa procedure.

27 – Para garantir que um item aleatório seja escolhido devemos adicionar a peça “pick a random list block” e adicioná-la ao nosso procedimento também.

28 – A fim de completar a função anterior iremos repetir o processo realizado no começo da nossa procedure, só que dessa vez com a nossa variável de lista, e escolhendo a segunda opção (get).

28.1 – Clicar no componente “imagemForca” e pegar o bloco “set imagemForca Picture to forcaVazia.png”. Repita o processo para o componente “escreveLetra” pegando o bloco “set escreveLetra Text to”, e para “progresso” pegando “set progresso Text to”.

29 – Agora faremos um ciclo de repetição para garantir que o número de sublinhas seja correspondente ao de letras da palavra selecionada na partida. Para isso devemos acessar a opção “Control” escolher a peça “for each number from, to, by” a quarta da lista.

30 – Já neste passo iremos corrigir um detalhe da função anterior, como algumas palavras irão possuir quantidades diferentes de letras, devemos substituir o segundo número pela peça “length” presente no menu “Text”.

31 – Agora iremos completar o “length” com um “get” da nossa variável palavra

32 – Na sequência, deve-se clicar na “label” progresso e selecionar a opção ”set progresso Text to” e movê-lo para o “do” do nosso ciclo de repetição.

33 – Agora iremos adicionar uma função que irá manter as sublinhas mesmo após a letra ser revelada, utilizando o bloco “Join”.

34 – Na sequência iremos clicar na “label” novamente e adicionar um “progresso Text” e um bloco “text” e inserir um sublinha nela “_” .

35 – Mudaremos para a função que trabalha com as letras reveladas, primeiro devemos pegar o “set” de “letrasReveladas” e inserir abaixo do bloco do ciclo de repetição.

36 – E adicionar um bloco “math” com valor 0.

37 – Para o próximo bloco devemos redefinir as chances para 6 novamente já que estaremos tratando de uma nova palavra.

38 – Agora vamos modificar a label “chancesRestantes” repetindo o processo de utilizar blocos diretamente ligados a ela adicionando um bloco “get chancesRestantes”.

39 – Terminamos o procedimento, no entanto, precisamos garantir que que ele será utilizado quando for a hora, para isso devemos clicar na “Screen1” e utilizar a terceira peça “when Screen1 Initialize do”.

40 – Na sequência, devemos adicionar o bloco “call”, presente na opção “Procedures” e nomeá-lo de “novaPalavra”

41 – Em paralelo trabalharemos também com os eventos relacionados ao botão.

42 – Cuidado para não escolher o bloco de variável errado, o primeiro é o correto, e deve renomeá-lo para “alerta” para evitar confusão.

43 – Agora iremos adicionar dois blocos para garantir que tudo está sob controle.

44 – Agora vamos adicionar mais blocos da aba “Text” para conferir se a caixa de texto contém aquela determinada letra.

45 – Adicione blocos de texto relacionados a “processo” e “escreveLetra”.

45.1 – Adicione um “set alerta” junto a uma caixa de texto com a mensagem de que o jogador digitou uma letra repetida.

46 – Clique na engrenagem do “if” e adicione um “elseIf” ao bloco para expandir sua função.

47 – Agora precisamos verificar se as letras da palavra sorteada conferem com alguma das letras que o jogador inseriu. Para isso vamos adicionar um “contains” presente na aba Text, e conectar um “get global palavra” no seu primeiro espaço e um “escreveLetra Text” no segundo.

48 – Verifica toda a palavra e apresenta qual posição de cada letra.

49 – Verificar se a letra digitada coincide com cada letra da palavra sorteada.

50 –  Adicionar um segmento presente em “Text”.

51 – Adicionar um “get” relacionado a variável “palavra” e um a “number”, e por fim, um bloco “Math” representando o número 1.

52 – Manter as sublinhas das letras que ainda não foram encontradas.

52.1 – . Neste trecho o bloco utilizado deve ser “escreveLetra Text”.

53 – Atualizar a variável de “letrasReveladas”.

54 – Atualize a variável “alerta” e adicionar um bloco de texto informando que a letra está na palavra.

55 – Agora iremos adicionar mais um “else”, para o caso da letra não estar presente na palavra.

55 – Preparar o sistema para quando o jogador fica sem tentativas.

57 – Verificar se o jogador acertou a palavra.

58 – Reiniciar a tela caso o jogador acerte a palavra ou fique sem opções.

58.1 – Crie duas variáveis, uma chamada “escolhaSim” e outra “escolhaNao”, ambos ligados a um bloco de texto com suas respectivas mensagens.

58.2 – Adicione os “gets” das duas novas variáveis.

58.3 – Adicione um “else if” caso o jogador escolha “não”.

58.4 – Adicione um “close application” que está na aba “Control”.

58.5 – Altere o último bloco para “false”.

59 – Verificar se o jogador perdeu.

60 – Ajustar o notificar sobre letra.

61 – Testar o aplicativo, baixe o aplicativo do App Inventor na Play Store.

61.1 – Utilize a opção “scan QR code”.

62.2 – . 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.