App Inventor: Introducao: mudanças entre as edições
De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
| (46 revisões intermediárias por 2 usuários não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
= | =Introdução ao App Inventor= | ||
O '''App Inventor'''<ref>http://appinventor.mit.edu/explore/</ref> é um '''ambiente de programação''', desenvolvido no '''MIT''', que permite a qualquer pessoa desenvolver aplicativos para ''smartphones'' e ''tablets''. | O '''App Inventor'''<ref>http://appinventor.mit.edu/explore/</ref> é um '''ambiente de programação''', desenvolvido no '''MIT''', que permite a qualquer pessoa desenvolver aplicativos para ''smartphones'' e ''tablets''. | ||
== | ==Acessando o ambiente de programação do App Inventor== | ||
A programação utilizando o App Inventor é realizada de forma '''''online''''' a partir do link [http://ai2.appinventor.mit.edu '''App Inventor'''] e necessita que o usuário realize um cadastro com uma conta. | |||
A programação utilizando o '''App Inventor''' é realizada de forma '''''online''''' a partir do link [http://ai2.appinventor.mit.edu '''App Inventor'''] e necessita que o usuário realize um cadastro com uma '''conta''' de e-mail do '''gmail'''. | |||
Uma vez iniciado um '''novo projeto''', o '''ambiente de programação''' do '''App Inventor''' apresenta duas área de trabalho: | Uma vez iniciado um '''novo projeto''', o '''ambiente de programação''' do '''App Inventor''' apresenta duas área de trabalho: | ||
*'''Designer''': utilizada para projetar a '''interface do aplicativo''', e permite incluir elementos como a '''tela de fundo''', '''botões''', '''caixas de seleção''', '''legendas''' etc; | *'''Designer''': utilizada para projetar a '''interface do aplicativo''', e permite incluir elementos como a '''tela de fundo''', '''botões''', '''caixas de seleção''', '''legendas''' etc; | ||
*'''Blocos''': utilizada para construir a lógica de '''programação do sistema''', podendo incluir '''estruturas de controle''', '''funções lógicas e matemáticas''' e outras. | *'''Blocos''': utilizada para construir a lógica de '''programação do sistema''', podendo incluir '''estruturas de controle''', '''funções lógicas e matemáticas''' e outras. | ||
==Acessando a aplicação desenvolvida no ''smartphone''== | |||
Para '''testar''' ou '''instalar''' uma aplicação desenvolvida com o '''App Inventor''' em um '''''smartphone''''' é necessário instalar o aplicativo '''MIT AI2 Companion''' disponível no '''Google Play Store''' para dispositivos '''Android''' (também disponível para '''iOS'''). | |||
;Teste de uma aplicação: No '''ambiente de programação''' pode-se utilizar a opção '''Conectar/Assistente AI''', a qual vai gerar um '''QR code''' que deve ser lido pelo aplicativo '''MIT AI2 Companion'''. | |||
;Instalação de uma aplicação: No '''ambiente de programação''' deve-se utilizar a opção '''Compilar''', a qual vai gerar um '''QR code''' que deve ser lido pelo aplicativo '''MIT AI2 Companion'''. | |||
:A opção de '''Compilar''' também permite gerar um arquivo com a extensão .apk para posteriormente instalada no ''smartphone''. | |||
==Exemplo de aplicação== | |||
;[https://appinventor.mit.edu/explore/ai2/hello-codi.html Hello Codi]: Vamos utilizar como exemplo a aplicação '''Hello Codi''', apresentada nos tutoriais da '''App Inventor'''. | |||
Primeiro devemos configurar o '''Design''' da tela, depois devemos programar os '''Blocos''' de execução ao aplicativo. | |||
;Passo a passo: | |||
#Baixar os '''arquivos auxiliares''' disponíveis na página [https://appinventor.mit.edu/explore/ai2/hello-codi.html Hello Codi]: | |||
#*Figura: codi.jpg (Clique botão direito e salve); | |||
#*Som: Bee-Sound.mp3 (Clique botão direito e salve). | |||
#Na tele '''Designer''' do App Inventor, adicione os componentes: | |||
#*Botão; | |||
#*Legenda. | |||
#Configuração do '''botão''': | |||
#*Apague o texto da legenda do botão; | |||
#*Escolha como imagem para o botão a figura codi.jpg. | |||
#Configuração da '''legenda''': | |||
#*Escreve na legenda "Clique na abelhinha". | |||
#Inclusão do '''som''', que é um componente não visível: | |||
#*Incluir o arquivo com o som Bee-Sound.mp3. | |||
#Na tela '''Blocos''' do App Inventor, vamos programar ações para os componentes: | |||
#*Quando Botão.clique fazer; | |||
#*Tocar som. | |||
#Testar o aplicativo através opção '''Conectar/Assistente AI''' e utilizar o '''QR code''' para ler pelo aplicativo '''MIT AI2 Companion''' no celular Android. | |||
==Referências== | ==Referências== | ||
| Linha 14: | Linha 48: | ||
---- | ---- | ||
[[Usuário:Evandro.cantu|Evandro.cantu]] ([[Usuário Discussão:Evandro.cantu|discussão]]) 20h23min de 6 de novembro de 2023 (UTC) | |||
---- | ---- | ||
[[Categoria:App Inventor]] | [[Categoria:App Inventor]] [[Categoria:LabMaker]] [[Categoria:Informática Aplicada ao Ensino de Física]] | ||
Edição atual tal como às 17h39min de 7 de novembro de 2023
Introdução ao App Inventor
O App Inventor[1] é um ambiente de programação, desenvolvido no MIT, que permite a qualquer pessoa desenvolver aplicativos para smartphones e tablets.
Acessando o ambiente de programação do App Inventor
A programação utilizando o App Inventor é realizada de forma online a partir do link App Inventor e necessita que o usuário realize um cadastro com uma conta de e-mail do gmail.
Uma vez iniciado um novo projeto, o ambiente de programação do App Inventor apresenta duas área de trabalho:
- Designer: utilizada para projetar a interface do aplicativo, e permite incluir elementos como a tela de fundo, botões, caixas de seleção, legendas etc;
- Blocos: utilizada para construir a lógica de programação do sistema, podendo incluir estruturas de controle, funções lógicas e matemáticas e outras.
Acessando a aplicação desenvolvida no smartphone
Para testar ou instalar uma aplicação desenvolvida com o App Inventor em um smartphone é necessário instalar o aplicativo MIT AI2 Companion disponível no Google Play Store para dispositivos Android (também disponível para iOS).
- Teste de uma aplicação
- No ambiente de programação pode-se utilizar a opção Conectar/Assistente AI, a qual vai gerar um QR code que deve ser lido pelo aplicativo MIT AI2 Companion.
- Instalação de uma aplicação
- No ambiente de programação deve-se utilizar a opção Compilar, a qual vai gerar um QR code que deve ser lido pelo aplicativo MIT AI2 Companion.
- A opção de Compilar também permite gerar um arquivo com a extensão .apk para posteriormente instalada no smartphone.
Exemplo de aplicação
- Hello Codi
- Vamos utilizar como exemplo a aplicação Hello Codi, apresentada nos tutoriais da App Inventor.
Primeiro devemos configurar o Design da tela, depois devemos programar os Blocos de execução ao aplicativo.
- Passo a passo
- Baixar os arquivos auxiliares disponíveis na página Hello Codi:
- Figura: codi.jpg (Clique botão direito e salve);
- Som: Bee-Sound.mp3 (Clique botão direito e salve).
- Na tele Designer do App Inventor, adicione os componentes:
- Botão;
- Legenda.
- Configuração do botão:
- Apague o texto da legenda do botão;
- Escolha como imagem para o botão a figura codi.jpg.
- Configuração da legenda:
- Escreve na legenda "Clique na abelhinha".
- Inclusão do som, que é um componente não visível:
- Incluir o arquivo com o som Bee-Sound.mp3.
- Na tela Blocos do App Inventor, vamos programar ações para os componentes:
- Quando Botão.clique fazer;
- Tocar som.
- Testar o aplicativo através opção Conectar/Assistente AI e utilizar o QR code para ler pelo aplicativo MIT AI2 Companion no celular Android.
Referências
Evandro.cantu (discussão) 20h23min de 6 de novembro de 2023 (UTC)
