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

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
 
(14 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 2: Linha 2:


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.  
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.  
== Introdução ao App Inventor ==
App Inventor é um serviço '''gratuito''' e '''''online''''' que permite criar aplicativos móveis usando uma linguagem de programação baseada em '''blocos'''.  
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.  
É uma ferramenta que facilita a criação de aplicativos em um tempo significativamente menor do que os ambientes de programação tradicionais.  


[[Image:appInventor.png | 450 px]]
<!--[[Image:appInventor.png | 450 px]]-->


A tela do App Inventor é composta por duas seções, cada uma com uma função específica:  
A tela do App Inventor é composta por duas seções, cada uma com uma função específica:  
* Designer - construir a interface do aplicativo
* '''''Designer''''' - construir a interface do aplicativo
* Blocos - implementar a lógica de programação
* '''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.
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:
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.
:;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: você pode organizar cada um de seus objetos, montando o aplicativo como ele deve ser. Uma janela de exibição simula a tela de um smartphone com o sistema operacional Android, apresentando uma versão próxima da final ao programador, à medida que ele organiza o espaço de uso do programa. Todos os itens adicionados da “Paleta” ao “Visualizador” são apresentados na terceira coluna, chamada de Componentes.
:;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==
==Acessando o App Inventor==
Linha 26: Linha 24:
Acesse: https://appinventor.mit.edu/
Acesse: https://appinventor.mit.edu/


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


==Executando os Aplicativos==
==Executando os Aplicativos==
Linha 33: Linha 31:
* Dispositivo Android ou iOS (telefone ou tablet) e Wi-Fi
* Dispositivo Android ou iOS (telefone ou tablet) e Wi-Fi
* Dispositivo Android (telefone ou tablet) e um cabo USB
* Dispositivo Android (telefone ou tablet) e um cabo USB
* Emulador na tela
* 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.
 
----
[[Categoria:LabMaker]] [[Categoria:App Inventor]]

Edição atual tal como às 19h30min de 6 de novembro 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.


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.