TalkToMe: Um aplicativo para iniciantes no App Inventor
Este tutorial passo a passo com imagens guiar´a vocˆe a fazer um aplicativo falado.
Para come¸car, registre-se gratuitamente em uma conta Google: http://accounts.google.com/signup
(Se vocˆe j´a possui uma conta Google, pule essa etapa.)
Crie sua conta Google
Acesse o App Inventor no endere¸co: www.appinventor.mit.edu
Fa¸ca login no App Inventor com seu nome de usu´ario e senha do Gmail (ou Google).
Use uma conta existente do Gmail ou escolha uma conta google escolar para fazer o login em ai2.appinventor.mit.edu
(Exemplo Gmail mostrado abaixo.)
Leia os an´uncios do App Inventor, depois clique em “Continuar”.
Se vocˆe n˜ao tem um projeto criado no App Inventor, vocˆe ser´a direcionado para a tela inicial de projetos.
Comece um novo projeto clicando no ´ıcone “Iniciar novo projeto”.
Nomeie o projeto “TalkToMe” (sem espa¸cos)
Digite o nome do projeto (o uso do caractere underline ´e permitido, j´a o uso de espa¸cos n˜ao) e clique Ok.
App Inventor abrir´a a janela do Designer.
O “Designer” ´e onde vocˆe cria a interface gr´afica do usu´ario ou a aparˆencia do seu aplicativo. Vocˆe escolhe componentes como bot˜oes, imagens e caixas de texto, e funcionalidades como texto para falar, sensores, e GPS.
Adicione um bot˜ao
Clique e arraste a palavra Bot˜ao da paleta. Arraste seu mouse at´e o visualizador. Solte o mouse. O novo bot˜ao ser´a criado no visualizador.
Fa¸ca o download da aplica¸c˜ao MIT AI2 Companion da Google Play Store e instale-o em seu telefone ou tablet.
Obter o aplicativo atrav´es da Google Play Store ´e prefer´ıvel, pois vocˆe receber´a atualiza¸c˜oes autom´aticas. Se o seu dispositivo m´ovel possui um aplicativo leitor de c´odigo QR, vocˆe pode digitalizar a imagem do c´odigo QR abaixo. Isso o levar´a para o aplicativo AI2 Companion na Google Play Store, onde vocˆe poder´a fazer o download clicando no bot˜ao ”instalar”. Em seguida, vocˆe encontrar´a
o aplicativo na pasta Downloads do seu dispositivo.
OR
Procure diretamente por “MIT AI2 Companion” na Google Play Store, https://play.google.com/store e depois
Se vocˆe n˜ao conseguir realizar o download do AI2 Companion da google Play Store, vocˆe pode seguir as etapas abaixo para fazer o download direto para seu dispositivo.
NOTA: Download direto do APK (requer atualiza¸c˜oes manuais).
V´a para as configura¸c˜oes de seu celular, escolha “Seguran¸ca”. Desloque a barra de rolagem para baixo e marque a janela que permite “Fontes desconhecidas”. (Isso permite que aplicativos que n˜ao s˜ao da Play Store sejam
instalados no seu celular.)
Digitalize esse c´odigo QR
OR
Digite esta URL em um navegador web do seu celular: http://appinv.us/companion.
O aplicativo AI2 Companion ser´a baixado automaticamente.
Independentemente do m´etodo que vocˆe usar, digitalizando o c´odigo QR ou digitando o link diretamente no navegador do seu dispositivo, vocˆe ver´a uma mensagem semelhante a esta:
Clique “Ok”.(N˜ao se preocupe, o aplicativo AI2 Companion n˜ao danificar´a seu dispositivo m´ovel.)
Se vocˆe n˜ao possui um dispositivo m´ovel, ainda pode utilizar o App Inventor atrav´es da conex˜ao com um emulador. Visite: http://appinventor.mit.edu/explore/ai2/setup.html e siga as instru¸c˜oes da op¸c˜ao 2.
Uma vez que vocˆe tenha instalado o aplicativo AI2 Companion, pode conectar seu projeto do App Inventor ao seu celular ou tablet para testes ao vivo.
Enquanto vocˆe est´a construindo um aplicativo em seu computador, pode test´a-lo conectando ao celular ou tablet Android.
Certifique-se de que seu computador e dispositivo m´ovel est˜ao conectados `a mesma rede Wi-fi
Retorne para a janela de Designer do seu computador. Clique conectar e, selecione Assistente AI no menu suspenso.
Abra o aplicativo AI2 Companion no seu dispositivo clicando no ´ıcone do aplicativo.
Uma tela(Como a mostrada abaixo) aparecer´a com a op¸c˜ao de digitalizar o c´odigo QR ou digitar o c´odigo de seis caracteres.
Se vocˆe escolher digitalizar o c´odigo, pressione o bot˜ao azul “scan QR code” para o scanner come¸car. Escaneie o c´odigo QR. Espere alguns segundos para o aplicativo abrir em seu dispositivo m´ovel.
Se vocˆe escolher usar o c´odigo, digite-o na caixa de texto branca. Depois clique no bot˜ao laranja.
Se vocˆe n˜ao puder se conectar por wi-fi, v´a para as Instru¸c˜oes de Instala¸c˜ao no Website do App Inventor para saber como se conectar com um cabo USB. http://appinventor.mit.edu/explore/ai2/setup.html
Veja a sua aplica¸c˜ao no seu dispositivo conectado
Vocˆe saber´a que sua conex˜ao ´e bem-sucedida quando visualizar seu aplicativo conectado no dispositivo.
Uma vez que o nosso aplicativo s´o tem um bot˜ao, ´e isso que vocˆe ver´a em seu dispositivo m´ovel.
`
A medida que vocˆe adiciona mais componentes ao projeto, seu aplicativo ser´a atualizado no computador e no telefone.
Altere o texto do bot˜ao
No painel de propriedades, altere o texto do bot˜ao.
Abaixo da propriedade texto, selecione texto do bot˜ao 1, delete e digite Talk To Me.
Adicione o componente TextoParaFalar ao seu aplicativo.
V´a para a gaveta M´ıdia na Paleta e arraste para fora um componente TextoParaFalar.
Arraste e solte-o no Visualizador.
Observe que ele ´e descartado em ”Componentes invis´ıveis”porque n˜ao ´e algo que ser´a exibido na interface do usu´ario do aplicativo. ´E mais uma ferramenta que est´a dispon´ıvel para o aplicativo.
Alterar para Editor de blocos
´
E hora de dizer ao seu aplicativo o que fazer.
O Editor de blocos ´e onde vocˆe programa o comportamento do seu aplicativo.
Clique no bot˜ao “Blocos” para passar para o Editor de blocos.
O Editor de Blocos
H´a blocos que s˜ao desenvolvidos para lidar com coisas como matem´atica, l´ogica e texto. Abaixo est˜ao os blocos que acompanham cada um dos componentes que vocˆe adiciona ao seu aplicativo.
(Para que os blocos de um determinado componente apare¸cam no Editor de Blocos, primeiro adicione esse componente ao seu aplicativo no Designer.)
Fa¸ca um bot˜ao de evento
Selecione o componente Bot˜ao1.
Clique e segure o bloco de eventos quando bot˜ao.Clique.
Arraste-o para o Visualizador e solte-o.
Este bloco ser´a iniciado quando o bot˜ao no seu aplicativo for clicado.
´
Programando uma a¸c˜ao TextoParaFalar
Clique no componente TextoParaFalar.
Clique e segure o bloco chamar TextoParaFalar1.Falar.
Arraste-o para o Visualizador e solte-o.
Este ´e o bloco que far´a o telefone falar. Porque est´a dentro do bot˜ao. Clique. Ele ser´a executado quando o bot˜ao do seu aplicativo for clicado.
Coloque uma mensagem ligada ao bloco TextoParaFalar.falar
Agora vocˆe precisa dizer ao bloco TextoParaFalar.falar o que falar.
Clique na gaveta ”Texto”, arraste um bloco de texto e ligue-o ao plugue com a etiqueta mensagem.
Especifique o que o seu aplicativo deve falar quando o bot˜ao for clicado.
Clique no bloco de texto e digite “Parab´ens! vocˆe est´a fazendo seu primeiro aplicativo”.
Agora teste-o!
V´a para o seu dispositivo conectado e clique no bot˜ao.
Certifique-se de que seu volume est´a alto! Vocˆe deve ouvir o telefone falar a frase em voz alta.
Isso funciona mesmo com o emulador.
Pr´oximo passo: TalkToMe Part 2
Vocˆe vai incrementar o aplicativo para responder quando ele for sacudido e deixar usu´arios inserirem seu pr´oprio texto.
