App Inventor 2 é uma plataforma que nos permite permite desenvolver aplicativos de software para Android, ésta es una creación de Google Labs, aquí podremos ir visualizando con distintos tipos de herramientas básicas los proyectos en los que estamos trabajando, una de las grandes ventajas que trae el App Inventor 2 es que el usuario puede ir enlazando una serie de bloques para crear a aplicação. Este sistema é completamente grátis e facilmente baixado de seu próprio site. Os aplicativos que podemos criar no App Inventor são um tanto limitados por sua simplicidade, embora aqui também possamos gastar muito tempo desenvolvendo aplicativos infinitos para dispositivos Android básicos.
Com o Google App Inventor, foi demonstrada uma grande simplicidade de uso que facilitou o surgimento de um grande número de novos aplicativos; Hoje em dia existem muitos usuários que desenvolvem aplicativos no centro de distribuição de aplicativos Android graças a isso.
O que o App Inventor 2 nos permite fazer?Crie aplicativos para dispositivos que possuem um sistema Android usando um navegador da web e um telefone ou emulador conectado. Os servidores do App Inventor armazenam seu trabalho e acompanham seus projetos.
É uma ferramenta de desenvolvimento visual muito fácil de usar, portanto, muitos dos usuários dessa ferramenta não são puramente programadores.
Com o que construímos nossos aplicativos no App Inventor 2?App Inventor Designer é o aplicativo utilizado para selecionar os componentes do App Inventor, ele nos oferece uma paleta que contém um grande número de ferramentas com as quais você pode trabalhar com grande simplicidade.
O App Inventor Blocks Editor nos permite vincular os diferentes tipos de blocos com os quais podemos definir as funções do que projetamos em nossa aplicação. Uma das vantagens é a forma simples e visual de mostrar o trabalho que estamos fazendo em forma de quebra-cabeça.
É fácil construir aplicativos com o App Inventor 2?Os diversos aplicativos que aparecem ao longo do tempo nos dispositivos Android nos mostram que existe uma abundância de aplicativos com os quais podemos trabalhar, sejam eles básicos ou complicados. O aplicativo Inventor 2 nos permite trabalhar com uma simplicidade que significa que você também não precisa ser um programador para trabalhar em um ambiente de grande simplicidade. trabalhando com uma paleta de ferramentas ou um conjunto de blocos que podemos manipular praticamente como um jogo de quebra-cabeça. Além de tudo isso, após a conclusão de seu projeto, você pode empacotar seu aplicativo e produzir um aplicativo separado para instalar.
Outra vantagem que oferece é que você não precisa necessariamente ter um telefone com sistema operacional Android, já que na página do App Inventor você pode baixar um software chamado aiStarter que permitirá emulá-lo do seu PC.
Como acessar o App Inventor 2?Para acessar, a primeira coisa que você deve fazer é se cadastrar no App Inventor, usando sua conta do Gmail. É importante saber que este processo é totalmente gratuito.
Requisitos de sistema, dispositivo ou navegador
Sistemas operacionais
- Macintosh: Mac OS X 10.5 ou superior.
- Windows: Windows XP, Windows Vista, Windows 7
- GNU / Linux: Ubuntu 8 ou superior, Debian 5 ou superior
Navegadores
- Mozilla Firefox 3.6 ou superior
- Apple Safari 5.0 ou superior
- Google Chrome 4.0 ou superior
- Microsoft Internet Explorer não oferece suporte para isso
Telefones e tablets
- Sistema operacional Android 2.3 ("Gingerbread") ou superior
1. Instalando o App Inventor 2
Em primeiro lugar, devemos saber que O aplicativo Inventor 2 permite que você projete e edite em blocos como já mencionamos e tudo isso funciona no seu navegador. Mas para testar no que estamos trabalhando (teste ao vivo), temos três opções enquanto construímos nosso aplicativo:
Opção 1O mais recomendado pela página appinventor é se você tem um dispositivo que usa android e você tem uma conexão de internet sem fio (WiFi), podemos trabalhar apenas instalando o aplicativo App Inventor em nosso dispositivo Android.
opção 2A segunda opção é instale o software em nosso computador para poder usar o emulador do Android e testar nossos aplicativos enquanto os construímos.
Opção 3Nesta opção, é a mais complicada e incômoda; Se nosso sistema operacional for Windows e tivermos um dispositivo Android, mas não tivermos uma rede sem fio (WiFi), podemos instale o software em nosso computador e conecte nosso dispositivo Android via USB. Na página podemos ver como esta opção é utilizada como último recurso devido à sua óbvia complexidade.
Assim que conhecermos as diferentes opções que temos ao instalar o App Inventor 2, explicarei passo a passo como realizar cada uma dessas opções:
Opção 1: Conectando o App Inventor 2 ao seu dispositivo Android via conexão sem fio (WiFi)
Passo 1
Baixe e instale o aplicativo MIT AI2 Companion em seu dispositivo Android. Nesta opção, você só teria que procurar em seu dispositivo Android o aplicativo “MIT AI2 Companion” da PlayStore, baixá-lo e instalá-lo ou você também pode baixá-lo diretamente do arquivo APK. O mais aconselhável é baixá-lo da PlayStore, pois se baixarmos o arquivo APK teremos que habilitar na configuração do nosso dispositivo Android a opção de permitir a instalação de aplicativos de fontes desconhecidas. Esta opção pode ser encontrada em versões do Android anteriores a 4.0, para isso vamos Configurações> Aplicativos e marque a caixa " Fontes desconhecidas". Para dispositivos com Android 4.0 ou superior, você deve ir para Configurações> Segurança ou Configurações> Segurança e bloqueio de telae selecione o "Fontes desconhecidas".
Deixo aqui os respectivos códigos QR para baixá-los da Playstore ou diretamente como um arquivo APK, se você precisar de um scanner QR, podemos procurá-lo na Playstore.
Loja de jogos
Arquivo APK
ObservaçãoLeve em consideração que se o baixarmos da PlayStore ele será atualizado automaticamente e se usarmos a opção de baixá-lo diretamente, teremos que atualizá-lo manualmente.
Passo 2
Conecte seu PC à mesma rede WiFi do seu dispositivo Android. O App Inventor mostrará o aplicativo que você está construindo automaticamente, apenas se o App Inventor estiver sendo executado no seu computador e se o Companion estiver sendo executado no seu dispositivo Android e estes 2 estiverem conectados à mesma rede Wi-Fi.
etapa 3
Como conectar o projeto em que estamos trabalhando ao nosso dispositivo Android. Vamos para a página do App Inventor e abrimos o projeto com o qual vamos trabalhar, escolhemos "Connect" e "Al Companion" no menu principal.
Ele nos mostrará um diálogo com um código QR, procuramos nosso dispositivo, executamos o aplicativo MIT App Companion e depois clicamos no botão "Leia o código QR" e verificamos o código:
Depois de esperar alguns segundos, poderemos ver o projeto em que estamos trabalhando, e ele será atualizado de acordo com as modificações que estamos fazendo nele.
Opção 2 e 3: Instale o App Inventor em nosso computador com sistema operacional janelas
Aqui, a instalação é a mesma para os dois casos.
Passo 1
Primeiro o que devemos fazer é baixar o instalador MIT_App_Inventor_Tools_2.3.0_win_setup.exe Podemos fazer isso acessando o seguinte link. Depois de baixar o instalador, nós o executamos.
Esta janela aparecerá, clicaremos em Próximo>.
Então, aceitaremos o contrato de licença clicando em eu concordo.
Passo 2
Nós escolhemos se queremos instalar o programa apenas para um usuário ou para todos os usuários e clicamos em Próximo>.
Nós escolhemos os componentes que queremos instalar e clicamos Próximo>.
Nós escolhemos onde vamos instalá-lo e clicamos Próximo>.
etapa 3
Escolhemos a pasta de início e pressionamos Instalar.
Esperamos alguns segundos para que você instale o MIT App Inventor Tools 2.3.0.
Após a conclusão do processo de instalação, podemos clicar Terminar e com isso teremos finalizado a instalação.
Passo 4
sim deixamos a opção Iniciar ferramenta aiStarter agora selecionada Deverá aparecer uma janela aiStarter onde indicará na primeira linha o sistema operativo onde estamos a trabalhar, na segunda linha onde se encontra a pasta onde está instalado, na terceira linha o servidor onde está a correr, na quarta linha é encontrar o endereço IP onde o aplicativo está ativo. Para fechar a execução do aiStarter, pressione Ctrl + C.
ObservaçãoO aiStarter deve ser executado sempre que formos trabalhar com o App Inventor 2. Se não estivermos usando a conexão de rede sem fio WiFi, o ícone aiStarter deve aparecer na área de trabalho após a instalação.
2. Executando o App Inventor 2
Primeiro passo
Em primeiro lugar, devemos iniciar o aiStarter clicando no ícone que está localizado na área de trabalho.
Isso iniciará a janela aiStarter.
Segundo passo
Depois de iniciar o aiStarter, vamos para a página appinventory e clicamos em Create apps!
Ele solicitará que você acesse sua conta do Gmail. Depois disso, ele vai nos pedir as permissões para acessar nossa conta, aqui nós selecionamos Deixar. Em seguida, ele nos mostrará os termos de serviço. Aceitamos os termos, então ele nos perguntará se queremos preencher uma pesquisa, e então ele nos dará as boas-vindas. Nós clicamos em Prosseguir.
Se quisermos, para tornar tudo mais fácil para nós, podemos selecionar o idioma antes de começar a fazer nossa primeira conexão.
Terceiro passo
Agora vamos iniciar um novo projeto.
Damos um nome a este novo projeto, no meu caso darei Test_1 e aceitamos.
Ele nos levará automaticamente ao projeto que acabamos de criar e nos mostrará as ferramentas e o que vamos usar.
Quarto passo
Agora, como vamos executar o emulador, farei apenas um aplicativo simples que mostre um Label com o típico “Hello world”, para isso arrastamos um rótulo da paleta e alteramos o texto que ele contém para Hello world.
Vamos usar o emulador, para isso vamos Conectar> Emulador.
Ele se conectará e nos dirá para aguardar alguns segundos, seguiremos as instruções que ele nos fornecerá a seguir.
Como é a primeira vez que usamos o emulador, ele nos pedirá para atualizá-lo e nos mostrará no emulador se queremos instalar a atualização.
Uma vez instalado, clicamos em "concluído" e reinicie a conexão como dizem as instruções.
Assim que a conexão for reiniciada, iniciamos o emulador e ele deve nos mostrar o projeto em que estamos trabalhando, como você pode ver na imagem a seguir.
Depois de realizar todas essas etapas, teremos o emulador atualizado e todos os projetos em que estamos trabalhando poderão ser vistos na tela do emulador.
ObservaçãoRecomendo que antes de iniciar qualquer projeto nos asseguremos de que iniciamos o aiStarter para que não tenhamos problemas ao testar nossas aplicações e seja necessário que esteja rodando antes de executar o emulador na página.
3. Primeira aplicação no App Inventor 2
Agora que temos tudo instalado e funcionando, podemos começar a trabalhar nisso. App Inventor, então eu vou te mostrar como desenvolver alguns aplicativos simples isso nos ajudará a ter uma base para desenvolver nossos próprios aplicativos Android.
Passo 1
Começaremos desenvolvendo uma calculadora básica, que nos permite realizar funções matemáticas típicas, como somar, subtrair, multiplicar e dividir.
Para isso, primeiro vamos Projetos> Meus projetos. Aí clicamos em iniciar um novo projeto, chamarei este projeto Calculadora_Basica e pressione o botão OK.
Isso nos redirecionará para a área de design onde trabalharemos com nosso projeto, a primeira coisa que faremos é adicionar quatro botões arrastando-os da paleta que está localizada à nossa esquerda.
Passo 2
Agora vamos mudar o texto de cada um dos botões selecionando os componentes um a um e modificando o texto em suas propriedades. Como podemos ver, existem as propriedades padrão que o botão que selecionamos possui, aqui podemos modificar como queremos que o botão seja. Por enquanto, vou apenas me limitar a mudar o texto.
Depois de modificar o texto, imediatamente você deve notar as mudanças no botão que estamos modificando no visualizador.
etapa 3
Agora, por razões estéticas, vou usar um arranjo horizontal para organizar os botões que modificamos anteriormente. Encontraremos isso na paleta clicando no layout e arrastando o layout horizontal em direção ao visualizador.
Passo 4
Agora vamos adicionar nossos botões um por um em nosso layout horizontal. Devíamos ter algo assim:
Etapa 5
Em seguida, adicionamos 2 caixas de texto que é onde vamos apresentar os números necessários para realizar nossas operações básicas de adição, subtração, multiplicação e divisão. Além disso, também adicionaremos um rótulo para mostrar o resultado de nossas operações. O rótulo e os campos de texto podem ser encontrados na paleta clicando na interface do usuário. No final, devemos ter algo semelhante à seguinte imagem:
Etapa 6
Vamos a "Blocos”Para começar a configurar as funções dos nossos botões. Para ir basta clicar nos blocos, no lado direito da tela ao lado do botão Designer.
Ele deve nos direcionar para o visualizador de blocos, onde podemos ver os diferentes tipos de blocos que podemos usar em nossos aplicativos. Por enquanto, só precisaremos usar os botões integrados para definir que função eles executam quando cada um deles é pressionado.
Para definir a ação que cada botão realiza, primeiro vamos começar com o botão1, que no meu caso mudei o texto para o sinal de mais (+) e quero definir que cada vez que for pressionado, ele adiciona os valores que estão em campo de texto 1 e campo de texto 2, para isso começamos clicando no botão1, então selecionamos "quando o botão1 clicar em executar" e arrastamos para o nosso visualizador, deve ficar assim:
Etapa 7
Em seguida, adicionamos Label1, clicamos em Label1 e arrastamos “colocar texto Label1 como” para o visualizador e vinculamos para “executar”. Deve ser assim.
Etapa 8
Agora vamos adicionar a função de adição, para isso clicamos em Math e arrastamos para retornar a soma de dois números e vinculamos ao bloco de rótulo.
Mais tarde Adicionaremos os campos de texto selecionando TextField1, procuramos por "TextField1 Text" e o arrastamos para vinculá-lo ao bloco de soma. O primeiro espaço para o campo de texto1 e o segundo espaço para o campo de texto2. Fazer o mesmo processo deve ser algo como a seguinte imagem:
Etapa 9
Agora repetimos os processos que realizamos com cada botão mudando apenas as operações matemáticas de cada um, no final devemos ter algo assim:
E finalmente é hora de testar nosso aplicativo, no meu caso irei testá-lo no emulador para PC. Verificamos como estava a nossa aplicação, podemos testar se cada um dos botões funciona e se cumprem as funções atribuídas. Na imagem a seguir você pode ver uma divisão.
Com isso concluímos nosso primeiro aplicativo móvel simples com operações matemáticas.
4. Segundo aplicativo no App Inventor 2
Agora vamos fazer um aplicativo que nos permite salvar e visualizar dados de um banco de dados tyniDB. TyniDB é um banco de dados de documentos leve, escrito em Python puro e sem dependências externas.
Passo 1
A primeira coisa que faremos é criar um novo projeto, vamos chamá-lo de List_BD:
Passo 2
Nele vamos adicionar duas disposições horizontais; No primeiro deles adicionamos um rótulo e um campo de texto, no segundo adicionamos dois botões, devemos ter algo assim:
etapa 3
Vamos selecionar cada uma das disposições, nas propriedades modificamos a largura para caber no container. Além disso, selecionamos um rótulo e alteramos o texto para inserir os dados e nos botões chamaremos um "New Record" e o segundo "save" devem ser assim:
Passo 4
Agora vamos adicionar um visualizador de lista na parte inferior, ao qual nas propriedades selecionaremos a opção de largura que cabe no container e em altura colocaremos 300px, teremos algo assim:
Etapa 5
Vamos adicionar nosso banco de dados TinyDB encontrado em palete> armazenamento e arrastamos o TinyBD para o nosso visualizador de lista, assim:
Etapa 6
Agora vamos para os blocos e a primeira coisa que vamos fazer é adicionar uma variável global do tipo texto. Para isso, primeiro vamos blocos> incorporados> variáveis e a partir daí arrastamos "inicializar global como" e, em seguida, vamos para o texto em blocos> integrado> texto, arrastamos a string de texto e a vinculamos com "inicializar global".
Etapa 7
Vamos configurar a ação que o botão que chamamos de novo registro vai realizar, o que vai cumprir a função de colocar nossa caixa de texto em branco, para isso vamos blocos> Layout2 horizontal> Botão1 e arrastamos quando Button1 clica em nosso visualizador de bloco, então vamos para blocos> HorizontalArrangement1> TextField1, arrastamos put TextField1.Text as, vinculando-o a whenButton1.Clic e, por fim, procuramos uma string de texto e a vinculamos a "TextField1.Text as", resultando na seguinte imagem:
Etapa 8
Agora vamos configurar nosso botão Salvar para adicionar dados à nossa lista, para isso procuramos nosso botão 2 e o arrastamos para o nosso visualizador. Então nós vamos para Blocos> Lista> adicionar item para listar e onde diz lista, vinculamos a uma tomada que está em Blocos> Variáveis> Take e nós o vinculamos clicando para selecionar os dados da Lista global. Finalmente, onde o item aparece em nosso bloco para adicionar elemento à lista, colocamos um bloco de nosso TextBox1.Text, ele deve se parecer com isto:
Etapa 9
Agora vamos adicionar os valores ao nosso banco de dados, para isso a primeira coisa que devemos fazer é pesquisar em Blocos> Tela1> TinyBD, arrastamos chamada TinyBD1.SaveValue e vinculamos com nosso bloco Button2, seguido por este, no rótulo, colocamos o que vamos salvar, neste caso salvaremos apenas os nomes, para isso procuramos um bloco de texto, vinculamos em o rótulo e colocamos o Nome, então a partir disso colocamos o valor para salvar para que seja retirado da lista global como fizemos no bloco de adição de elementos.
Etapa 10
Só precisamos mostrá-lo no visualizador de lista, para isso vinculamos com o Button2, vamos Blocos> Tela1> ListViewer1 e arrastamos put ListViewer1.Elements à medida que vinculamos take List global, mostrando algo assim:
Etapa 11
Como podemos lembrar, o melhor de ter um banco de dados é que você pode fechar seu aplicativo e os dados que você salvou lá ficarão armazenados, disponíveis para quando você iniciar uma nova sessão. Para fazer isso, vamos ter certeza de que, quando a Tela1 iniciar, o banco de dados seja adicionado a uma lista novamente e reapareça no visualizador de listas.
Para fazer isso, só temos que ir para Blocos> Tela1 e arraste o bloco "when Screen1.initialize to execute" em nosso visualizador de bloco e a isso vamos vincular a variável "put" encontrada em Blocos> Integrado> Variáveis, arrastamos “colocar” e nesse bloco selecionamos Lista global para isso vamos vincular de TinyBD1 “chamar TinyBD1. GetValue ”, no rótulo adicionaremos o bloco de texto ao qual colocaremos o Nome e em Valor se o rótulo não existir criamos uma lista vazia que se encontra en Blocos> Lista> Criar uma nova lista vazia. Com isso, o que temos é que todos os dados são salvos em uma nova lista.
Para nos mostrar os dados no visualizador de lista, o que devemos fazer é vincular "when Screen1.initialize" a "Set ListView1.Elements as" que, por sua vez, está vinculado a "Take global List" como fizemos no bloco anterior.
Com isso terminamos a parte do bloco. Agora só temos que tentar usar nosso emulador. Aqui está uma captura de tela dos dados já salvos.
ObservaçãoSe der erro, só recomendo verificar os Blocos, se não houver erro nos Blocos reinicie o formulador.
Desenvolvimento de aplicativo Android Netbeans
