Tutoriais

Aquecimento - Pote de Pintura

Para começar, um aplicativo simples que permite pintar com os dedos.

Primeiros Passos

  • Conecte-se ao site do App Inventor e faça o login com a conta do Google OU inicie uma sessão sem usuário neste site (se você guardar o código de login, é possível acessar novamente os seus aplicativos)

  • Mude o idioma de "English" para "Português do Brasil"

  • Inicie um novo projeto chamado "Pote de Pintura".

  • Mude a propriedade "Título" do componente "Screen1" para "Pote de Pintura"

  • Baixe o arquivo gatinho.png

  • Siga os passos junto comigo :)

Agora é sua vez!

Tapa na Toupeira

No jogo Tapa na Toupeira, uma toupeira aparece em posições aleatórios no gramado e o jogador ganha pontos a acertando antes que ela pule para outro lugar. Neste tutorial, mostramos como criar este jogo.

Primeiros Passos

  • Conecte-se ao site do App Inventor e faça o login com a conta do Google OU inicie uma sessão sem usuário neste site (se você guardar o código de login, é possível acessar novamente os seus aplicativos)

  • Mude o idioma de "English" para "Português do Brasil"

  • Inicie um novo projeto chamado "TapaNaToupeira".

  • Mude a propriedade "Título" do componente "Screen1" para "Tapa na Toupeira"

  • Baixe os arquivos grama.jpg, toupeira.png e som.mp3

Introdução

Você irá desenvolver o jogo de modo que a toupeira se mova a cada segundo. Se ela for tocada, o placar aumenta em 1 e o aparelho vibra e toca um som. Pressionar o botão "Reiniciar" zera o placar.

Componentes

Comece incluindo os seguintes componentes:

Componente

Legenda

Pintura

OrganizaçãoHorizontal

Legenda

Botão

Temporizador

Som

SpriteImagem

Paleta

Interface de Usuário

Desenho e Animação

Organização

Interface de Usuário

Interface de Usuário

Sensores

Mídia

Desenho e Animação

Nome

Titulo

PinturaGramado

OrganizaçãoHorizontal1

LegendaPlacar

BotaoReiniciar

TempoToupeira

Barulho

Toupeira

Contêiner

Screen1

Screen1

Screen1

OrganizaçãoHorizontal1

OrganizaçãoHorizontal1

Nenhum (componente invisível)

Nenhum (componente invisível)

PinturaGramado

A área "Componentes" ficará desta forma:

1) Mude as seguintes propriedades do componente "Titulo":

  • FonteNegrito: marque o checkbox

  • TamanhoDaFonte: 30

  • FamíliaDaFonte: mono-espaçada

  • Altura: 45 pontos (pixels)

  • Largura: Preencher principal

  • Texto: Tapa na Toupeira

  • AlinhamentoDoTexto: centro : 1

  • CorDeTexto: Custom... > #007400ff

2) Mude as seguintes propriedades do componente "PinturaGramado":

  • ImagemDeFundo: Enviar Arquivo ... > grama.jpg

  • Altura: Preencher principal

  • Largura: Preencher principal

3) Mude as seguintes propriedades do componente "OrganizaçãoHorizontal1":

  • AlinhamentoHorizontal: Centro : 3

  • AlinhamentoVertical: Base : 3

  • Altura: 45 pontos (pixels)

  • Largura: Preencher principal

4) Mude as seguintes propriedades do componente "LegendaPlacar":

  • TamanhoDaFonte: 18

  • Altura: 30 pontos (pixels)

  • Largura: 100 pontos (pixels)

  • Texto: Placar: ---

  • CorDeTexto: Custom... > #007400ff

5) Mude as seguintes propriedades do componente "BotaoReiniciar":

  • CorDeFundo: Custom... > #007400ff

  • TamanhoDaFonte: 15

  • Altura: 40 pontos (pixels)

  • Texto: Reiniciar

  • CorDeTexto: Branco

6) Mude as seguintes propriedades do componente "Barulho":

  • Fonte: Enviar Arquivo ... > som.mp3

7) Mude as seguintes propriedades do componente "Toupeira":

  • Imagem: Enviar Arquivo ... > toupeira.png

A área "Visualizador" ficará dessa forma:

Comportamentos e Tratadores de Eventos

Agora você irá especificar o comportamento dos componentes. Para isso, você precisará criar procedimentos. Um procedimento é uma sequência de comandos à qual você dá um nome. Usando esse nome, você pode se referir a essa sequência como se fosse um comando só. Se você tem uma sequência de comandos que será usada mais de uma vez em um programa, você pode criar um procedimento para não ter que escrever novamente todos os comandos toda vez que forem usados.

Definindo Procedimentos

Você irá definir dois procedimentos: MoverToupeira e AtualizarPlacar.

Comece com MoverToupeira:

  • No editor de Blocos, na área de Blocos, abra a gaveta Procedimentos. Arraste um bloco "para procedimento fazer" até o Visualizador e mude o texto "procedimento" para "MoverToupeira".

Atenção: há dois blocos parecidos: "para procedimento fazer" e "para procedimento resultado". Você deve usar o bloco "para procedimento fazer".

  • O bloco "para MoverToupeira" tem uma abertura com um rótulo "fazer". É nela que você deve colocar os comandos do procedimento. Neste caso, serão dois comandos: um para definir a posição x da toupeira e outro para definir a posição y. Em cada caso, você irá definir que a nova posição é uma fração aleatória da diferença entre o tamanho da pintura e o tamanho da toupeira. Você consegue criar esse valor usando os blocos para fração aleatória, multiplicação e subtração. Você irá encontrá-los na gaveta Matemática da área de Blocos.

  • Crie o procedimento MoverToupeira, que deve ter a seguinte forma:

Observe como os blocos se conectam: o primeiro comando usa o bloco "ajustar Toupeira.X para" para definir a posição horizontal da toupeira. O valor encaixado no bloco é o resultado de multiplicar:

    • O resultado do bloco fração aleatória (valor entre 0 e 1)

    • O resultado de subtrair a largura da toupeira da largura da pintura

A posição vertical é calculada de maneira similar.

  • O próximo passo é definir uma variável chamada placar (gaveta Variáveis na área de Blocos) para guardar o número de pontos e atribuir o valor inicial 0 (zero) a ela. Além disso, crie o procedimento AtualizarPlacar que mostra o placar em LegendaPlacar. O conteúdo do texto de LegendaPlacar será o texto "Placar: " junto com o valor da variável placar.

  • Para criar o texto "Placar: ", arraste um bloco de texto da gaveta Texto. Mude o bloco para "Placar: " ao invés de " ".

  • Use o bloco "juntar" (gaveta Texto) para prender o bloco de texto a um bloco que dê o valor da variável placar.

  • A variável e o procedimento devem ter a seguinte forma:

Adicionando um Temporizador

O próximo passo é fazer a toupeira se mover. É aqui que você vai usar o componente TempoToupeira. Componentes de tempo têm um tratador de eventos chamado "quando ... .Disparo fazer" que dispara repetidamente no ritmo definido pela propriedade "Intervalo".

Faça TempoToupeira chamar MoverToupeira toda vez que o temporizador disparar com um tratador de evento como esse:

Adicionando um Tratador de Toques na Toupeira

O programa deve aumentar o placar toda vez que a toupeira é tocada. SpriteImagens, assim como Pinturas, respondem a eventos de toque. Então, crie um tratador de eventos de toque para a Toupeira que:

  • Incremente o placar.

  • Faça o aparelho tocar o som "som.mp3".

  • Faça o aparelho vibrar por 1/10 de segundo (100 milissegundos).

  • Chame AtualizarPlacar para mostrar o novo placar.

  • Chame MoverToupeira para que a toupeira se mova imediatamente ao invés de esperar pelo temporizador.

É assim que os blocos vão ficar:

Zerando o Placar

Um último detalhe é zerar o placar. Para isso, basta fazer o BotaoReiniciar mudar o placar para 0 (zero) e chamar AtualizarPlacar. Desta maneira:

Parabéns! Se você chegou até aqui, o seu aplicativo está pronto! :)

Variações

Uma vez que o seu jogo estiver funcionando, você pode querer explorar algumas variações. Por exemplo:

  • Fazer o jogo variar a velocidade da toupeira de acordo com o desempenho do jogador. Para variar quão rápido a toupeira se move, você precisará mudar a propriedade Intervalo de TempoToupeira.

  • Observar quando o jogador acerta a toupeira e quando ele erra a toupeira e mostrar o placar de acertos e erros. Para fazer isso, você precisará definir tratadores de evento para Toupeira, como você já fez na versão atual, e PinturaGramado. No entanto, há uma pequena questão: se o jogador tocar a toupeira, isso também conta como um toque em PinturaGramado? A resposta é sim, ambos os eventos serão registrados.

Escaneando o Aplicativo Para o Seu Celular

Escaneie este código QR no seu smartphone para instalar e executar o aplicativo:

Código QR será adicionado após 13h30 do dia 24/08.

Baixando o Código Fonte

Se você quiser fazer modificações neste aplicativo no App Inventor, baixe o código fonte, abra o site do App Inventor, clique em "Projetos", escolha "Importar projeto (.aia) do meu computador..." e selecione o arquivo que você acabou de baixar.

Link será adicionado após 13h30 do dia 24/08.


Baseado no tutorial http://appinventor.mit.edu/explore/ai2/molemash.html.

Fatorial

No aplicativo Fatorial, o usuário digita um número e o aplicativo calcula o fatorial desse número. Ex.: se o usuário digita 5, a resposta é 120 (1 × 2 × 3 × 4 × 5). Neste tutorial, mostramos como criar este aplicativo.

Primeiros Passos

  • Conecte-se ao site do App Inventor e faça o login com a conta do Google OU inicie uma sessão sem usuário neste site (se você guardar o código de login, é possível acessar novamente os seus aplicativos)

  • Mude o idioma de "English" para "Português do Brasil"

  • Inicie um novo projeto chamado "Fatorial".

  • Mude a propriedade "Título" do componente "Screen1" para "Fatorial"

Introdução

Você irá desenvolver o aplicativo de modo que o usuário possa digitar o número e, ao clicar em um botão, a resposta seja exibida. Se o resultado do fatorial for um número par, o texto da resposta deve ser azul, se for um número ímpar, vermelho.

Componentes

Comece incluindo os seguintes componentes:

Componente

Legenda

CaixaDeTexto

Botão

Legenda

Paleta

Interface de Usuário

Interface de Usuário

Interface de Usuário

Interface de Usuário

Nome

Legenda1

TextoFatorial

BotaoOK

LegendaResposta

Contêiner

Screen1

Screen1

Screen1

Screen1

A área "Componentes" ficará desta forma:

1) Mude as seguintes propriedades do componente Legenda1":

  • Texto: Fatorial de:

2) Mude as seguintes propriedades do componente "TextoFatorial":

  • Dica: Número

  • SomenteNúmeros: marque o checkbox

3) Mude as seguintes propriedades do componente "BotaoOK":

  • Texto: OK

4) Mude as seguintes propriedades do componente "LegendaResposta":

  • Texto: Resultado: ---

A área "Visualizador" ficará dessa forma:

Comportamentos e Tratadores de Eventos

Agora você irá especificar o comportamento dos componentes. Para isso, você precisa começar criando uma variável. Uma variável funciona como uma caixa onde você pode guardar um valor do qual você quer se lembrar. Essa caixa possui um nome para que você consiga encontrá-la no futuro. Comece declarando a variável chamada resultado e atribuindo o valor inicial 1 a ela, da seguinte maneira:

O cálculo deve ser realizado quando o usuário clicar no componente BotaoOK. Para tanto, arraste o bloco "quando BotaoOK .Clique fazer" para a área de Visualização. Este bloco tem uma abertura com um rótulo "fazer", é nela que você deve colocar os comandos.:

Calculando o Fatorial

Comece pensando nos passos que você precisa para calcular um fatorial, por exemplo, 5! (fatorial de 5, ou seja, 1 × 2 × 3 × 4 × 5).

É possível encontrar esse resultado usando a propriedade associativa da multiplicação: (((1 × 2) × 3) × 4) × 5. Para isso, o resultado de cada multiplicação será guardado na variável resultado. A variável resultado começa com 1, multiplicamos esse valor por 2 e guardamos o novo resultado, 2. Multiplicamos esse resultado então por 3 e guardamos o novo resultado, 6, e assim por diante, conforme mostrado abaixo:

Multiplicação

-

1 × 2

2 × 3

6 × 4

24 × 5

Resultado

1

2

6

24

120

Você pode ver que, a cada passo, o resultado atual é multiplicado por um número que vai de 2 até 5, aumentando de 1 em 1. Para gerar esse número, você pode usar o bloco "para cada numero desde ... até ... passo ... fazer" (gaveta Controle). No caso de 5!, esse bloco seria "para cada numero desde 2 até 5 passo 1 fazer". Como você precisa calcular o fatorial do número que o usuário digitou, o bloco deve ser:

Além disso, o bloco também executará os comandos que forem colocados em sua abertura com rótulo "fazer" uma vez para cada número da sequência que ele gera. Por causa disso, esse bloco é chamado de "comando de repetição" ou "laço".

Dentro do bloco, você deve colocar o comando que realiza a multiplicação do resultado atual pelo número atual da sequência e guarda o resultado dessa multiplicação na própria variável resultado:

Mudando a Cor da Resposta

Uma vez que o resultado final foi calculado, você pode descobrir se ele é par ou ímpar. É possível fazer isso verificando se o resto da divisão do resultado por 2 é zero ou não.

O bloco "módulo de ... ÷ ..." (gaveta Matemática) calcula o resto de uma divisão. O bloco "... = ..." (gaveta Lógica) compara se dois valores são igual e retorna o valor lógico "verdadeiro", se forem, ou "falso", caso contrário. Ele pode ser usado para comparar o resto da divisão com zero. Para mudar a cor do texto de LegendaResposta, encaixe um bloco da gaveta Cores no bloco "ajustar LegendaResposta . CorDeTexto para".

No entanto, você precisa fazer com que o texto seja azul se o resultado for par e vermelho, caso contrário. Para isso, você precisa de um comando de controle, como o bloco "se então senão". Esse bloco permite que você execute comandos encaixados na abertura com rótulo "então" caso o resultado dos blocos encaixados em "se" retornem o valor lógico "verdadeiro" e execute os comandos encaixados na abertura com rótulo "senão" caso contrário.

Sendo assim, os blocos ficam da seguinte forma:

Mostrando o Resultado

Para criar o texto "Resultado: ", arraste um bloco de texto da gaveta Texto. Mude o bloco para "Resultado: " ao invés de " ". Use o bloco "juntar" (gaveta Texto) para prender o bloco de texto a um bloco que dê o valor da variável placar.

Por fim, encaixe o bloco "juntar" que você acabou de criar a bloco "ajustar LegendaResposta . Texto para".

Preparando o Aplicativo para Calcular Outro Resultado

A variável resultado está guardando o valor do resultado atual. Se o usuário clicar novamente em BotaoOK, ele irá multiplicar o resultado atual com o fatorial do novo número, resultando no valor errado. Para que isso não aconteça, você deve atribuir o valor 1 para a variável resultado novmente.

Bloco "quando BotaoOK .Clique fazer" Pronto

Quando você terminar, o conteúdo do bloco "quando BotaoOK .Clique fazer" deve ser:

Parabéns! Se você chegou até aqui, o seu aplicativo está pronto! :)

Escaneando o Aplicativo Para o Seu Celular

Escaneie este código QR no seu smartphone para instalar e executar o aplicativo:

Código QR será adicionado após 13h30 do dia 24/08.

Baixando o Código Fonte

Se você quiser fazer modificações neste aplicativo no App Inventor, baixe o código fonte, abra o site do App Inventor, clique em "Projetos", escolha "Importar projeto (.aia) do meu computador..." e selecione o arquivo que você acabou de baixar.

Link será adicionado após 13h30 do dia 24/08.