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

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
 
(36 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 1: Linha 1:
=Laboratório: Introdução  ao App Inventor=
=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''.  


==Iniciando o App Inventor==
==Acessando o ambiente de programação do App Inventor==


===Construção da aplicação===
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'''.
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 pessoal'''.


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:
Linha 12: Linha 11:
*'''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.


===Teste e instalação da aplicação no ''smartphone''===
==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'''.
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'''.
;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'''.
Linha 22: Linha 21:
==Exemplo de aplicação==
==Exemplo de aplicação==


Para iniciar o '''App Inventor''' vamos desenvolver um '''exemplo de aplicativo''' para determinar as raízes de uma '''Equação do 1o Grau''':
;[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'''.


;Tela Designer:
Primeiro devemos configurar o '''Design''' da tela, depois devemos programar os '''Blocos''' de execução ao aplicativo.


[[Arquivo:AppInventor-Designer.png|700px]]
;Passo a passo:
 
#Baixar os '''arquivos auxiliares''' disponíveis na página [https://appinventor.mit.edu/explore/ai2/hello-codi.html Hello Codi]:
:Na tela '''Designer''' foram incluídos '''Legendas''' para identificar a aplicação e o nome das váriáveis, '''CaixasDeTexto''' para entrada dos parâmetros da equação e um '''Botão''' para iniciar o cálculo da equação.
#*Figura: codi.jpg (Clique botão direito e salve);
 
#*Som: Bee-Sound.mp3 (Clique botão direito e salve).
;Tela Blocos:
#Na tele '''Designer''' do App Inventor, adicione os componentes:
 
#*Botão;
[[Arquivo:AppInventor-Blocos.png|700px]]
#*Legenda.
 
#Configuração do '''botão''':
Na tela '''Blocos''' está a lógica para extrair as raízes da '''equação do 1o grau'''. Foram criadas '''váriáveis globais''' para os parâmetros e variáveis da equação, e uma função que será executada '''quando o botão for clicado'''.
#*Apague o texto da legenda do botão;
 
#*Escolha como imagem para o botão a figura codi.jpg.
===Exercícios===
#Configuração da '''legenda''':
#Construa um aplicativo para determinar as raízes de uma '''Equação do 2o Grau'''.
#*Escreve na legenda "Clique na abelhinha".
#Construa um aplicativo para calcular a '''taxa de gordura''' de uma pessoa a partir dos dados de '''peso''' e '''altura'''.
#Inclusão do '''som''', que é um componente não visível:
 
#*Incluir o arquivo com o som Bee-Sound.mp3.
==Tarefa 4==
#Na tela '''Blocos''' do App Inventor, vamos programar ações para os componentes:
Construa um aplicativo utilizando o '''Sensor de Orientação''' e a guia '''Desenho e Animação''', utilizando uma '''Pintura''' de fundo de tela e uma '''Bola''' que funcione da seguinte forma:
#*Quando Botão.clique fazer;
*'''Quando a tela for tocada''', mover a '''Bola''' para a '''coordenada''' da tela que foi tocada;
#*Tocar som.
*'''Quando o celular for movimentado''', utilizar os '''ângulos''' relativos a '''Rolagem''' e '''Altura''' para que a '''Bola''' se movimente na tela de acordo com as '''relações matemáticas''' da física relativas a um '''Plano Inclinado'''.
#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.
 
===Sensor de Orientação===
 
O '''Sensor de Orientação''' oferece informações sobre a '''orientação tridimensional''' do dispositivo móvel através de três parâmetros:
*'''Rolagem''': Ângulo de '''inclinação lateral''' do dispositivo:
**0 graus com o dispostivo nivelado;
**Aumenta para 90 graus a medida que o lado direito é levantado;
**Diminui para -90 graus a medida que o lado esquerdo é levantado.
*'''Altura''': Ângulo de '''inclinação longitudinal''' do dispositivo:
**0 graus com o dispostivo nivelado;
**Aumenta para 90 graus a medida que o topo do dispositivo é levantado;
**Diminui para -90 graus a medida que a base do dispositivo é levantada.
*'''Azimute''': Ângulo orientação em relação ao '''norte magnético da terra''':
**'''0 graus''' quando o dispostivo aponta para o '''norte''';
**'''90 graus''' quando o dispostivo aponta para o '''leste''';
**'''180 graus''' quando o dispostivo aponta para o '''sul''';
**'''270 graus''' quando o dispostivo aponta para o '''oeste'''.


==Referências==
==Referências==
Linha 66: Linha 48:


----
----
--[[Usuário:Evandro.cantu|Evandro.cantu]] ([[Usuário Discussão:Evandro.cantu|discussão]]) 09h18min de 28 de setembro de 2017 (BRT)
[[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
  1. 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).
  2. Na tele Designer do App Inventor, adicione os componentes:
    • Botão;
    • Legenda.
  3. Configuração do botão:
    • Apague o texto da legenda do botão;
    • Escolha como imagem para o botão a figura codi.jpg.
  4. Configuração da legenda:
    • Escreve na legenda "Clique na abelhinha".
  5. Inclusão do som, que é um componente não visível:
    • Incluir o arquivo com o som Bee-Sound.mp3.
  6. Na tela Blocos do App Inventor, vamos programar ações para os componentes:
    • Quando Botão.clique fazer;
    • Tocar som.
  7. 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

  1. ↑ http://appinventor.mit.edu/explore/

Evandro.cantu (discussão) 20h23min de 6 de novembro de 2023 (UTC)

Disponível em “http://wiki.foz.ifpr.edu.br/wiki/index.php?title=App_Inventor:_Introducao&oldid=30821”