Ficha Trabalho App Inventor Edit

9.
º Ano
Agrupamento de Escolas Trabalho Prático | AppInventor
D. António Ferreira Gomes - Penafiel 2022-2023
Criação de uma aplicação para dispositivo Android
Ficha de trabalho
Criação de uma pequena app que seria aplicada a alunos do 1º ciclo, para que estes
aprendam inglês.
1. Acede ao site do MIT App Inventor em http://appinventor.mit.edu/explore/#, de
seguida clica no botão semelhante ao abaixo.
2. Faz o registo com a tua conta Google.
3. Na opção seguinte faz “Permitir”.
4. Na janela seguinte deves descer a barra de deslocamento vertical e escolher a

opção abaixo.
9.º Ano
5. Na janela seguinte, seleciona “Do Not Show Again” e clica em “Continue”.
6. No App Inventor, cria um novo projeto. Atribui-lhe o nome de English1Ciclo.
7. De seguida irá aparecer um ecrã semelhante a este:

9.º Ano
8. O ecrã inicial fica sempre com o nome de screen1, nem podemos alterar.
(Funciona como homepage)
9. Em primeiro lugar, vamos alterar as propriedades do Screen1.
10. Assim, nesta janela, altera as seguintes opções:
a. AlignHorizontal: Center (alinhar ao centro)

9.º Ano
b. AlignVertical: Top (encosta a cima do ecrã)
c. AppName: English 1.0 (nome da app)
d. Icon: english_icon.png (pasta anexa) (Upload File – Escolher ficheiro – ok)
e. OpenScreenAnimation: (escolhe uma das opções – é uma animação ao abrir a

app)
f. ScreenOrientation: Landscape (horizontal)
g. Title: Home (título)

9.º Ano
11. Do lado esquerdo aparecem os objetos que podem ser inseridos:

12. Nessa barra lateral, escolhe Layout (tens de descer com a barra de deslocamento
vertical):
13. Arrasta HorizontalArrangement para cima do ecrã do telemóvel (tudo o que

inserirmos vai lá para dentro):
9.º Ano
14. Altera as propriedades desta ferramenta (lado direito – tem de estar selecionado):
a. AlignHorizontal: Left
b. AlignVertical: Top
c. Height: 30 pixels (altura)
15. Na opção User Interface, escolhe label e puxa para dentro do retângulo que
fizeste na alínea anterior.
16. Do lado direito, altera as propriedades:

a. FontBold: Ativar
b. FontSize: 25
c. Text: Ensino Básico – 1º Ciclo
d. TextAlignment: center
e. TextColor: Custom (escreve este código - #f9a426ff) (A imagem seguinte tem o
texto a azul, mas o teu vai ficar a laranja, mudei a cor porque não ficava
harmonioso com a imagem seguinte).
17. Insere outro HorizontalArrangement (coloca por baixo do anterior).

9.º Ano
18. Altera as suas propriedades (lado direito):

a. AlignHorizontal: Left
b. AlignVertical: Top
c. Height: 140 pixels
d. Width: 450 pixels
e. Image: english.png (upload file)
19. Por baixo, insere uma TableArrangement (Layout). E altera as suas

propriedades:
a. Columns: 3 (colunas)
b. Height: 50 pixels
c. Width: 160 pixels
d. Rows: 1 (linhas)
20. Acede a UserInterface e arrasta 3 Buttons para dentro deste objeto.
21. Altera o nome de cada um deles (selecionas o objeto e escolhes Rename (em
baixo)):
a. Button1: B_bebidas
b. Button2: B_animais
9.º Ano
c. Button3:B_humanos.
22. Clica no botão B_bebidas e altera as suas propriedades, conforme a imagem,

eliminando na opção text o que aparece lá escrito:
23. Faz o mesmo para os outros botões, insere as imagens respetivas (estão na pasta
em anexo).
24. Insere uma label (User interface) por baixo destes objetos. Altera as suas
propriedades:
a. FontSize: 14
b. Text: Made by (coloca o teu nome)
c. TextAlignment: center
d. FontItalic e FontBold
9.º Ano
(Este é o resultado final)
25. Cria um novo screen e atribui o nome de Animais. (Add screen)
26. Assim, nesta janela, altera as seguintes opções:

a. AlignHorizontal: Center (alinhar ao centro)
b. AlignVertical: Top (encosta a cima do ecrã)
c. OpenScreenAnimation: (escolhe uma das opções – é uma animação ao abrir a
app)
d. ScreenOrientation: Landscape (horizontal)
27. Insere uma HorizontalArrangement, alinhada ao centro.

28. Insere um botão e muda o nome para bt_voltar, com as seguintes propriedades:
a. Hight e Weight: 25
b. Image: seta_esquerda.jpg
c. Text: elimina esse texto
29. Insere um label (por baixo), com as seguintes propriedades:

a. Font: 16
b. Text: Clica nas imagens para visualizares o nome em inglês
c. FontBold: ativa esta opção
d. TextAlignment: Center
9.º Ano
30. Insere uma TableArrangement, com as seguintes propriedades:

a. Columns: 5
b. Height: 120 pixels
c. Widht: 420 pixels
d. Rows: 2
31. Insere cinco botões. Altera o nome dos botões bt_nome animal e insere a
imagem correspondente.
a. Height: 80 pixels
b. Widht: 80 pixels
32. Insere por baixo de cada Animal uma label com o nome da mesma em Inglês.
Altera as seguintes propriedades:
a. FontBold: ativo
b. TextAlignment: center
c. Deve ficar como na imagem seguinte:
33. Agora, clica em cima de cada label e a última opção que aparece do lado direito –
Visible – desativa (tira o visto). O objetivo é quando o utilizador clicar em cima da
imagem aparecer o nome).
34. Seleciona o Screen1.

a. No canto superior direito tens um botão – Blocks. Clica aí.
b. Do lado esquerdo aparecem muitas opções. Cá mais abaixo tens Bt_animais.
Clica em cima.
c. Quando clicas, aparece um menu, clica em cima da opção parecida
com a imagem seguinte e arrasta para o lado direito.
9.º Ano
10
d. Agora, clica em Control e seleciona a opção: open another screen
screenName e encaixa no bloco do When.
e. Clica em text, escolhe logo a primeira opção e arrasta. Deve ficar

como na imagem seguinte. Tem de ficar tudo encaixado. Tens de
escrever Animais dentro da caixa.
35. Seleciona o Screen Animais. O objetivo é quando o utilizador clicar em

cima da imagem do anima, ouvir-se o som. A seta laranja é para voltar ao
ecrã inicial. Comecemos por aqui.
36. Clica em cima da seta do lado esquerda B_seta_esq. Deves fazer igual
ao exemplo abaixo. As opções são as mesmas que as alíneas
anteriores:
37. Clica em cima da primeira imagem do animal e faz como a imagem:
38. Nos Animais, quando o utilizador clicar em cima do animal, irá aparecer
o nome do animal por baixo da imagem. No final deve ficar assim:
9.º Ano
39. No final de fazer tudo, devemos testar. Clica em Build e escolhe App (provide
QR code for .apk):
40. No telemóvel, com a app MIT App Inventor 2, lê o código QR gerado (Scan QR
Code) e instala. O código seguinte foi o que a minha app gerou. Faz com a tua.
41. Experimenta. É uma app muito simples, se quiseres podes fazer as

bebidas e as pessoas (partes do corpo ou peças de roupa).
42. Envia o QR Code pelo Teams.

Ficha Trabalho App Inventor Edit

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Ficha Trabalho App Inventor Edit

Enviado por

Direitos autorais:

Formatos disponíveis

9.

Criação de uma aplicação para dispositivo Android

1. Acede ao site do MIT App Inventor em http://appinventor.mit.edu/explore/#, de

seguida clica no botão semelhante ao abaixo.

2. Faz o registo com a tua conta Google.

3. Na opção seguinte faz “Permitir”.

4. Na janela seguinte deves descer a barra de deslocamento vertical e escolher a

5. Na janela seguinte, seleciona “Do Not Show Again” e clica em “Continue”.

6. No App Inventor, cria um novo projeto. Atribui-lhe o nome de English1Ciclo.

7. De seguida irá aparecer um ecrã semelhante a este:

9. Em primeiro lugar, vamos alterar as propriedades do Screen1.

10. Assim, nesta janela, altera as seguintes opções:

a. AlignHorizontal: Center (alinhar ao centro)

b. AlignVertical: Top (encosta a cima do ecrã)

c. AppName: English 1.0 (nome da app)

d. Icon: english_icon.png (pasta anexa) (Upload File – Escolher ficheiro – ok)

e. OpenScreenAnimation: (escolhe uma das opções – é uma animação ao abrir a

f. ScreenOrientation: Landscape (horizontal)

g. Title: Home (título)

11. Do lado esquerdo aparecem os objetos que podem ser inseridos:

13. Arrasta HorizontalArrangement para cima do ecrã do telemóvel (tudo o que

16. Do lado direito, altera as propriedades:

17. Insere outro HorizontalArrangement (coloca por baixo do anterior).

18. Altera as suas propriedades (lado direito):

19. Por baixo, insere uma TableArrangement (Layout). E altera as suas

20. Acede a UserInterface e arrasta 3 Buttons para dentro deste objeto.

22. Clica no botão B_bebidas e altera as suas propriedades, conforme a imagem,

(Este é o resultado final)

25. Cria um novo screen e atribui o nome de Animais. (Add screen)

26. Assim, nesta janela, altera as seguintes opções:

27. Insere uma HorizontalArrangement, alinhada ao centro.

29. Insere um label (por baixo), com as seguintes propriedades:

30. Insere uma TableArrangement, com as seguintes propriedades:

c. Deve ficar como na imagem seguinte:

34. Seleciona o Screen1.

e. Clica em text, escolhe logo a primeira opção e arrasta. Deve ficar

35. Seleciona o Screen Animais. O objetivo é quando o utilizador clicar em

37. Clica em cima da primeira imagem do animal e faz como a imagem:

41. Experimenta. É uma app muito simples, se quiseres podes fazer as

42. Envia o QR Code pelo Teams.

Você também pode gostar