Laboratório de Ciências Computação

Transcrição

1 Laboratório de Ciências Computação APP Inventor 1

2 Dispositivos Móveis e Plataformas Os dispositivos móveis fazem parte de nosso dia a dia e nos permitem aplicar a computação de forma ubíqua. Acesso em Setembro de

3 Dispositivos Móveis e Plataformas Os dispositivos móveis fazem parte de nosso dia a dia e nos permitem aplicar a computação de forma ubíqua. Utilizaremos apenas o sistema Android neste curso Acesso em Setembro de

4 App Inventor O App Inventor ( é uma ferramenta que funciona na nuvem que permite construir aplicativos direto pelo navegador. Permitir que pessoas (em especial os jovens) criem soluções para seus problemas do dia a dia; Esconde a complexidade da programação de aplicativos por usar uma linguagem gráfica e blocos de construção; Promove o ensino de Ciência da Computação através do pensamento lógico,com resultados rápidos e próximos ao nosso dia a dia. 4

5 App Inventor (2) O App Inventor ( é uma ferramenta que funciona na nuvem que permite construir aplicativos direto pelo navegador. 5

6 Configuração do Ambiente O ambiente de desenvolvimento funciona exclusivamente no navegador. Mas para testar as aplicações você deve ter uma das três opções configuradas em sua máquina: Um Dispositivo Android e uma Conexão Wifi; Um Emulador Android instalado em seu computador; Um Dispositivo Android e um Cabo USB para conectá-lo ao computador. 6

7 Dispositivo Android + Wifi O modo recomendado é utilizar o aplicativo CompanionApp ( ion3) direto do Google Play Store O seu computador e seu dispositivo devem estar na mesma Rede (UFJF-Wifi ou eduroam); Abra o AppInventor em um novo projeto e escolha Conectar > Assistente AI Digite o código ou faça o scan do código QR. Seu aplicativo deve aparecer no dispositivo! 7

8 Emulador Android no computador Você deve ter direitos de instalar programas em seu computador (Mac OS X, Windows, GNU/Linux) ou solicitar a instalação para seu administrador de sistemas. 1. Você deve executar o aistarter em seu computador (ícone na área de trabalho do Windows ou comando /usr/google/appinventor/commands-for-appinventor/aistarter no Linux) 2. Abra o CompanionApp no seu dispositivo; 3. Abra o AppInventor em um novo projeto e escolha Conectar > Assistente AI 4. Digite o código ou faça o scan do código QR. Seu aplicativo deve aparecer no dispositivo! 8

9 Dispositivo Android + USB Você deve ter direitos de instalar programas em seu computador (Mac OS X, Windows, GNU/Linux) ou solicitar a instalação para seu administrador de sistemas. 1. Você deve executar o aistarter em seu computador (ícone na área de trabalho do Windows ou comando /usr/google/appinventor/commands-for-appinventor/aistarter no Linux) 2. Abra o CompanionApp no seu dispositivo; 3. Configure seu dispositivo para o de Depuração via USB no Menu de Programador (Habilite em Configurações > Sobre o Telefone e clique 7 vezes sobre o Número da Versão) 4. Abra o AppInventor em um novo projeto e escolha Conectar > USB Seu aplicativo deve aparecer no dispositivo! 9

10 Interface do AppInventor O AppInventor possui um conjunto de janelas internas que permitem a construção do aplicativo. 10

11 Interface do AppInventor A Paleta possui os componentes visuais que irão compor a interface do aplicativo. Esses componentes são adicionados para o Visualizador. 11

12 Interface do AppInventor O Visualizador nos permite ver como o aplicativo irá aparecer na tela do dispositivo. A exibição dos componentes pode variar de acordo com suas propriedades. 12

13 Interface do AppInventor O Componentes nos permite ver e selecionar componentes de acordo com a sua hierarquia nas telas do aplicativo. O uso dessa forma de seleção aumentará em acordo com a complexidade de seu app. 13

14 Interface do AppInventor A Propriedades nos permite ver e alterar os diversos estados do componente atualmente selecionado na janela de Componentes. O comportamento dos componentes é fortemente ligado ao valor de suas propriedades. 14

15 Interface do AppInventor Os botões Designer e Blocos nos permite alternar entre o modo de edição da interface (Designer) e de edição de comportamentos (Blocos). 15

16 Interface do AppInventor Ao fechar o seu AICompanion e o APPInventor, o aplicativo não estará mais disponível para seu dispositivo. Você deve usar o menu Compilar para obter um apk que permite instalar o app em seu computador. Seu dispositivo deve ter permissões para instalar aplicativos de terceiros. 16

17 Construindo seu primeiro App O nosso primeiro app será um simples botão que responde ao click do usuário com uma saudação. Inicie um novo projeto com o nome de OlaAppInventor 17

18 Construindo seu primeiro App (2) Arraste um botão da paleta da esquerda para a janela do aplicativo: 18

19 Construindo seu primeiro App (3) Baixe uma imagem de um botão para seu computador: 19

20 Construindo seu primeiro App (4) Escolha Enviar uma Imagem para o botão em Propriedades... 20

21 Construindo seu primeiro App (5) Ainda nas Propriedades do Botão1, apague o Texto que veio padrão. 21

22 Construindo seu primeiro App (6) Baixe um arquivo de áudio para seu computador: 22

23 Construindo seu primeiro App (7) Arraste um Tocador para o Visualizador e nas Propriedades altere a Fonte para o arquivo de áudio que você baixou. 23

24 Construindo seu primeiro App (8) Selecione a aba de Blocos e clique no Button1 para ver os blocos do mesmo. Arraste um Quando.?.Clique-Fazer para a área branca do visualizador. 24

25 Construindo seu primeiro App (9) Clique no Tocador1 para ver os blocos do mesmo. Arraste um chamar.?.iniciar para dentro do bloco de clique do botão. 25

26 Construindo seu primeiro App (10) A cada atualização, o aplicativo é automaticamente enviado para seu dispositivo. O botão deve reproduzir a música ao ser tocado! O aplicativo já deve estar funcionando no seu dispositivo! 26

27 Lendo e Escrevendo Dados Crie um novo projeto com: dois campos de texto, nome e sobrenome; um botão; e mais um campo de texto saudacao. Adicione dicas para os campos e deixe o último desabilitado! 27

28 Lendo e Escrevendo Dados (2) A cada clique do botão, o aplicativo vai ajustar (set) a caixa de texto de acordo com a leitura (get) dos valores de Texto dos outros campos. 28

29 Lendo e Escrevendo Dados (3) Variáveis globais guardam dados importantes para as operações do app. Vá na seção Variáveis e escolha inicializar global, altere o nome para mensagem. Mova a concatenação para ajustar a variável. 29

30 Exercício 1: Faça ele falar! Altere seu projeto para utilizar um Texto para Falar, disponível na seção Mídia do Designer. 30

31 Exercício 1: Faça ele Falar! (resposta) Variáveis globais podem ser iniciadas e utilizadas dentro dos seus eventos. Passe a mensagem para uma variável global mensagem e utilize-a para falar com o usuário além de imprimir o resultado da concatenação. 31

32 Exercício 2 Faça um aplicativo que leia uma temperatura em Fahrenheit e calcule a temperatura correspondente na escala Celcius. C = 5 * (F - 32) / 9 32

33 Exercício 2 (Resposta) Faça um aplicativo que leia uma temperatura em Fahrenheit e calcule a temperatura correspondente na escala Celcius. C = 5 * (F - 32) / 9 33

34 Exercício 2 (Desafio) Faça um aplicativo que leia uma temperatura em Fahrenheit OU em Celsius e calcule a temperatura correspondente na escala oposta. Você deve adicionar um controle ListaSuspensa para indicar em qual escala está o valor inicial. Ao usar um botão de cálculo, o aplicativo deve exibir a temperatura na nova escala. Use a fórmula para as conversões: C = 5 * (F - 32) / 9. 34

35 Exercício 3 (Desafio) Faça um aplicativo que leia até três notas de um aluno, calcule a sua média atual e informe quanto ele precisa tirar nas próximas provas para ser aprovado. Se em algum momento ficar constatado que ele não possui pontos suficientes para aprovação, o aplicativo deve que ele foi reprovado. Se, ao entrar com as três notas, o aluno obtiver média maior que 60, o aplicativo deve informar que o aluno está aprovado 35

36 Vídeo Aulas (Com prof. Giuliano Prado) 1. Configurando o ambiente 2. Introdução ao AppInventor 36