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)

Texto original:TalktoMe Tutorial, Technovation Challenge

Traduzido e adaptado por Vanessa Arnobio, do Projeto
Pérola, em Fevereiro de 2015
Formador: Rui Fernandes
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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

Pag.:1
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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

Pag.:2
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

Pag.:3
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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

Pag.:4
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

E-book’s Smartwatch

Smartwatch GPS

Consolas
Pda Pag.:5

´s
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

TV Portatil
Hololens

Google Glass
Pag.:6
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

Smart Tv
Smart Box

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

Pag.:7
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:8
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:9
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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

Pag.:10
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

LINGUAGEM DE PROGRAMAÇÃO
• Android - Java, C#, C++, HTML 5
• Windows Mobile – C#, C, C++, Visual Basic, HTML 5, XALM
• iOS SDK – Objective C

Pag.:11
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

5 AMBIENTES DE DESENVOLVIMENTO

ANDROID

IOS

AMBIENTES DE DESENVOLVIMENTO MULTIPLATAFORMA

Pag.:12
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:13
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:14
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:15
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:16
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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
Pag.:17
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.
Pag.:18
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

Pag.:19
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:20
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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?

Pag.:21
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.
Pag.:22
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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

Pag.:23
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

Painel de componentes

Ecrã principal ou a aplicação

Pag.:24
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

Pag.:25
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:26
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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

Pag.:27
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:28
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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:

Pag.:29
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:30
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:31
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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

Pag.:32
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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)

Pag.:33
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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”.

Pag.:34
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:35
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

É 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:

Pag.:36
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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!

Pag.:37
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:38
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.

Pag.:39
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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:

Pag.:40
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

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.)

Pag.:41
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

(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

Construa o Teste em tempo real, no

seu
no app próprio
computador com o
computador 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”

Pag.:42
UFCD 8849- Desenvolvimento de conteúdos multimédia para dispositivos
móveis (25 h)

14 WEBGRAFIA

http://appinventor.mit.edu

Pag.:43