Oficina AppInventor
Planejamento das Oficinas
Análise Inicial
Este conteúdo possui como público alvo os alunos da disciplina PJI1-EngTel do curso de Engenharia de Telecomunicações do Instituto Federal de Santa Catarina - Campus São José.
Hierarquia de Objetivos das Lições
Lição I
1- Construir casos de usos para saber definir o que é uma aplicação e qual sua função.
- 1.1- Entender o que é uma Aplicação do ponto de vista computacional;
- 1.2- Descrever o comportamento de uma aplicação durante um caso de uso simples;
- 1.3- Relacionar conceitualmente procedimentos e eventos;
- 1.4- Utilizar diagramas de sequência para descrever os procedimentos realizados.
2- "Explorar" o AppInventor.
- 2.1- Como consultar a Documentação de Referência e a página wiki AppInventor;
- 2.2- Como criar um novo projeto;
- 2.3- Entender como funciona o AppInventor: O que são Designer e Blocks?;
- 2.4- Entender a funcionalidade do Designer;
- 2.5- Entender a funcionalidade do Blocks;
- 2.6- Salvar um projeto;
- 2.7- Importar e exportar projetos;
- 2.8- Transferindo um projeto para um sistema Android.
3- Conceitos Básicos.
- 3.1- Saber diferenciar conceitos básicos: Váriável, Lista, Procedimento, Evento, Componente e Propriedade;
- 3.2- Saber como criar/alterar os itens presentes em 3.1 no AppInventor;
- 3.3- Entender a diferença entre a utilização de Sprites no Scratch e a de Componentes no AppInventor.
- 3.3.1- Entender o que é um Sprite;
- 3.3.2- Entender o que é um Script.
4- Entender como construir procedimentos baseados em eventos (Script).
- 4.1- Desenvolver o exemplo de caso: Tutorial Hello Purr;
- 4.1.1- Explorar as propriedade da Screen1;
- 4.1.2- Criar um Label e um Button;
- 4.1.3- Explorar as propriedades do Label e do Button recém-criados;
- 4.1.4- Carregar Mídias (imagem e som);
- 4.1.5- Utilizar mídias carregadas nas propriedades dos componentes;
- 4.1.6- Criar Blocos de eventos;
- 4.1.7- Desenvolver um Script que possua um evento como pré-requisito e um procedimento como consequência;
- 4.1.8- Conectar um Sistema Android/emulador ao Blocks;
- 4.1.9- Testar aplicação.
- 4.2- Aperfeiçoar HelloPurr alterando somente suas propriedades (não criando novos componentes).
| ITEM
|
ATIVIDADE
|
OBJETIVO
|
MÉTODO
|
TEMPO
|
| 1
|
Introduzir conceitos básicos de programação.
|
1; 1.1; 1.2; 1.3; 1.4
|
Apresentação de Slides
|
10 minutos
|
| 2
|
Apresentação Light do AppInventor, a funcionalidade básica da ferramenta deve ser apresentada (Diferenças entre o Blocks e o Designer).
|
2; 2.1; 2.2; 2.3; 2.4; 2.5; 2.6; 2.7; 2.8; 2.8
|
Utilizar o AppInventor no projetor
|
15 minutos
|
| 3
|
Traduzir conceitos básicos de programação para AppInventor, "explorando" o Designer e o Blocks.
|
3; 3.1; 3.2
|
Utilizar o AppInventor no projetor e apresentação de Slides
|
5 minutos
|
| 4
|
Diferenciar Scratch de AppInventor, a mudança de Sprites para componentes.
|
3; 3.3; 3.3.1; 3.3.2
|
Utilizar o AppInventor e Scratch no projetor
|
5 minutos
|
| 5
|
Desenvolver o Tutorial HelloPurr.
|
4; 4.1; 4.1.1; 4.1.2; 4.1.3; 4.1.4; 4.1.5; 4.1.6; 4.1.7; 4.1.8; 4.1.9
|
Utilizar o AppInventor no projetor
|
30 minutos
|
| 6
|
Mostrar possibilidades de melhoramentos da aplicação HelloPurr, "enfeitando-o" (alterar as propriedades dos componentes já existentes.
|
4; 4.2
|
Utilizar o AppInventor no projetor
|
Tempo restante
|
Lição II
5- Praticar e expandir conhecimentos já adquiridos.
- 5.1- Desenvolver o exemplo de caso: Tutorial PaintPot.
- 5.1.1- Rever conceitos dos componentes Button e Screen;
- 5.1.1.1- Editar propriedades "mais específicas" dos componentes Button e Screen (AlignHorizontal, ScreenOrientation, Scrollable, BackgroundColor, Shape...). Observação: Procurar utilizar a Documentação de Referência para as propriedades que possuem função desconhecida.
- 5.1.2- Entender a função de um ScreenArrangement e de suas variações (Horizontal, Vertical e Table);
- 5.1.3- Criar um ScreenArrangement;
- 5.1.3.1- Entender como expressar o valor das propriedades Width e Height de três maneiras possíveis e suas respectivas funções como propriedades de um componente.
- 5.1.4- Aprender a inserir componentes em ScreenArrangements;
- 5.1.5- Entender conceitualmente a função de um Canvas;
- 5.1.6- Criar um Canvas com uma área que se ajuste automaticamente ao tamanho da Screen;
- 5.1.7- Saber criar blocos de eventos relacionados a componentes Buttons e como "juntá-los" (encadeá-los) a procedimentos derivados do componente Canvas para formar um Script;
- 5.1.8- Utilizar blocos de eventos do Canvas para realizar procedimentos de desenho no próprio Canvas (desenhar retas, círculos...);
- 5.1.9- Possibilidades de melhoramentos da aplicação PaintPot (adição de novas funcionalidades).
| ITEM
|
ATIVIDADE
|
OBJETIVO
|
MÉTODO
|
TEMPO
|
| 1
|
Iniciar o desenvolvimento do Tutorial PaintPot no Designer para recuperar conceitos vistos anteriormente.
|
5; 5.1; 5.1.1; 5.1.1.1
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
| 2
|
Entender e aplicar o conceito de ScreenArrangements e das propriedades Width e Height (no Tutorial PaintPot).
|
5; 5.1; 5.1.2; 5.1.3; 5.1.3.1; 5.1.4
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
| 3
|
Utilizar o componente Canvas e definir sua área (no Tutorial PaintPot).
|
5; 5.1; 5.1.5; 5.1.6
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
| 4
|
Criar um Script que "utilize" os componentes Canvas e Button. Utilize a relação Evento-Procedimento (no Tutorial PaintPot).
|
5; 5.1; 5.1.7; 5.1.8
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
| 5
|
Aplicar alterações na aplicação PaintPot que objetivem expandi-la (adicionar funcionalidades). Procurar usar a criatividade (botões que limpe a tela,façam triângulos, quadrados...).
|
5; 5.1; 5.1.9
|
Autônomo (sem auxílio), receber o resultado final para avaliação
|
Fora de aula (Sem limite de tempo)
|
Lição III
6- Desenvolver Tutorial MoleMash para compreender a função de novos componentes (Clock e ImageSprite).
- 6.1- Saber criar um Canvas com um ImageSprite que possua uma BackgroundImage (delimitar a área de ambos);
- 6.1.1- Saber encadear o bloco de eventos Screen1.Initialize com um procedimento que reconfigure a área do Canvas;
- 6.1.2- Saber utilizar o bloco de eventos Screen1.Initialize para ajustar a área de um ImageSprite em função da área do Canvas. Exemplo: Área do ImageSprite = 1/10 Área do Canvas.
- 6.2- Saber criar botões que mostrem textos que expliquem sua função e que realizem procedimento(s) quando clicados;
- 6.3- Saber desenvolver UM Label que mostre o placar e que mostre um texto junto (apenas um);
- 6.3.1- Saber criar um Script que utilize o bloco Join (que pode ser encontrado na gaveta Text) para juntar um texto e o valor do placar. E exibir o resultado em no Text de um Label (Exemplo: Placar 0);
- 6.3.2- Saber criar uma variável que possua a função de um contador.
- 6.4- Saber desenvolver no Blocks um procedimento que faça com que um ImageSprite se mova de forma aleatória pelo Canvas.
- 6.5- Entender como encadear o bloco de evento ImageSprite.Touched com a execução de uma mídia (Sound).
| ITEM
|
ATIVIDADE
|
OBJETIVO
|
MÉTODO
|
TEMPO
|
| 1
|
Utilizar o Canvas como uma área de deslocamento de um ImageSprite.
|
6; 6.1
|
Utilizar o AppInventor no projetor
|
5 minutos
|
| 2
|
Relacionar o tamanho de um ImageSprite com o de um Canvas.
|
6; 6.1; 6.1.1; 6.1.2
|
Utilizar o AppInventor no projetor
|
10 minutos
|
| 3
|
Criar botões com funções especificadas em seus textos.
|
6; 6.2
|
Utilizar o AppInventor no projetor
|
5 minutos
|
| 4
|
Criar um Label que mostre um texto junto a um contador.
|
6; 6.3; 6.3.1; 6.3.2
|
Utilizar o AppInventor no projetor
|
10 minutos
|
| 5
|
Criar um procedimento que faça com que um ImageSprite se movimente de forma aleatória.
|
6; 6.4
|
Utilizar o AppInventor no projetor
|
5 minutos
|
| 6
|
Executar uma mídia a partir de um evento relacionado a um ImageSprite.
|
6; 6.5
|
Utilizar o AppInventor no projetor
|
5 minutos
|
Lição IV
7- Iniciar desenvolvimento do Tutorial Agenda Telefônica.
- 7.1- Saber criar independentemente de ajuda, uma interface para uma agenda telefônica;
- 7.2- Comparar a agenda criada com o modelo detido pelo professor;
- 7.3- Listar funções de uma agenda telefônica simples;
- 7.3.1- Modificar a agenda anterior, visando adequá-la as "novas" funcionalidades.
- 7.4- Desenvolver em um fluxograma (ou em Scratch) uma sequência de instruções que indique os procedimentos que uma agenda telefônica deve realizar;
- 7.4.1- Comparar com os procedimentos-modelos detidos pelo professor;
- 7.4.2- Adequar instruções anteriores para que agreguem as incluídas no modelo (não copiar e excluir a feita inicialmente, adequar).
- 7.5- "Traduzir" os fluxogramas (ou instruções Scratch) para um Script AppInventor (instruções em blocos);
- 7.6- Comparar com o modelo detido pelo professor e verificar se ambos satisfazem as funções de uma agenda telefônica comum.
- 7.6.1- Criar novos procedimentos que "incrementem" a agenda.
| ITEM
|
ATIVIDADE
|
OBJETIVO
|
MÉTODO
|
TEMPO
|
| 1
|
Criar a interface de uma agenda telefônica.
|
7; 7.1
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
| 2
|
Comparar interface-modelo com interface produzida.
|
7; 7.2
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
| 3
|
Conceituar os procedimentos mínimos de uma agenda telefônica.
|
7; 7.3; 7.3.1; 7.4
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
| 4
|
"Corrigir" conceitos de procedimentos.
|
7; 7.4; 7.4.1; 7.4.2
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
| 5
|
Criar blocos no Blocks.
|
7; 7.5; 7.6
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
| 6
|
Adicionar novas funcionalidades.
|
7; 7.6; 7.6.1
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
Lição V
8- Iniciar desenvolvimento do Tutorial Calculadora no Designer.
- 8.1- Estar apto a criar um arranjo de botões idêntico ao do modelo (detido pelo professor) utilizando apenas os componentes Button, ScreenArrangement e Label;
- 8.1.1- Saber Carregar Mídias na propriedade Image de cada Button;
- 8.1.2- Saber organizar os arrangements de forma que o botão "0" possua o dobro de comprimento dos outros e o botão de igual, o dobro de altura.
- 8.2- Saber criar um procedimento que, quando inicie a aplicação, ajuste a área dos Buttons e do Label ao da Screen1;
- 8.2.1- Saber utilizar o evento de mudança de orientação para reajustar a área dos componentes;
- 8.2.2- Saber criar uma combinação de blocos que mude a fonte do Label Display conforme o acréscimo de algarismos.
- 8.3- Ter completo domínio sobre as propriedades de um Label, suficiente para "enfeitar" os valores exibidos pelo Display (Label).
- 8.3.1- Saber utilizar a propriedade FontBold de um Button ou de um Label;
- 8.3.2- Saber utilizar a propriedade FontItalic de um Button ou de um Label;
- 8.3.3- Saber utilizar a propriedade FontTypeface de um Button ou de um Label;
- 8.3.4- Saber utilizar a propriedade TextAlignment de um Button ou de um Label.
| ITEM
|
ATIVIDADE
|
OBJETIVO
|
MÉTODO
|
TEMPO
|
| 1
|
Iniciar o desenvolvimento de uma calculadora utilizando o Tutorial Calculadora.
|
8; 8.1; 8.1.1; 8.1.2
|
Utilizar o AppInventor no projetor e apresentação de Slides
|
55 minutos
|
| 2
|
Relacionar o evento Inicialização do aplicativo com um procedimento.
|
8; 8.2; 8.2.1; 8.2.2
|
Utilizar o AppInventor no projetor e um Fluxograma
|
30 minutos
|
| 3
|
"Dominar" as propriedades do Label (e do Button).
|
8; 8.3; 8.3.1; 8.3.2; 8.3.3; 8.3.4
|
Utilizar o AppInventor no projetor
|
25 minutos
|
Lição VI
9- Adicionando novas funcionalidades a Calculadora.
- 9.1- Modificar os blocos de instrução para toda vez que a calculadora for re-orientada, novas funcionalidades apareçam (comparar com modelo);
- 9.1.1- Opções de Novas Funcionalidades:
- Seno;
- Cosseno;
- Tangente;
- Raiz Quadrada;
- Expoente;
- Seno^-1;
- Cosseno^-1.
- 9.1.2- Entender e "traduzir" o Script de processamento de Strings do Scratch para o AppInventor.
- 9.2- Saber implementar parênteses;
- 9.2.1- Saber Configurar parênteses como prioridade durante um processamento de Strings.
- 9.3- Saber incluir constantes (Pi, número de Euler).
| ITEM
|
ATIVIDADE
|
OBJETIVO
|
MÉTODO
|
TEMPO
|
| 1
|
Adicionar novas funcionalidades.
|
9; 9.1; 9.1.1
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
| 2
|
Implementar método de processamento de Strings.
|
9; 9.1; 9.1.2
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
| 3
|
Implementar Constantes e parênteses.
|
9; 9.2; 9.2.1; 9.3
|
Autônomo (sem auxílio)
|
Fora de aula (Sem limite de tempo)
|
Lição VII
10- Iniciar desenvolvimento do Tutorial Calculadora no Blocks.
- 10.1- Saber criar um procedimento que realize pelo menos as quatro operações básicas da matemática (adição, subtração, multiplicação e divisão);
- 10.2- Saber criar blocos que deem uma função a botões não numéricos e nem operacionais (C, +/- e outros se houverem);
- 10.3- Saber alterar os blocos de instrução para implementar uma função que, quando o operador "=" for clicado mais de uma vez seguida, ele realize a mesma operação anterior;
- 10.4- Saber criar um procedimento que utilize a resposta de uma operação anterior para realizar outra;
- 10.5- Possibilidades e funcionalidades novas?;
- 10.6- Fechamento e conclusão das oficinas de AppInventor.
| ITEM
|
ATIVIDADE
|
OBJETIVO
|
MÉTODO
|
TEMPO
|
| 1
|
As 4 Operações básicas.
|
10; 10.1; 10.2
|
Utilizar o AppInventor no projetor
|
30 minutos
|
| 2
|
Novas funções.
|
10; 10.3; 10.4; 10.5
|
Utilizar o AppInventor no projetor
|
30 minutos
|
| 3
|
Conclusão das oficinas: O que foi aprendido e o que faltou?
|
10; 10.6
|
Apresentação de Slides e AppInventor no projetor
|
50 minutos
|
Lição VIII
DIA 01
Apresentação
- Conceitos básicos (variável, script, sprite, eventos...).
- Apresentação da estrutura básica do AppInventor, Blocks e Components.
- Utilização de tutoriais iniciantes produzidos pelo MIT para aplicar o pouco aprendido.
| Introdução ao AppInventor
|
Introdução ao AppInventor
Nesta oficina você aprenderá alguns conceitos básicos de programação e os utilizará para criar aplicativos utilizando a ferramenta AppInventor. O AppInventor é um software educacional criado pelo MIT para auxiliar seus alunos a melhor compreender a funcionalidade da lógica de programação. Trabalharemos diversos conceitos que serão importantes quando tratados em outras linguagens, como Variáveis, Listas, Procedures e etc. Nesta primeira parte da oficina, aprenderemos um pouco mais sobre o AppInventor.
O AppInventor é uma ferramenta muito intuitiva, e por isso, de fácil compreensão. Ele é dividido em duas partes, o Designer e o Blocks. Na etapa Designer, trataremos Buttons, Labels, Canvas e até arquivos de mídia, como Sounds. Observe na imagem abaixo como a nomenclatura de cada seção (em inglês) indica exatamente sua função, como por exemplo, Viewer e Properties.
Já no Blocks, criaremos Procedures, Listas, Variáveis e etc. Nesta parte desenvolveremos diversos blocos que detalharam o a funcionalidade do aplicativo, ou seja, o que os componentes do aplicativo devem fazer.
Tanto o Designer como o Blocks possuem diversos conceitos que precisam ser abordados de uma maneira mais prática do que teórica. Para isso, enquanto introduzimos o básico de AppInventor, iremos ver alguns conceitos comuns aos presentes em Scratch. E esses conceitos, serão revistos através de tutoriais que iremos seguir ao longo desta oficina.
|
| Tutorial Hello Purr
|
Tutorial Hello Purr
Antes de começarmos a desenvolver nossa aplicação, precisamos ter certeza do que exatamente queremos. Como este é o nosso primeiro tutorial iremos seguir o HelloPurr Tutorial que pode ser encontrado na sua versão original no site do AppInventor - MIT. Este aplicativo é relativamente muito simples, ele conterá uma imagem de um gato que quando clicada com o botão esquerdo do mouse, deverá tocar o som de um miado e uma instrução que dirá "Clique no Gato".
Faça o download da Imagem do Gato e do Miado antes de continuar.
Para começar vá ao site do AppInventor - MIT e entre com uma conta Gmail. A imagem abaixo mostra como deverá aparecer sua tela na primeira vez que você loga no site e destacado em vermelho o botão New, que você deve clicar para criar um novo projeto:
Em seguida crie um novo projeto e o nomeie HelloPurr. Assim que você cria um projeto, o AppInventor, automaticamente, o redirecionará para o Designer, onde iniciaremos o desenvolvimento do projeto. Como vimos na Introdução, no Designer, "organizamos" o desenvolvimento do aplicativo, porque é nele em que são criados os Components. Component ou simplesmente Componente é um termo utilizado para representar um conjunto de funcionalidades. Uma aplicação pode ser formada apenas utilizando Components. Para o AppInventor os Componentes são objetos que podem conter métodos, eventos e/ou propriedades. A imagem abaixo mostra a tela inicial do Designer e destaca a posição de algumas de suas seções.
Perceba pela imagem que o Designer já inicia com um componente: a Screen1. Todo componente existente no aplicativo é listado na seção Components, e a sua direita, na seção Properties, estão as propriedades do componente selecionado. Agora, selecione o componente Screen1 e altere sua propriedade Title (na seção Properties) para HelloPurr. A propriedade Title de uma Screen pode ser considerado como o título da mesma, neste caso, não teremos a necessidade de criar mais Screens, por isso o Title da nossa Screen1 pode ser o do próprio aplicativo (ou seja, HelloPurr). Depois de titular a Screen1, nós adicionaremos um novo componente ao nosso aplicativo. Para adicionar um novo componente, vá até a seção Basic, abra a gaveta em que o componente se encontra, e o arraste até o vizualizador. Neste caso nós queremos criar uma imagem que ao receber um clique com o botão esquerdo do mouse, toque o som de um miado. Por isso nós adicionaremos ao vizualizador um componente Button (da gaveta Basic). Assim que o componente Button é criado, a seção Properties se "enche" de novas propriedades, agora referentes ao componente Button1. Antes de modificarmos as propriedades deste novo componente, vá até a seção Components e altere seu nome para ButtonGato, para que os componentes fiquem fáceis de se identificar.
Apesar de este tutorial possuir poucos componentes é importante nomeá-los adequadamente. Para entender melhor a necessidade de se organizar os nomes dos componentes, leia Padronização.
Agora que já possuímos um Button criado, precisamos fazer com que ele assuma a imagem do gato (link para download esta disponível no início deste tutorial). Selecione o componente ButtonGato e (na seção Properties) procure pela propriedade Image. A propriedade Image de um Button possui uma única função: Adicionar uma imagem de fundo a um componente. Como já possuímos a imagem do gato, precisamos carregá-la no Designer. Há duas formas de carregar uma mídia no Designer:
- Logo abaixo da seção Properties há a seção Media clique na opção “Add...” e selecione o arquivo. Em seguida vá até a propriedade que você deseja carregar a mídia, e selecione o arquivo carregado.
- Na própria seção Properties, quando for carregar um arquivo de mídia em uma propriedade, e este arquivo ainda não estiver carregado no Designer, você pode selecionar a opção “Add...” e selecionar o arquivo.
Assim que você tiver a imagem carregada, o Designer, estará assim:
Pela imagem acima podemos perceber um problema no vizualizador: Por cima da imagem do gato aparece um texto, isso acontece porque a propriedade Image de um Button adiciona apenas uma imagem de fundo e não sobrepõe outras propriedades dos Buttons , como o Text. A propriedade Text possui uma função muito simples, adicionar um texto ao componente. Portanto a solução para o nosso "problema" é: Apagar o valor da propriedade Text. Assim que você tiver resolvido o problema do texto, nós já teremos a imagem do gato no nosso aplicativo pronta, agora é necessário adicionar uma pequena instrução que diga: Clique no Gato. Portanto, trabalharemos com outro componente, chamado Label. Os Labels, diferente da maioria dos componentes, possui apenas uma função: Exibir um texto. E é exatamente isso que precisamos, portanto, vamos até a gaveta Basic e arrastamos para o nosso vizualizador o componente Label. Em seguida altere o nome do Label1 para LabelInstrucao (lembre-se que o AppInventor não aceita "ç" em nome de componentes). Agora, observe as propriedades do LabelInstrucao, como a função de um componente Label é apenas exibir um texto, é óbvio que todas as suas propriedades vão ser relativas a edição de texto.
Por isso, vamos realizar uma série de alterações nas suas propriedade, para que o nosso texto ganhe maior visibilidade:
- BackgroundColor = esta propriedade é muito semelhante ao Image dos Buttons, entretanto, ela não necessita de uma mídia carregada e só aceita as opções já disponíveis. Altere o valor desta propriedade para uma cor que destaque o texto. Exemplo: Magenta.
- FontBold e FontItalic = são respectivamente as propriedades Negrito e Itálico, comumente utilizadas em edição de textos. Ative-as.
- FontSize = Tamanho da letra. Aumente a letra para que o texto seja mais visível. Sugestão: 30.
- Text = Como já vimos anteriormente nos componentes Buttons, o valor desta propriedade é exibido pelo Label (é comum que diferentes componentes possuam propriedades que realizam a mesma função). Altere o valor desta propriedade para: Clique no Gato. Como foi especificado no início deste tutorial.
Por enquanto nosso aplicativo não possui instruções, ou seja, não faz nada. Ele apenas é uma imagem de um gato com uma instrução em baixo. A imagem acima mostra a "cara" do Designer nesta etapa e destaca em vermelho aonde abrir o Blocks. Como vimos na Introdução, o Designer adiciona os componentes e os valores iniciais as suas propriedades (podem ser alterados futuramente). Já o Blocks dá instruções a esses componentes, e é exatamente isso que faremos a seguir (abra o Blocks). Assim que você clicar no botão Open Blocks Editor você fará o download de um arquivo java (execute-o).
Certifique-se se o seu computador possui os requisitos necessário para abrir o Blocks no site AppInventor - MIT.
O Blocks nos proporciona muitas possibilidades, podemos adicionar diversas funcionalidades ao nosso aplicativo. Entretanto como esse é o nosso primeiro tutorial, não iremos explorá-las. Na verdade, nos concentraremos na que foi descrita no início deste tutorial. O aplicativo possui a imagem do gato e uma instrução, só falta uma coisa: que quando eu clicar no gato ele toque o Miado. Mas para fazermos um arquivo de áudio ser executado no AppInventor, é necessário que outro componente seja adicionado no Designer: O Sound. Volte ao Designer, vá até a gaveta Media e arraste um Sound para o vizualizador. Observe que o Sound é um arquivo invisível no Designer e que necessita de uma mídia carregada para ser executado (sem uma mídia nenhum som será tocado). Portanto altere o nome do componente Sound1 para Miado e a propriedade Source para o arquivo de som baixado. Agora quando você instruir o aplicativo para executar o SoundMiado ele tocará o arquivo de som que foi carregado.
Sempre que o componente SoundMiado for tocado, o som do miado que carregamos será tocado. Entretanto agora temos de instruir o aplicativo de executar o SoundMiado quando o ButtonGato receber um clique, e é agora que utilizaremos o Blocks.
A imagem acima nos da um pequeno mapa para termos uma ideia de como criar instruções. A parte Blocks do desenvolvimento de um aplicativo, no início, nos parece mais complicada porque não possuímos um bom domínio de AppInventor e como consequência não sabemos "aonde" no Blocks buscar as instruções desejadas. Por isso durante o desenvolvimento das oficinas tentaremos abrangir um grande números de funcionalidades para que você tenha mais "ferramentas" para utilizar. Agora vamos adicionar as instruções que desejamos. Precisamos fazer com que quando o ButtonGato seja clicado ele execute o miado. Vá até o Blocks e na seção My Blocks clique na gaveta ButtonGato. Observe que assim que você abre a seção My Blocks são listadas a gaveta My Definitions e uma outra para cada componente que foi criado no Designer. Como nós queremos utilizar o ButtonGato, vamos clicar na sua gaveta e vizualizar as opções disponíveis. Dentro dessa gaveta existe a seguinte instrução:
Arraste esta instrução para o centro da tela. Observe a cor deste bloco (verde escuro), somente os blocos de eventos possuem essa cor. Em AppInventor, evento é uma ação ou acontecimento que desencadeia um Procedure. Como por exemplo, o clique do mouse é uma condição para que um objeto se movimente. No caso HelloPurr o evento é o clique do mouse sobre o ButtonGato. Essa instrução sugere que quando o evento ocorrer, haverá uma consequência. A consequência deve ser adicionada a instrução evento. A consequência que esperamos é o miado, ou seja, a execução do SoundMiado. Para isso acontecer, vá até a seção My Blocks e na gaveta SoundMiado procure pela seguinte instrução:
Perceba que dentro deste bloco esta escrito: "call SoundMiado.Play". Os blocos AppInventor são autoexplicativos, dentro deles PODEM existir até três informações:
- A função do bloco.
- O componente em questão (o bloco pode estar relacionado a algo que não seja um componente, como um Procedure).
- A consequência.
Neste caso "call", traduzindo do inglês, significa "chamar", portanto o bloco esta chamando algo do componente SoundMiado, e "Play", significa "tocar" ou "executar". Como o componente em questão é um arquivo de som, se executarmos o SoundMiado teremos como resposta o miado que desejamos. Agora só o que temos de fazer é juntar o bloco de evento com o "call" arrastando o "call" para dentro do de evento. Este deverá ser o resultado:
Assim que você tiver combinado as duas instruções, abra o emulador ou conecte o Blocks a um dispositivo para testar o aplicativo. Esta deverá ser a aparência do aplicativo:
|
| Tutorial MoleMash
|
Tutorial MoleMash
Este tutorial possui como pré-requisito o Tutorial HelloPurr e pode ser encontrado na sua versão original no site AppInventor - MIT.
Agora que você tem uma noção de AppInventor, iremos iniciar o MoleMash Tutorial. O MoleMash é um jogo muito simples, ele se resume em uma toupeira que se movimenta sobre uma área específica aleatoriamente, enquanto o jogador tenta tocá-la, e toda vez que o jogador a toca, recebe um ponto. Para começar, crie um projeto, nomeie-o MoleMash e altere o Title da Screen1 para MoleMash. A seguir a primeira coisa que faremos, será criar a "área" sobre a qual a toupeira irá se deslocar. Para isso, utilizaremos um componente chamado Canvas. O Canvas é um retângulo bidimensional com área definida, utilizado para desenhar ou para mover Sprites (objetos exibidos em duas dimensões).
- Vá até a gaveta Basic e arraste um Canvas para o vizualizador, nomeie-o CanvasArea.
- Mude sua propriedade Width para Fill Parent.
- Mude sua propriedade Height para 300 pixels.
Quando o valor das propriedades Width e Height de um componente são alterados, os limites horizontais e verticais, respectivamente, são redefinidos. Existem três modos de expressar o valor do Width ou Height de um componente no Designer (é possível fazer esta modificação no Blocks de outra forma):
- Número de Pixels = É possível selecionar um número fixo de pixels.
- Fill Parent = Quando esta opção for selecionada o espaço não utilizado pelo AppInventor passará a ser ocupado pelo componente em questão.
- Automatic = O Designer determina os valores baseados em critérios próprios, por exemplo, se uma imagem de 40 pixels quadrados for adicionada como Image de um Button o Designer altera automaticamente os valores Width e Height para os da imagem.
Agora que nossa área esta definida, precisamos acrescentar a toupeira ao jogo. Vamos utilizar outro novo componente: O ImageSprite. Um ImageSprite é um objeto que pode se locomover livremente por toda a área de um Canvas. Vá até a gaveta Basic e arraste um ImageSprite para dentro do CanvasArea (nomeie-o ImageSpriteToupeira). Em seguida, faça o download da Imagem e a carregue na propriedade Picture do ImageSpriteToupeira, que possui a mesma função do Image dos Buttons. O cenário do jogo esta pronto, agora é necessário adicionarmos uma janela que indique o placar, e um botão para que possamos reiniciar o jogo. Para o placar, utilizaremos um Label, como já vimos anteriormente, o Label possui exatamente a função de exibir um texto. E como em nosso caso queremos exibir um placar, quem melhor? Já para criarmos um botão, utilizaremos novamente um Button. Portanto siga os passos abaixo para finalizarmos a parte Designer do aplicativo:
- Crie o LabelPlacar.
- Apague o valor da propriedade Text do LabelPlacar.
- Aumente o valor da propriedade FontSize do LabelPlacar para 30.
Observação: Quando o valor da propriedade Text do LabelPlacar for nulo, o Label desaparece do Designer. Justamente porque não há nenhum texto para mostrar, fato que mudará no Blocks.
- Crie o ButtonIniciarNovoJogo.
- Mude o valor da propriedade Text do ButtonIniciarNovoJogo para "Iniciar Novo Jogo".
Assim que você tiver completado os passos acima, terá finalizado a parte Designer.
Abra o Blocks para começarmos a desenvolver as instruções. A primeira instrução que devemos criar é o movimento da Toupeira (ImageSpriteToupeira). Para tal, iremos utilizar blocos diferentes dos que já utilizamos até então: Os Procedures. Procedure ou simplesmente procedimento, significa modo de agir ou proceder durante um evento. Podemos traduzir este conceito para programação se considerarmos “agir” como uma sequência de instruções a serem seguidas pela aplicação que esta sendo desenvolvida. Portanto o conceito de Procedure para AppInventor seria: Sequência de ações ou instruções a serem seguidas. Para criar um Procedure vá até a seção Built-In, e na gaveta Definitions, procure pelo seguinte bloco:
Arraste esse bloco para a Área de Trabalho do Blocks e altere o nome do procedimento para MovimentoToupeira.
Agora que o bloco de procedimento foi criado, é preciso adicionar "O QUE" o procedimento deve realizar. Como queremos fazer com que a Toupeira se desloque aleatoriamente...
EM CONSTRUÇÃO
|
DIA 02
Especificação
- Relembrando o básico já visto.
- Introdução a funcionalidade da calculadora (especificação).
- Início do desenvolvimento na parte Components.
DIA 03
Desenvolvimento
- Término da parte Components.
- Revisão dos conceitos básicos que serão utilizados (variáveis, listas, procedures...).
- Início da parte do Block editor.
DIA 04
- Conclusão e possibilidades de melhoramentos.
Tutorial Calculadora:
Especificação
- Inicia com o display mostrando o valor "0";
- Quando um botão-operador for clicado, armazena o valor do display numa variável ou lista e muda o display pra 0;
- Realizar as quatro operações básicas da matemática;
- Implementação da virgula;
- Máx. de dígitos
- "-" + "," + 7 digítos.
|
