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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-10.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/04/image-11.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/04/image-12.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, e então renomeá-la para “digite uma letra”
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-13.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-14.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-15.png)
7 – Agora teremos uma “Label” que irá representar o progresso do jogador, a qual iremos renomear para progresso utilizando a aba “components”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-16.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-17.png)
9 – Agora iremos adicionar uma imagem à tela.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-18.png)
10 – Agora iremos adicionar dois “Notifier” que irá mostrar se o jogador digitou uma opção certa ou errada.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-19.png)
11 – Adicione as imagens da forca e de cada uma das partes do boneco.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-20.png)
12 – Adicione dois layouts horizontais e ajuste sua largura.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-21.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-22.png)
12.2 – Ao final desta operação teremos algo assim.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-23.png)
13 – Ajustar o tamanho da imagem para 275 pixels de altura e preenchimento máximo de largura.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-24.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-25.png)
14 – Apague o texto do “Text for Label2”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-26.png)
15 – Alterar o texto dentro da “Label4” para o número 6.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-27.png)
16 – Selecionar a imagem da forca vazia.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-28.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-29.png)
18 – 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/04/image-30.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-31.png)
20 – Agora faremos uma lista, para isso devemos selecionar a opção “List” e escolher a segunda opção.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-32.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-33.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-34.png)
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).
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-35.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-36.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-37.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-38.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-39.png)
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).
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-40.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-41.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-42.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-43.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-44.png)
31 – Agora iremos completar o “length” com um “get” da nossa variável palavra
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-45.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-46.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-47.png)
33 – Agora iremos adicionar uma função que irá manter as sublinhas mesmo após a letra ser revelada, utilizando o bloco “Join”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-48.png)
34 – Na sequência iremos clicar na “label” novamente e adicionar um “progresso Text” e um bloco “text” e inserir um sublinha nela “_” .
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-49.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-50.png)
36 – E adicionar um bloco “math” com valor 0.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-51.png)
37 – Para o próximo bloco devemos redefinir as chances para 6 novamente já que estaremos tratando de uma nova palavra.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-52.png)
38 – Agora vamos modificar a label “chancesRestantes” repetindo o processo de utilizar blocos diretamente ligados a ela adicionando um bloco “get chancesRestantes”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-53.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-54.png)
40 – Na sequência, devemos adicionar o bloco “call”, presente na opção “Procedures” e nomeá-lo de “novaPalavra”
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-55.png)
41 – Em paralelo trabalharemos também com os eventos relacionados ao botão.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-56.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-57.png)
43 – Agora iremos adicionar dois blocos para garantir que tudo está sob controle.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-58.png)
44 – Agora vamos adicionar mais blocos da aba “Text” para conferir se a caixa de texto contém aquela determinada letra.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-59.png)
45 – Adicione blocos de texto relacionados a “processo” e “escreveLetra”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-60.png)
45.1 – Adicione um “set alerta” junto a uma caixa de texto com a mensagem de que o jogador digitou uma letra repetida.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-61.png)
46 – Clique na engrenagem do “if” e adicione um “elseIf” ao bloco para expandir sua função.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-62.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-63.png)
48 – Verifica toda a palavra e apresenta qual posição de cada letra.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-64.png)
49 – Verificar se a letra digitada coincide com cada letra da palavra sorteada.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-65.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-66.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-67.png)
50 – Adicionar um segmento presente em “Text”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-68.png)
51 – Adicionar um “get” relacionado a variável “palavra” e um a “number”, e por fim, um bloco “Math” representando o número 1.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-69.png)
52 – Manter as sublinhas das letras que ainda não foram encontradas.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-70.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-71.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-72.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-73.png)
52.1 – . Neste trecho o bloco utilizado deve ser “escreveLetra Text”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-74.png)
53 – Atualizar a variável de “letrasReveladas”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-75.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-76.png)
54 – Atualize a variável “alerta” e adicionar um bloco de texto informando que a letra está na palavra.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-77.png)
55 – Agora iremos adicionar mais um “else”, para o caso da letra não estar presente na palavra.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-78.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-79.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-80.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-81.png)
55 – Preparar o sistema para quando o jogador fica sem tentativas.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-82.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-83.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-84.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-85.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-86.png)
57 – Verificar se o jogador acertou a palavra.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-87.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-88.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-89.png)
58 – Reiniciar a tela caso o jogador acerte a palavra ou fique sem opções.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-90.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-91.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-92.png)
58.1 – Crie duas variáveis, uma chamada “escolhaSim” e outra “escolhaNao”, ambos ligados a um bloco de texto com suas respectivas mensagens.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-93.png)
58.2 – Adicione os “gets” das duas novas variáveis.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-94.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-95.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-96.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-97.png)
58.3 – Adicione um “else if” caso o jogador escolha “não”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-98.png)
58.4 – Adicione um “close application” que está na aba “Control”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-99.png)
58.5 – Altere o último bloco para “false”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-100.png)
59 – Verificar se o jogador perdeu.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-101.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-102.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-103.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-104.png)
60 – Ajustar o notificar sobre letra.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-105.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-106.png)
61 – Testar o aplicativo, baixe o aplicativo do App Inventor na Play Store.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-107.png)
61.1 – Utilize a opção “scan QR code”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-108.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-109.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/04/image-110.png)