TalkToMe: Um aplicativo para iniciantes no App...

17
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 Clique no ´ ıcone laranja “Crie Aplicativos!” na barra de menu. TalkToMe: um aplicativo para iniciantes no App Inventor - 1

Transcript of TalkToMe: Um aplicativo para iniciantes no App...

TalkToMe: Um aplicativo para iniciantes no App Inventor

Este tutorial passo a passo com imagens guiara voce a fazer um aplicativo falado.

Para comecar, registre-se gratuitamente em uma conta Google: http://accounts.google.com/signup

(Se voce ja possui uma conta Google, pule essa etapa.)

Crie sua conta Google

Acesse o App Inventor no endereco: www.appinventor.mit.edu

Clique no ıcone laranja “Crie Aplicativos!” na barra de menu.

TalkToMe: um aplicativo para iniciantes no App Inventor - 1

Faca login no App Inventor com seu nome de usuario e senha do Gmail (ou Google).

Use uma conta existente do Gmail ou escolha uma conta google escolar para fazer o login emai2.appinventor.mit.edu

(Exemplo Gmail mostrado abaixo.)

Escolha uma conta Google se voce possui mais de uma. Clique em “Permitir”.

TalkToMe: um aplicativo para iniciantes no App Inventor - 2

Leia os anuncios do App Inventor, depois clique em “Continuar”.

Se voce nao tem um projeto criado no App Inventor, voce sera direcionado para a tela inicial de projetos.

Comece um novo projeto clicando no ıcone “Iniciar novo projeto”.

(Se voce ja tem projetos criados, o App Inventor abrira o projeto mais recente.)

TalkToMe: um aplicativo para iniciantes no App Inventor - 3

Nomeie o projeto “TalkToMe” (sem espacos)

Digite o nome do projeto (o uso do caractere underline e permitido, ja o uso de espacos nao) e clique Ok.

App Inventor abrira a janela do Designer.

O “Designer” e onde voce cria a interface grafica do usuario ou a aparencia do seu aplicativo. Voce escolhecomponentes como botoes, imagens e caixas de texto, e funcionalidades como texto para falar, sensores, e GPS.

TalkToMe: um aplicativo para iniciantes no App Inventor - 4

Adicione um botao

Clique e arraste a palavra “Botao” da paleta. Arraste seu mouse ate o visualizador. Solte o mouse. O novo botaosera criado no visualizador.

Faca o download da aplicacao MIT AI2 Companion da Google Play Store e instale-o em seu telefone ou tablet.

Obter o aplicativo atraves da Google Play Store epreferıvel, pois voce recebera atualizacoes automaticas.

Se o seu dispositivo movel possui um aplicativo leitor decodigo QR, voce pode digitalizar a imagem do codigo QRabaixo. Isso o levara para o aplicativo AI2 Companion na

Google Play Store, onde voce podera fazer o downloadclicando no botao ”instalar”. Em seguida, voce encontrara

o aplicativo na pasta Downloads do seu dispositivo.

ORProcure diretamente por “MIT AI2 Companion” na

Google Play Store, https://play.google.com/store e depoisinstale o aplicativo clicando em “instalar”.

TalkToMe: um aplicativo para iniciantes no App Inventor - 5

Se voce nao conseguir realizar o download do AI2 Companion da google Play Store, voce pode seguir as etapasabaixo para fazer o download direto para seu dispositivo.

NOTA: Download direto do APK (requer atualizacoes manuais).

Va para as configuracoes de seu celular, escolha “Seguranca”. Desloque a barra de rolagem para baixo e marquea janela que permite “Fontes desconhecidas”. (Isso permite que aplicativos que nao sao da Play Store sejam

instalados no seu celular.)

Digitalize esse codigo QR

OR

Digite esta URL em um navegador web do seu celular: http://appinv.us/companion.

O aplicativo AI2 Companion sera baixado automaticamente.

Independentemente do metodo que voce usar, digitalizando o codigo QR ou digitando o link diretamente nonavegador do seu dispositivo, voce vera uma mensagem semelhante a esta:

Clique “Ok”.(Nao se preocupe, o aplicativo AI2 Companion nao danificara seu dispositivo movel.)

Se voce nao possui um dispositivo movel, ainda pode utilizar o App Inventor atraves da conexao com umemulador. Visite: http://appinventor.mit.edu/explore/ai2/setup.html e siga as instrucoes da opcao 2.

TalkToMe: um aplicativo para iniciantes no App Inventor - 6

Uma vez que voce tenha instalado o aplicativo AI2 Companion, pode conectar seu projeto do App Inventorao seu celular ou tablet para testes ao vivo.

Enquanto voce esta construindo um aplicativo em seu computador, pode testa-lo conectando ao celular ou tabletAndroid.

Certifique-se de que seu computador e dispositivo movel estao conectados a mesma rede Wi-fi.

Retorne para a janela de Designer do seu computador. Clique conectar e, selecione Assistente AI no menususpenso.

Um codigo QR e um codigo de 6 caracteres aparecerao na tela do monitor do seu computador.

TalkToMe: um aplicativo para iniciantes no App Inventor - 7

Abra o aplicativo AI2 Companion no seu dispositivo clicando no ıcone do aplicativo.

Uma tela(Como a mostrada abaixo) aparecera com a opcao de digitalizar o codigo QR ou digitar o codigo de seiscaracteres.

Se voce escolher digitalizar o codigo, pressione o botao azul “scan QR code” para o scanner comecar. Escaneie ocodigo QR. Espere alguns segundos para o aplicativo abrir em seu dispositivo movel.

Se voce escolher usar o codigo, digite-o na caixa de texto branca. Depois clique no botao laranja.

Se voce nao puder se conectar por wi-fi, va para as Instrucoes de Instalacao no Website do App Inventor parasaber como se conectar com um cabo USB. http://appinventor.mit.edu/explore/ai2/setup.html

TalkToMe: um aplicativo para iniciantes no App Inventor - 8

Veja a sua aplicacao no seu dispositivo conectado

Voce sabera que sua conexao e bem-sucedida quando visualizar seu aplicativo conectado no dispositivo.

Uma vez que o nosso aplicativo so tem um botao, e isso que voce vera em seu dispositivo movel.

A medida que voce adiciona mais componentes ao projeto, seu aplicativo sera atualizado no computador e notelefone.

TalkToMe: um aplicativo para iniciantes no App Inventor - 9

Altere o texto do botao

No painel de propriedades, altere o texto do botao.

Abaixo da propriedade texto, selecione “texto do botao 1”, delete e digite “Talk To Me”.

Observe que o texto no botao do seu aplicativo tambem muda imediatamente.

TalkToMe: um aplicativo para iniciantes no App Inventor - 10

Adicione o componente TextoParaFalar ao seu aplicativo.

Va 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 nao e algo que sera exibido na interface dousuario do aplicativo. E mais uma ferramenta que esta disponıvel para o aplicativo.

TalkToMe: um aplicativo para iniciantes no App Inventor - 11

Alterar para Editor de blocos

E hora de dizer ao seu aplicativo o que fazer.

O Editor de blocos e onde voce programa o comportamento do seu aplicativo.

Clique no botao “Blocos” para passar para o Editor de blocos.

Voce frequentemente alternara entre o Designer e o Editor de blocos enquanto desenvolve aplicativos.

TalkToMe: um aplicativo para iniciantes no App Inventor - 12

O Editor de Blocos

Ha blocos que sao desenvolvidos para lidar com coisas como matematica, logica e texto. Abaixo estao os blocosque acompanham cada um dos componentes que voce adiciona ao seu aplicativo.

(Para que os blocos de um determinado componente aparecam no Editor de Blocos, primeiro adicione essecomponente ao seu aplicativo no Designer.)

TalkToMe: um aplicativo para iniciantes no App Inventor - 13

Faca um botao de evento

Selecione o componente Botao1.

Clique e segure o bloco de eventos ”quando botao.Clique”.

Arraste-o para o Visualizador e solte-o.

Este bloco sera iniciado quando o botao no seu aplicativo for clicado.

E chamado de um ”Controlador de Evento”.

TalkToMe: um aplicativo para iniciantes no App Inventor - 14

Programando uma acao 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 fara o telefone falar. Porque esta dentro do botao. Clique. Ele sera executado quando o botaodo seu aplicativo for clicado.

TalkToMe: um aplicativo para iniciantes no App Inventor - 15

Coloque uma mensagem ligada ao bloco TextoParaFalar.falar

Agora voce 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 botao for clicado.

Clique no bloco de texto e digite “Parabens! voce esta fazendo seu primeiro aplicativo”.

(Sinta-se livre para usar qualquer frase que voce queira.)

TalkToMe: um aplicativo para iniciantes no App Inventor - 16

Agora teste-o!

Va para o seu dispositivo conectado e clique no botao.

Certifique-se de que seu volume esta alto! Voce deve ouvir o telefone falar a frase em voz alta.

Isso funciona mesmo com o emulador.

Proximo passo: TalkToMe Part 2

Voce vai incrementar o aplicativo para responder quando ele for sacudido e deixar usuarios inserirem seu propriotexto.

Bom trabalho!

TalkToMe: um aplicativo para iniciantes no App Inventor - 17