AGRUPAMENTO DE ESCOLAS DE MONTEMOR-O-VELHO

TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO – 9º ANO

ANO LETIVO 2023/2024

FICHA DE TRABALHO Nº 2
“PROGRAMAÇÃO NOCODE - THUNKABLE”
NOME: Nº:
OBJETIVOS:
 Conhecer os conceitos do mundo da programação
 Entender e distinguir os conceitos Eventos e Ações
 Criar Botões que mudem a cor do fundo do ecrã

1. Aceder ao site https://thunkable.com/.

2. Cria um Projeto Novo, a partir do projeto criado na aula anterior.

No painel do Projeto Anterior, clica no Botão indicado na imagem acima. De seguida, escolhe
a opção “Duplicate”.
De seguida, é criada uma cópia conforme apresentado na imagem abaixo. Para verificares
qual dos projetos é a cópia deves passar com o rato por cima de cada um dos Projetos.

FICHA DE TRABALHO Nº 2 – APP MOBILE Página 1 de 8

DISCIPLINA DE TIC – 9º ANO GRUPO 550 - INFORMÁTICA
 Agora vamos proceder à alteração do nome do projeto. Deves para isso abrir o Projeto

e na janela apresentada e colocar o nome conforme

apresentado abaixo:
FTN2PrimeiroUltimo Nome9ABotãoEventoAção
(FTN2VirginiaCouceir9ABotãoEventoAção)

3. De seguida, deves proceder á alteração das propriedades dos seguintes objetos gráficos
Screen1: Background: Branca (White).
Label1: Text: AEMOV TIC – Botões.
Label2: Text: Esta app altera a cor do fundo do ecrã a partir dos botões.
4. Agora vamos inserir outro objeto gráfico – Botão (Button). Apenas temos de arrastar o
botão para o Screen1. E de seguida, procede à alteração das seguintes propriedades:
Text: Verde
TextColor: Branca
BackgroundColor: Verde
Layout  Width (largura): 100
5. De seguida, vamos inserir mais 5 Botões. Para isso, vamos duplicar o botão que acabámos
de criar, para aproveitar algumas das propriedades já definidas. Assim, temos de ativar o
Botão e depois no Painel das Propriedades e clica nos 3 pontos conforme imagem e escolhe
a opção Duplicate.

6. Altera as propriedades Text e TextColor tendo em atenção a imagem a seguir apresentada

(Podes posicionar os botões no ecrã a teu gosto).

FICHA DE TRABALHO Nº 2 – APP MOBILE Página 2 de 8

DISCIPLINA DE TIC – 9º ANO GRUPO 550 - INFORMÁTICA
IMPORTANTE:
Os nomes dos objetos gráficos (Button1, Button2, Label1, Label2, entre outros) vão ser
utilizados na programação. Assim, quando temos a repetição de vários objetos gráficos (como
LABELS e BUTTONS) devemos alterar os nomes originais para ser mais fácil a
identificação do objeto na programação.
PODEMOS SEGUIR A SEGUINTE NORMA/REGRA:
Mantém-se o nome do objeto: Button, Label, Image entre outros.
Substitui-se o número por um nome significativo (Um nome que identifique a ação,
ou seja, a função daquele objeto).
A 1ª letra da palavra Significativa é maiúscula.
7. Altera a propriedade NOME de cada um dos objetos a seguir indicados:
 Label1  LabelTitulo
 Label2  LabelDescricao
 Button1  ButtonVerde
 Button2  ButtonAzul
 Button3  ButtonAmarelo
 Button4  ButtonVermelho
 Button5  ButtonRosa
 Button6  ButtonLilas
Até aqui apenas estivemos a construir a parte que designamos por Design da nossa
aplicação.

PROGRAMAÇÃO
Programação (Lembrar…)
A parte que foi desenvolvida anteriormente chama-se Design.
A parte que vai ser desenvolvida a partir daqui designa-se por Programação (Blocks).
Na janela do Thunkable do lado esquerdo temos disponíveis 2 separadores conforme
imagem abaixo:

FICHA DE TRABALHO Nº 2 – APP MOBILE Página 3 de 8

DISCIPLINA DE TIC – 9º ANO GRUPO 550 - INFORMÁTICA
É no separador BLOCKS que vai ser feita toda a programação necessária á implementação da
nossa App.
Na imagem acima é ainda mostrado a listagem de todos os objetos gráficos que compõem
a nossa App (UIcomponents).
Na área assinalada na imagem abaixo é para onde vão ser arrastados os blocos de
programação de cada um dos objetos.

Normalmente, os botões têm como objetivo FAZER ACONTECER ALGO. Assim, estão
envolvidas duas partes:

EVENTOS: São acontecimentos. Se acontecer alguma coisa, executa uma ação.

AÇÕES: A resposta ao evento. No nosso caso pretendemos que seja alterada a cor de
fundo do ecrã, ou seja, a propriedade BackGround do objeto Screen1.

Assim, temos de clicar nos objetos gráficos listados na UIComponents para mostrar todos os
Eventos e Ações possíveis.

EVENTOS AÇÕES

FICHA DE TRABALHO Nº 2 – APP MOBILE Página 4 de 8

DISCIPLINA DE TIC – 9º ANO GRUPO 550 - INFORMÁTICA
8. Clica na Seção UIComponents no ButtonVerde e clica no Evento Click conforme mostrado
na imagem apresentada a seguir (é criada uma cópia no editor):

Agora vamos observar o bloco acima:

 Evento: When ButtonVerde Click (Quando o BotãoVerde for clicado).

 Ação: Ação (do). Faz qualquer coisa. Está vazia…
 Pretendemos alterar a cor de fundo (BackGround) do Screen1.
 Clicar no Screen1 e escolher a ação que altera a propriedade
BackgroundColor.

FICHA DE TRABALHO Nº 2 – APP MOBILE Página 5 de 8

DISCIPLINA DE TIC – 9º ANO GRUPO 550 - INFORMÁTICA
Assim, depois de escolhida a cor correta (alterar conforme assinalado na imagem) deve ficar
conforme apresentado abaixo:

Se reparares, os blocos têm formas específicas para se poderem encaixar. Então, agora vamos
fazer a leitura do bloco acima:
EVENTO: Quando o ButtonVerde for clicado
AÇÃO (do): Define (Set) a propriedade background para verde.

9. Programa os restantes BOTÕES. Em vez de repetires o procedimento anterior, podes

simplesmente duplicar os blocos e alterar os objetos e propriedades. Para isso, deves
proceder da seguinte forma:
Clicar com o Botão Direito do Rato sobre o Evento (Laranja) e DUPLICATE  Escolher o
ButtonAzul  Alterar a cor de background para azul.
10. Repete para os restantes botões. No final deves ter algo semelhante ao apresentado abaixo:

FICHA DE TRABALHO Nº 2 – APP MOBILE Página 6 de 8

DISCIPLINA DE TIC – 9º ANO GRUPO 550 - INFORMÁTICA
11. PUBLICAR A APP
Tem como principal objetivo a visualização da aplicação num dispositivo real, que podem ser
os seguintes:
 Android (Phone ou tablet)
 Apple (iphone ou iPad)
 Browser
Conforme comando apresentados a seguir:

 COMECEMOS PELA WEB

E para isso basta clicar com o botão esquerdo do rato do botão mostrado acima (Web Preview).
 NO TELEMÓVEL OU TABLET

Antes de testar temos primeiro de instalar o seguinte:

 App Thunkable Live da Apple
 Android Store
Depois de instalada, devemos abrir a App e efetuar o login com o email institucional. De
seguida, a app deve surgir de imediato e depois é Testar.
No final não te esqueças de entregar na Classroom da disciplina de TIC na publicação para
esse efeito o link gerado pela plataforma, clicando no botão assinalado na imagem abaixo.

FICHA DE TRABALHO Nº 2 – APP MOBILE Página 7 de 8

DISCIPLINA DE TIC – 9º ANO GRUPO 550 - INFORMÁTICA
TAREFA COMPLEMENTAR (DE CARÁCTER OBRIGATÓRIO)
Agora deves utilizar os conhecimentos adquiridos acima para construíres a aplicação abaixo.
Deves guardá-la com o seguinte nome: FTN2NomeApelido9XComplementar.

PROJETO INICIAL: PROJETO (DEPOIS DE TESTADO)

 2 Labels Não te esqueças de fazer a programação
 6 Botões necessária para cada um dos Botões.
Após o Clique no Botão a cor de fundo
(background color) do Botão deve mudar
para a cor escrita no Botão.
No final não te esqueças de entregar na Classroom da disciplina de TIC na publicação para
esse efeito o link gerado pela plataforma, clicando no botão assinalado na imagem abaixo.

BOM TRABALHO …
FICHA DE TRABALHO Nº 2 – APP MOBILE Página 8 de 8
DISCIPLINA DE TIC – 9º ANO GRUPO 550 - INFORMÁTICA