Prof. Msc. André Luís Duarte

Transcrição

1 exatasfepi.com.br FEPI Fundação de Ensino e Pesquisa de Itajubá Prof. Msc. André Luís Duarte

2 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 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

3 Acessando a Plataforma Clicar no botão Criar App 3

4 Versão em Português 4

5 Acessando a Plataforma Aceitar as condições Selecionar para outros acessos 5

6 Termos de Uso Aceitou os Termos? 6

7 Bem Vindo 7

8 Tela Inicial Inicie um novo projeto Selecione a língua PTBR 8

9 Criando o Projeto Nome: AppInvFepi Ok para criar o projeto 9

10 AIFEPI Exibe a view selecionada Adiciona uma nova view Remove uma view Seleciona modo designer Seleciona modo blocos 10

11 Aprovação Aluno... obtiver média semestral igual ou superior a 70 pontos 11

12 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

13 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

14 Visualizador Mostra a tela (view) do nosso aplicativo quando este for executado 14

15 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

16 Propriedades Exibe as propriedades que podemos acessar dos componentes presentes na view do nosso app 16

17 Criando uma calculadora básica 17

18 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

19 Criando o leiaute Para que a calculadora funcione, devemos prover uma forma para o usuário poder digitar os valores 19

20 Ajustando o leiaute Ajuste as propriedades: Screen1 Título: AppInvFEPI CaixaDeTexto1 e 2 Texto: AlinhamentoDeTexto: direita: 2 Botão1 Texto: + Legenda1 Texto: = 20

21 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

22 Modo Blocos Exibe a view selecionada Seleciona modo blocos Selecione o componente Caixa de Texto 1 22

23 Modo Blocos Blocos para este tipo de componente Arraste o evento desejado 23

24 Modo Blocos 24

25 Usando Variáveis 25

26 Usando Variáveis Vamos criar 3 variáveis n1 n2 soma Inicializar todas com zero 26

27 Evento clique para o Botão 1 Vamos criar o evento clique para o Botão 1 27

28 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

29 Modo Blocos Dica: Coloque o browser no modo apresentação que facilita bastante 29

30 Testando o app Página principal acesse Resources > Get started 30

31 Testando o app Selecione Setup Instructions 31

32 Testando o app Selecione Options Two 32

33 Testando o app Selecione o SO 33

34 Testando o app Faça o download e instale o MIT_AI 34

35 Testando o app O emulador inciará Execute como administrador Selecione: Conectar > Emulador 35

36 Testando o app 36

37 Testando o app Não feche o emulador após executar, o aistarter irá atualizá-lo Caso ele pare deverá ser reiniciado 37

38 Testando o app Configure o dispositivo para aceitar a instalação de pacotes de Fontes desconhecidas 38

39 Testando o App 39

40 Evoluindo a calculadora 40

41 Evoluindo a calculadora Esconder componentes relacionados ao exame 41

42 Código Botão 1 Realizar o cálculo da média e exibir o resultado 42

43 Código Botão 1 Verificar o resultado e ajustar os componentes 43

44 Encolhendo Blocos Clicando com o botão direito sobre o bloco podemos encolher para continuar 44

45 Encolhendo Blocos Isso nos ajuda a manter a tela organizada 45

46 Código Botão 2 46

47 Código Botão 3 Criar um procedimento para reiniciar a tela 47

48 Código Botão 3 48

49 Adicionando tela ao app Vamos adicionar uma nova tela no projeto 49

50 Tela 2 Objetivo: 1. Obter uma imagem 2. Exibi-la com escala de cinzas 3. Exibi-la binarizada 50

51 Tela 2 Tela 2: Propriedade rolável: marcado Organização horizontal (2x) 51

52 Tela 2 Organização horizontal 1 Pintura (3x) Altura: 100 px Largura: 100 px 52

53 Tela 2 Organização horizontal 2 Botão (3x) Obter Imagem Binarizar Home 53

54 Tela 2 Legenda Câmera 54

55 Tela 1::Código Botão 4 Abrir Tela 2 55

56 Tela 2 :: Botão 3 Fechar a tela e voltar para a tela principal 56

57 Criando as variáveis imgalt = 0 imglarg = 0 banda1 = 0 listacor = 0 listacor corpixel = 0 cor = 0 57

58 Quando Tela 2 Inicializar Exibe as dimensões do componente Pintura (Canvas) 58

59 Tela 2 :: Botão 1 Obtendo a imagem 59

60 Tela 2 :: Botão 2 Percorrer a imagem (100x100) Cria 2 loop de 1 a 99 60

61 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

62 Tela 2 :: Botão 2 Seleciona o primeiro item (red) 62

63 Tela 2 :: Botão 2 Criar um nível de cinza baseado na banda obtida 63

64 Tela 2 :: Botão 2 Ajustar a cor do pixel na Pintura2 com á cor criada 64

65 Tela 2 :: Botão 2 65

66 Tela 2 :: Botão 2 Binarizar a imagem obtida na Pintura3 66

67 Tela 2 :: Botão 2 67

68 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

69 Fim Obrigado! 69