Manual de apoio - cld.pt

Texto original:TalktoMe Tutorial, Technovation Challenge Traduzido e adaptado por Vanessa Arnobio, do Projeto

Pérola, em Fevereiro de 2015

O App Inventor é uma ferramenta

desenvolvida pelo Google e, atualmente,

mantida pelo Instituto de Tecnologia de

Massachusetts (MIT); que permite a criação

de aplicações para smartphones que rodam

o sistema operacional Android, sem que seja

necessário conhecimento em programação.

Manual de apoio

UFCD 8849- Desenvolvimento de conteúdos

multimédia para dispositivos móveis (25 h)

Formador: Rui Fernandes

UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos

móveis (25 h)

Pag.:1

1 ÍNDICE

2 Dispositivos e plataformas móveis............................................................................................. 4

2.1 Dispositivos ........................................................................................................................................ 4

2.2 Pontos que impulsionaram o desenvolvimento deste segmento da tecnologia: ...................... 8

3 Plataformas Moveis ...................................................................................................................... 8

3.1.1 Plataformas / S. O Moveis ........................................................................................................ 9

3.2 Tecnologias móveis............................................................................................................................ 9

4 Ferramentas de conceção e desenvolvimento .........................................................................10

4.1 Linguagem / Framework .................................................................................................................. 10

4.2 Linguagem de Programação .......................................................................................................... 11

5 Ambientes de Desenvolvimento ................................................................................................12

5.1 Android ............................................................................................................................................... 12

5.2 iOS ...................................................................................................................................................... 12

5.3 Ambientes de Desenvolvimento multiplataforma ........................................................................ 12

6 Aplicações multimédia ................................................................................................................13

7 Apresentações não Lineares ......................................................................................................14

7.1 Apresentação Linear ........................................................................................................................ 14

7.2 Aplicação multimédia como filme não linear ................................................................................ 14

8 Interatividade na aplicação .........................................................................................................15

9 Programação da aplicação .................................................................................................................. 15

10 Conteúdos do dispositivo móvel ................................................................................................... 16

10.1 Boas práticas de planeamento de conteúdo para mobile .......................................................... 16

11 Introdução ao App Inventor ............................................................................................................. 20

11.1 O que é o App Inventor?! ................................................................................................................ 20


móveis (25 h)

Pag.:2

11.2 Definição ............................................................................................................................................. 20

11.2.1 Recomendações .......................................................................................................................... 21

11.2.2 Navegador ................................................................................................................................... 21

11.3 O que posso fazer com App Inventor? ................................................................................................ 21

11.4 Por que é tão fácil? .............................................................................................................................. 22

11.5 Vamos Explorar ................................................................................................................................... 23

12 Fale. Comigo (TalkToMe): A sua aplicação no App Inventor ............................................................... 26

12.1 Visão geral........................................................................................................................................... 27

12.1.1 Adicionar um botão ..................................................................................................................... 28

12.1.2 Inicie o aplicação “AI Companion” no seu dispositivo ................................................................ 28

12.1.3 Veja a sua aplicação no dispositivo conectado ........................................................................... 30

12.1.4 Alterar o texto do botão .............................................................................................................. 31

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

12.1.6 Mude para o Editor de “Blocks” (Blocos) .................................................................................... 33

12.1.7 O Editor de Blocos ....................................................................................................................... 34

12.1.8 Faça um evento de “Clique de Botão” ........................................................................................ 35

12.1.9 Preenchendo a “tomada” de mensagem no bloco TextToSpeech.Speak ................................... 36

12.1.10 Volte para a guia “Designer” ................................................................................................... 37

12.1.11 Obtenha o texto que é digitado no TextBox ........................................................................... 38

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

“Caixa de Texto” .......................................................................................................................................... 39

12.1.13 Salvando o texto como uma variável ...................................................................................... 40

12.1.14 Quer testar a sua aplicação mas não possui um dispositivo com Android? ........................... 41

13 Webgrafia ............................................................................................................................................... 43


móveis (25 h)

Pag.:3


móveis (25 h)

Pag.:4

2 DISPOSITIVOS E PLATAFORMAS MÓVEIS

O que um dispositivo Móvel?

Um dispositivo móvel, designado popularmente em inglês por handheld é um computador de bolso

habitualmente equipado com um pequeno ecrã (output)e um teclado em miniatura (input).

Em alguns aparelhos, o output e o input combinam-se num ecrã táctil(touchscreen).

Os dispositivos móveis mais comuns são:

● Smartphone;

● PDA (Personal digital assistant);

● Telemovel;

● Consola portátil;

● Smartwatch;

● Aparelhos GPS (Sistema de posicionamento Global)

DISPOSITIVOS

Smartphone

Tablet


móveis (25 h)

Pag.:5

E-book’s Smartwatch

Smartwatch GPS

Consolas Pda

´s


móveis (25 h)

Pag.:6

TV Portatil Hololens

Google Glass


móveis (25 h)

Pag.:7

Smart Box Smart Tv

Notebook/Portátil Híbridos ou convertíveis


móveis (25 h)

Pag.:8

Pontos que impulsionaram o desenvolvimento deste segmento da

tecnologia:

Mobilidade/Portabilidade;

Multi-tarefas (escritório portátil, multimédia, aplicativos);

Comunicação;

Entretenimento;

Utilização:

Uso pessoal

Uso Profissional

3 PLATAFORMAS MOVEIS

Atualmente os principais sistemas operativos existentes são:

Java ME(em alguns telemoveis), Blackberry OS, Windows Mobile,Windows Phone, iOS, Symbian,

WebOS, Android e Maemo, MeeGo, sendo os cinco últimos baseados em Linux.

Distribuição dos Sistemas operativos

1. Google - Android – 37% do mercado.

2. Apple - iOS - 13% de participação de mercado.

3. Samsung - Bada OS – 12% de participação de mercado

4. Nokia - Symbian - 29% do mercado

5. Black Berry - 10 % do Mercado.


móveis (25 h)

Pag.:9

3.1.1 Plataformas / S. O Moveis

TECNOLOGIAS MÓVEIS

O que são tecnologias Móveis

Toda tecnologia que permite seu uso durante a movimentação do utilizador é uma tecnologia móvel.

A tecnologia móvel não é apenas uma invenção, ela pode ser considerada uma revolução, pois foi

capaz de atingir o cotidiano das pessoas e fazer parte da vida delas, modificando suas rotinas e

formas de tomar decisões.


móveis (25 h)

Pag.:10

4 FERRAMENTAS DE CONCEÇÃO E DESENVOLVIMENTO

Aspetos a ter em conta na hora de escolher a ferramenta de desenvolvimento.

• Arquitetura x Plataforma

• Custo x Produtividade

• Padrões de projetos

• Boas práticas

• Integração

• Equipa

• Disponibilidade / Store Apps

LINGUAGEM / FRAMEWORK

Principais Frameworks

• Android SDK

• Windows Mobile SDK

• iOS SDK


móveis (25 h)

Pag.:11

LINGUAGEM DE PROGRAMAÇÃO

• Android - Java, C#, C++, HTML 5

• Windows Mobile – C#, C, C++, Visual Basic, HTML 5, XALM

• iOS SDK – Objective C


móveis (25 h)

Pag.:12

5 AMBIENTES DE DESENVOLVIMENTO

ANDROID

IOS

AMBIENTES DE DESENVOLVIMENTO MULTIPLATAFORMA


móveis (25 h)

Pag.:13

6 APLICAÇÕES MULTIMÉDIA

O que são aplicações Multimédia

Uma aplicação multimédia é o uso específico, por um utilizador ou grupo de utilizadores, de um dado

sistema multimédia que oferece uma função particular ou um conjunto de funções. Assim, as

aplicações multimédia apresentam informação em mais do que um meio.

As aplicações multimédia podem ser divididas pelas seguintes categorias:

• Publicação eletrónica;

• Tratamento de informação;

• Formação interativa;

• Entretenimento interativo;

• Comunicações;

• Criação e produção.

Tem-se uma aplicação multimédia quando se combina:

• Texto e som;

• Texto, som e animações;

• Texto, som e vídeo;

• Vídeo e som;

• Múltiplas áreas de apresentação de imagens ou apresentações em simultâneo;

• Em situações reais (ao vivo), o uso de oradores junto com som, imagem e vídeo.


móveis (25 h)

Pag.:14

7 APRESENTAÇÕES NÃO LINEARES

APRESENTAÇÃO LINEAR

Quando criamos uma apresentação em PowerPoint é utilizado para realizar apresentações de forma

linear, em que um slide se segue a outro.

Esta estrutura pode ser alterada, criado apresentações com navegação escolhida pelo utilizador,

criando assim uma apresentação não linear.

Desta forma podemos criar recursos multimédia como apresentações didáticas ou pequenos jogos.

APLICAÇÃO MULTIMÉDIA COMO FILME NÃO LINEAR

Quando adquire um dvd com um filme,já teve reparado existe uma opção que permite navegar entre

capítulos desse filme, este é um dos melhores exemplos de filme não linear.

A possibilidade de escolhermos qual a parte ou capitulo do filme que queremos ver, confere-nos uma

interatividade, hoje em dia são cada vez mas frequente programas televisivos como os podemos

interagir com a ajuda o comando.

Em cinemas interativos, a audiência não assiste passivamente ao filme pré-registrado.

Esta audiência pode decidir qual o desenrolar dos passos tomados pelo herói ou personagem

principal usando uma tecnologia de baixo custo.

Por exemplo, o primeiro filme interativo foi I'm You Man de uma companhia de produção nova-

iorquina, onde a cada 90 segundos a audiência escolhia uma de três opções em um controle a três

botões no braço de cada acento. Os votos eram registrados e a opção mais votada era seguida pelo

filme. A imprevisibilidade do filme após várias sessões mostrou-se sendo parte da atração.


móveis (25 h)

Pag.:15

8 INTERATIVIDADE NA APLICAÇÃO

O que é a Interatividade?

A interatividade num ambiente virtual consiste na possibilidade de o utilizador dar instruções ao

sistema através de ações efetuadas neste e nos seus objetos.

9 PROGRAMAÇÃO DA APLICAÇÃO

A programação uma aplicação é feita em função do seu objetivo, compete a equipa de

desenvolvimento e todos os intervenientes decidir qual a linguagem e plataformas onde ira ser feita

a programação.

A programação para dispositivos moveis anteriormente estava limitada ao sistema operativo, nos dias

que correm, graças ao com o aparecimento do Html5 veio mudar este paradigma, tornado as

aplicações multiplataforma.


móveis (25 h)

Pag.:16

10 CONTEÚDOS DO DISPOSITIVO MÓVEL

Conteúdo para mobile

Segundo o um estudo em Portugal, há mais aparelhos do que habitantes e alguns comportamentos

tendem a ganhar força e sendo representativos.

Mensageiros mobile: As apps de mensagens são utilizados por 43% da população;

Vídeos no mobile: 35% da população consome vídeos nos seus dispositivos;

Jogos no mobile: os jogos têm cada vez mais jogadores no ambiente móvel, sendo 21% atualmente

da população;

Banco no smartphone: as transações bancárias já são realizadas por mais de um quarto, 28%, da

população;

Serviços de mapas mobile: as apps de mapas ganham cada vez mais adeptos, 33% é a

representação atual.

BOAS PRÁTICAS DE PLANEAMENTO DE CONTEÚDO PARA MOBILE

Design responsivo – um site responsivo adapta-se ao tamanho do ecrã dos dispositivos, seja ele

smartphone, tablet ou PC. Se o conteúdo que disponibiliza precisa ser ampliado para ser lido a partir

do smartphone, provavelmente irá afugentar os seus leitores e perder leads.

Personalização – permita que os utilizadores personalizarem o próprio conteúdo. Por exemplo, que

eles possam visualizar só aqueles que os interessa ou determinar a frequência com que querem

receber notificações.

Recursos audiovisuais – vídeos, infográficos, imagens, poadcasts e outros conteúdos audiovisuais

combinam bem com o dinamismo da navegação móvel. Estudos demonstram que, no dispositivo

móvel, o olho de um utilizador é atraído mais para imagens do que para texto. Mas, como ocupam

bastante espaço no ecrã só se devem utilizar se forem relevantes.


móveis (25 h)

Pag.:17

Partilha fácil – lembre-se que o link da página não fica visível quando acedido em mobile. Por isso,

integre ícones que tornam o conteúdo facilmente partilhável nas medias sociais.

Calls to action – você em mais hipóteses de envolver o seu público e aumentar conversões se deixar

bem à vista números de telefone clicáveis, botões interativos e calls to action.

Títulos curtos e fortes – títulos atraentes e diretos são ganchos importantes para incentivar sua

audiência a prosseguir na leitura.

Pontos de atenção – use bullet points, negritos e subtítulos para otimizar a visualização de seu

conteúdo. Outra dica é incluir, no topo do artigo, um pequeno parágrafo de resumo.

Tamanho do conteúdo – estrategicamente, conteúdos mais longos e aprofundados são positivos

para SEO. Mas, se temer que um texto muito extenso desencoraje o utilizador, pense em colocar

resumos com a possibilidade de clicar para mais informações ou, então, oferecer duas versões de

cada artigo: a curta e a longa.

Design funcional – conteúdos para dispositivos móveis devem ajudar o visitante na busca por

resultados rápidos e satisfazer a necessidade imediata dele. Para que ele tenha uma boa experiência,

opte por um template limpo, simples e dinâmico, de fácil navegação para todos.

11 ANIMAÇÕES E APLICAÇÕES

ANIMAÇÕES

Animação refere-se ao processo segundo o qual cada fotograma de um filme é produzido

individualmente, podendo ser gerado tanto por computação gráfica quanto fotografando uma imagem

desenhada ou repetidamente fazendo-se pequenas mudanças a um modelo, fotografando o

resultado.

Por exemplo poderíamos fazer vários desenhos em pedaços de papel e então passar por todos os

desenhos em sequência, e isso seria como uma animação. Bem, isso seria como uma animação se

os desenhos estivessem apenas um pouco diferentes uns dos outros


móveis (25 h)

Pag.:18

O QUE SÃO APLICAÇÕES

Aplicação é um termo que provém do vocábulo latim applicatĭo e que faz referência à acção e ao

efeito de aplicar ou de se aplicar (pôr uma coisa em cima de outra, utilizar, empregar ou executar

algo, atribuir).

Uma aplicação informática é um tipo de software que permite que o utilizador realize um ou vários

tipos de trabalho. Os processadores de texto e as folhas de cálculo são exemplos de aplicações

informáticas, ao passo que os sistemas operativos ou os programas utilitários (que cumprem tarefas

de manutenção) não fazem parte destes programas.

Aplicação móvel ou aplicativo móvel, conhecida normalmente por seu nome abreviado app, é um

software desenvolvido para ser instalado em um dispositivo eletrônico móvel, como um PDA, telefone

celular, smartphone ou um leitor de MP3. Esta aplicação pode ser instalada no dispositivo, ou se o

aparelho permitir descarregada pelo usuário através de uma loja on-line, tais como Google Play, App

Store ou Windows Phone Store. Uma parte das aplicações disponíveis são gratuitas, enquanto outras

são pagas. Estas aplicações são pré-instaladas ou vêm diretamente da fábrica, descarregadas pelos

clientes de várias plataformas de distribuição de software móvel ou aplicações da web entregues por

HTTP que usam processamento do lado do servidor ou do cliente (por exemplo, JavaScript) para

fornecer uma experiência "aplicação" dentro de um navegador da Web.

https://conceito.de/texto


móveis (25 h)

Pag.:19


móveis (25 h)

Pag.:20

12 INTRODUÇÃO AO APP INVENTOR

O QUE É O APP INVENTOR?!

È uma ferramenta criada pela Google que permite a criação de aplicações para smartphones que

correm o sistema operativo Android, sem que seja

necessário conhecimento em programação.

Porque utilizá-lo?

Por que utilizar o App Inventor?

A maioria das pessoas dizem que o App Inventor é fácil

de usar por causa do seu visual e sua interface do tipo

clique-e-arraste. Mas o que isso significa?

Porque que o App Inventor é tão fácil de usar?

Não precisa lembrar das instruções ou saber programação.

Pode montar a sua aplicação a partir de um conjunto de opções.

Como em um quebra cabeças / Puzzle, apenas alguns blocos que ligam uns aos outros.

Pode lidar com eventos diretamente.

DEFINIÇÃO

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

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

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


móveis (25 h)

Pag.:21

12.2.1 Recomendações

Computador e Sistema. Operacional

Macintosh (com processador Intel): Mac OS X 10.5 ou superior

Windows: Windows XP, Windows Vista, Windows 7

GNU / Linux: Ubuntu 8 ou superior, Debian 5 ou superior.

Nota: GNU / Linux desenvolvimento ao vivo é suportado apenas para conexões Wi-Fi entre o

computador e o dispositivo Android.

12.2.2 Navegador

Mozilla Firefox 3.6 ou superior

Nota: Se estiver a usar o Firefox com a extensão NoScript, precisa deixar a extensão off.

Apple Safari 5.0 ou superior

Google Chrome 4.0 ou superior

*Microsoft Internet Explorer não é suportado.

Telefone ou tablet (ou usar o emulador on-screen) - Sistema operativo Android 2.3 ("Gingerbread")

ou superior.

O QUE POSSO FAZER COM APP INVENTOR?


móveis (25 h)

Pag.:22

Com o App Inventor pode construir diferentes tipos de aplicações.

Use a sua imaginação e poderá criar todos os tipos de

diversão ou aplicações úteis.

Jogos.

Aplicações didáticas.

Aplicações para geo-localização (GPS).

Aplicações que controlam robôs.

Aplicações para a Web e muito mais!!!!!

O que não podemos criar com App Inventor?

Não é um substituto para a linguagem de programação de aplicações para o Android.

Não é orientada para criação de jogos e aplicaçãos comerciais.

As aplicações estão longe de ser bonitas, mas são funcionais.

POR QUE É TÃO FÁCIL?

Não necessário nenhuma sintaxe: a linguagem de blocos elimina a necessidade de lembrar e digitar

código.

Tudo está à frente: Componentes funções estão em gavetas. Basta encontrar, arrastar e soltar.


móveis (25 h)

Pag.:23

Componentes de alto nível: possui uma grande biblioteca.

Concreto: menos abstratos que muitas linguagens.

Na Web: caso tenha celular Android, não precisará instalar nada no computador.

VAMOS EXPLORAR


móveis (25 h)

Pag.:24

Ecrã principal ou a aplicação

Painel de componentes


móveis (25 h)

Pag.:25


móveis (25 h)

Pag.:26

13 FALE. COMIGO (TALKTOME): A SUA APLICAÇÃO NO APP INVENTOR

- No site (appinventor.mit.edu) clique no botão laranja “Create!” (Criar) - Utilize uma conta google ou

e-mail Gmail para aceder.

Inicie um novo projeto (Start a new project)

Nomeie o projeto de “FaleComigo” (sem espaços) e clique em OK.


móveis (25 h)

Pag.:27

Agora que está na guia Designer, onde pode trabalhar o seu app. A janela de desenho, ou

simplesmente “designer” é onde cria a aparência da sua aplicação, e especifica quais os

componentes que irá utilizar. Onde escolhe componentes na Interface do Utilizador como botões,

imagens, caixas de texto e funcionalidades como sensores e GPS.

VISÃO GERAL


móveis (25 h)

Pag.:28

13.1.1 Adicionar um botão

Nosso projeto precisa de um botão. Clique e segure sobre a palavra "Button" (botão) na Palette

(paleta) e solte o botão lá na tela “Viewer” (visualizador).

13.1.2 Inicie o aplicação “AI Companion” no seu dispositivo

Após baixar o app (MIT Ai2 Companion) no seu telefone ou tablet, clique no ícone do app para ele

iniciar. NOTA: Seu dispositivo e computador devem estar conectados na mesma rede Wi-Fi. Se não

pode conectar-se através de uma rede Wi-Fi, conecte-se utilizando um cabo USB.


móveis (25 h)

Pag.:29

Conecte o App Inventor (site) ao seu dispositivo e faça o teste ao vivo. Uma das coisas mais

interessantes sobre o App Inventor é que pode ver e testar seu aplicação em um dispositivo

conectado, enquanto estiver a construir. Se tem um telefone ou tablet com Android, siga os passos

abaixo:


móveis (25 h)

Pag.:30

Obtenha o código de conexão do App Inventor e digitalize ou digite-o em seu App Companion

No menu Connect (conectar), escolha a opção “AI Companion”. Abrirá uma janela, através dela pode

conectar-se por:

Leitura do código QR, clicando em "Leitura código QR" no dispositivo (# 1) ou

Digitando o código na janela de texto e clicando em "Conectar-se com o código" (# 2).

13.1.3 Veja a sua aplicação no dispositivo conectado

Saberá que sua conexão foi bem-sucedida quando estiver a ver a sua aplicação no dispositivo

conectado. Até agora a nosso app só tem um botão, de modo que é o que vai ver. Quando adicionar

mais componentes no projeto, poderá ver o seu app mudar no seu telefone.


móveis (25 h)

Pag.:31

13.1.4 Alterar o texto do botão

No painel de Properties (Propriedades), altere o texto do seu Button (botão). Selecione o texto "Texto

para Botão 1", apague-o e digite "Fale Comigo" (ou o que preferir). Observe que o texto do botão

muda na sua aplicação imediatamente.


móveis (25 h)

Pag.:32

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

No menu Media (mídia), clique e arraste o componente TextToSpeech. Solte-o no Viewer

(visualizador). Note que ele cai em "componentes não-visíveis", porque não é algo que vai aparecer

na interface de utilizador. É mais como uma ferramenta que está disponível para o próprio app.

Passo a passo


móveis (25 h)

Pag.:33

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

Clique em Blocks (blocos) para passar para o Editor de Blocos, é hora de dizer ao seu app o que

fazer! Até agora, temos apenas decidido como a aplicação deve ser vista. O Editor de Blocos nos

permitirá dizer ao app como ele deve se comportar. Imagine os botões “Designer” e “Blocks” como

guias. (Localizados ao lado direito do site)


móveis (25 h)

Pag.:34

13.1.7 O Editor de Blocos

O Blocks Editor (editor de blocos) é onde vai programar o comportamento da sua aplicação. 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 sua aplicação. A fim de obter os blocos para um

determinado componente e faze-lo aparecer no Editor de Blocos, primeiro tem que acrescentar um

componente para a sua aplicação através do botão “Designer”.


móveis (25 h)

Pag.:35

13.1.8 Faça um evento de “Clique de Botão”

Em Blocks (blocos) ao lado esquerdo do ecrã, clique em “Button1”

(botão1), em seguida, clique – arraste e solte 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 do seu app for clicado.


móveis (25 h)

Pag.:36

É chamado de "manipulador de eventos". Todos os manipuladores de eventos têm a cor Castanho.

Os manipuladores de eventos são acionados quando um evento é iniciado pelo utilizador (por

exemplo, clicando em um botão).

Programar a ação “TextToSpeech”

Clique em TextToSpeech1, logo abaixo de “Button1”, arraste o bloco (call TextToSpeech1. Speak

message) até o espaço de trabalho, e coloque-o dentro do primeiro bloco que acabou de adicionar.

Este bloco roxo chama-se “procedimento” no App Inventor. Este procedimento fará com que o

celular/tablet fale. Porque é dentro do Button.Click que ele será executado quando o botão em seu

app for clicado.

13.1.9 Preenchendo a “tomada” de mensagem no bloco TextToSpeech.Speak

Quase pronto! Agora só precisa dizer ao bloco “TextToSpeech.Speak” o que falar. Para fazer isso,

clique em Text (texto) ainda ao lado esquerdo do ecrã, arraste um bloco de texto (no caso, o primeiro)

e conecte-o na tomada denominada “message” (mensagem) do último bloco roxo que você adicionou.

Assim:


móveis (25 h)

Pag.:37

Clique no bloco de texto e digite "Parabéns! criou o seu primeiro app." (Sinta-se livre para usar

qualquer frase, isto é apenas uma sugestão.)

Agora faça o teste!

Vá para o seu dispositivo conectado e clique no botão que criou. Verifique se o seu

volume está alto! deve ouvir o telefone falar a frase que escolheu em voz alta.

13.1.10 Volte para a guia “Designer”

Clique em Designer no canto direito do site. Agora vamos fazer o dispositivo dizer o que quiser!


móveis (25 h)

Pag.:38

Adicionando uma “TextBox” (caixa de texto)

Na gaveta User Interface, localizada ao lado esquerdo do ecrã, arraste uma TextBox e coloque-a

acima do botão “Fale Comigo” que já está na tela.

13.1.11 Obtenha o texto que é digitado no TextBox

Na guia, Blocks – Clique na propriedade de texto “TextBox1” ao lado esquerdo do ecrã. Selecione

entre os blocos verdes o bloco (Textbox1 .Text) – Isto é, se quiser que seu 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

utilizador será falado pelo seu 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 pode "obter" ou "definir" o valor

que é armazenado para essa parte do componente usando esses blocos.


móveis (25 h)

Pag.:39

13.1.12 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, pode descartar clicando e

arrastando-o para a lixeira.


móveis (25 h)

Pag.:40

13.1.13 Salvando o texto como uma variável

O texto que o app vai falar agora é variável, ou muda com o uso da aplicação. Podemos citar a

variável, clicando sobre name (nome) na parte do bloco após arrastar-lo para o espaço de trabalho.

Clique em Variables (variáveis) ao lado esquerdo do ecrã e arraste para o espaço de trabalho o bloco

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

Nesse 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, se caso voltar a

trabalhar com este app depois de algum tempo, por exemplo, será mais fácil lembrar-se o que esta

variável faz, supondo ser de rastreamento.

Cada variável tem que ter um valor para começar. Uma vez que 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:


móveis (25 h)

Pag.:41

Então, como vamos usar a variável? A atribuição original da mensagem era a seguinte:

Message (mensagem) > TextBox1.Text

Já que estaremos utilizando a variável “textoParaFalar” para a mensagem agora, precisamos

substituir “TextBox1.Text” com a variável e atribuir o valor “TextBox1.Text” à variável. Cada vez que

o botão for clicado, o valor da variável será atualizado, e a mensagem correta é passada para

TextToSpeech. Sendo assim:

textoParaFalar > TextBox1.Text Message > textoParaFalar

Enfim, a junção de seus blocos deve ficar parecida com esta:

13.1.14 Quer testar a sua aplicação mas não possui um dispositivo com Android?

Caso não possua um celular/tablet com sistema operacional Android, é possível instalar um Emulador

no computador para simular o ambiente do Android. Podendo assim, testar o app no próprio

computador.

Link: appinv.us/aisetup_windows (verificar qual é o seu sistema operacional; esse software está

disponível para Windows, Linux e Mac.)


móveis (25 h)

Pag.:42

(Ao aceder o link e apertar “Enter”, ele baixa automaticamente o instalador) - e é só instalar!

Instruções para TESTAR o app no próprio computador via Emulador

Com o emulador já instalado no computador, no site, clique no menu Connect > Emulator (aguarde,

pode levar alguns segundos.) – Abrirá uma pequena janela, que simula um disposto com Android, e

é só testar o seu app!

IMPORTANTE: Não esqueça de guardar seu projeto ao longo do desenvolvimento, clicando na opção

“Projects > Save Projects” (localizada no topo do site). O App Inventor guardará na própria conta do

site. Caso queira guarda-lo em seu computador, nesse mesmo menu “Projects”, encontra a opção:

Export selected project (.aia) to my computer (exportar o projeto selecionado (.aia) para o meu

computador). Também pode utilizar um projeto que já tenha sido exportado anteriormente, importando

ele do seu computador para a sua conta, clicando em: Import project (.aia) from my computer (importar

projeto (.aia) do meu computador).

NOTA: A extensão do app criado pelo App Inventor é “.aia”

Teste em tempo real, no

próprio computador com o

emulador

Construa o

seu app no

computador


móveis (25 h)

Pag.:43

14 WEBGRAFIA

http://appinventor.mit.edu

Manual de apoio - cld.pt

Documents

Transcript of Manual de apoio - cld.pt