Fale Comigo (TalkToMe): Seu primeiro app no App Inventor operacional Android, sem que seja...

download Fale Comigo (TalkToMe): Seu primeiro app no App Inventor operacional Android, sem que seja necessأ،rio

If you can't read please download the document

  • date post

    16-Jul-2020
  • Category

    Documents

  • view

    0
  • download

    0

Embed Size (px)

Transcript of Fale Comigo (TalkToMe): Seu primeiro app no App Inventor operacional Android, sem que seja...

  • Definição

    É uma ferramenta desenvolvida pelo Google e, atualmente, mantida pelo Instituto de Tecnologia de

    Massachusetts (MIT); que permite a criação de aplicativos para smartphones que rodam o sistema

    operacional Android, sem que seja necessário conhecimento em programação.

    Fale Comigo (TalkToMe): Seu primeiro app no App Inventor

    - No site (appinventor.mit.edu) clica no botão laranja “Create!” (Criar) -

    Utiliza um e-mail Gmail para aceder;

    • Inicia um novo projeto (Start a new project)

    • Nomeia o projeto de “FaleComigo” (sem espaços) e clica em OK.

    Agora estás na guia Designer, onde podes trabalhar a tua app. A janela de desenho, ou simplesmente

    “designer” é onde crias a aparência do teu

    aplicativo, e especifica quais os componentes que

    irá utilizar. Podemos escolher componentes na

    Interface do Usuário como botões, imagens,

    caixas de texto e funcionalidades como sensores e

    GPS.

  • Visão geral

    Adicionar um botão

    O nosso projeto precisa de um botão. Clica e segura sobre a palavra "Button" (botão) na Palette (paleta) e

    solta o botão na janela “Viewer” (visualizador).

  • Inicia o aplicativo “AI Companion” no dispositivo

    Após baixar o app (MIT

    Ai2 Companion) no teu

    smartphone ou tablet, clica

    no ícone da app para ele

    iniciar.

    NOTA: o dispositivo e

    computador devem estar

    conectados na mesma

    rede Wi-Fi. Se não puder

    conectar-se através de

    uma rede Wi-Fi, conecte-

    se utilizando um cabo

    USB.

    Conecta a App Inventor (site) ao teu

    dispositivo e faz o teste ao vivo. Uma das

    coisas mais interessantes sobre a App

    Inventor é que tu podes ver e testar o teu

    aplicativo num dispositivo conectado,

    enquanto o estiveres a construir. Se tens um

    smartphone ou tablet com Android, segue os

    passos abaixo:

    Obtém o código de conexão do App Inventor e digitaliza ou digita-o no App Companion

    No menu Connect (conectar),

    escolhe a opção “AI Companion”.

    Vai abrir uma janela, através desta

    podes conectar-te por:

    1. Leitura do código QR,

    clicando em "Leitura código

    QR" no dispositivo (# 1) ou

    2. Digitando o código na

    janela de texto e clicando

    em "Conectar-se com o

    código" (# 2).

  • Vê o teu aplicativo no dispositivo conectado

    Irás saber se a tua conexão foi bem-sucedida quando conseguires ver a

    tua app no dispositivo conectado. Até agora a nosso app só tem um

    botão, de modo que é o que vais ver. Quando adicionares mais

    componentes para o projeto, vais ver a tua app mudar no teu

    smartphone.

    Alterar o texto do botão

    No painel de Properties (Propriedades),

    altera o texto do teu Button (botão).

    Seleciona o texto "Texto para Botão 1",

    apaga-o e digita "Fale Comigo" (ou o que

    preferires). Observa que o texto do botão

    muda no teu aplicativo imediatamente.

    Adicionar um componente “Text-to-Speech” (texto de discurso) ao seu app

    No menu Media (mídia), clica e arrasta o componente

    TextToSpeech. Solta-o no Viewer (visualizador). Note que ele cai em

    "componentes não-visíveis", porque não é algo que vai aparecer na

    interface. É mais como uma ferramenta que está disponível para a

    própria app.

    Passo a passo

  • Mude para o Editor de “Blocks” (Blocos)

    Clica em Blocks (blocos) para passar para o Editor de Blocos, é hora de

    dizer à tua app o que fazer! Até agora, temos apenas decidido como o

    aplicativo deve ser visto. O Editor de Blocos vai nos permitir dizer à app como

    ela se deve comportar. Imagina os botões “Designer” e “Blocks” como guias.

    (Localizados ao lado direito do site)

    O Editor de Blocos

    O Blocks Editor (editor de blocos) é onde vais programar o comportamento da tua app. Há blocos Built-in

    (embutidos) que manipulam coisas como matemática, lógica e texto. Abaixo disso são os blocos que vão com

    cada um dos componentes da tua app. A fim de obter os blocos para um determinado componente e faze-lo

    aparecer no Editor de Blocos, primeiro tens de acrescentar um componente para o teu aplicativo através do

    botão “Designer”.

    Faz um evento de “Clique de Botão”

    Em Blocks (blocos) ao lado esquerdo da

    tela, clica em “Button1” (botão1), em

    seguida, clica – arraste e solta o primeiro

    bloco (when Button1 .Click do) para o

    espaço de trabalho. Este é o bloco que irá

    lidar com o que acontece quando o botão

    da tua app for clicado. É chamado

    "manipulador de eventos". Todos os

    manipuladores de eventos têm a cor

    castanha. Os manipuladores de eventos

    são acionados quando um evento é

    iniciado pelo usuário (por exemplo, clicando num botão).

  • Programar a ação “TextToSpeech”

    Clica em TextToSpeech1, logo

    abaixo de “Button1”, arrasta o

    bloco (call TextToSpeech1. Speak

    message) até o espaço de

    trabalho, e coloca-o dentro do

    primeiro bloco que acabaste de

    adicionar. Este bloco roxo chama-

    se “procedimento” no App

    Inventor. Este procedimento fará

    com que o smartphone/tablet fale.

    Porque é dentro do Button.Click

    que ele será executado quando o

    botão na tua app for clicado.

    Preencher a “tomada” de mensagem no bloco TextToSpeech.Speak

    Quase pronto! Agora precisas

    dizer ao bloco

    “TextToSpeech.Speak” o que

    falar. Para isso, clica em Text

    (texto) ainda ao lado esquerdo

    da janela, arrasta um bloco de

    texto (no caso, o primeiro) e

    conecta-o na tomada

    denominada “message”

    (mensagem) do último bloco

    roxo que adicionaste. Assim:

    Clica no bloco de texto e digita "Parabéns! Você criou o seu primeiro app."

    Agora faz o teste!

    Vai para o teu dispositivo conectado e clica no botão que criaste. Verifica se o teu volume está

    alto! Deverás ouvir o smartphone falar a frase que escolheste, em voz alta.

  • Volta para a guia “Designer”

    Clica em Designer no canto direito do site. Agora vamos fazer o

    dispositivo dizer o que quiser!

    Adicionar uma “TextBox” (caixa de

    texto)

    Na gaveta User Interface, localizada ao lado

    esquerdo da janela, arrasta uma TextBox e

    coloque-a acima do botão “Fale Comigo” que

    já está na janela.

    Obtém o texto que é digitado no TextBox

    Na guia, Blocks – Clica na propriedade de texto

    “TextBox1” no lado esquerdo da janela.

    Seleciona entre os blocos verdes o bloco

    (Textbox1 .Text) – Isto é, se quiseres que a tua

    app fale em voz alta tudo o que for digitado no

    bloco TextBox1.Text – sendo assim, tudo o que

    é digitado na caixa de texto pelo usuário será

    falado pela tua app – Estes blocos verdes mais

    claros são chamados de "getters" (procriadores)

    e os blocos verdes mais escuros são "setters"

    (compositores) para o componente TextBox1.

    Esses blocos são chamados de "getters" e

    "setters" porque você pode "obter" ou "definir" o

    valor que é armazenado para essa parte do

    componente usando esses blocos.

    Definindo o evento de clique de botão para fazer com que seja falado o texto que está na “Caixa de

    Texto”

    Retire/Desencaixe a sua mensagem de

    "Parabéns ..." e conecte o bloco

    “TextBox1.Text” no lugar. Caso não for mais

    utilizar este bloco rosa com a sua mensagem,

    você pode descartar clicando e arrastando-o

    para o lixo.

  • Enfim, a junção de seus blocos deve

    ficar parecida com esta:

    Salvar o texto como uma variável

    O texto que a app vai falar agora é variável, ou muda com o uso do aplicativo. Podemos citar a variável,

    clicando sobre name (nome) na parte do bloco após arrasta-lo para o espaço de trabalho.

    • Clica em Variables (variáveis) no lado esquerdo da janela e arrasta para o espaço de trabalho o bloco

    (initialize global name to) – como mostra a imagem abaixo.

    • Neste caso, vamos nomear esta variável de "textoParaFalar" (no lugar de name)

    As variáveis devem ser sempre nomeadas de uma forma significativa para que, caso voltes a trabalhar com

    esta app depois de algum tempo, por exemplo, será mais fácil lembrar o que esta variável faz, supondo ser de

    rastreamento.

    Cada variável tem que ter um valor para

    começar. Uma vez que se esta variável

    estiver armazenando texto, vamos iniciá-la

    com um texto em branco. Portanto, clique

    em Text e arraste o primeiro bloco roxo

    (vazio) para o espaço de trabalho e

    encaixe em sua variável, que por sua vez,

    deve ficar como mostra a figura abaixo:

    Então, como vamos u