Mudanças entre as edições de "Usuário:Ernani.rs"
Linha 1: | Linha 1: | ||
− | =Desenvolvendo Sistemas de Telecomunicações | + | =Desenvolvendo Sistemas Básicos de Telecomunicações com “ Applnventor”= |
− | ; | + | ;Orientadores: |
− | [[Eraldo Silveira e Silva]] e [[Marcos Moecke]] | + | [[Eraldo Silveira e Silva]] e [[Marcos Moecke]]. |
;Objetivos do Projeto: | ;Objetivos do Projeto: | ||
− | *Desenvolver tutoriais na plataforma wiki e nas próprias ferramentas | + | *Desenvolver tutoriais na plataforma wiki e nas próprias ferramentas [[AppInventor]] para facilitar o aprendizado de novos alunos da variação da linguagem [http://scratch.mit.edu/ Scratch] utlizada no [[AppInventor]] de modo a elevar significativamente o número de usuários da linguagem. |
− | *Desenvolver | + | *Desenvolver sistemas básicos para o auxílio didático no curso de Engenharia de Telecomunicações, usando a ferramenta [[AppInventor]]. |
− | + | ;Bolsista Selecionado: Ernani Rodrigues De S. Thiago 2900111 | |
− | ; | ||
;Local de Trabalho: LABIC, Máquina: VENUS | ;Local de Trabalho: LABIC, Máquina: VENUS | ||
;Horário de Trabalho: | ;Horário de Trabalho: | ||
Linha 15: | Linha 14: | ||
*Sexta 13h30 às 17h30; | *Sexta 13h30 às 17h30; | ||
==Atividades propostas == | ==Atividades propostas == | ||
− | + | 1. Elaborar o projeto "O que o aluno precisa apreender para programar em [[AppInventor]]" | |
− | + | :*Realizar Programação da Aula01; | |
− | + | :*Fazer uma programação para Aula01 em slides; | |
− | + | :*Descrever etapas da produção das aplicações na wiki; | |
− | + | :*Fazer, na wiki, uma especificação do método de produção das aplicações e de suas funções. | |
− | + | 2. Atualizar a página [[AppInventor]] com os conteúdos já vistos. | |
− | * | + | ==Atividades realizadas== |
− | + | {{collapse top|Oficinas}} | |
− | : | + | =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 [http://www.sj.ifsc.edu.br/ Instituto Federal de Santa Catarina - Campus São José]. | ||
+ | ===Hierarquia de Objetivos das Lições=== | ||
+ | *Desenvolver programas/aplicações utilizando o [[AppInventor]] para futura implementação no [[PJI1-EngTel]]. | ||
+ | ====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 [http://appinventor.mit.edu/explore/content/reference-documentation.html 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 <tt>Designer</tt> e <tt>Blocks</tt>?; | ||
+ | *2.4- Entender a funcionalidade do <tt>Designer</tt>; | ||
+ | *2.5- Entender a funcionalidade do <tt>Blocks</tt>; | ||
+ | *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 <tt>Sprites</tt> no [http://scratch.mit.edu/ Scratch] e a de Componentes no [[AppInventor]]. | ||
+ | **3.3.1- Entender o que é um <tt>Sprite</tt>; | ||
+ | **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 <tt>Screen1</tt>; | ||
+ | **4.1.2- Criar um <tt>Label</tt> e um <tt>Button</tt>; | ||
+ | **4.1.3- Explorar as propriedades do <tt>Label</tt> e do <tt>Button</tt> 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 <tt>Blocks</tt>; | ||
+ | **4.1.9- Testar aplicação. | ||
+ | ***4.2- Aperfeiçoar HelloPurr alterando somente suas propriedades (não criando novos componentes). | ||
+ | {| border="4" cellpadding="3" | ||
+ | !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 <tt>Blocks</tt> e o <tt>Designer</tt>). | ||
+ | ||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 <tt>Designer</tt> e o <tt>Blocks</tt>. | ||
+ | ||3; 3.1; 3.2 | ||
+ | ||Utilizar o [[AppInventor]] no projetor e apresentação de ''Slides'' | ||
+ | ||5 minutos | ||
+ | |- | ||
+ | | '''4''' | ||
+ | ||Diferenciar [http://scratch.mit.edu/ Scratch] de [[AppInventor]], a mudança de <tt>Sprites</tt> para componentes. | ||
+ | ||3; 3.3; 3.3.1; 3.3.2 | ||
+ | ||Utilizar o [[AppInventor]] e [http://scratch.mit.edu/ 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 <tt>Button</tt> e <tt>Screen</tt>; | ||
+ | ***5.1.1.1- Editar propriedades "mais específicas" dos componentes <tt>Button</tt> e <tt>Screen</tt> (<tt>AlignHorizontal</tt>, <tt>ScreenOrientation</tt>, <tt>Scrollable</tt>, <tt>BackgroundColor</tt>, <tt>Shape</tt>...). Observação: Procurar utilizar a [http://appinventor.mit.edu/explore/content/reference-documentation.html Documentação de Referência] para as propriedades que possuem função desconhecida. | ||
+ | **5.1.2- Entender a função de um <tt>ScreenArrangement</tt> e de suas variações (Horizontal, Vertical e ''Table''); | ||
+ | **5.1.3- Criar um <tt>ScreenArrangement</tt>; | ||
+ | ***5.1.3.1- Entender como expressar o valor das propriedades <tt>Width</tt> e <tt>Height</tt> de três maneiras possíveis e suas respectivas funções como propriedades de um componente. | ||
+ | **5.1.4- Aprender a inserir componentes em <tt>ScreenArrangements</tt>; | ||
+ | **5.1.5- Entender conceitualmente a função de um <tt>Canvas</tt>; | ||
+ | **5.1.6- Criar um <tt>Canvas</tt> com uma área que se ajuste automaticamente ao tamanho da <tt>Screen</tt>; | ||
+ | **5.1.7- Saber criar blocos de eventos relacionados a componentes <tt>Buttons</tt> e como "juntá-los" (encadeá-los) a procedimentos derivados do componente <tt>Canvas</tt> para formar um ''Script''; | ||
+ | **5.1.8- Utilizar blocos de eventos do <tt>Canvas</tt> para realizar procedimentos de desenho no próprio <tt>Canvas</tt> (desenhar retas, círculos...); | ||
+ | **5.1.9- Possibilidades de melhoramentos da aplicação PaintPot (adição de novas funcionalidades). | ||
+ | |||
+ | {| border="4" cellpadding="3" | ||
+ | !ITEM | ||
+ | !ATIVIDADE | ||
+ | !OBJETIVO | ||
+ | !MÉTODO | ||
+ | !TEMPO | ||
− | == | + | |
+ | |- | ||
+ | | '''1''' | ||
+ | ||Iniciar o desenvolvimento do Tutorial PaintPot no <tt>Designer</tt> 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 <tt>ScreenArrangements</tt> e das propriedades <tt>Width</tt> e <tt>Height</tt> (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 <tt>Canvas</tt> 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 <tt>Canvas</tt> e <tt>Button</tt>. 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 (<tt>Clock</tt> e <tt>ImageSprite</tt>).''' | ||
+ | *6.1- Saber criar um <tt>Canvas</tt> com um <tt>ImageSprite</tt> que possua uma <tt>BackgroundImage</tt> (delimitar a área de ambos); | ||
+ | **6.1.1- Saber encadear o bloco de eventos <tt>Screen1.Initialize</tt> com um procedimento que reconfigure a área do <tt>Canvas</tt>; | ||
+ | **6.1.2- Saber utilizar o bloco de eventos <tt>Screen1.Initialize</tt> para ajustar a área de um <tt>ImageSprite</tt> em função da área do <tt>Canvas</tt>. Exemplo: Área do <tt>ImageSprite</tt> = 1/10 Área do <tt>Canvas</tt>. | ||
+ | *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 <tt>Label</tt> que mostre o placar e que mostre um texto junto (apenas um); | ||
+ | **6.3.1- Saber criar um ''Script'' que utilize o bloco <tt>Join</tt> (que pode ser encontrado na gaveta <tt>Text</tt>) para juntar um texto e o valor do placar. E exibir o resultado em no <tt>Text</tt> de um <tt>Label</tt> (Exemplo: Placar 0); | ||
+ | **6.3.2- Saber criar uma variável que possua a função de um contador. | ||
+ | *6.4- Saber desenvolver no <tt>Blocks</tt> um procedimento que faça com que um <tt>ImageSprite</tt> se mova de forma aleatória pelo <tt>Canvas</tt>. | ||
+ | *6.5- Entender como encadear o bloco de evento <tt>ImageSprite.Touched</tt> com a execução de uma mídia (<tt>Sound</tt>). | ||
+ | |||
+ | {| border="4" cellpadding="3" | ||
+ | !ITEM | ||
+ | !ATIVIDADE | ||
+ | !OBJETIVO | ||
+ | !MÉTODO | ||
+ | !TEMPO | ||
+ | |||
+ | |||
+ | |- | ||
+ | | '''1''' | ||
+ | ||Utilizar o <tt>Canvas</tt> como uma área de deslocamento de um <tt>ImageSprite</tt>. | ||
+ | ||6; 6.1 | ||
+ | ||Utilizar o [[AppInventor]] no projetor | ||
+ | ||5 minutos | ||
+ | |- | ||
+ | | '''2''' | ||
+ | ||Relacionar o tamanho de um <tt>ImageSprite</tt> com o de um <tt>Canvas</tt>. | ||
+ | ||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 <tt>Label</tt> 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 <tt>ImageSprite</tt> 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 <tt>ImageSprite</tt>. | ||
+ | ||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 [http://scratch.mit.edu/ 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 [http://scratch.mit.edu/ 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. | ||
+ | |||
+ | {| border="4" cellpadding="3" | ||
+ | !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 <tt>Blocks</tt>. | ||
+ | ||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 <tt>Designer</tt>.''' | ||
+ | *8.1- Estar apto a criar um arranjo de botões idêntico ao do modelo (detido pelo professor) utilizando apenas os componentes <tt>Button</tt>, <tt>ScreenArrangement</tt> e <tt>Label</tt>; | ||
+ | **8.1.1- Saber Carregar Mídias na propriedade <tt>Image</tt> de cada <tt>Button</tt>; | ||
+ | **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 <tt>Buttons</tt> e do <tt>Label</tt> ao da <tt>Screen1</tt>; | ||
+ | **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 <tt>Label</tt>, suficiente para "enfeitar" os valores exibidos pelo ''Display'' (<tt>Label</tt>). | ||
+ | **8.3.1- Saber utilizar a propriedade <tt>FontBold</tt> de um <tt>Button</tt> ou de um <tt>Label</tt>; | ||
+ | **8.3.2- Saber utilizar a propriedade <tt>FontItalic</tt> de um <tt>Button</tt> ou de um <tt>Label</tt>; | ||
+ | **8.3.3- Saber utilizar a propriedade <tt>FontTypeface</tt> de um <tt>Button</tt> ou de um <tt>Label</tt>; | ||
+ | **8.3.4- Saber utilizar a propriedade <tt>TextAlignment</tt> de um <tt>Button</tt> ou de um <tt>Label</tt>. | ||
+ | |||
+ | |||
+ | {| border="4" cellpadding="3" | ||
+ | !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 <tt>Label</tt> (e do <tt>Button</tt>). | ||
+ | ||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 [http://scratch.mit.edu/ 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). | ||
+ | |||
+ | |||
+ | |||
+ | {| border="4" cellpadding="3" | ||
+ | !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 <tt>Blocks</tt>.''' | ||
+ | *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. | ||
+ | {| border="4" cellpadding="3" | ||
+ | !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]], <tt>Blocks</tt> e <tt>Components</tt>. | ||
+ | *Utilização de tutoriais iniciantes produzidos pelo MIT para aplicar o pouco aprendido. | ||
+ | {{collapse top|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 [http://web.mit.edu/ 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, <tt>Procedures</tt> 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 <tt>Designer</tt> e o <tt>Blocks</tt>. Na etapa <tt>Designer</tt>, trataremos <tt>Buttons</tt>, <tt>Labels</tt>, <tt>Canvas</tt> e até arquivos de mídia, como <tt>Sounds</tt>. Observe na imagem abaixo como a nomenclatura de cada seção (em inglês) indica exatamente sua função, como por exemplo, <tt>Viewer</tt> e <tt>Properties</tt>. | ||
+ | |||
+ | [[Arquivo:AppInventorDesigner.png|800px|thumb|center]] | ||
+ | |||
+ | Já no Blocks, criaremos <tt>Procedures</tt>, 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. | ||
+ | |||
+ | [[Arquivo:AppInventorBlocks.png|800px|thumb|center]] | ||
+ | |||
+ | Tanto o <tt>Designer</tt> como o <tt> Blocks</tt> 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 [http://scratch.mit.edu/ Scratch]. E esses conceitos, serão revistos através de tutoriais que iremos seguir ao longo desta oficina. | ||
+ | {{collapse bottom}} | ||
+ | {{collapse top|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 <tt>HelloPurr Tutorial</tt> que pode ser encontrado na sua versão original no site do [http://beta.appinventor.mit.edu/learn/setup/hellopurr/hellopurrphonepart1.html 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 [http://beta.appinventor.mit.edu/learn/tutorials/hellopurr/HelloPurrAssets/kitty.png Imagem do Gato] e do [http://beta.appinventor.mit.edu/learn/tutorials/hellopurr/HelloPurrAssets/meow.mp3 Miado] antes de continuar. | ||
+ | Para começar vá ao site do [http://beta.appinventor.mit.edu 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: | ||
+ | |||
+ | [[Arquivo:Novo Projeto.png|800px|thumb|center]] | ||
+ | |||
+ | Em seguida crie um novo projeto e o nomeie <tt>HelloPurr</tt>. Assim que você cria um projeto, o [[AppInventor]], automaticamente, o redirecionará para o <tt>Designer</tt>, onde iniciaremos o desenvolvimento do projeto. Como vimos na Introdução, no <tt>Designer</tt>, "organizamos" o desenvolvimento do aplicativo, porque é nele em que são criados os <tt>Components</tt>. <tt>Component</tt> ou simplesmente Componente é um termo utilizado para representar um conjunto de funcionalidades. Uma aplicação pode ser formada apenas utilizando <tt>Components</tt>. 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 <tt>Designer</tt> e destaca a posição de algumas de suas seções. | ||
+ | |||
+ | [[Arquivo:AppInventor - Analizando o Designer.png|800px|thumb|center]] | ||
+ | |||
+ | Perceba pela imagem que o <tt>Designer</tt> já inicia com um componente: a <tt>Screen1</tt>. Todo componente existente no aplicativo é listado na seção <tt>Components</tt>, e a sua direita, na seção <tt>Properties</tt>, estão as propriedades do componente selecionado. Agora, selecione o componente <tt>Screen1</tt> e altere sua propriedade <tt>Title</tt> (na seção <tt>Properties</tt>) para <tt>HelloPurr</tt>. A propriedade <tt>Title</tt> de uma <tt>Screen</tt> pode ser considerado como o título da mesma, neste caso, não teremos a necessidade de criar mais <tt>Screens</tt>, por isso o <tt>Title</tt> da nossa <tt>Screen1</tt> pode ser o do próprio aplicativo (ou seja, <tt>HelloPurr</tt>). Depois de titular a <tt>Screen1</tt>, nós adicionaremos um novo componente ao nosso aplicativo. Para adicionar um novo componente, vá até a seção <tt>Basic</tt>, 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 <tt>Button</tt> (da gaveta <tt>Basic</tt>). Assim que o componente <tt>Button</tt> é criado, a seção <tt>Properties</tt> se "enche" de novas propriedades, agora referentes ao componente <tt>Button1</tt>. Antes de modificarmos as propriedades deste novo componente, vá até a seção <tt>Components</tt> e altere seu nome para <tt>ButtonGato</tt>, 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 [http://wiki.sj.ifsc.edu.br/index.php/Usu%C3%A1rio:Ernani.rs#Padroniza.C3.A7.C3.A3o Padronização]. | ||
+ | Agora que já possuímos um <tt>Button</tt> 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 <tt>ButtonGato</tt> e (na seção <tt>Properties</tt>) procure pela propriedade <tt>Image</tt>. A propriedade <tt>Image</tt> de um <tt>Button</tt> 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 <tt>Designer</tt>. Há duas formas de carregar uma mídia no <tt>Designer</tt>: | ||
+ | *Logo abaixo da seção <tt>Properties</tt> há a seção <tt>Media</tt> 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 <tt>Properties</tt>, quando for carregar um arquivo de mídia em uma propriedade, e este arquivo ainda não estiver carregado no <tt>Designer</tt>, você pode selecionar a opção “Add...” e selecionar o arquivo. | ||
+ | Assim que você tiver a imagem carregada, o <tt>Designer</tt>, estará assim: | ||
+ | |||
+ | [[Arquivo:AppInventor - Carregando Mídias.jpg|800px|thumb|center]] | ||
+ | |||
+ | Pela imagem acima podemos perceber um problema no vizualizador: Por cima da imagem do gato aparece um texto, isso acontece porque a propriedade <tt>Image</tt> de um <tt>Button</tt> adiciona apenas uma imagem de fundo e não sobrepõe outras propriedades dos <tt>Buttons</tt> , como o <tt>Text</tt>. A propriedade <tt>Text</tt> possui uma função muito simples, adicionar um texto ao componente. Portanto a solução para o nosso "problema" é: Apagar o valor da propriedade <tt>Text</tt>. 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 <tt>Label</tt>. Os <tt>Labels</tt>, diferente da maioria dos componentes, possui apenas uma função: Exibir um texto. E é exatamente isso que precisamos, portanto, vamos até a gaveta <tt>Basic</tt> e arrastamos para o nosso vizualizador o componente <tt>Label</tt>. Em seguida altere o nome do <tt>Label1</tt> para <tt>LabelInstrucao</tt> (lembre-se que o [[AppInventor]] não aceita "ç" em nome de componentes). Agora, observe as propriedades do <tt>LabelInstrucao</tt>, como a função de um componente <tt>Label</tt> é 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: | ||
+ | *<tt>BackgroundColor</tt> = esta propriedade é muito semelhante ao <tt>Image</tt> dos <tt>Buttons</tt>, 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. | ||
+ | *<tt>FontBold</tt> e <tt>FontItalic</tt> = são respectivamente as propriedades ''Negrito'' e ''Itálico'', comumente utilizadas em edição de textos. Ative-as. | ||
+ | *<tt>FontSize</tt> = Tamanho da letra. Aumente a letra para que o texto seja mais visível. Sugestão: 30. | ||
+ | *<tt>Text</tt> = Como já vimos anteriormente nos componentes <tt>Buttons</tt>, o valor desta propriedade é exibido pelo <tt>Label</tt> (é 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. | ||
+ | |||
+ | [[Arquivo:AppInventor - Designer Pronto.jpg|800px|thumb|center]] | ||
+ | |||
+ | |||
+ | 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 <tt>Designer</tt> nesta etapa e destaca em vermelho aonde abrir o <tt>Blocks</tt>. Como vimos na Introdução, o <tt>Designer</tt> adiciona os componentes e os valores iniciais as suas propriedades (podem ser alterados futuramente). Já o <tt>Blocks</tt> dá instruções a esses componentes, e é exatamente isso que faremos a seguir (abra o <tt>Blocks</tt>). 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 <tt>Blocks</tt> no site [http://beta.appinventor.mit.edu/learn/setup/index.html AppInventor - MIT]. | ||
+ | O <tt>Blocks</tt> 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 <tt>Designer</tt>: O <tt>Sound</tt>. Volte ao <tt>Designer</tt>, vá até a gaveta <tt>Media</tt> e arraste um <tt>Sound</tt> para o vizualizador. Observe que o <tt>Sound</tt> é um arquivo invisível no <tt>Designer</tt> 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 <tt>Sound1</tt> para <tt>Miado</tt> e a propriedade <tt>Source</tt> para o arquivo de som baixado. Agora quando você instruir o aplicativo para executar o <tt>SoundMiado</tt> ele tocará o arquivo de som que foi carregado. | ||
+ | |||
+ | [[Arquivo:AppInventor - Designer Sound.jpg|800px|thumb|center]] | ||
+ | |||
+ | Sempre que o componente <tt>SoundMiado</tt> for tocado, o som do miado que carregamos será tocado. Entretanto agora temos de instruir o aplicativo de executar o <tt>SoundMiado</tt> quando o <tt>ButtonGato</tt> receber um clique, e é agora que utilizaremos o <tt>Blocks</tt>. | ||
+ | |||
+ | [[Arquivo:AppInventor - Blocks.jpg|800px|thumb|center]] | ||
+ | |||
+ | A imagem acima nos da um pequeno mapa para termos uma ideia de como criar instruções. A parte <tt>Blocks</tt> 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 <tt>Blocks</tt> 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 <tt>ButtonGato</tt> seja clicado ele execute o miado. Vá até o <tt>Blocks</tt> e na seção <tt>My Blocks</tt> clique na gaveta <tt>ButtonGato</tt>. Observe que assim que você abre a seção <tt>My Blocks</tt> são listadas a gaveta <tt>My Definitions</tt> e uma outra para cada componente que foi criado no <tt>Designer</tt>. Como nós queremos utilizar o <tt>ButtonGato</tt>, vamos clicar na sua gaveta e vizualizar as opções disponíveis. Dentro dessa gaveta existe a seguinte instrução: | ||
+ | |||
+ | [[Arquivo:Button Gato click.jpg|thumb|center]] | ||
+ | |||
+ | 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 <tt>Procedure</tt>. Como por exemplo, o clique do mouse é uma condição para que um objeto se movimente. No caso <tt>HelloPurr</tt> o evento é o clique do mouse sobre o <tt>ButtonGato</tt>. 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 <tt>SoundMiado</tt>. Para isso acontecer, vá até a seção <tt>My Blocks</tt> e na gaveta <tt>SoundMiado</tt> procure pela seguinte instrução: | ||
+ | |||
+ | [[Arquivo:Call Sound Miado.jpg|thumb|center]] | ||
+ | |||
+ | 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 <tt>Procedure</tt>). | ||
+ | *A consequência. | ||
+ | Neste caso "call", traduzindo do inglês, significa "chamar", portanto o bloco esta chamando algo do componente <tt>SoundMiado</tt>, e "Play", significa "tocar" ou "executar". Como o componente em questão é um arquivo de som, se executarmos o <tt>SoundMiado</tt> 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: | ||
+ | |||
+ | [[Arquivo:Instrucao HelloPurr.jpg|thumb|center]] | ||
+ | |||
+ | Assim que você tiver combinado as duas instruções, abra o emulador ou conecte o <tt>Blocks</tt> a um dispositivo para testar o aplicativo. Esta deverá ser a aparência do aplicativo: | ||
+ | |||
+ | [[Arquivo:HelloPurr final.jpg|thumb|center]] | ||
+ | {{collapse bottom}} | ||
+ | {{collapse top|Tutorial MoleMash}} | ||
+ | ====Tutorial MoleMash==== | ||
+ | Este tutorial possui como pré-requisito o [http://wiki.sj.ifsc.edu.br/index.php/Usu%C3%A1rio:Ernani.rs#Tutorial_Hello_Purr Tutorial HelloPurr] e pode ser encontrado na sua versão original no site [http://beta.appinventor.mit.edu/learn/tutorials/molemash/molemash.html AppInventor - MIT]. | ||
+ | Agora que você tem uma noção de [[AppInventor]], iremos iniciar o <tt>MoleMash Tutorial</tt>. O <tt>MoleMash</tt> é 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 <tt>MoleMash</tt> e altere o <tt>Title</tt> da <tt>Screen1</tt> para <tt>MoleMash</tt>. 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 <tt>Canvas</tt>. O <tt>Canvas</tt> é um retângulo bidimensional com área definida, utilizado para desenhar ou para mover <tt>Sprites</tt> (objetos exibidos em duas dimensões). | ||
+ | *Vá até a gaveta <tt>Basic</tt> e arraste um <tt>Canvas</tt> para o vizualizador, nomeie-o <tt>CanvasArea</tt>. | ||
+ | *Mude sua propriedade <tt>Width</tt> para <tt>Fill Parent</tt>. | ||
+ | *Mude sua propriedade <tt>Height</tt> para <tt>300 pixels</tt>. | ||
+ | Quando o valor das propriedades <tt>Width</tt> e <tt>Height</tt> de um componente são alterados, os limites horizontais e verticais, respectivamente, são redefinidos. Existem três modos de expressar o valor do <tt>Width</tt> ou <tt>Height</tt> de um componente no <tt>Designer</tt> (é possível fazer esta modificação no <tt>Blocks</tt> de outra forma): | ||
+ | *Número de Pixels = É possível selecionar um número fixo de pixels. | ||
+ | *<tt>Fill Parent</tt> = Quando esta opção for selecionada o espaço não utilizado pelo [[AppInventor]] passará a ser ocupado pelo componente em questão. | ||
+ | *<tt>Automatic</tt> = O <tt>Designer</tt> determina os valores baseados em critérios próprios, por exemplo, se uma imagem de 40 pixels quadrados for adicionada como <tt>Image</tt> de um <tt>Button</tt> o <tt>Designer</tt> altera automaticamente os valores <tt>Width</tt> e <tt>Height</tt> para os da imagem. | ||
+ | Agora que nossa área esta definida, precisamos acrescentar a toupeira ao jogo. Vamos utilizar outro novo componente: O <tt>ImageSprite</tt>. Um <tt>ImageSprite</tt> é um objeto que pode se locomover livremente por toda a área de um <tt>Canvas</tt>. Vá até a gaveta <tt>Basic</tt> e arraste um <tt>ImageSprite</tt> para dentro do <tt>CanvasArea</tt> (nomeie-o <tt>ImageSpriteToupeira</tt>). Em seguida, faça o download da [http://beta.appinventor.mit.edu/learn/tutorials/molemash/MoleMashAssets/mole.png Imagem] e a carregue na propriedade <tt>Picture</tt> do <tt>ImageSpriteToupeira</tt>, que possui a mesma função do <tt>Image</tt> dos <tt>Buttons</tt>. 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 <tt>Label</tt>, como já vimos anteriormente, o <tt>Label</tt> 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 <tt>Button</tt>. Portanto siga os passos abaixo para finalizarmos a parte <tt>Designer</tt> do aplicativo: | ||
+ | *Crie o <tt>LabelPlacar</tt>. | ||
+ | *Apague o valor da propriedade <tt>Text</tt> do <tt>LabelPlacar</tt>. | ||
+ | *Aumente o valor da propriedade <tt>FontSize</tt> do <tt>LabelPlacar</tt> para 30. | ||
+ | Observação: Quando o valor da propriedade <tt>Text</tt> do <tt>LabelPlacar</tt> for nulo, o <tt>Label</tt> desaparece do <tt>Designer</tt>. Justamente porque não há nenhum texto para mostrar, fato que mudará no <tt>Blocks</tt>. | ||
+ | *Crie o <tt>ButtonIniciarNovoJogo</tt>. | ||
+ | *Mude o valor da propriedade <tt>Text</tt> do <tt>ButtonIniciarNovoJogo</tt> para "Iniciar Novo Jogo". | ||
+ | Assim que você tiver completado os passos acima, terá finalizado a parte <tt>Designer</tt>. | ||
+ | |||
+ | [[Arquivo:MoleMash - Designer.jpg|800px|thumb|center]] | ||
+ | |||
+ | Abra o <tt>Blocks</tt> para começarmos a desenvolver as instruções. A primeira instrução que devemos criar é o movimento da Toupeira (<tt>ImageSpriteToupeira</tt>). Para tal, iremos utilizar blocos diferentes dos que já utilizamos até então: Os <tt>Procedures</tt>. <tt>Procedure</tt> 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 <tt>Procedure</tt> para [[AppInventor]] seria: Sequência de ações ou instruções a serem seguidas. Para criar um <tt>Procedure</tt> vá até a seção <tt>Built-In</tt>, e na gaveta <tt>Definitions</tt>, procure pelo seguinte bloco: | ||
+ | |||
+ | [[Arquivo:Procedure.jpg|800px|thumb|center]] | ||
+ | |||
+ | Arraste esse bloco para a Área de Trabalho do <tt>Blocks</tt> e altere o nome do procedimento para <tt>MovimentoToupeira</tt>. | ||
+ | |||
+ | [[Arquivo:Procedure touperia.jpg|thumb|center]] | ||
+ | |||
+ | 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 | ||
+ | {{collapse bottom}} | ||
+ | |||
+ | ===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. | ||
+ | |||
+ | {{collapse bottom}} | ||
{{collapse top|Atividades}} | {{collapse top|Atividades}} | ||
;09/05/2012 | ;09/05/2012 | ||
Linha 285: | Linha 799: | ||
;15/10/2012 | ;15/10/2012 | ||
*Desenvolvimento de um ''banner'' para a mostra científica nacional. | *Desenvolvimento de um ''banner'' para a mostra científica nacional. | ||
− | |||
− | |||
{{collapse bottom}} | {{collapse bottom}} | ||
− | |||
− | |||
=Oficina AppInventor= | =Oficina AppInventor= |
Edição das 20h36min de 27 de novembro de 2012
Desenvolvendo Sistemas Básicos de Telecomunicações com “ Applnventor”
- Orientadores
Eraldo Silveira e Silva e Marcos Moecke.
- Objetivos do Projeto
- Desenvolver tutoriais na plataforma wiki e nas próprias ferramentas AppInventor para facilitar o aprendizado de novos alunos da variação da linguagem Scratch utlizada no AppInventor de modo a elevar significativamente o número de usuários da linguagem.
- Desenvolver sistemas básicos para o auxílio didático no curso de Engenharia de Telecomunicações, usando a ferramenta AppInventor.
- Bolsista Selecionado
- Ernani Rodrigues De S. Thiago 2900111
- Local de Trabalho
- LABIC, Máquina: VENUS
- Horário de Trabalho
- Segunda 13h30 às 17h30;
- Terça 13h30 às 17h30;
- Quarta 15h30 às 20h30;
- Quinta 13h30 às 16h30;
- Sexta 13h30 às 17h30;
Atividades propostas
1. Elaborar o projeto "O que o aluno precisa apreender para programar em AppInventor"
- Realizar Programação da Aula01;
- Fazer uma programação para Aula01 em slides;
- Descrever etapas da produção das aplicações na wiki;
- Fazer, na wiki, uma especificação do método de produção das aplicações e de suas funções.
2. Atualizar a página AppInventor com os conteúdos já vistos.
Atividades realizadas
Oficinas | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Oficina AppInventorPlanejamento das OficinasAnálise InicialEste 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 I1- Construir casos de usos para saber definir o que é uma aplicação e qual sua função.
2- "Explorar" o AppInventor.
3- Conceitos Básicos.
4- Entender como construir procedimentos baseados em eventos (Script).
Lição II5- Praticar e expandir conhecimentos já adquiridos.
Lição III6- Desenvolver Tutorial MoleMash para compreender a função de novos componentes (Clock e ImageSprite).
Lição IV7- Iniciar desenvolvimento do Tutorial Agenda Telefônica.
Lição V8- Iniciar desenvolvimento do Tutorial Calculadora no Designer.
Lição VI9- Adicionando novas funcionalidades a Calculadora.
Lição VII10- Iniciar desenvolvimento do Tutorial Calculadora no Blocks.
Lição VIIIDIA 01Apresentação
DIA 02Especificação
DIA 03Desenvolvimento
DIA 04
Tutorial Calculadora:Especificação
|
Atividades |
---|
Debate com Eraldo, para definir o projeto Elaboração junto com o Ernani.
|
Oficina AppInventor
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.
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
- Desenvolver programas/aplicações utilizando o AppInventor para futura implementação no PJI1-EngTel.
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- Consultar a Documentação de Referência;
- 2.2- 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).
- 5.1.1- Rever conceitos dos componentes Button e Screen;
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.1.1- Opções de Novas Funcionalidades:
- 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 AppInventorNesta 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 PurrAntes 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:
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:
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:
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 MoleMashEste 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).
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):
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:
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.
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.
|}
Documentação
Breve...
Padronização
Em Construção... |
---|
IntroduçãoMuitos alunos, ao entrarem em contato com o AppInventor, aprendem rapidamente como utilizá-lo. Este fato ocorre porque esses alunos, normalmente, já possuem alguma experiência em programação, já entraram em contato com o Scratch e/ou se entusiasmaram com a atraente interface do AppInventor. Mas para a melhor compreenção e utilização desta ferramenta, é necessário que algumas características sejam padronizadas. Quando iniciados no AppInventor é comum que a maioria não dê grande importância para a ordem de desenvolvimento do projeto e muito menos para a nomenclatura que esta sendo utilizada. O objetivo da "Padronização" é justamente evitar que os alunos se percam durante o desenvolvimento do projeto, direcionando-os para o essencial e os auxiliarem para fazê-lo organizadamente. NomenclaturaProjetoAntes de iniciar um projeto, é necessário nomeá-lo para poder classificá-lo e distinguí-lo de outros. Ao nomear um projeto procure relacionar sua função e versão a ele. Como por exemplo: CriadorDeFilmesV2b. No exemplo citado a função da aplicação é "Criar Filmes", sua versão é "2" (sempre precedido de um "V") e o "b" significa que ele possui alguma alteração relevante ao CriadorDeFilmesV2a (o anterior), mas que ainda não esta pronto (a versão ainda esta em fase de desenvolvimento). Dessa forma as aplicações criadas ficam mais organizadas e correm menor risco de se perderem num imenso banco de dados. Procure também, não se esquecer de manter as palavras no mesmo idioma e de iniciá-las com uma letra maiúscula, ajuda na visibilidade (leitura). Em Construção... |