Uma introdução ao App Inventor

Apresentação em tema: "Uma introdução ao App Inventor"— Transcrição da apresentação:

1 Uma introdução ao App Inventor

2 O App Inventor possui uma interface baseada na web altamente visual, possibilitando a criação de um aplicativo para o seu dispositivo Android. Seu ambiente visual envolve a junção de blocos de instruções codificadas por cores; facilitando, dessa forma, seu uso. Torna relativamente fácil a construção de um aplicativo simples e, com um pouco de prática, de aplicativos complexos

3 Interface de programação visual do Google, o App Inventor é fruto de pesquisa e desenvolvimento no MIT. App Inventor e os projetos nos quais se baseia foram construídos por teorias de aprendizagem construtivistas, que salientam que a programação pode ser um veículo para se engajar idéias poderosas através de uma aprendizagem ativa.

4 Google acredita no App Inventor
App Inventor vai abrir portas para que as pessoas se tornem criadoras de tecnologia e não apenas consumidoras: "Muitas pessoas possuem um dispositivo móvel e acesso à Internet sempre a alcance. App Inventor para Android dá a todos, independentemente da experiência de programação, a oportunidade de controlar e remodelar a sua experiência de comunicação". Tradução livre de for-android.html

5 Iniciando Vá ao site: appinventor.mit.edu/
Use sua conta do google para logar.

6 Tela de desenvolvimento
Ao lado está a tela de desenvolvimento do App Inventor. Ela é composta por duas grandes áreas, a de designer e a de blocos. Detalharemos cada uma delas. Iniciaremos com área de designer, ilustrada ao lado.

7 User Interface Button (botão): Muitos aspectos da sua aparência pode ser alterado, bem como se é clicável (Ativado), pode ser alterado no Designer ou no Editor de blocos; CheckBox - Caixa de seleção que gera um evento quando o usuário clica nela. Existem muitas propriedades que afetam a sua aparência, elas podem ser definidas tanto no Editor de Designer quanto no Editor de blocos; Clock - Componente não-visível que pode servir como relógio do telefone, timer ou ser usado para realizar cálculos de tempo;

8 User Interface Image - Componente para exibir imagens. Pode ser especificado no Designer ou no Editor de blocos; Label - Exibe um pedaço de texto que é especificado através das propriedade “Text”; ListPicker - Definir a propriedade “ShowFilterBar” para true (verdadeira), fará com que uma lista se torne “pesquisável”. Possui outras propriedades que afetam a aparência de um botão (TextAlignment, BackgroundColor etc) e se esse botão pode ser clicado (habilitado);

9 User Interface Notifier - Componente de notificação que exibe diálogos de alerta, mensagens e alertas temporários. Além disso, cria entradas de registro Android; PasswordTextBox - Uma caixa para digitar senhas. É o mesmo que o componente de caixa de texto normal, apenas não exibe os caracteres escritos pelo utilizador; Slider - É uma barra de progresso; TextBox - Caixa para que o usuário insira texto (campo de texto); WebViewer - Componente para visualizar página web.

10 Layout HorizontalArrangement - Elemento de formatação no qual os componentes devem ser exibidos da esquerda para a direita; TableArrangement - Elemento de formatação no qual os componentes devem ser exibidos na forma de tabela; VerticalArrangement - Elemento de formatação no qual os componentes devem ser exibidos de cima para baixo.

11 Media Camcorder - Um componente para gravar vídeos;
Camera - Componente para fotografar; ImagePicker - Quando o usuário escolhe um ImagePicker, a galeria de imagens do dispositivo aparece e o usuário pode escolher uma imagem; Player - Componente multimídia que reproduz áudio e controles de vibração; Sound - Um componente multimídia que reproduz arquivos de som ou, opcionalmente, vibra pelo número de milissegundos especificados no Editor de blocos;

12 Media SoundRecorder - Componente multimídia que grava o áudio;
SpeechRecognizer - Componente que utiliza o reconhecimento de voz para converter a fala em texto; TextToSpeech - Componente que lê um texto e o converte em mensagem falada; VideoPlayer - Componente capaz de exibir vídeos.

13 Drawing and Animation Ball - Um sprite, que deve ser colocado em um Canvas, ​​onde ele poderá reagir a toques e ser arrastado, além de interagir com outros sprites e mover-se de acordo com seus valores de propriedade; Canvas - Um painel retangular bidimensional sensível ao toque no qual um desenho pode ser feito e sprites podem ser movidos. ImageSprite - Um sprite que pode ser colocado em um Canvas.

14 Sensors AccelerometerSensor - Componente não-visível, que pode detectar e medir a aceleração do dispositivo; BarcodeScanner - Componente para usar o scanner de código de barras para ler um código de barras; LocationSensor - Componente não-visível fornecendo informações de localização, incluindo a longitude, latitude, altitude (se suportado pelo dispositivo) e endereço; OrientationSensor- Componente não-visível que fornece informações sobre orientação física do dispositivo.

15 Social ContactPicker - Um botão que, quando clicado, exibe uma lista dos contatos para escolha; Picker - É um tipo de campo de texto; PhoneCall - Componente não-visível que faz uma chamada telefónica para o número especificado na propriedade PhoneNumber; PhoneNumberPicker - Um botão que, quando clicado, exibe uma lista contendo os números de telefone dos contatos; Sharing - Componente não-visível, que permite o compartilhamento de arquivos e/ou mensagens entre o seu aplicativo e outros aplicativos instalados em um dispositivo;

16 Social Texting - Um componente que, quando o método SendMessage é chamado, envia uma mensagem de texto especificado na propriedade Message para o número de telefone especificado na propriedade PhoneNumber; Twitter - Um componente não-visível que permite a comunicação com o Twitter.

17 Storage FusiontablesControl - Um componente não- visível, que se comunica com o Google Fusion Tables; TinyDB - Componente não-visível que armazena dados para um aplicativo; TinyWebDB - Componente não-visível que se comunica com um serviço Web para armazenar e recuperar informações.

18 Connectivity ActivityStarter - Um componente que pode iniciar uma actividade usando o método startActivity; BluetoothClient - Cliente; BluetoothServer - Servidor; Web - Componente não-visível que fornece funções para HTTP GET, POST, PUT.

19 Tela Agora que conhecemos os componentes que podem ser usados, falaremos sobre a tela. A imagem ao lado, ainda na parte de designer, representa a tela do aplicativo. Assim, você deverá arrastar os componentes necessários ao seu aplicativo para ela. Os componentes não visíveis, ainda que não apareçam na tela, também devem ser arrastados para ela. Você pode dispor os componentes visíveis da forma que quiser utilizando os componentes de layout para isso.

20 Componentes É aqui que estarão os componentes presentes no seu aplicativo (os que você arrastou para a tela). É possível renomeá-los e deletá-los. DICA: Nomeação dos componentes é importante! Um nome auto-explicativo fará com que você saiba utilizá-los corretamente na parte da programação em si (na área de blocos).

21 Propriedades Cada componente possui propriedades específicas como tamanho, nome de exibição (para um botão ou um label, por exemplo), tamanho, se são visíveis ou não etc. Essas propriedade não são inalteráveis uma vez definidas, pois muitas delas podem ser alteradas na parte do Editor de Blocos (área de blocos, a ser explicada em breve).

22 Adicionar tela e mudar de área
Acima temos a barra superior. Nela fica exibido o nome que você escolheu para o aplicativo, em qual tela do aplicativo se está trabalhando e o botão para adicionar ou remover uma tela. Além disso, na extrema direita estão os botões de Designer e Blocks, é através deles que você troca entre as áreas de designar e programação dos blocos. Até agora temos discutido a parte de Designer. Vamos então conhecer um pouco sobre a parte de Blocks.

23 Blocks Por fim, temos a área de blocos. É nela que se dará a especificação do comportamento do aplicativo. DICA: Adicione primeiro todos os componentes na área de designer antes de começar a parte de blocos!

24 Blocos: Control Os Control blocks são os blocos responsáveis por realizar o controle de eventos. Por exemplo, temos IF THEN (se ‘tal coisa’ ocorrer, então faça isso), o WHILE DO (enquanto ‘alguma coisa’ estiver ocorrendo/for verdadeira, faça isso) etc.

25 Blocos: Logic Esses são os blocos responsáveis por auxiliar operações lógicas. Comparação entre números (se são iguais, maiores, menores etc). Também temos operadores importantes como AND, OR e NOT. Além do TRUE e FALSE.

26 Blocos: Math Esses blocos contém as operações matemáticas como adição, subtração, divisão e multiplicação. Além de calcular raiz de um número ou proporcionar números aleatórios ou apenas um número específico.

27 Blocos: Text Blocos responsáveis por realizar manipulações ou operação com texto. Possibilita comparação entre textos, união de textos ou simplesmente a adição de um texto.

28 Blocos: List Blocos responsáveis por realizar manipulações ou operação com listas. Possibilita criação de listas, adição de um item a uma lista, verificar se uma lista está vazia etc.

29 Blocos: Colors Blocos contendo cores. Permite também a criação de uma cor diferente das exibidas, por meio da ajuda de uma lista e de números.

30 Blocos: Variables Responsáveis pelo criação e manipulação de uma variável.

31 Blocos Além dos blocos discutidos, cada um dos componentes possui seus próprios Blocos. Clique no bloco e arraste-os para a parte de Viewer. DICA: Você também pode usar a tecla tab do teclado e digitar o bloco que deseja.

32 Exemplo 1 - Calculadora Agora que você já conhece como funciona o App Inventor, vamos fazer alguns exemplos. Para nosso primeiro exemplo, criaremos uma calculadora. Nossa calculadora, recebe dois números e uma operação (podendo ser de soma, adição, subtração ou divisão), e retorna o resultado equivalente. Com os conhecimentos aprendidos, você consegue imaginar como fazer uma?

33 Exemplo 1 - Calculadora Na área de designer, adicionamos dois campos de texto (para receber os números de entrada) e quatro botões dispostos horizontalmente(responsáveis por uma das operação - o texto no botão indica qual). Além disso, 2 labels: um contendo o texto “resultado: ” e outro para exibir o resultado propriamente dito (ambos os labels dispostos horizontalmente).

34 Exemplo 1 - Calculadora Na parte da programação, temos quatro blocos, especificando o que ocorre quando se escolhe cada um dos botões. Quando se clica no botão de multiplicar, ele mudará o texto no label que nomeamos como “resultado” para o resultado da operação de multiplicação entre o texto contido no 1º e 2º campo de texto (se forem números). E assim por diante.

35 Exemplo 2 - Calculo de mdc
Faremos agora um aplicativo que recebe dois números e calcula o mdc entre eles. Com os conhecimentos aprendidos, você consegue imaginar como fazê-lo?

36 Exemplo 2 - Calculo de mdc
Para o designer desse, precisamos de 2 arranjos horizontais contendo um label e um campo de texto (para receber os dois números) e um botão. Além disso, de um arranjo horizontal que ficará incialmente invisível, este contendo dois labels e será responsável por exibir o resultado.

37 Exemplo 2 - Calculo de mdc
Para calcular o mdc, criamos 3 variáveis: a, b e mdc. “a” recebe o valor do 1º número e b do 2º (contidos nos campos de texto 1 e 2). Então, utilizamos o algoritmo de Euclides para realizar o cálculo.

38 Exemplo 3 - Calculo de raízes
Agora, vamos fazer um aplicativo calcula as raízes de uma função do 2º grau. Ele recebe o valor dos coeficientes a, b e c de uma função na forma ax² + bx + c, com “a” diferente de 0, e retorna o valor das raízes.

39 Exemplo 3 - Calculo de raízes
Na parte de designer, adicionamos um label para as instruções. Três arranjos horizontais compostos por label e campo de texto (para receber os valores) e um botão para “calcular raízes”. Além disso, mais dois arranjos horizontais com 2 labels, para exibir o resultados das raízes (e colocamos sua visibilidade para invisível).

40 Exemplo 3 - Calculo de raízes
Para entender o cálculo aqui é preciso ter em mente como se faz o cálculo matemático das raízes de uma equação do segundo grau. Lembre-se que delta é b² - 4*a*c e que x’ = (-b + sqrt(delta))/2*a x’’ = (-b - sqrt(delta))/2*a. Tendo isso em mente, consegue entender o código?

41 Exemplo 3 - Calculo de raízes
Primeiro, inicializamos seis variáveis: a, b, c, delta, r1 e r2. Claramente, a, b e c serão os coeficientes da equação. Delta será o delta necessário para o cálculo. E, r1 e r2 serão os nossos resultados (equivalente ao x' e x'').Assim, quando o botão for clicado, saberemos que nosso "a" será igual ao valor que está no 1º campo de texto, b será o valor do 2º, e "c" o do 3º. Como é uma equação do 2º grau, "a" deve ser diferente de zero e portando, só realizaremos o cálculo se essa condição for respeitada (ou seja, "if get global a =! 0"). Se o "a" for 0, o aplicativo irá apenas informar isso (Else, set Label6.Text to "coeficiente “a” deve ser diferente de 0").

42 Exemplo 3 - Calculo de raízes
No caso de “a” diferente de zero, iremos fazer os cálculos. Assim, nosso delta será b² - 4*a*c. Depois tiramos a raiz de delta. Calculamos então r1 como (-b + delta)/2*a e r2 como (-b - delta)/2*a … já que nosso delta aqui equivale a raiz de delta. Por fim, colocamos os resultados nos labels correspondentes e tornamos o arranjo horizontal deles visível.

43 Exemplo 4 - Investigar triângulos
Nosso exemplo agora é um aplicativo que realiza a avaliação de três números para indicar: (i) se formam um triângulo; (ii) sua classificação quanto aos lados (equilátero, isósceles ou escaleno); (iii) sua classificação quanto aos ângulos (acutângulo, retângulo ou obtusângulo).

44 Exemplo 4 - Investigar triângulos
Adicionamos alguns labels com informações sobre o aplicativo, 3 arranjos horizontais para receber os números a serem investigados e um botão. Além disso, 3 arranjos horizontais invisíveis inicialmente que serão responsáveis por exibir o resultado.

45

46 Exemplo 4 - Investigar triângulos
Primeiramente, adicionamos 6 variáveis: x, y, z, maiorLado, lado1 e lado2. Quando o botão é clicado, x, y e z receberão os valores contidos nos campos de texto 1, 2 e 3 respectivamente. Então o algoritmo verifica se algum dos três valores é menor ou igual a zero (já que não pode haver um triângulo com lados negativos ou nulos). Ou seja, se get global x <= 0 OR get global y <= 0 OR get global z <= 0, saberemos que os números não formam um triângulo.

47 Exemplo 4 - Investigar triângulos
Caso nenhum dos lados seja menor ou igual a zero, se a soma de um dos lados for maior que a soma dois outros dois lados (get global x > get global y + get global z OR get global y > get global x + get global z OR get global z > get global y + get global x), também não é possível que formem um triângulo. Caso contrário, eles formam um triângulo e então podemos classificá-lo. Encontramos o maior lado testando se (get global x => get global y e get global x => get global z), sabemos nesse caso então que x é o maior lado (testamos isso para os outros casos também).

48 Exemplo 4 - Investigar triângulos
Então, se o quadrado do maior lado for MAIOR que a soma dos quadrados os outros lados, o triângulo é obtusângulo. Se o quadrado do maior lado for IGUAL a soma dos quadrados os outros lados, o triângulo é retângulo. Se o quadrado do maior lado for MENOR a soma dos quadrados os outros lados, o triângulo é acutângulo. Para a classificação quanto aos lados, verificamos se todos os lados são iguais (get global x = get global y AND get global y = get global z), nesse caso, ele é equilátero. Se pelo menos dois dos lados forem iguais (get global x = get global y OR get global x = get global z OR get global y = get global z ), ele é Isósceles. Caso contrário, é escaleno.

49 ... Dúvidas; Sugestões; Ideias para projetos.