Mit App Inventor: desenvolvendo aplicativos para smartphone 1

O MIT App Inventor é um ambiente de programação visual intuitivo que permite a todos criar aplicativos totalmente funcionais para celulares Android, iPhones e tablets Android/iOS. Além disso, a ferramenta utiliza um estilo de programação em blocos que facilita a criação de aplicativos complexos e de alto impacto em ambientes de programação significativamente menores do que os ambientes tradicionais de programação.

Tendo em vista a praticidade dessa plataforma de programação, esse artigo tem como finalidade ensinar você a criar sua conta, descrever os componentes de interface disponíveis na plataforma de modo que você sairá apto a fazer sua primeira criação.

Criando sua conta no Mit App Inventor

Ao entrar no site Mit App Inventor você se deparará com a seguinte tela:

Clique no botão “Create Apps!”. Após isto, você será redirecionado para uma tela de login em que deverá escolher a forma como deseja logar para iniciar a criação dos aplicativos. Em seguida, você estará nesta tela:

Selecione a opção “Start New Project” e em seguida nomeie o aplicativo que será criado.

Após ter realizado todos esses passos, estaremos nesta tela em que iremos desenvolver o layout e a programação de nosso aplicativo:

Componentes de Interface

Os componentes de interface são aqueles que permitem ao usuário do aplicativo interagir com o programa, eles se encontram do lado esquerdo da tela do seu computador. Para colocá-los dentro do seu aplicativo basta posicionar o mouse em cima do componente que você deseja usar, apertar o botão esquerdo do mouse e arrastá-lo para dentro do celular ilustrado no meio da tela.

Button

Botão tem a capacidade de detectar cliques na tela. Muitos aspectos de sua aparência podem ser alterados, bem como se ele é clicável. Suas propriedades podem ser alteradas no Designer ou no Editor de Blocos.

CheckBox

O componente pode detectar toques do usuário e podem alterar seu estado booleano (é um tipo de dado primitivo que possui dois valores, que podem ser considerados como 0 ou 1, falso ou verdadeiro.) em resposta.
Um componente levanta um evento quando o usuário o toca. Existem muitas propriedades que afetam sua aparência que podem ser definidas no Designer ou Editor de Blocos.

DatePicker

Um botão que, quando clicado, lança uma caixa de diálogo pop-up para permitir que o usuário selecione uma data no Calendário Gregoriano. A data e a hora são manipuladas usando métodos no componente Relógio.

Image

Componente para exibir imagens e animações básicas. A imagem a ser exibida e outros aspectos da aparência da Imagem podem ser especificadas no Designer ou no Editor de Blocos.

Label

São componentes usados para mostrar texto. A Label exibe o texto especificado pela propriedade. Todas as propriedades podem ser definidas no Designer ou Editor de Blocos, que controlam a aparência e colocação do texto.

ListPicker

Um botão que, quando clicado, exibe uma lista de textos para o usuário escolher entre. Os textos podem ser especificados através do Designer ou Editor de Blocos definindo a propriedade ElementsFromString para sua concatenação separada por strings (por exemplo) ou definindo a propriedade Elements para uma lista no editor Blocos.
Definindo a propriedade ShowFilterBar para, tornará a lista pesquisável. Outras propriedades afetam a aparência do botão (TextAlignment, BackgroundColor, etc.) e se ele pode ser clicado (Ativado).

ListView

Este é um componente que exibe uma lista de elementos de texto e/ou imagens na tela para o usuário selecionar. Listas simples de strings podem ser definidas usando a propriedade ElementsFromString (do mesmo modo que ListPicker). Listas mais complexas de elementos contendo várias strings e/ou imagens podem ser criadas usando as propriedades ListData e ListViewLayout. Aviso: Este componente não funcionará corretamente em telas que são roláveis se sua altura estiver definida para preencher a tela completamente.

Notifier

O componente Notifier exibe mensagens de alerta e cria entradas de log do Android através de uma variedade de métodos.

PasswordTextBox

Permite que os usuários digitem senhas em um componente de caixa de texto de senha, que oculta o texto digitado nele. Este componente é bem similar ao TextBox comum, contudo, não exibe os caracteres que o usuário digitou.
Em geral, este componente é utilizado junto com um Button para que uma ação seja executada ao finalizar a digitação do texto.

Slider

O slider é uma barra deslizante em que o usuário pode alterar os valores de seleção do polegar de controle. À medida que o polegar deslizante é arrastado, ele acionará o evento PositionChanged, relatando a posição do polegar. A posição relatada do polegar pode ser usada para atualizar dinamicamente outro atributo componente, como o FontSize de uma Label ou o Raio de um.SliderTextBoxBall
O componente possui valores padrão que podem facilmente serem alterados com base nas suas necessidades. Os valores são os seguintes:
MinValue = 10
MaxValue = 50
Posição do Polegar = 30

Spinner

Exibe uma caixa de diálogo com uma lista de elementos. Pode-se definir a propriedade ElementsFromString em uma lista separada de címula de valores (por exemplo) ou definindo a propriedade Elements em uma lista no Editor de Blocos.

Switch

O componente pode detectar toques do usuário e podem alterar seu estado booleano em resposta. Sua estrutura de programação é similar a CheckBox, tendo de diferença apenas sua aparência. Os switches possuem dois estados: on (verdadeiro) e off (falso).

TextBox

Caixa de texto que permite que os usuários digitem o que desejarem. A propriedade MultiLine determina se o texto pode ter mais de uma linha. Para uma caixa de texto de uma única linha, o teclado fechará automaticamente quando o usuário pressionar a tecla Done. Para fechar o teclado para caixas de texto multiline, o aplicativo deve usar o método HideKeyboard. A propriedade NumbersOnly restringe o teclado a aceitar apenas entrada numérica. O componente possui outras propriedades que afetam o aparecimento da caixa de texto (TextAlignment, BackgroundColor, etc.) e se ela pode ser usada (Habilitada). As caixas de texto geralmente são usadas com o componente Botão, com o usuário clicando nele quando a entrada de texto estiver concluída.

TimePicker

Um botão que, quando clicado, abre uma caixa de diálogo para permitir que o usuário selecionar uma hora (Obs: A data e a hora são manipuladas usando métodos no componente Relógio).

WebViewer

Componente para visualização de páginas da Web. O HomeUrl pode ser especificado no Designer ou no Editor de Blocos. A exibição pode ser definida para seguir links quando eles são grampeados, e os usuários podem preencher formulários da Web.
É válido destacar que este não é um navegador completo. Por exemplo, pressionar a “tecla de voltar” do aparelho celular sairá do aplicativo, em vez de voltar ao histórico do navegador.
Você pode usar a propriedade WebViewString para fazer a comunicação entre seu aplicativo e código Javascript em execução na página.

Criando seu primeiro aplicativo no Mit App Inventor

Neste momento, você já conhece todos os componentes de interface disponíveis na plataforma Mit App Inventor. Sendo assim, separamos um modelo de aplicativo para demonstrar como colocar seus novos conhecimentos em prática.

Primeiramente coloque 3 botões no celular ilustrado no centro da tela do seu computador:

Neste momento, iremos alterar as propriedades de cada botão. Selecione o primeiro botão, você notará que aparece a seguinte tabela no lado direito da tela:

Iremos alterar estes valores com base no que desejamos.

Repare que realizamos mudanças nas propriedades do botão conforme o design que nós queríamos, faça o mesmo com os três botões do seu aplicativo. Crie o design que mais lhe agrada. Mas utilize o seguinte texto nos botões 1, 2 e 3 respectivamente: “Mudar Texto”, “Vibrar” e “Abrir outra tela”, pois essas são as três funções que lhe ensinaremos a fazer neste artigo.

Após fazer as alterações nas propriedades dos botões, iremos alterar os nomes de cada um deles, para facilitar no entendimento da programação. Vá na aba “Components” e selecione o “Button1”, clique em “Rename” e digite “Mudar Texto” na caixa “New name”.

Faça o mesmo com os outros 2 botões, renomeie com os nomes que colocamos nas propriedades deles.

Agora, daremos início a programação em blocos do nosso aplicativo. No canto superior direito, selecione a opção “Blocks” e a seguinte tela aparecerá:

Para voltar para a tela anterior, basta clicar na opção “Designer” no canto superior direito da tela.

No lado esquerdo clique no nome do nosso botão “Mudar Texto”.

Agora, aparecerão vários blocos que você pode selecionar para configurar a ação desse botão.

Arraste o primeiro bloco que está escrito: “When Mudar_Texto click do” para o meio da tela. Clique novamente nas opções do botão “Mudar Texto” e desça os blocos que apareceram até achar o seguinte bloco:

Agora, encaixe-o com o bloco que já havíamos escolhido anteriormente.

Agora, iremos pegar um bloco de texto, na aba “Blocks” clique em “Text”.

Pegue o primeiro bloco e arraste-o até os que havíamos montado, você perceberá que programar nesta plataforma é como montar um quebra-cabeça.

Digite no quadrado rosa o que você deseja que apareça no texto do botão.

Agora, iremos configurar o segundo Botão utilizando a mesma lógica do primeiro:

Voltaremos agora na aba “Designer” para adicionar um componente de som em nosso App. Do lado esquerdo, digite a palavra “Sound” no campo de pesquisa da paleta de componentes:

Selecione o terceiro componente que apareceu, arraste-o e solte na tela do celular, ele é um componente invisível. Agora, vamos voltar para a tela “Blocks”. Do mesmo modo que pegamos um bloco para configurar os botões, pegaremos no componente Sound.

Arraste o bloco “Call Sound1 Vibrate Millisecs” e conecte-o com o bloco do botão de Vibrar que havíamos colocado no meio da tela.

Por fim, adicionaremos a quantidade de tempo que o celular ficará vibrando. Vá na categoria “Math” no canto esquerdo e selecione o quadrado azul que possui apenas um “0” escrito. Arraste e conecte no bloco acima.

Como o componente Sound funciona em milissegundos, 1 segundo é equivalente a 1000 milissegundos. Sendo assim, vamos configurá-lo para vibrar por 3 segundos.

Agora, faremos o terceiro botão. Deste modo, repetiremos o primeiro passo dos outros dois botões.

Vá até a categoria “Control” e encontre o bloco “Open another screen… ScreenName:”, conecte-o com o bloco do botão “Abrir outra tela”.

Para abrir outra tela, precisamos criar uma tela segundária. Para isto, clique em “Add screen” no canto superior da tela. Adicione o nome da segunda tela e clique em “ok”.

Para voltar na tela principal, vá no canto superior da tela e clique no nome da segunda Tela e selecione “Screen1”.

Volte no Blocks da tela 1 e vá até o último bloco que nós criamos. Altere a opção de tela que está escolhida e selecione “SegundaTela”

Pronto, neste momento, terminamos nosso aplicativo. Para baixa-lo em seu celular vá no canto superior e clique em “Build” 🡪 “Android App (.apk)”

Espere-o compilar e escaneie o QRcode com seu smartphone, Talvez seja necessário que você altere as permissões do seu celular para que ele consiga instalar o programa. Clique nos botões e veja a mágica acontecer. Parabéns, você criou seu primeiro aplicativo! Aproveite e use sua criatividade como desejar. Siga o Cheetah E-Racing nas redes sociais e fique ligado para nossos novos posts! Até a próxima!


Esse conteúdo é resultado da parceria da MakerHero com a Cheetah E-Racing. Curtiu o conteúdo? Então deixe seu comentário abaixo! E não esqueça de acompanhar a Cheetah E-Racing nas redes sociais.

Faça seu comentário

Acesse sua conta e participe

Um Comentário

  1. Excelente conteúdo.