Você está na página 1de 17

Apostila de

Desenvolvimento
de Aplicativos

Lio: Game Quiz

2016
Parte 1: Conhecendo o Ambiente App Inventor

1.1 Definio:

MIT App Inventor uma ferramenta desenvolvida pelo Google e, atualmente, mantida pelo Instituto de
Tecnologia de Massachusetts (MIT); que permite a criao de aplicativos para smartphones que rodam o
sistema operacional Android, sem que seja necessrio conhecimento em programao.

NOTA: MIT App Inventor trabalha com a linguagem de programao visual ( base de blocos) Na qual voc
vai encaixando um bloco no outro como se fosse um quebra-cabea.

Site Oficial: http://appinventor.mit.edu/

Pgina de Criao de Apliactivos: http://ai2.appinventor.mit.edu/

Download do Emulador para Windows(software necessrio para testar o aplicativo no prprio


computador): http://appinventor.mit.edu/explore/ai2/windows.html
NOTA: O emulador tambm est disponvel para Linux e Mac OS. Mais informaes disponveis no site do
App Inventor.

1.2 Comeando a Utilizar a Plataforma:

Para utilizar o App Inventor necessrio um GMAIL ou uma conta Google. Se voc no possui uma, crie
uma nesse endereo: www.gmail.com
Acesse a pgina de criao de aplicativos: http://ai2.appinventor.mit.edu/ ou clique no boto Create
Apps no site oficial
Faa login com a sua conta GMAIL/Google
Libere o acesso da sua conta ao site do App Inventor (essa ao uma ao segura!) clicando em
Allow

Na tela seguinte (Tela de Administrao dos Projetos) aproveite a oportunidade para alterar o idioma da
ferramenta para Portugus do Brasil, clicando na opo English > Portugus do Brasil no menu
superior direito

NOTA: Essa opo dever ser feita toda vez que entrar no sistema.

2
Parte 1: Conhecendo o Ambiente App Inventor
1.3 Tela de Administrao de Projetos Criando um Novo Projeto:

Na Tela de Administrao de Projetos voc cria novos projetos, acessa projetos antigos, importa/exporta
projetos para o seu computador, importa/exporta aplicativos para o seu celular, entre outras opes.

Nesse momento, crie um novo projeto clicando na opo Projetos > Iniciar novo Projeto... ou no boto
Iniciar novo projeto...

Coloque o nome do Projeto de GameQuiz ou outro nome que desejar. O nome dos projetos no App
Inventor no deve conter espaos.

1.4 Conhecendo o Ambiente de Desenvolvimento

Aps criar o projeto, ser exibido o ambiente de desenvolvimento do App Inventor que composto por
duas abas: Designer e Blocos.

3
Parte 1: Conhecendo o Ambiente App Inventor
1.4 Conhecendo o Ambiente de Desenvolvimento

A Aba Designer contm as seguintes sees:

1. Paleta: Lista os Componentes que podem ser utilizados no desenvolvimento do aplicativo. Ex.: caixas de
texto, botes, imagens.
2. Visualizador: rea que simula a tela do celular na qual devem ser organizados os componentes do
aplicativo.
3. Componentes: Lista de todos os componentes j utilizados no aplicativo.
4. Propriedades: Altera as configuraes de um componente selecionado. Ex.: cor, tamanho, dimenso.

1
4

2 3

A Aba Blocos contm as seguintes sees:

1. Blocos: Todos os blocos de programao que podem ser utilizados no aplicativo. Os blocos so
separados por tipo e por componentes j inseridos no aplicativo.
2. Visualizador: rea para montar os blocos de programao e criar aes que sero executadas pelos
componentes do aplicativo.

4
Parte 2: Entendendo o Aplicativo Game Quiz

2.1 Definio:

Um Game Quiz um jogo de perguntas e respostas no qual o jogador deve acertar as perguntas propostas
para avanar no jogo.

Nesta apostila, vamos propor o desenvolvimento de um Game Quiz do Programa Meninas Digitais, bem
simples, com apenas duas perguntas.

Aps realizar este exemplo, voc ser capaz de construir seu prprio aplicativo de Game Quiz, com quantas
perguntas desejar, alm de ter aprendido diversos conceitos de programao e sobre o App Inventor para
desenvolver outros tipos de aplicativos.

2.2 Telas do Aplicativo:

O Game Quiz do Meninas Digitais um aplicativo de 3 telas, com 2 perguntas, que reage de acordo com a
resposta do usurio.

O resultado esperado das telas do aplicativo mostrado abaixo:

Tela 1 Tela 2 Tela 3

Tela 1: Tela principal do aplicativo. Nessa tela o usurio/jogador informa o seu nome e o aplicativo
recepciona o jogador, liberando o boto de iniciar o jogo.
Tela 2: Tela da primeira pergunta do jogo, na qual o jogador deve digitar uma resposta correta para que o
boto para a prxima pergunta aparea. Seno o aplicativo mostra uma mensagem de erro, at que o
jogador acerte.
Tela 3: Tela da segunda pergunta do jogo, na qual o jogador deve selecionar a resposta correta
entre um conjunto de opes. Seno o aplicativo mostra uma mensagem de erro, at que o
5
jogador acerte.
Parte 3: Design da Tela Inicial
3.1 Inserindo Componentes

Na aba Designer, para inserir um componente no aplicativo, basta clicar no componente desejado na
Paleta, arrast-lo at a rea do Visualizador, e por fim, solt-lo. Observe essa sequncia de aes sendo
feita com o componente Legenda. Aps solto, o componente aparece na rea de Componentes.

3.2 Entendendo os Componentes da Tela

Para a Tela Inicial (Tela 1) do aplicativo Game Quiz, sero utilizados os seguintes componentes:
Legenda: um texto simples do aplicativo
Organizao Horizontal: componente que organiza outros componentes na tela do aplicativo, neste
caso, funciona como uma caixa que organiza os componentes horizontalmente
Caixa de Texto: caixa de texto que permite que o usurio do aplicativo digite uma mensagem
Boto: componente que quando clicado pelo usurio executa uma ao no aplicativo
Imagem: um componente grfico, pode ser uma foto, uma imagem, etc

Insira os componentes na rea do Visualizador conforme a listagem de componentes abaixo, seguindo a


ordem indicada. Renomeie-os conforme os nomes indicados ou nomes similares que desejar e faa sentido
para voc. Para renomear um componente, clique nele na seo Componentes e no boto Renomear.

6
Parte 3: Design da Tela Inicial
3.2 Entendendo os Componentes da Tela

Screen1: componente que representa a tela inicial, no precisa ser inserido.


Aparece automaticamente
MensagemNome: componente do tipo Legenda com o primeiro texto da tela
OrganizaoHorizontal1: componente de organizao horizontal. Nele
estaro alocados os componentes Nome e BotaoOK
Nome: componente do tipo Caixa de Texto para o usurio digitar o seu nome
BotaoOK: componente do tipo Boto que ir verificar o nome digitado
MensagemBoasVindas: componente do tipo Legenda com o texto de boas
vindas
ImagemInicial: componente do tipo Imagem com a logo do Meninas Digitais
BotaoIniciar: componente do tipo Boto que ir iniciar o jogo, chamando a
prxima tela
BotaoCancelar: componente do tipo Boto que ir fechar o aplicativo

3.3 Editando Propriedades

Aps inserir um componente, possvel editar suas propriedades na seo Propriedades. Isso ir
personalizar o componente. Cada tipo de componente apresenta um conjunto de propriedades diferentes.

Vamos editar as propriedades necessrias dos componentes da Tela Inicial.

Propriedades da Screen1:
Rolvel: Sim. Quando marcada, esta opo permite que aparea uma barra de rolagem na tela do celular
para o aplicativo.
Ttulo: Game Quiz Meninas Digitais - Tela Inicial ou outro ttulo desejado. Este texto aparece no topo
da tela do aplicativo.

NOTA: Explore as outras opes disponveis para a Screen1 e veja o que acontece.

Propriedades MensagemNome:
Fonte Negrito: Sim
Tamanho da Fonte: 20
Largura: Preencher principal (esta opo faz com que o componente ocupe toda a largura da tela do
celular, independente do tamanho da tela, muito til principalmente para textos)
Texto: Informe o seu nome: ou outro texto desejado
Alinhamento do Texto: centro

Propriedades OrganizaoHorizontal1:
Alinhamento Horizontal: centro
Altura e Largura: Preencher principal
Cor de Fundo: Nenhum (para que fique invisvel)

Propriedades Nome:
Tamanho da Fonte: 14
Altura e Largura: Preencher principal
Dica: Digite o seu nome ou outro texto desejado (esse texto aparece dentro da caixa de texto, porm
no utilizado pela programao do aplicativo) 7
Alinhamento do Texto: centro
Parte 3: Design da Tela Inicial
3.3 Editando Propriedades

Propriedades BotaoOK:
Fonte Negrito: Sim
Tamanho da Fonte: 20
Altura e Largura: Preencher principal
Texto: Ok! ou outro texto desejado
Alinhamento do Texto: centro

Propriedades MensagemBoasVindas:
Fonte Negrito: Sim
Tamanho da Fonte: 25
Altura: 15 percentagem (ocupa 15% da tela do celular)
Largura: Preencher principal
Texto: Bem-vind@ ao Game Quiz Meninas Digitais! ou outro texto desejado
Alinhamento do Texto: centro

Propriedades ImagemInicial:
Altura: 300 pixels (300 pontos da tela do celular)
Largura: Preencher principal
Imagem: selecionar um arquivo de imagem no computador clicando em Enviar Arquivo
Redimensionar para caber: Sim

NOTA: As configuraes de altura e largura vo variar sempre de acordo com a imagem escolhida.

Propriedades BotaoIniciar:
Fonte Negrito: Sim
Tamanho da Fonte: 20
Largura: Preencher principal
Texto: Jogar Agora! ou outro texto desejado
Alinhamento do Texto: centro
Visvel: No (faz com que o boto no fique visvel no
aplicativo, a visibilidade do boto ser ativada posteriormente
por programao)

Propriedades BotaoCancelar:
Fonte Negrito: Sim
Tamanho da Fonte: 20
Largura: Preencher principal
Texto: Jogar Agora! ou outro texto desejado
Alinhamento do Texto: centro

APS TODOS OS COMPONENTES INSERIDOS E SUAS PROPRIEDADES EDITADAS O DESIGN DA TELA INICIAL
EST CONCLUDO. Fique a vontade para mudar as configuraes sugeridas a fim de testar novas
possibilidades. Use a criatividade!
8
Parte 4: Programando a Tela Inicial

4.1 Entendendo a Programao da Tela Inicial

A programao da Tela Inicial inclui 3 sequncias de aes:


1. Aps clicar no boto OK!, ler o nome do usurio/jogador e alterar a mensagem de boas vindas para
que inclua o nome informado. E tambm mostrar o boto Jogar Agora!
2. Aps clicar no boto Jogar Agora!, mostrar a prxima tela do aplicativo
3. Aps clicar no boto Encerrar, fechar o aplicativo

Todas as aes so baseadas em cliques de botes feitos pelo usurio do aplicativo. Para fazer a
programao v para a Aba Blocos do App Inventor.

Na Aba Blocos, encontramos os blocos de um componente, clicando sobre ele. Para usar um bloco, basta
clicar no bloco desejado e arrast-lo para a rea do Visualizador.

4.2 Programando o Boto OK!

Use o bloco amarelo QUANDO-CLIQUE-FAZER do componente BotaoOK: esse bloco utilizado para
agregar todas as aes que sero executadas quando o usurio clicar no boto.
Use o bloco verde AJUSTAR-TEXTO-PARA do componente MensagemBoasVindas: esse bloco altera a
propriedade Texto para o contedo que ser informado em seu encaixe. Encaixe este bloco no bloco
amarelo QUANDO-CLIQUE-FAZER do componente BotaoOK.
Use o bloco rosa JUNTAR na lista de blocos de texto: esse bloco junta dois textos em um s texto. Nesse
caso, ir juntar o nome do usurio com o texto de boas vindas. Encaixe este bloco no bloco verde
AJUSTAR-TEXTO-PARA do componente MensagemBoasVindas.
Use o bloco verde TEXTO do componente Nome: esse bloco retorna o valor do texto do componente.
Encaixe este bloco no bloco rosa JUNTAR.
Use o bloco rosa na lista de blocos de texto e digite uma mensagem de boas vindas: esse bloco
usado toda vez que precisamos de um texto. Encaixe este bloco no bloco rosa JUNTAR.
Use o bloco verde AJUSTAR-VISVEL-PARA do componente BotoIniciar: esse bloco altera a visibilidade
de um componente. Encaixe este bloco no bloco amarelo QUANDO-CLIQUE-FAZER do componente
BotaoOK.
Use o bloco verde claro VERDADEIRO na lista de blocos de Lgica: esse bloco utilizado para alterar a
propriedade de um componente para verdadeira. Encaixe este bloco no bloco verde AJUSTAR-VISVEL-
PARA do componente BotoIniciar. Essa ao ir fazer com que o boto fique visvel.

NOTA: Confira todos os encaixes dos blocos abaixo. muito importante que os blocos fiquem iguais a figura
para que o aplicativo funcione.

9
Parte 4: Programando a Tela Inicial
4.3 Programando o Boto Jogar Agora!

Use o bloco amarelo QUANDO-CLIQUE-FAZER do componente BotaoIniciar: esse bloco utilizado para
agregar todas as aes que sero executadas quando o usurio clicar no boto.
Use o bloco amarelo ABRIR OUTRA TELA na lista de blocos de Controle: esse bloco abre outra tela do
aplicativo conforme o nome indicado no texto. Encaixe este bloco no bloco amarelo QUANDO-CLIQUE-
FAZER do componente BotaoIniciar.
Use o bloco rosa na lista de blocos de texto e digite TelaPergunta1: aqui usamos esse bloco para
informar o nome da tela que ser aberta pelo boto. Encaixe este bloco no bloco amarelo ABRIR OUTRA
TELA .

4.4 Programando o Boto Encerrar

Use o bloco amarelo QUANDO-CLIQUE-FAZER do componente BotaoCancelar: esse bloco utilizado


para agregar todas as aes que sero executadas quando o usurio clicar no boto.
Use o bloco amarelo FECHAR APLICAO na lista de blocos de Controle: esse bloco fecha o aplicativo.
Encaixe este bloco no bloco amarelo QUANDO-CLIQUE-FAZER do componente BotaoCancelar.

NOTA: Confira todos os encaixes dos blocos abaixo. muito importante que os blocos fiquem iguais a figura
para que o aplicativo funcione.

APS FAZER A PROGRAMAO DE TODOS OS BOTES DA TELA INICIAL, J


POSSVEL TESTAR O APLICATIVO!

Para testar o aplicativo, use uma das 3 opes disponveis no boto Conectar no
menu superior esquerdo:
Assistente AI (opo recomendada!!!): Testa o aplicativo no seu celular. Voc
precisa instalar o aplicativo MIT App Inventor Companion no seu celular e
estar com o computador e o celular conectados na mesma rede Wi-Fi.
Download:
https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompan
ion3&hl=pt_BR
Emulador: testa o aplicativo no software emulador instalado no seu
computador. Download:
http://appinventor.mit.edu/explore/ai2/windows.html
USB: testa o aplicativo no seu celular atravs de um cabo USB conectando o
seu computador com o celular. 10
Parte 5: Design da Tela da Primeira Pergunta
5.1 Criando uma Nova Tela

Antes de iniciar o Design da segunda tela do aplicativo, na qual estar a primeira pergunta do jogo, preciso
criar esta nova tela. Para isso, basta clicar no boto Adicionar Tela no menu superior direito. Informe o
nome TelaPergunta1 para a nova tela, afim de que a programao do bloco feita anteriormente funcione.

5.2 Entendendo os Componentes da Tela

Para a Tela Pergunta 1 (Tela 2) do aplicativo Game Quiz, sero utilizados apenas componentes j
conhecidos: Legenda, Caixa de Texto e Boto.

Insira os componentes na rea do Visualizador conforme a listagem de componentes abaixo, seguindo a


ordem indicada. Renomeie-os conforme os nomes indicados ou nomes similares que desejar e faa sentido
para voc. Para renomear um componente, clique nele na seo Componentes e no boto Renomear.
TelaPergunta1: componente que representa a tela, no precisa ser inserido.
Aparece automaticamente quando a tela foi criada.
BotaoVoltar: componente do tipo Boto que ir voltar para a Tela anterior,
ou seja, a Tela Inicial
Pergunta1: componente do tipo Legenda com o texto da primeira pergunta
Resposta1: componente do tipo Caixa de Texto para o usurio digitar a
resposta para a primeira pergunta
BotaoVerificar1: componente do tipo Boto que ir verificar se a resposta
digitada est correta
Resultado1: componente do tipo Legenda com a mensagem que indica se o
usurio acertou ou errou a resposta
BotaoPergunta2: componente do tipo Boto que ir chamar a prxima tela
do aplicativo, ou seja, a tela da segunda pergunta

5.3 Editando Propriedades

Aps inserir todos os componentes da tela, vamos editar as propriedades necessrias dos componentes
conforme feito anteriormente.
11
Parte 5: Design da Tela da Primeira Pergunta
5.3 Editando Propriedades

Propriedades da TelaPergunta1:
Rolvel: Sim. Quando marcada, esta opo permite que aparea uma barra de rolagem na tela do celular
para o aplicativo.
Ttulo: Game Quiz Meninas Digitais - Pergunta 1 ou outro ttulo desejado. Este texto aparece no topo
da tela do aplicativo.

Propriedades BotaoVoltar:
Fonte Negrito: Sim
Tamanho da Fonte: 20
Texto: << ou outro texto desejado
Alinhamento do Texto: centro

Propriedades Pergunta1:
Fonte Negrito: Sim
Tamanho da Fonte: 25
Altura: 150 pixels
Largura: Preencher principal
Texto: Qual o nome do Programa da Sociedade Brasileira de Computao que incentiva a participao
de meninas nas reas de tecnologia? ou a pergunta que preferir
Alinhamento do Texto: centro

Propriedades Resposta1:
Tamanho da Fonte: 20
Altura: 10 percentual
Largura: Preencher principal
Dica: Digite sua resposta ou outro texto desejado

Propriedades BotaoVerificar1:
Fonte Negrito: Sim
Tamanho da Fonte: 24
Altura: 10 percentual
Largura: Preencher principal
Texto: OK! ou outro texto desejado
Alinhamento do Texto: centro

Propriedades Resultado1:
Fonte Itlico: Sim
Tamanho da Fonte: 25
Altura: 20 percentual
Largura: Preencher principal
Texto: aqui voc pode colocar qualquer texto, pois iremos mudar essa propriedade atravs da
programao dos blocos
Alinhamento do Texto: centro
Cor de Texto: Azul
Visvel: No

12
Parte 5: Design da Tela da Primeira Pergunta
5.3 Editando Propriedades

Propriedades BotaoPergunta2:
Tamanho da Fonte: 25
Altura: 10 percentual
Largura: Preencher principal
Texto: Prxima Pergunta ou outro texto desejado
Alinhamento do Texto: centro
Visvel: No

APS TODOS OS COMPONENTES INSERIDOS E SUAS PROPRIEDADES EDITADAS O DESIGN DA TELA DA


PERGUNTA 1 EST CONCLUDO. Fique a vontade para mudar as configuraes sugeridas a fim de testar
novas possibilidades. Use a criatividade!

Parte 6: Programando a Tela da Primeira Pergunta


6.1 Entendendo a Programao da Tela da Primeira Pergunta

A programao da Tela Inicial inclui 3 sequncias de aes distintas:


1. Aps clicar no boto <<, o aplicativo retorna para a Tela Inicial
2. Aps clicar no boto OK!, o aplicativo verifica a resposta informada para a pergunta; exibe a
mensagem que informa se o usurio acertou ou no, com o texto correspondente: se o usurio acertou
a pergunta, exibe a mensagem de acerto na cor verde, seno exibe a mensagem de erro na cor
vermelha; e ainda exibe o boto para a prxima pergunta se o usurio tiver acertado
3. Aps clicar no boto Prxima Pergunta, abre a tela da segunda pergunta do jogo

Todas as aes so baseadas em cliques de botes feitos pelo usurio do aplicativo. Para fazer a
programao v para a Aba Blocos do App Inventor.

Na Aba Blocos, encontramos os blocos de um componente, clicando sobre ele. Para usar um bloco, basta
clicar no bloco desejado e arrast-lo para a rea do Visualizador.

6.2 Programando o Boto << - Voltar

Use o bloco amarelo QUANDO-CLIQUE-FAZER do componente BotaoVoltar: esse bloco utilizado para
agregar todas as aes que sero executadas quando o usurio clicar no boto.
Use o bloco amarelo ABRIR OUTRA TELA na lista de blocos de Controle: esse bloco abre outra tela do
aplicativo conforme o nome indicado no texto. Encaixe este bloco no bloco amarelo QUANDO-CLIQUE-
FAZER do componente BotaoVoltar.
Use o bloco rosa na lista de blocos de texto e digite Screen1: aqui usamos esse bloco para informar o
nome da tela que ser aberta pelo boto. Encaixe este bloco no bloco amarelo ABRIR OUTRA TELA .

NOTA: Confira todos os encaixes dos blocos abaixo. muito importante que os blocos fiquem iguais a figura
para que o aplicativo funcione.
13
Parte 6: Programando a Tela da Primeira Pergunta
6.2 Programando o Boto Prxima Pergunta

Use o bloco amarelo QUANDO-CLIQUE-FAZER do componente BotaoPergunta2: esse bloco utilizado


para agregar todas as aes que sero executadas quando o usurio clicar no boto.
Use o bloco amarelo ABRIR OUTRA TELA na lista de blocos de Controle: esse bloco abre outra tela do
aplicativo conforme o nome indicado no texto. Encaixe este bloco no bloco amarelo QUANDO-CLIQUE-
FAZER do componente BotaoPergunta2.
Use o bloco rosa na lista de blocos de texto e digite TelaPergunta2: aqui usamos esse bloco para
informar o nome da tela que ser aberta pelo boto. Encaixe este bloco no bloco amarelo ABRIR OUTRA
TELA .

6.3 Programando o Boto OK!

Use o bloco amarelo QUANDO-CLIQUE-FAZER do componente BotaoVerificar1: esse bloco utilizado


para agregar todas as aes que sero executadas quando o usurio clicar no boto.
Use o bloco verde AJUSTAR-VISVEL-PARA do componente Resultado1: esse bloco altera a visibilidade
de um componente. Encaixe este bloco no bloco amarelo QUANDO-CLIQUE-FAZER do componente
BotaoVerificar1. Isso significa que a mensagem de resultado estar visvel aps o clique do boto.
Use o bloco amaremo SE-ENTO-SENO da lista de Controle: esse bloco verifica uma condio descrita
em SE e executa as aes dos blocos descritas em ENTO caso a condio seja verdadeira. Se a condio
for falsa, o bloco executa as aes dos blocos descritas em SENO. Encaixe este bloco no bloco amarelo
QUANDO-CLIQUE-FAZER do componente BotaoVerificar1. Utilizaremos esse bloco para verificar a
resposta do usurio aps o clique do boto.
Use a seguinte estrutura de blocos alinhadas: bloco rosa da lista de blocos de texto COMPARAR-TEXTOS;
bloco rosa com o texto MENINAS DIGITAIS ou a resposta correta para a pergunta em letras
maisculas; bloco rosa MAISCULAS; bloco verde TEXTO do componente Resposta1. Essa sequncia de
blocos ir comparar se a resposta informada pelo usurio na caixa de texto igual a resposta correta.
Antes disso, transforma a resposta para maiscula para que no haja divergncias na comparao.
Encaixe essa sequncia de blocos o bloco amarelo escrito SE.
Use o bloco verde AJUSTAR-CORDETEXTO-PARA do componente Resultado1: esse bloco altera a cor de
texto de um componente. Encaixe este bloco no bloco amarelo ENTO.
Use o bloco verde na lista de bloco de cores. Encaixe no bloco verde AJUSTAR-CORDETEXTO-PARA do
componente Resultado1.
Use o bloco verde AJUSTAR-TEXTO-PARA do componente Resultado1: esse bloco altera a propriedade
Texto para o contedo que ser informado em seu encaixe. Encaixe este bloco no bloco amarelo ENTO.
Use o bloco rosa na lista de blocos de texto e digite uma mensagem de acerto: esse bloco usado
toda vez que precisamos de um texto. Encaixe este bloco no bloco verde AJUSTAR-TEXTO-PARA do
componente Resultado1.
Use o bloco verde AJUSTAR-VISVEL-PARA do componente BotaoPergunta2: esse bloco altera a
visibilidade de um componente. Encaixe este bloco no bloco amarelo ENTO.
Use o bloco verde claro VERDADEIRO na lista de blocos de Lgica: esse bloco utilizado para alterar a
propriedade de um componente para verdadeira. Encaixe este bloco no bloco verde AJUSTAR-VISVEL-
PARA do componente BotaoPergunta2. Essa ao ir fazer com que o boto fique visvel.

14
Parte 6: Programando a Tela da Primeira Pergunta
6.3 Programando o Boto OK!

Use o bloco verde AJUSTAR-CORDETEXTO-PARA do componente Resultado1: esse bloco altera a cor de
texto de um componente. Encaixe este bloco no bloco amarelo SENO.
Use o bloco vermelho na lista de bloco de cores. Encaixe no bloco verde AJUSTAR-CORDETEXTO-PARA
do componente Resultado1.
Use o bloco verde AJUSTAR-TEXTO-PARA do componente Resultado1: esse bloco altera a propriedade
Texto para o contedo que ser informado em seu encaixe. Encaixe este bloco no bloco amarelo SENO.
Use o bloco rosa na lista de blocos de texto e digite uma mensagem de erro: esse bloco usado toda
vez que precisamos de um texto. Encaixe este bloco no bloco verde AJUSTAR-TEXTO-PARA do
componente Resultado1.

NOTA: Confira todos os encaixes dos blocos abaixo. muito importante que os blocos fiquem iguais a figura
para que o aplicativo funcione.

Encerrado o design e programao da tela da primeira pergunta, teste novamente o aplicativo e verifique se
tudo funciona corretamente como as figuras abaixo.

15
Parte 7: Design da Tela da Segunda Pergunta
7.1 Criando uma Nova Tela

Antes de iniciar o Design da terceira e ltima tela do aplicativo, na qual estar a segunda pergunta do jogo,
preciso criar esta nova tela. Para isso, repita o processo feito anteriormente, clicando no boto Adicionar
Tela no menu superior direito. Informe o nome TelaPergunta2 para a nova tela, afim de que a
programao do bloco feita anteriormente funcione.

7.2 Entendendo os Componentes da Tela

Para a Tela Pergunta 2 (Tela 3) do aplicativo Game Quiz, sero utilizados os componentes j conhecidos:
Legenda e Boto, bem como um novo componente: Escolhe Lista. Este componente permite que o usurio
escolha uma resposta de uma lista disponvel, ao invs de digitar. Para todos os outros componentes
seguiremos os mesmos passos da tela anterior.

7.3 Editando Propriedades

Dada a lista de componentes da tela, repita o processo da tela anterior. Vamos observar os detalhes
somente do componente Resposta2 que do tipo Escolhe Lista.

Propriedades Resposta2:
Cadeia de Elementos: Mark Zuckerberg, Steve Jobs, Ada Lovelace, Charles Babbage. Aqui colocamos
separados por vrgula possveis respostas para a segunda pergunta Quem foi a primeira pessoa a
escrever um programa executado por uma mquina?. Voc pode colocar quais respostas desejar de
acordo com a sua pergunta. No h limites para a quantidade de respostas, desde que separadas por
vrula.
Tamanho da Fonte: 16
Altura: 10 percentual
Largura: Preencher principal

16
Parte 8: Programando a Tela da Segunda Pergunta
8.1 Repetindo Processos Conhecidos....

A programao da Tela da Segunda Pergunta uma repetio dos processos anteriores para os novos
componentes. Veja se consegue reproduzir a montagem dos blocos para que eles fiquem com essa
configurao:

APS CONCLUIR A PROGRAMAO E O DESIGN DA LTIMA TELA, TESTE MAIS UMA VEZ SEU APLICATIVO!

AGORA, VOC J SABE CRIAR UM APLICATIVO COM CAIXAS


DE TEXTO, LISTAS, BOTES, CONDIES, IMAGENS E TELAS.

CRIE SEU PRPRIO JOGO PERSONALIZADO OU INVENTE O


APLICATIVO QUE IMAGINAR!

DVIDAS OU SUGESTES?

ENTRE EM CONTATO: meninasdigitaismt@ic.ufmt.br

www.meninasdigitaismatogrosso.org
https://www.facebook.com/MeninasDigitaisMT

www.meninasdigitais.sbc.org.br
https://www.facebook.com/MeninasDigitaisSBC
17

Você também pode gostar