Apostila Ebook - Desenvolvimento de Aplicativos

Desenvolvimento de
Aplicativos
MIT APP INVENTOR
Nenhuma parte desta publicação poderá ser reproduzida ou transmitida,
sejam quais forem os meios empregados: eletrônicos, mecânicos,
fotográficos, gravações ou quaisquer outros.
Todos os direitos reservados para CDP CENTRO DE DESENVOLVIMENTO

PROFISSIONAL LTDA.
Lei 9.610/98 e atualizações
CDPCONNECT
www.cdpconnect.com.br
e-mail: diretoria@cdpconnect.com.br
Desenvolvimento de Apps com MIT APP 2

INVENTOR
Sumário
Apresentação 4
Meu primeiro aplicativo (Calculadora) 7
Meu segundo aplicativo (Sons de Animais) 41
Meu terceiro aplicativo (Institucional Clube 41) 51
Meu quarto aplicativo (Síntese de Voz do Google 64
Meu quinto aplicativo (Leitor de QR Code) 72
Meu sexto aplicativo ( Aplicativo para o seu site) 77
Meu sétimo aplicativo (Pedra, Papel e Tesoura) 82
Meu oitavo aplicativo (Jasmin) 97
Atividades de Desafios 100
Extra (Galeria do MIT App Inventor) 103

INVENTOR
APRESENTAÇÃO
O MIT App Inventor é uma ferramenta de
programação baseada em blocos que permite que
qualquer pessoa, mesmo iniciantes, comecem a
programar e construir aplicativos totalmente
funcionais para dispositivos Android. Os recém-
chegados ao App Inventor podem ter seus primeiros
aplicativos criados e rodando facilmente, e podem
programar aplicações mais complexas em um tempo
significativamente menor do que com linguagens de
programação mais tradicionais, baseadas em código.
1. Introdução ao MIT App Inventor
Conhecendo o MIT App Inventor
App Inventor é uma ferramenta de O que você pode fazer com o MIT App Inventor?
drag-and-drop (arrastar e soltar)
visual para a construção de • Play - Criar aplicativos para o seu telefone é
aplicações móveis na plataforma divertido, e o App Inventor promove a exploração e
Android. Você pode projetar a descoberta.
interface do usuário (a aparência • Protótipos - Tem uma ideia para um aplicativo? Em
visual) de um aplicativo usando um vez de escrevê-la em um guardanapo ou deixá-lo
construtor de interface gráfica de de lado, construa um protótipo rápido.
usuário baseada na web (GUI), • Construa aplicativos com utilidade pessoal - Com
assim como você também pode o App Inventor, você pode construir um app
especificar o comportamento do exatamente como você quiser.
app reunindo "blocos", como se • Desenvolver aplicativos completos - A linguagem
você estivesse trabalhando em um fornece todos os principais fundamentos de
quebra-cabeça. programação na construção de blocos para sua
aplicação, como loops e condicionais, mas em
forma de blocos.

INVENTOR
Como acessar a plataforma do MIT App Inventor?
Para acessar, clique no

ícone abaixo:
Site do MIT App Inventor -

Acesso em 02/09/2017 às 19hs21min

INVENTOR
CAPÍTULO 01
MEU PRIMEIRO APLICATIVO (Calculadora)
Neste capítulo iremos aprender a criar uma conta na

plataforma do MIT App inventor e os conceitos de:
projeto, paleta, visualizador, componentes,
propriedades.
E com os conceitos aprendidos, daremos início a

construção de nosso primeiro aplicativo: uma
calculadora. Vamos lá!

INVENTOR
O primeiro acesso para o primeiro aplicativo
Acesse o site do MIT App Inventor e

clique em “Create Apps”.
Será necessário fazer o login

utilizando a sua conta Google.
Permita a aplicação do MIT
App Inventor.

INVENTOR
Os termos do serviço serão apresentados.
Aceite-os.
Caso queira preencher um breve

formulário para que possam aprender
mais sobre os usuários e melhorar o
App Inventor. Clique em “Never Take
Survey”, para que a mensagem não seja
mais exibida e você não responda o
formulário.

INVENTOR
Uma mensagem de boas-vindas será exibida com dois
links para auxiliar o novo usuário em como visualizar, na
prática, os aplicativos que estão sendo criados. Habilite
a caixa de seleção "Do Not Show Again", para que a
mensagem não seja exibida novamente e clique em
“Continue”. Uma nova mensagem de boas-vindas será
exibida e a interface onde seus projetos ficarão salvos
será exibida.

INVENTOR
Você poderá utilizar a linguagem “Português do
Brasil” em sua plataforma; mas utilizaremos a
língua inglesa como padrão.
Iniciando um seu primeiro projeto
Clique em “Start New Project”
O nome do seu projeto não poderá iniciar com

números, caracteres especiais. Não deve conter
letras acentuadas e nem a letra Ç (cedilha). Meu
primeiro aplicativo terá um nome simples e intuitivo;
caso queira, nomeie como “Calculadora”. E é claro:
sem as aspas! Clique em OK.

Entendendo a área de trabalho do MIT App Inventor

INVENTOR
Pallete (Paleta):
• User Interface: possui componentes como botões, imagens etc;

• Layout: possui componentes para alinhamento de outros componentes na tela;
• Media: possui componentes para acesso de som, vídeo, câmera, reconhecimento de voz
etc;
• Drawing and Animation: possui componentes para desenho e movimento de
componentes;
• Sensors: possui componentes para acesso de acelerômetro, GPS etc;
• Social: possui componentes para acesso de e-mail, lista de contatos do telefone, twitter
etc;
• Storage: possui componentes para banco de dados e arquivos;
• Connectivity: possui componentes para conexão com outros aplicativos, web ou
Bluetooth;
• LEGO® MINDSTORMS®: possui componentes para conexão com LEGO robótico.

INVENTOR
Viewer (Visualizador):
• Componentes visíveis (botões, imagens etc): ficam na própria tela do aplicativo;

• Componentes invisíveis (reconhecimento de som, acelerômetro etc): são mostrados
abaixo do escrito “Non-visible components”;
• Para adicionar um componente, arraste-o do lado esquerdo do ambiente de
programação para a tela do aplicativo (centro/Viewer);
• Arraste componentes para alterar a posição desses na tela;
• Quando um componente é selecionado, são mostradas as propriedades, deste, à
direita (Properties). É possível alterar as propriedades de modo personalizado (cor,
conteúdo, alinhamento do texto etc).
Properties (Propriedades):
Selecione um componente na Lista de Componentes para alterar suas propriedades como, cor,
tamanho, comportamento, etc.

INVENTOR
Designer Button (Botão Designer):
Caso você esteja em outra tela, clique em Designer Button para voltar à tela de design.
Fonte: MIT App Inventor

INVENTOR
App Inventor Blocks Editor (Editor de Blocos):
Interface para programar o comportamento do aplicativo, juntando blocos.
Built-in Drawers (Blocos Embutidos):
Procure por blocos com comportamentos que você queira adicionar ao seu app
e arraste-os para a Viewer.
Component-Specific Drawers (Componentes Específicos):
Encontre blocos para comportamentos específicos e arraste-os para a Viewer.

Viewer (Espectador): Arraste blocos do para a Blocks Viewer para construir
relações e comportamentos para seu aplicativo.
Blocks Button (Botão Blocos):
Caso você esteja em outra tela, clique em Blocks Button para voltar à tela de
construção de blocos.

INVENTOR
Iniciando a interface da Calculadora
Através da Paleta, arraste para o Visualizador quatro componentes do tipo Organização na Horizontal.
Você encontrará em Layout. Deverá ficar como na imagem abaixo:
Note que conforme os componentes vão

sendo adicionados ao visualizador, você
confere todos no painel de componentes,
onde poderá renomeá-los ou excluí-los.
Cada componente possui suas
propriedades. Que você encontra no painel
Propriedades.
Para as duas primeiras organizações na
horizontal e para a última, arraste para
dentro das mesmas: um label (legenda) e
um text box (caixa de texto). Você
encontrará em User Interface (Interface de
Usuário). As primeiras caixas de texto
servirão para que o usuário digite os
valores desejados e a última caixa de texto
servirá apenas como retorno, exibindo
apenas o resultado da operação.
INVENTOR
Para o terceiro componente do tipo
organização na horizontal, arraste 04
botões (button).
Os mesmos servirão para o usuário

selecionar o tipo de operação matemática:
soma, subtração, multiplicação e divisão.

INVENTOR
Definindo as propriedades dos componentes
Clique no componente Screen1 e defina as seguintes propriedades para a sua tela:
• Centralize horizontalmente e
verticalmente;
• Defina um nome para o seu
aplicativo, no caso
“Calculadora”. Este é o nome
que será exibido após o mesmo
ser instalado;
• Defina uma cor de fundo em
BackgroundColor ou uma
imagem de fundo em
BackgroundImage;
• Altere o título de sua tela para
“Calculadora básica”.

INVENTOR
Altere o texto em Label1 para “Valor 01”, em Label2 para “Valor 02” e em Label3 para
“Resultado”. Altere o tamanho, se necessário, em FontSize. Caso queira dar destaque aos
nomes, aplique negrito em FontBold (habilitando a caixa de seleção).
Altere os textos dos botões Button1, Button2, Button3 e Button4, respectivamente para: “+”, “-
”, “x” e “/”. Ou seja, os operadores matemáticos básicos. Centralize na horizontal e na vertical,
todas as quatro organizações na horizontal.
Para todas as caixas de texto, delete o Hint (dica). Habilite na primeira e segunda caixa de texto
a função Numbers Only, que permitirá que apenas números sejam inseridos nas mesmas.
Apenas para a última caixa de texto, defina o BackgroundColor na cor branca, desabilite a caixa
de texto (pois a mesma servirá apenas de retorno, impedindo o usuário de digitar qualquer
valor).

INVENTOR
Aplicando tais modificações, o aplicativo ficará conforme o modelo abaixo:

INVENTOR
Renomeando componentes
Para facilitar o momento da programação em blocos, onde possamos identificar os

componentes que iremos utilizar, teremos que renomeá-los. Clique no componente
e em seguida em “Rename”. Seus componentes deverão ser renomeados conforme
a imagem abaixo:

INVENTOR
INVENTOR
Adicionando comportamentos aos componentes (programação em blocos)
Nossa calculadora é bem básica. O usuário digita o primeiro valor, logo após digita o segundo valor e
seleciona o tipo de operação. Ao selecionar a operação matemática o resultado será exibido.
Clique em “Blocks”.
Basicamente esta será nossa programação: o aplicativo terá uma variável que irá iniciar com o valor
zero. Quando o usuário clicar no botão com a operação desejada (soma, multiplicação, subtração ou
divisão), a variável irá pegar esses dois valores e aplicar a devida operação; exibindo, em seguida, o
resultado da operação.

INVENTOR
Clique em Variables e selecione o bloco
conforme a imagem abaixo:

INVENTOR
Clique e arraste para o Visualizador.
Em Math, selecione o bloco de valor zero, conforme a imagem abaixo.
Após inserir tais blocos, encaixe-os.

Como em um quebra-cabeças.

INVENTOR
Procure o componente referente ao botão de soma, e selecione a primeira opção
disponível. Tal bloco é o segredo para o acontecimento de tudo. Pois o mesmo diz:
“quando o botão soma for clicado, faça”.
Após inserir o bloco, insira o bloco em Variables. Encaixe o bloco no último

adicionado. Em Math, adicione o bloco referente a operação de soma.
Desenvolvimento de Apps com MIT APP

INVENTOR
Criação de documentos com MS-Word 2010 27
Encaixe o respectivo bloco em . A variável iniciará com o valor zero, mas quando
a operação for selecionada/clicada, o sistema irá “pegar” os valores digitados nas respectivas caixas
de texto e aplicar a operação. O valor que inicialmente era igual a zero, passará a ser o resultado da
última operação selecionada.
No componente caixa de texto, referente ao valor 01, procure o bloco abaixo. Que é o texto digitado
pelo usuário de seu aplicativo. Encaixe-o no primeiro espaço disponível no bloco anterior. Faça o
mesmo passo-a-passo para o componente caixa de texto, referente ao valor 02.

INVENTOR
Criação de documentos com MS-Word 2010
Ou clique com o botão direito
no bloco tb_valor01 text e
duplique-o. Em seguida altere
para tb_valor02 text. Feito
isso, encaixe o bloco no
espaço disponível.

INVENTOR
Nosso aplicativo realiza apenas a
soma dos dois valores inseridos
pelo usuário. Temos que fazer com
que o valor referente ao resultado,
no caso o valor da variável de
mesmo nome, seja exibido.
Para isso, no componente referente

a caixa de texto resultado, procure
pelo bloco abaixo. O bloco tem a
função de “setar” algo no bloco
citado. No caso, queremos que seja
exibido o resultado contido na
variável. Encaixe o bloco abaixo do
bloco definido para setar a soma de
valor 01 e valor 02.

INVENTOR
Em Variables, procure pelo bloco “Get” e defina variável global resultado. Encaixe o bloco no último
inserido. Tal bloco terá a função de exibir o valor contido na variável. Seus blocos devem estar como
na imagem abaixo.
Agora faça com que os demais botões realizem suas

respectivas operações, tendo como base o exemplo
citado.

INVENTOR
Como deverá ficar:

INVENTOR
Como testar o aplicativo no computador (modo EMULATOR):
1. Baixe o emulador em: http://appinv.us/aisetup_windows

2. Abra esse arquivo e instale-o;
3. Abra o programa “aiStarter.exe” (geralmente fica em "C:\Arquivo de
Programas\AppInventor");
4. No ambiente de programação clique em “Connect” e depois em “Emulator”;
5. Aguarde até que seja aberta uma janela simulando a tela de seu smartphone;
6. Obs: pode ser que apareça uma janela no ambiente de programação atrás da
janela do emulador. Caso positivo, clique no botão “Not now”;
7. Depois de fechar a janela do emulador, clique em “Connect” e depois em
“Reset Connection”.

INVENTOR
Como testar o aplicativo no dispositivo móvel (modo USB):
1. Conecte o smartphone ao computador através de um cabo USB;

2. No smartphone, clique em Configurações e deixe selecionadas as “Opções
de Desenvolvedor”. Tenha certeza de que a opção "USB Debugging" está
selecionada.
Android 3.2+: Configurações > Aplicações > Desenvolvimento;

Android 4.0+: Configurações > Opções de Desenvolvedor;
Android 4.2+: Configurações > Sobre o Telefone > clicar 7x em Build number >
retornar para Opções de Desenvolvedor)
3. No ambiente de programação clique em “Connect” e depois em “USB”;

4. Aguarde até que o aplicativo apareça na tela de seu smartphone.

INVENTOR
Como testar o aplicativo no dispositivo móvel (modo AI Companion):
1. Baixe o aplicativo Android MIT AI2 Companion na Google Play para o seu
smartphone:
https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=pt_BR
2. Abra o MIT AI2 Companion no smartphone;
3. No ambiente de programação clique em “Connect” e depois em “AI Companion”
4. Será gerado um código de 6 dígitos e um QR code;
5. No smartphone é possível entrar com o código ou simplesmente com o QR code,
bastando selecionar esta opção (scan QR code) e apontar a câmera do celular para a
tela do computador.

INVENTOR
Como gerar o aplicativo para o dispositivo móvel (QR Code):
1. Clique em “Build” e depois em “App (provide QR code for .apk)”

2. Aponte a câmera do celular para a tela do computador e faça download
do aplicativo
Como gerar o aplicativo para o dispositivo móvel (.apk):
1. Clique em “Build” e depois em “App (save .apk to my computer)”;

2. Transfira o arquivo .apk para seu smartphone;
3. No seu smartphone, instale o aplicativo. Obs: é necessário habilitar a opção de
instalação de fontes desconhecidas no Android (Configurações > Segurança > Fontes
desconhecidas)

INVENTOR
ATIVIDADE COMPLEMENTAR
Com base nos seus conhecimentos

adquiridos até o presente
momento e com auxílio do seu
professor, adapte o seu código com
o que se pede:
Caso tenha notado, se o usuário

não digitar nenhum valor ou digitar
apenas um dos, seu aplicativo
apresentará erro. Para que isso não
aconteça, crie as respectivas
validações, conforme a imagem ao
lado:
INVENTOR
ATIVIDADE DESAFIO
Os blocos acima mostram a programação a ser feita para

que não haja erro se os valores 01 e 02 não forem
digitados. Mas caso tenha notado, se um número for
dividido por zero, o mesmo também apresentará erro.
Com base nos conceitos da função SE, Dica para uma melhor exibição do resultado:
crie uma validação onde apresente a Habilite a caixa de seleção MultiLine do
mensagem “Digite os dois valores! O componente tb_resultado, no painel Properties.
segundo valor deve ser diferente de Isso fará que conforme o conteúdo aumente, a
zero. ” caixa de texto também aumentará.

INVENTOR
Artigos LINKS
Resolução de Problemas
Tutoriais
Galeria de Aplicativos
The MIT App Inventor Library: Documentation & Support
Livros
App Inventor Built-in Blocks
Component Reference
App inventor Tutorials

INVENTOR
39
CAPÍTULO 02
MEU SEGUNDO APLICATIVO

(Sons dos Animais)
Neste capítulo iremos aprender desenvolver um

aplicativo que quando o usuário clicar no botão
referente a um animal
(contendo sua imagem), irá reproduzir o respectivo

som do animal. Vamos lá! Inicie um novo projeto.
Criando a interface:
Arraste um label (legenda) para o topo.
Adicione 03 organizações na horizontal ao

seu visualizador.
Para cada organização na horizontal, insira

dois botões.
Insira, também, o componente Player.

INVENTOR
41
O componente Player não será exibido. O mesmo servirá para reproduzir o áudio referente ao
respectivo animal.
Para fazer download dos sons de

animais, utilize o site:
http://soundbible.com
O mesmo dispõe de vários áudios
dos mais variados tipos.
Faça as seguintes modificações:
• Centralize os componentes de sua tela verticalmente e horizontalmente.

• Defina a largura e altura como “Fill Parent” para os todos os componentes de organização na
horizontal e todos os botões. Isso fará com que os mesmos se preencham, tanto na altura
quanto na largura; conforme o tamanho da tela do dispositivo.
• Para o componente Label1, defina apenas a largura como “Fill Parent”, centralize o conteúdo do
mesmo, aumente o tamanho da fonte (para um melhor destaque).
• Delete os textos contidos em cada botão. Pois iremos utilizar imagens como referência.

INVENTOR
INVENTOR
Defina para cada botão, a imagem de um animal. Renomeie os componentes para facilitar a
identificação no momento da programação em blocos. Como no exemplo abaixo:

INVENTOR
Faça o envio dos arquivos em áudio dos sons dos animais. Através do painel “Media”, você poderá
administrar todos os arquivos que foram inseridos em seu projeto.

INVENTOR
Programando seu aplicativo:
Tudo acontecerá quando o botão do animal for clicado. Portanto, adicione o bloco abaixo
referente ao botão do sapo:
No componente player_somAnimal, procure pelo bloco abaixo:

INVENTOR
O mesmo fará com que um determinado áudio que definirmos, seja reproduzido. E o
bloco abaixo fará com que o áudio seja reproduzido.
Sua programação deverá ser finalizada, ao botão do sapo, desta forma.

INVENTOR
Programação para os demais botões:

INVENTOR
Com base nos seus conhecimentos adquiridos até o presente momento. Finalize
o seu aplicativo, inserindo as duas imagens para os dois botões restantes.
Programe os respectivos botões para que os áudios dos animais sejam
reproduzidos.
ATIVIDADE DESAFIO (Estudo de Caso)
Aline é professora do ensino infantil e foi lhe dada a missão

de desenvolver um aplicativo que auxilie os alunos de suas
turmas o aprendizado das vogais.
Aline está muito ocupada e passou a missão para a sua pessoa.

Como você ama desafios, crie dois modelos de aplicativos para
o caso em questão.

INVENTOR
CAPÍTULO 03
MEU TERCEIRO APLICATIVO

(Institucional Clube 41)
Neste capítulo iremos aprender desenvolver um

aplicativo institucional para a empresa Clube 41.
Diferente dos aplicativos anteriores, este aplicativo
irá conter mais telas. Vamos lá! Inicie um novo
projeto na plataforma do MIT App Inventor.
Criando a interface da tela inicial:

INVENTOR
Faça os seguintes ajustes para a tela inicial:
• Centralize os componentes de sua tela horizontalmente e verticalmente;

• Defina um nome para o seu aplicativo;
• Uma cor de fundo ou uma imagem de fundo;
• Um ícone (preferencialmente em PNG);
• Mantenha a barra de status;
• Foram adicionadas organizações na vertical e na horizontal para um melhor layout dos
componentes. Outras organizações servem apenas para dar um espaçamento entre os mesmos.
• O tamanho deverá ser definido como responsivo;
• Fica a seu critério definir a orientação da tela (paisagem, retrato, sensor ou usuário);
• Ao topo, foi adicionado um componente do tipo imagem para a logo da empresa;
• Tire a visibilidade de seu título.
Adicione outras telas clicando no botão Add Screen. Os nomes das telas serão: Clientes, Contatos,
Empresa e Servicos (sem o “Ç”, cedilha).

INVENTOR
Os layouts para as telas você encontra
abaixo. Navegue através do botão abaixo
para selecionar as telas desejadas:

INVENTOR
Telas Clientes, Empresa e Serviços
As telas em questão terão a mesma interface (design).
A organização na
horizontal foi adicionada
para aplicar uma
distância do topo da tela
para o botão. Não foram
definidos nomes para os
botões inseridos e nem o
texto da caixa de texto.
Faremos isso na
programação em blocos.

INVENTOR
Tela Contatos

INVENTOR
O formulário de contato não é funcional, é apenas um exemplo de como ficaria se fôssemos utilizar
os componentes disponíveis no MIT App Inventor. Neste curso iremos aprender sobre o
componente WebView; onde podemos inserir um formulário criado através do Google Drive.
O CDP Connect dispõe de uma oficina sobre Formulários do Google. Acesse clicando na imagem
abaixo:

INVENTOR
Programando o aplicativo
Tela Inicial (Screen1)
Tudo acontecerá quando o usuário clicar no botão referente a tela que deseja abrir. Faça a programação
abaixo para abrir as telas do seu aplicativo.

INVENTOR
O bloco abaixo você encontra em controles.
O mesmo faz com que abra uma página de nome

definida pelo o usuário. O bloco de texto deverá
conter o nome da página do mesmo jeito que você
inseriu. O famoso case-sensitive.
A programação ao lado, fará o
seguinte: quando a tela for
inicializada, todos os botões terão
suas dimensões (altura e largura)
definidas em 100 pixels.
Isso facilitará a sua vida em uma

futura atualização, pois poderá
modificar diretamente através dos
blocos.

INVENTOR
Tela Clientes, Empresa e Serviços
Primeira parte de nossa programação em blocos diz que: “quando

o botão voltar (o do final da página) for clicado a tela atual irá
fechar”. Diferente da tela inicial onde programamos para que uma
nova tela seja aberta, nessa fazemos o oposto. Se fosse feita a
programação utilizando a mesma lógica do início, teríamos várias
telas abertas, consumindo recursos do smartphone do usuário.
Um outro caso possível seria o da

imagem acima, que diz: “quando o
botão voltar for pressionado, a
tela Clientes irá fechar.”
Acrescentando esta programação,
você fará com que a aplicação não
feche por completo, apenas a tela
atual.

INVENTOR
A programação acima fará o seguinte: “Quando a tela for inicializada, faça:
• Insira uma imagem no botão bt_logo com a respectiva imagem da tela em questão;
• O botão bt_logoClientes não terá nenhum texto;
• O tamanho do botão bt_logoClientes será 100px (altura e largura);
• O botão bt_voltar exibirá o texto “<< Voltar”;
• A caixa de texto tb_conteudo será definida como MultiLine, para que aumente conforme o
conteúdo adicionado;
• A caixa de texto tb_conteudo terá o texto de apresentação da empresa (se tela Empresa), lista
de serviços (se tela Serviços) e lista de clientes (se tela Clientes).

INVENTOR
Tela Contatos
Como na tela anterior, temos o botão voltar programado para fechar a tela quando for clicado. E
quando a tela de Contatos for iniciada, temos menos opções do que o da tela de Clientes.

INVENTOR
ATIVIDADE DESAFIO (Estudo de Caso)
Luciano Caracas é um grande amigo. O mesmo é um

empreendedor no ramo alimentício desde 2009. Possuindo
uma lanchonete localizada no bairro Conjunto Ceará, em
Fortaleza/CE. O seu cardápio dispõe de: sanduíches (pães:
árabe, bola, forma), pastéis, pizzas, sucos, vitaminas e açaí na
tigela.
Luciano contratou os seus serviços, pois deseja criar um

aplicativo institucional para o seu empreendimento: a Caracas
Lanches. O aplicativo não será distribuído.
Dependendo do resultado na criação do aplicativo citado, o mesmo poderá contratar os seus

serviços para o desenvolvimento de um possível aplicativo de pedidos online.
P.S. É apenas um estudo de caso para aprimorar os seus conhecimentos no módulo atual.

INVENTOR
CAPÍTULO 04
MEU QUARTO APLICATIVO

(Síntese de Voz do Google)
Neste capítulo iremos aprenderemos a criar um

aplicativo para utilizar a Síntese de Voz do Google, no
popular “voz da mulher do Google”. É um aplicativo
fácil, onde utilizaremos 06 modos diferentes de criá-
lo. Abra sua plataforma de desenvolvimento e inicie
um novo projeto.
Primeiro modo
Insira no visualizador o componente TextToSpeech, que você encontra no painel Paleta no grupo
Media. O mesmo é um componente que não ficará visível. Vamos programar! O que faremos é o
seguinte: “quando a tela for iniciada, a ‘mulher do Google irá falar’: Bem-vindo, senhor! Você está
ótimo. Mais lindo que nunca!”
No bloco de texto, insira a mensagem do nosso caso ou outra que você desejar.

INVENTOR
Segundo modo
Insira um único botão em seu aplicativo com os dizeres, “Clique aqui!”. Centralize
os componentes de sua tela horizontalmente e verticalmente. Vamos
programar! Delete a programação anterior e insira uma nova conforme a
imagem abaixo:
O que foi feito foi muito básico. Quando o botão é clicado, o sistema chama a
função da síntese de voz e executa o texto que foi definido pelo usuário.

INVENTOR
Terceiro modo
Acrescente uma caixa de texto ao seu aplicativo, logo acima do botão já existente.
Habilite a caixa de texto MultiLine da caixa de texto adicionada e apague o Hint (dica) para um
melhor resultado. Vamos programar! O que iremos fazer é o seguinte: “Quando o usuário clicar no
botão com o texto ‘Clique aqui’, o sistema irá pegar o que foi digitado pelo usuário e reproduzir
através da síntese de voz.” A programação você encontra abaixo:

INVENTOR
Validando o terceiro modo: Digamos que o usuário clique no botão sem ter digitado o algo na caixa
de texto; então teremos que exibir uma mensagem, e faremos isso usando os conhecimentos
aprendidos até o momento com a programação abaixo:

INVENTOR
Quarto modo
Exibindo uma sequência de texto.

INVENTOR
Quinto modo
Definindo valores aleatórios. Será como um biscoito da sorte utilizando a “voz da mulher do Google”.
O bloco pick a Randon item list você encontrará em Lists. Esse bloco fará com que, a partir de uma
lista, os valores sejam gerados aleatoriamente. O bloco make a list (também encontrado em Lists),
fará com que a lista seja criada com os itens desejados. Dependendo do caso, quanto mais opções
melhor ficará o resultado final.

INVENTOR
Utilizando o aplicativo “Ano de Sua Morte”, criado na oficina EAD do CDP

Online, adapte-o para que o resultado seja dito através da síntese de voz e
também pelo modo convencional, ou seja, pela caixa de texto.
ATIVIDADE DESAFIO
Utilizando os seus conhecimentos atuais, crie um aplicativo utilizando a

síntese de voz do Google.
Tema: Horóscopo Chinês.

INVENTOR
CAPÍTULO 05
MEU QUINTO APLICATIVO

(Leitor de QR Code)
Neste capítulo iremos aprenderemos a criar um LEITOR DE

QR CODE. É um aplicativo bem simples, mas bastante útil
para o aprendizado no módulo atual. Vamos lá!
Inicie um novo projeto e crie o design abaixo:

INVENTOR
Foram utilizados os seguintes componentes: Caixa de texto, botão e o leitor
de QR Code (que você encontra no painel Paleta, no grupo Sensors). Nas
propriedades do componente BarcodeScanner1, desabilite a caixa de
seleção exitente; pois iremos utilizar a aplicação nativa do Android e não um
externo.
Vamos programar!
O que queremos é o seguinte: quando o usuário irá clicar no botão “Escanear QR Code”, o
componente do leitor de QR Code será chamado, irá ler o QR Code. Logo após a leitura, irá exibir o
link do código na caixa de texto. A programação você confere abaixo:

INVENTOR
Teste o seu aplicativo com os QR Codes abaixo:
Para criar QR Codes, você poderá utilizar o site: http://br.qr-code-generator.com

INVENTOR
Acrescente ao seu Design, o componente WebView, localizado no painel Paleta no grupo Interface de
Usuário. Vamos programar: o que queremos é que após a leitura e exibição do link na caixa de texto; a
página do site seja exibida através do WebView.

INVENTOR
CAPÍTULO 06
MEU SEXTO APLICATIVO

(Aplicativo para o seu site)
Neste capítulo, iremos aprender a criar um aplicativo para

um site, blog, loja virtual ou canal do YouTube já existente.
Tudo através do componente WebView para a exibição os
sites!
Criando a interface
Você irá precisar de dois componentes

que ainda não vimos até o momento:
o componente ListPicker e o
componente Notifer. O ListPicker
servirá como menu e o Notifer para
exibir notificações.
Defina ao componente ListPicker, em

ElementsFromString, as opções de
nosso menu: Site, Plataforma EAD,
Facebook e Sair. Separando as opções
por vírgula. Completando as
propriedades do ListPicker, insira, para
o título e para o texto do mesmo o
nome: ☰ Menu. A organização na
horizontal que está entre o listpicker e
o label possui uma largura de apenas
05 pixels.
INVENTOR
Vamos programar:
Primeira parte
Quando a tela for iniciada, o componente WebView irá exibir o site do CDP Connect.
Segunda parte

INVENTOR
Quando o usuário selecionar a opção desejada, faremos uma validação: Se a seleção for igual ao
texto Site, então será exibido, no webview, o site do CDP Connect. Senão se igual ao texto
Plataforma EAD, então será exibido, no webview, o site da Plataforma EAD. E assim por diante.
Finalizando, temos a opção “Sair”, que irá fechar o aplicativo caso selecionada.
Terceira parte
Quando o botão voltar for pressionado, faremos uma validação para que o aplicativo não feche
instantaneamente: Se a Url atual for diferente da Url que definimos na primeira parte de nossa
programação em blocos, então a página anterior será exibida. Senão o componente Notifier1 irá
exibir a mensagem “Para sair, utilize o menu!” e irá exibir o site do CDP Connect.
INVENTOR
Com base nos seus conhecimentos adquiridos até o presente momento, crie
um aplicativo para o seu site desenvolvido.
ATIVIDADE DESAFIO
Com base nos seus conhecimentos atuais, e com o

conteúdo de Wordpress, crie um aplicativo de notícias.
O tema do seu site de notícias é livre. Pode falar sobre

moda, atualidades, educação, tecnologia.
Use sua criatividade da melhor forma possível!

INVENTOR
CAPÍTULO 07
MEU SÉTIMO APLICATIVO

(Pedra, Papel e Tesoura)
Neste capítulo, iremos aprender a criar o estendidos). Para definir o vencedor
aplicativo Pedra, Papel e Tesoura (ou segue-se a seguinte regra: pedra ‘quebra’ a
Joquempô). Caso não saiba como funciona a tesoura; tesoura ‘corta’ o papel e papel
brincadeira, iremos explicar: Dois participantes ‘embrulha’ a pedra.
ficam um de frente para o outro e, ao mesmo
tempo, jogam uma das mãos para frente Só que em nossa versão, iremos jogar
representando um dos três símbolos: pedra (mão “contra a máquina”. Será o usuário contra o
fechada), papel (mão aberta) ou tesoura (dedos aplicativo em uma batalha sem fim.
indicador e médio
Criando a interface

INVENTOR
Interface simples que consiste em um Gif de carregamento, indicando que o sistema aguarda a
jogada do usuário. O mesmo pode ser definido com um componente do tipo imagem (Largura:
100px / Altura: 100px), que após o usuário definir sua jogada, irá exibir a imagem da jogada do
sistema. Abaixo de tal componente temos uma caixa de texto que irá exibir a jogada em texto (se foi
pedra, papel ou tesoura).
Três botões indicam as jogadas que o usuário poderá utilizar. Também com dimensões 100px por
100px.
Um placar para que o usuário possa saber como anda o seu desenvolvimento no jogo, ou seja,
quantas derrotas, vitórias e empates.
Para uma melhor jogabilidade, foi definida a orientação de tela do tipo retrato.

INVENTOR
Programando
Definindo variáveis
Nosso aplicativo não sabe o que é Pedra, Papel e nem Tesoura. Teremos que
“ensiná-lo” como jogar. Para isso, crie as variáveis abaixo:
A variável jogadaComputador, será atribuída

aleatoriamente de 01 até 03 logo após o
usuário realizar sua jogada. Para isso, o sistema
deverá entender o seguinte:
1 = Pedra
2 = Papel
3 = Tesoura
As três variáveis abaixo, indicarão se o usuário

está perdendo, ganhando ou empatando
conforme o andamento do jogo.

INVENTOR
Programando botões

INVENTOR
Quando o usuário clicar no botão Pedra, faça:
• Atribua o valor 01 para a variável minhaJogada;

• Atribua um valor entre 01 e 03 para a variável jogadaComputador;
• Se:
➢ O valor da variável jogadaComputador for igual a 01, então imprima
a imagem pedraAdv no componente imgAdv; senão se,
a imagem papelAdv no componente imgAdv; senão se,
a imagem tesouraAdv no componente imgAdv.

INVENTOR
Quando o usuário clicar no botão Papel, faça:

• Se:
➢ O valor da variável jogadaComputador for igual a 01, então imprima a imagem pedraAdv
no componente imgAdv; senão se,
➢ O valor da variável jogadaComputador for igual a 02, então imprima a imagem papelAdv
no componente imgAdv; senão se,
➢ O valor da variável jogadaComputador for igual a 03, então imprima a imagem
tesouraAdv no componente imgAdv.
Quando o usuário clicar no botão Tesoura, faça:

• Se:
pedraAdv no componente imgAdv; senão se,
papelAdv no componente imgAdv; senão se,
tesouraAdv no componente imgAdv.

INVENTOR
De uma forma mais fácil, poderíamos criar uma procedure (função) para o bloco que mais se repetiu
no passo anterior. Dessa forma, economizaríamos tempo e continuaríamos com nosso juízo intacto.
Criando procedures

INVENTOR
88
Procedure jogadaComputador
Como percebemos anteriormente, havia uma repetição nos blocos

acima; que é justamente a jogada do sistema.
“Enxugamos” o código dessa forma. Resumindo, atualize sua
programação em blocos, quanto aos botões, para que fique como
na imagem abaixo:

INVENTOR
89
Apenas chamamos a procedure
jogadaComputador sempre que os
botões acima são pressionados.

INVENTOR
90
Procedures: ganhou, perdeu e empatou
Tais procedures acusam seus

objetivos. Além do óbvio, elas
irão atribuir para as variáveis
do placar: a quantidade de
derrotas, vitórias e empates.
E para saber se o usuário

ganhou, perdeu ou empatou,
precisamos criar uma
procedure apenas para validar
o fato em questão.

INVENTOR
91
Procedure de validação

INVENTOR
92
É nessa procedure (validacao, sem o cedilha e sem o acento) que você ensina ao
sistema/aplicativo se o usuário irá perder, ganhar ou empatar.
Se a jogadaComputador for igual a minhaJogada então dará empate. Na forma básica, como
aprendemos no começo, o sistema só sabe os valores 01, 02 e 03 (Pedra, Papel e Tesoura,
respectivamente).
Exemplo básico: Quando o usuário clica no botão Papel, é atribuído o valor 2 na variável
minhaJogada e atribuído, aleatoriamente, um valor inteiro entre 01 e 03 para a variável
jogadaComputador. Logo após isso, é feita uma validação para saber se o usuário ganhou,
perdeu ou empatou. Como foi Papel e o sistema gerou, por exemplo, o valor 01; então o usuário
iria ganhar (papel ‘embrulha’ a pedra). Lembrando que 01 é Pedra e 02 é papel.
Atualize os seus botões para que os mesmos chamem a procedure de validação.

INVENTOR
93
INVENTOR
94
ATIVIDADE DESAFIO
Sem usar procedures crie o mesmo aplicativo do

Pedra, Papel e Tesoura. Você terá mais trabalho, mas
irá praticar ainda mais o conteúdo desde capítulo.

INVENTOR
95
CAPÍTULO 08
MEU OITAVO APLICATIVO

(Jasmin)
Neste capítulo, você deverá criar um aplicativo

apenas com as definições dadas. Vamos lá!
O nome do aplicativo será: Jasmin. Uma abreviação para Jogo Altamente Simples e Muito
Inteligente.
Premissa (Objetivo): Ajudar crianças de 08 a 10 anos no aprendizado da matemática através de
desafios da mesma área de estudo.
Seu cliente criou um

protótipo de como
quer que o aplicativo
fique, o modelo você
encontra abaixo:

INVENTOR
97
1 – Seleção de operação matemática, que conforme o nível de dificuldade, irá
gerar uma conta matemática;
2 – Exibição da conta que se deseja obter o resultado;
3 – Caixa de texto para inserção do possível resultado da conta matemática;
4 – Placar exibindo a quantidade de erros e acertos;
5 – Nível de dificuldade.
Apenas analisando as informações e o vídeo do funcionamento do aplicativo,

crie o aplicativo em questão utilizando a engenharia reversa.

INVENTOR
98
CAPÍTULO 09
ATIVIDADES DE
DESAFIOS
Tais atividades servem para aplicar o conhecimento

obtido no decorrer do módulo e para que tenham
contato com diversos estudos de caso.
ATIVIDADE 01 - Idosos
Crie um aplicativo que auxilie idosos no aprendizado da tecnologia da

informação. Seu aplicativo deverá ter no mínimo 05 telas.
ATIVIDADE 02 – Agendamento/Reserva
Crie um aplicativo que auxilie o CDP Connect na marcação de horários

para: hora livre e digitação. Seu aplicativo deverá ter apenas uma tela.
P.S. Existem plataformas que disponibilizam serviços online para

agendamentos/reservas. Basta apenas você incorporar tal serviço ao seu
aplicativo.

INVENTOR
100
ATIVIDADE 03 – Pesquisa de Opinião
Crie um aplicativo que seja uma espécie de central de pesquisa de

opinião para diversas marcas. Mínimo 03 telas.
ATIVIDADE 04 – Amado Nordeste
Crie um aplicativo que promova o turismo em sua região. Seu

aplicativo pode conter, por exemplo: um dicionário contendo as
gírias de sua região, os lugares mais visitados, curiosidades,
principais artistas etc.

INVENTOR
101
CAPÍTULO 10
EXTRA
(Galeria do MIT App Inventor)
Você pode utilizar projetos de outros usuários clicando no meu Gallery de seu MIT App Inventor. O
mesmo dispõe de vários aplicativos criados através da plataforma.

INVENTOR
103
Para utilizar os projetos existentes, basta selecionar o projeto e clicar
em Open The App.

INVENTOR
104
www.cdpconnect.com.br

INVENTOR

Apostila Ebook - Desenvolvimento de Aplicativos

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila Ebook - Desenvolvimento de Aplicativos

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento de

Todos os direitos reservados para CDP CENTRO DE DESENVOLVIMENTO

Desenvolvimento de Apps com MIT APP 2

Desenvolvimento de Apps com MIT APP 3

Desenvolvimento de Apps com MIT APP 5

Para acessar, clique no

Site do MIT App Inventor -

Desenvolvimento de Apps com MIT APP 6

MEU PRIMEIRO APLICATIVO (Calculadora)

Neste capítulo iremos aprender a criar uma conta na

E com os conceitos aprendidos, daremos início a

Desenvolvimento de Apps com MIT APP 7

Acesse o site do MIT App Inventor e

Será necessário fazer o login

Desenvolvimento de Apps com MIT APP 8

Caso queira preencher um breve

Desenvolvimento de Apps com MIT APP 9

Desenvolvimento de Apps com MIT APP 10

Iniciando um seu primeiro projeto

Clique em “Start New Project”

O nome do seu projeto não poderá iniciar com

Desenvolvimento de Apps com MIT APP 11

Desenvolvimento de Apps com MIT APP 12

• User Interface: possui componentes como botões, imagens etc;

Desenvolvimento de Apps com MIT APP 13

• Componentes visíveis (botões, imagens etc): ficam na própria tela do aplicativo;

Desenvolvimento de Apps com MIT APP 14

Fonte: MIT App Inventor

Interface para programar o comportamento do aplicativo, juntando blocos.

Built-in Drawers (Blocos Embutidos):

Component-Specific Drawers (Componentes Específicos):

Encontre blocos para comportamentos específicos e arraste-os para a Viewer.

Blocks Button (Botão Blocos):

Desenvolvimento de Apps com MIT APP 16

Note que conforme os componentes vão

Os mesmos servirão para o usuário

Desenvolvimento de Apps com MIT APP 18

Clique no componente Screen1 e defina as seguintes propriedades para a sua tela:

Desenvolvimento de Apps com MIT APP 19

Desenvolvimento de Apps com MIT APP 20

Desenvolvimento de Apps com MIT APP 21

Para facilitar o momento da programação em blocos, onde possamos identificar os

Desenvolvimento de Apps com MIT APP 22

Desenvolvimento de Apps com MIT APP 24

Desenvolvimento de Apps com MIT APP 25

Após inserir tais blocos, encaixe-os.

Desenvolvimento de Apps com MIT APP 26

Após inserir o bloco, insira o bloco em Variables. Encaixe o bloco no último

Desenvolvimento de Apps com MIT APP

Desenvolvimento de Apps com MIT APP 28

Desenvolvimento de Apps com MIT APP 29

Para isso, no componente referente

Desenvolvimento de Apps com MIT APP 30

Agora faça com que os demais botões realizem suas

Desenvolvimento de Apps com MIT APP 31

Desenvolvimento de Apps com MIT APP 32

1. Baixe o emulador em: http://appinv.us/aisetup_windows

Desenvolvimento de Apps com MIT APP 33

1. Conecte o smartphone ao computador através de um cabo USB;

Android 3.2+: Configurações > Aplicações > Desenvolvimento;

3. No ambiente de programação clique em “Connect” e depois em “USB”;

Desenvolvimento de Apps com MIT APP 34

Desenvolvimento de Apps com MIT APP 35