exatasfepi.com.br FEPI Fundação de Ensino e Pesquisa de Itajubá Prof. Msc. André Luís Duarte
Introdução O que é? Plataforma web para desenvolvimento de aplicativos android usando programação por blocos Iniciou em 2010 criado pela Google 2011 criou o MIT Center for Mobile Learning Em dezembro de 2013 foi lançado http://appinventor.mit.edu/explore/ Os logos, nomes e marcas exibidos nesse treinamento são de propriedade exclusiva do MIT e não indicam nenhum tipo de relacionamento existente. 2
Acessando a Plataforma Clicar no botão Criar App 3
Versão em Português 4
Acessando a Plataforma Aceitar as condições Selecionar para outros acessos 5
Termos de Uso Aceitou os Termos? 6
Bem Vindo 7
Tela Inicial Inicie um novo projeto Selecione a língua PTBR 8
Criando o Projeto Nome: AppInvFepi Ok para criar o projeto 9
AIFEPI Exibe a view selecionada Adiciona uma nova view Remove uma view Seleciona modo designer Seleciona modo blocos 10
Aprovação Aluno... obtiver média semestral igual ou superior a 70 pontos 11
Exame O exame é oferecido ao aluno que obtiver... média semestral superior à 35 pontos e inferior à 70 pontos É composto de uma prova no valor de 100 pontos 12
Paleta de Componentes Contém componentes usados para a criação da interface com o usuário Alguns desses são visuais, outros não 13
Visualizador Mostra a tela (view) do nosso aplicativo quando este for executado 14
Componentes e mídia Exibe os componentes presentes na view de forma hierárquica Permite que enviemos uma mídia para ser usada no app 15
Propriedades Exibe as propriedades que podemos acessar dos componentes presentes na view do nosso app 16
Criando uma calculadora básica 17
Entrada de dados Propriedade da view: Rolável: selecionar Inserir na view: 2 componentes Caixa de Texto 1 componente Botão 1 componente Legenda 18
Criando o leiaute Para que a calculadora funcione, devemos prover uma forma para o usuário poder digitar os valores 19
Ajustando o leiaute Ajuste as propriedades: Screen1 Título: AppInvFEPI CaixaDeTexto1 e 2 Texto: AlinhamentoDeTexto: direita: 2 Botão1 Texto: + Legenda1 Texto: = 20
Programando O MIT AppInventor usa a forma de codificação de programação em Blocos A ideia básica é que qualquer pessoa possa criar aplicativos usando somente a lógica A ferramenta visa quebrar a barreira que existe ente a programação comum (código fonte) e a programação usando blocos lógicos 21
Modo Blocos Exibe a view selecionada Seleciona modo blocos Selecione o componente Caixa de Texto 1 22
Modo Blocos Blocos para este tipo de componente Arraste o evento desejado 23
Modo Blocos 24
Usando Variáveis 25
Usando Variáveis Vamos criar 3 variáveis n1 n2 soma Inicializar todas com zero 26
Evento clique para o Botão 1 Vamos criar o evento clique para o Botão 1 27
Evento clique para o Botão 1 No evento clique iremos realizar os seguintes passos 1. Obter os valores a partir das caixas de texto 2. Realizar a soma 3. Exibir o resultado 28
Modo Blocos Dica: Coloque o browser no modo apresentação que facilita bastante 29
Testando o app Página principal acesse Resources > Get started 30
Testando o app Selecione Setup Instructions 31
Testando o app Selecione Options Two 32
Testando o app Selecione o SO 33
Testando o app Faça o download e instale o MIT_AI 34
Testando o app O emulador inciará Execute como administrador Selecione: Conectar > Emulador 35
Testando o app 36
Testando o app Não feche o emulador após executar, o aistarter irá atualizá-lo Caso ele pare deverá ser reiniciado 37
Testando o app Configure o dispositivo para aceitar a instalação de pacotes de Fontes desconhecidas 38
Testando o App 39
Evoluindo a calculadora 40
Evoluindo a calculadora Esconder componentes relacionados ao exame 41
Código Botão 1 Realizar o cálculo da média e exibir o resultado 42
Código Botão 1 Verificar o resultado e ajustar os componentes 43
Encolhendo Blocos Clicando com o botão direito sobre o bloco podemos encolher para continuar 44
Encolhendo Blocos Isso nos ajuda a manter a tela organizada 45
Código Botão 2 46
Código Botão 3 Criar um procedimento para reiniciar a tela 47
Código Botão 3 48
Adicionando tela ao app Vamos adicionar uma nova tela no projeto 49
Tela 2 Objetivo: 1. Obter uma imagem 2. Exibi-la com escala de cinzas 3. Exibi-la binarizada 50
Tela 2 Tela 2: Propriedade rolável: marcado Organização horizontal (2x) 51
Tela 2 Organização horizontal 1 Pintura (3x) Altura: 100 px Largura: 100 px 52
Tela 2 Organização horizontal 2 Botão (3x) Obter Imagem Binarizar Home 53
Tela 2 Legenda Câmera 54
Tela 1::Código Botão 4 Abrir Tela 2 55
Tela 2 :: Botão 3 Fechar a tela e voltar para a tela principal 56
Criando as variáveis imgalt = 0 imglarg = 0 banda1 = 0 listacor = 0 listacor2 255 0 0 0 corpixel = 0 cor = 0 57
Quando Tela 2 Inicializar Exibe as dimensões do componente Pintura (Canvas) 58
Tela 2 :: Botão 1 Obtendo a imagem 59
Tela 2 :: Botão 2 Percorrer a imagem (100x100) Cria 2 loop de 1 a 99 60
Tela 2 :: Botão 2 Obtém a cor do pixel na posição (x,y) da imagem e divide (RGB + transparência alfa) 61
Tela 2 :: Botão 2 Seleciona o primeiro item (red) 62
Tela 2 :: Botão 2 Criar um nível de cinza baseado na banda obtida 63
Tela 2 :: Botão 2 Ajustar a cor do pixel na Pintura2 com á cor criada 64
Tela 2 :: Botão 2 65
Tela 2 :: Botão 2 Binarizar a imagem obtida na Pintura3 66
Tela 2 :: Botão 2 67
Alterando logo Envie o a imagem logo.png na pasta da rede usando o botão Mídia Altere a propriedade logo do aplicativo e a imagem de fundo para a imagem enviada 68
Fim Obrigado! 69