Laboratório de
Ciências
Computação
APP Inventor
https://goo.gl/bx1ezT
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.
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.
https://www.netmarketshare.com/operating-system-market-share.aspx. Acesso em Setembro de 2016
Utilizaremos apenas o sistema Android neste curso
App Inventor
O App Inventor (http://appinventor.mit.edu/) é 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.
App Inventor (2)
O App Inventor (http://appinventor.mit.edu/) é uma ferramenta que funciona na nuvem que permite construir aplicativos direto pelo navegador.
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:
1. Um Dispositivo Android e uma Conexão Wifi;
2. Um Emulador Android instalado em seu computador;
3. Um Dispositivo Android e um Cabo USB para conectá-lo ao computador.
Dispositivo Android + Wifi
O modo recomendado é utilizar o aplicativo CompanionApp
(https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompan ion3) direto do Google Play Store.
1. O seu computador e seu dispositivo devem estar na mesma Rede (UFJF-Wifi ou eduroam);
2. Abra o AppInventor em um novo projeto e escolha “Conectar > Assistente AI”
3. Digite o código ou faça o scan do código QR.
Seu aplicativo deve aparecer no dispositivo!
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!
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”
Interface do AppInventor
O AppInventor possui um conjunto de janelas internas que permitem a construção do aplicativo.
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.
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.
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.
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.
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).
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.
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
Construindo seu primeiro App (2)
Arraste um botão da paleta da esquerda para a janela do aplicativo:
Construindo seu primeiro App (3)
Baixe uma imagem de um botão para seu computador:
Escolha Enviar uma Imagem para o botão em Propriedades...
Construindo seu primeiro App (4)
Ainda nas Propriedades do Botão1, apague o Texto que veio padrão.
Construindo seu primeiro App (5)
Construindo seu primeiro App (6)
Baixe um arquivo de áudio para seu computador:
Arraste um Tocador para o Visualizador e nas Propriedades altere a Fonte
para o arquivo de áudio que você baixou.
Construindo seu primeiro App (7)
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.
Construindo seu primeiro App (8)
Clique no Tocador1 para ver os blocos do mesmo. Arraste um
chamar.?.Iniciar para dentro do bloco de clique do botão.
Construindo seu primeiro App (9)
A cada atualização, o aplicativo é automaticamente enviado para seu dispositivo. O botão deve reproduzir a música ao ser tocado!
Construindo seu primeiro App (10)
O aplicativo já deve estar funcionando no seu dispositivo!
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!
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.
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.
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.
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.
