App Inventor: mudanças entre as edições

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
Sem resumo de edição
Linha 32: Linha 32:
* Dispositivo Android (telefone ou tablet) e um cabo USB
* Dispositivo Android (telefone ou tablet) e um cabo USB
* Utilizando o Emulador
* Utilizando o Emulador


===MIT AI2 Companion===
===MIT AI2 Companion===
1. Em seu telefone ou tablet, abra a Google Play Store, encontre e instale o aplicativo MIT AI2 Companion. O aplicativo Companion é um aplicativo Android que permite testar os aplicativos que você constrói à medida que os cria.
1. Em seu telefone ou tablet, abra a Google Play Store, encontre e instale o aplicativo MIT AI2 Companion. O aplicativo Companion é um aplicativo Android que permite testar os aplicativos que você constrói à medida que os cria.
2. De volta ao navegador do seu computador, abra o App Inventor  
2. De volta ao navegador do seu computador, abra o App Inventor  
Linha 41: Linha 39:


===Utilizando o Emulador===
===Utilizando o Emulador===
Para usar o emulador ou conectar seu celular via USB, primeiro você precisa instalar o software do App Inventor em seu computador (isso não é necessário para a solução via WI-FI). Siga as instruções abaixo.
Para usar o emulador ou conectar seu celular via USB, primeiro você precisa instalar o software do App Inventor em seu computador (isso não é necessário para a solução via WI-FI). Siga as instruções abaixo.
1. Faça o download e instale o App Inventor de acordo com seu sistema operacional:
1. Faça o download e instale o App Inventor de acordo com seu sistema operacional:
  * Windows: http://appinv.us/aisetup_windows
  * Windows: http://appinv.us/aisetup_windows
Linha 50: Linha 46:
2. Inicie o aiStarter (somente Windows e Linux)
2. Inicie o aiStarter (somente Windows e Linux)
Este programa é o auxiliar que permite que o navegador se comunique com o emulador ou cabo USB.Em um Mac, o aiStarter será iniciado automaticamente quando você efetuar o login em sua conta e ele será executado em segundo plano.No Windows, haverá atalhos para o aiStarter a partir da Área de Trabalho e do Menu Iniciar. Se você quiser usar o emulador com o App Inventor, você precisará iniciar manualmente o aiStarter no seu computador quando fizer login.No Linux, o aiStarter estará na pasta /usr/google/commands-for-Appinventor e você precisará iniciá-lo manualmente. Você pode iniciá-lo a partir da linha de comando /usr/google/appinventor/commands-for-Appinventor/aiStarter &
Este programa é o auxiliar que permite que o navegador se comunique com o emulador ou cabo USB.Em um Mac, o aiStarter será iniciado automaticamente quando você efetuar o login em sua conta e ele será executado em segundo plano.No Windows, haverá atalhos para o aiStarter a partir da Área de Trabalho e do Menu Iniciar. Se você quiser usar o emulador com o App Inventor, você precisará iniciar manualmente o aiStarter no seu computador quando fizer login.No Linux, o aiStarter estará na pasta /usr/google/commands-for-Appinventor e você precisará iniciá-lo manualmente. Você pode iniciá-lo a partir da linha de comando /usr/google/appinventor/commands-for-Appinventor/aiStarter &
3. No menu do App Inventor, vá para o menu Conectar e clique na opção Emulador.
3. No menu do App Inventor, vá para o menu Conectar e clique na opção Emulador.
Você receberá um aviso dizendo que o emulador está se conectando e pode demorar alguns minutos,
Você receberá um aviso dizendo que o emulador está se conectando e pode demorar alguns minutos,
Linha 56: Linha 51:


===Conectando o Celular via USB===
===Conectando o Celular via USB===
Conecte seu celular Android ao computador usando o cabo USB – certifique-se de que o dispositivo se conecta como um “dispositivo de armazenamento em massa” (não “dispositivo de mídia”) e que não está montado como uma unidade no computador.
Conecte seu celular Android ao computador usando o cabo USB – certifique-se de que o dispositivo se conecta como um “dispositivo de armazenamento em massa” (não “dispositivo de mídia”) e que não está montado como uma unidade no computador.
O dispositivo irá aparecer uma tela com a mensagem: Permitir depuração USB?. A primeira vez que o conectar a um novo computador pressione OK.
O dispositivo irá aparecer uma tela com a mensagem: Permitir depuração USB?. A primeira vez que o conectar a um novo computador pressione OK.
Isso autentica o computador ao dispositivo, permitindo que o computador se comunique com ele. Você precisará fazer isso para cada computador que você deseja conectar ao dispositivo, mas apenas uma vez por computador.
Isso autentica o computador ao dispositivo, permitindo que o computador se comunique com ele. Você precisará fazer isso para cada computador que você deseja conectar ao dispositivo, mas apenas uma vez por computador.

Edição das 18h49min de 18 de outubro de 2023

MIT App Inventor

O MIT App Inventor, criado pela universidade americana Massachusetts Institute of Technology (MIT), é um ambiente de programação visual e intuitivo que permite criar aplicativos totalmente funcionais para telefones Android, iPhones e tablets Android/iOS. App Inventor é um serviço gratuito e online que permite criar aplicativos móveis usando uma linguagem de programação baseada em blocos. É uma ferramenta que facilita a criação de aplicativos em um tempo significativamente menor do que os ambientes de programação tradicionais.

Arquivo:AppInventor.png

A tela do App Inventor é composta por duas seções, cada uma com uma função específica:

  • Designer - construir a interface do aplicativo
  • Blocos - implementar a lógica de programação

O App Inventor Designer é a tela principal de um projeto, onde é feita a interface do aplicativo, inserindo e posicionado os componentes disponíveis para a construção de um programa. Ele é dividido em quatro colunas:

Paleta
Reúne todos os componentes utilizáveis num aplicativo. É dividida em seções para facilitar a localização dos componentes, dos básicos (botões, imagens e textos), mídia (vídeo e som), aos mais específicos como sensores, armazenamento em banco de dados e integração com Lego. Para utilizar um desses componentes basta clicar sobre ele e arrastar para cima da segunda coluna, chamada Visualizador.
Visualizador
Janela de exibição que simula a tela de um smartphone com o sistema operacional Android, apresentando uma versão próxima da final, à medida que o programador adiciona e organiza a tela. Todos os itens adicionados da “Paleta” ao “Visualizador” são apresentados na terceira coluna, chamada de Componentes.
Componentes
Onde ficam armazenados todos os itens adicionados, sejam eles visíveis ou não na tela do aplicativo. É possível também enviar arquivos de mídia para o servidor do App Inventor, que ficam disponíveis para serem utilizados no projeto. Clicar sobre qualquer um dos itens da lista na coluna “Componentes” permite que você possa editar seus detalhes na quarta coluna, chamada de Propriedades.
Propriedades
Ajustar as configurações dos componentes, como por exemplo definir os tamanhos e conteúdos dos textos de botões e caixas de informação, tamanho das imagens, cores de fundo e largura e altura de objetos.

Acessando o App Inventor

O acesso ao App Inventor deve ser através de um navegador da web (Chrome, Firefox, Safari).

Acesse: https://appinventor.mit.edu/

É preciso ter uma conta de e-mail do gmail (ex.: seunome@gmail.com)

Executando os Aplicativos

Os aplicativos podem ser executados de três formas:

  • Dispositivo Android ou iOS (telefone ou tablet) e Wi-Fi
  • Dispositivo Android (telefone ou tablet) e um cabo USB
  • Utilizando o Emulador

MIT AI2 Companion

1. Em seu telefone ou tablet, abra a Google Play Store, encontre e instale o aplicativo MIT AI2 Companion. O aplicativo Companion é um aplicativo Android que permite testar os aplicativos que você constrói à medida que os cria. 2. De volta ao navegador do seu computador, abra o App Inventor 3. No menu superior, clique em ‘Connect’ e ‘Connect to Companion’. Um QR Code aparecerá, utilize o MIT AI2 Companion para ler o código.

Utilizando o Emulador

Para usar o emulador ou conectar seu celular via USB, primeiro você precisa instalar o software do App Inventor em seu computador (isso não é necessário para a solução via WI-FI). Siga as instruções abaixo. 1. Faça o download e instale o App Inventor de acordo com seu sistema operacional:

* Windows: http://appinv.us/aisetup_windows
* Linux: http://appinv.us/aisetup_linux_deb
* Mac OS X: http://appinv.us/aisetup_mac

2. Inicie o aiStarter (somente Windows e Linux) Este programa é o auxiliar que permite que o navegador se comunique com o emulador ou cabo USB.Em um Mac, o aiStarter será iniciado automaticamente quando você efetuar o login em sua conta e ele será executado em segundo plano.No Windows, haverá atalhos para o aiStarter a partir da Área de Trabalho e do Menu Iniciar. Se você quiser usar o emulador com o App Inventor, você precisará iniciar manualmente o aiStarter no seu computador quando fizer login.No Linux, o aiStarter estará na pasta /usr/google/commands-for-Appinventor e você precisará iniciá-lo manualmente. Você pode iniciá-lo a partir da linha de comando /usr/google/appinventor/commands-for-Appinventor/aiStarter & 3. No menu do App Inventor, vá para o menu Conectar e clique na opção Emulador. Você receberá um aviso dizendo que o emulador está se conectando e pode demorar alguns minutos, O emulador aparecerá inicialmente com uma tela preta vazia. Aguarde até que o emulador esteja pronto, com um fundo de tela colorido.

Conectando o Celular via USB

Conecte seu celular Android ao computador usando o cabo USB – certifique-se de que o dispositivo se conecta como um “dispositivo de armazenamento em massa” (não “dispositivo de mídia”) e que não está montado como uma unidade no computador. O dispositivo irá aparecer uma tela com a mensagem: Permitir depuração USB?. A primeira vez que o conectar a um novo computador pressione OK. Isso autentica o computador ao dispositivo, permitindo que o computador se comunique com ele. Você precisará fazer isso para cada computador que você deseja conectar ao dispositivo, mas apenas uma vez por computador.