Sumário

O que você vai construir ..................................................................................................... 1

Antes de começar ................................................................................................................. 2
Colocando os componentes iniciais .................................................................................. 2
Adicionando comportamentos aos componentes .......................................................... 5

PhotoBoothApp

Aplicativo tutorial do Photo Booth

Este tutorial demonstra como desenvolver um aplicativo photo booth. Você

vai construir um aplicativo que permite tirar fotos, atribuir fotos a telas e
compartilhar fotos por e-mail. Quando uma foto é tirada, ela será exibida em
uma das 4 telas. Quando todas as telas tiverem sido atribuídas imagens, a
próxima atribuição de imagem irá girar de volta para o primeiro canvas.

O que você vai construir

• Um aplicativo de cabine de fotos que permite:

• Tire fotos usando a câmera
• Salve fotos em uma tela
• Exibir 4 imagens em 4 telas diferentes
• Selecione uma imagem de tela
• Compartilhe uma foto de lona

O aplicativo completo será parecido com a figura abaixo:

Antes de começar

Certifique-se de que seu computador e seu telefone estejam configurados para

usar o App Inventor. Inicie um novo projeto na janela Designer e nomeie-
o como "PhotoBooth". Conecte-se ao Telefone e certifique-se de que o telefone
tenha iniciado a exibição do projeto App Inventor.

Colocando os componentes iniciais

No Designer, clique na categoria Layout para visualizar todos os componentes

de layout do App Inventor. Selecione o layout HorizontalArrangement e solte-o
no visualizador de design. A partir do painel de propriedades, defina a largura
deste layout para "Preencher o pai".
Em seguida, na gaveta "Interface do usuário", selecione e solte três botões
neste layout e defina suas propriedades da seguinte forma:
 Componente Renomear para Propósit Propriedades
o

HorizontalArrangem HorizontalArrangeme Recipient Largura:

ent nt1 e para os Preencher pai
três
botões

Button btnHelp Botão de Imagem: ajuda.png

ajuda Texto: nenhum

Button btnTakeImageture Para tirar Texto: Tirar foto

foto Largura:
Preencher pai

Button btnCamera Para tirar Imagem: câmera.p

foto ng
Texto: nenhum

O arranjo completo deve parecer figura abaixo:

Selecione e solte outro componente HorizontalArrangment abaixo do

HorizontalArrangement1. Selecione os componentes abaixo e defina suas
propriedades conforme indicado:

Componente Renomear para Propósito Propriedades

HorizontalArran HorizontalArrang Recipiente Largura: Preencher pai

gement ement2 para
componen
tes abaixo

Canvas Canvas1 Imagem BackgroundImagem: phot

da câmera obooth.png
de Largura: Preencher pai
exibição

Label lblFiller1 Usado Texto: nenhum

como Largura 5
preenchim
ento
(lacuna)

Canvas Canvas2 Imagem BackgroundImagem: phot

da câmera obooth.png
Largura: Preencher pai
 de
exibição

Este arranjo deve parecer figura abaixo:

Selecione e solte outro componente HorizontalArrangment abaixo do

HorizontalArrangement2. Selecione os componentes abaixo e defina suas
propriedades conforme indicado:

Componente Renomear para Propósito Propriedades

HorizontalArran HorizontalArrang Recipiente Largura: Preencher pai

gement ement3 para
componen
tes abaixo

Canvas Canvas3 Imagem BackgroundImagem: phot

da câmera obooth.png
de Largura: Preencher pai
exibição

Label lblFiller2 Usado Texto: nenhum

como Largura 5
preenchim
ento
(lacuna)

Canvas Canvas4 Imagem BackgroundImagem: phot

da câmera obooth.png
de Largura: Preencher pai
exibição

Selecione e solte um componente TextBox abaixo do HorizontalArrangment3.

Selecione e solte Botão abaixo desta TextBox e defina suas propriedades
como abaixo::
 Componente Renomear para Propósito Propriedades

TextBox txtPictureToShare Apenas para Largura:

depurar propósito. Preencher pai
Usado para Texto: nenhum
mostrar o nome da Dica: Imagem a
imagem Compartilhar
Habilitado: falso

Button btnSharePicture Para iniciar o Largura:

processo de Preencher pai
compartilhamento Texto:
Compartilhar
imagem

Este arranjo deve parecer figura abaixo:

Finalmente, precisaremos de 3 componentes não visíveis:

• Câmera (camera) - Gaveta de mídia - usado para tirar foto -

Sensor
• Notificador (notifier) - gaveta de interface de usuário - para exibir
informações informativas
• Compartilhamento (sharing) -Gaveta social - para compartilhar
imagem via e-mail

Adicionando comportamentos aos componentes

Você adicionou button, Canvas, TextBox e componentes não visíveis. Agora é

hora de definir como os componentes se comportam.

Adicionando o evento Clique ao componente btnHelp Button

Este botão é usado para exibir informações de ajuda usando o componente

Notifier. Uma vez que este botão seja tocado, exibiremos informações de uso.
Como nosso texto de ajuda é longo, usamos um bloco de "join" (gaveta de
texto) para participar do nosso texto de ajuda. Observe que "join" tem um ícone
do mutador, que permite adicionar slots adicionais para mais entradas para
participar. Para uma explicação completa dos mutadores, consulte a
documentação AQUI.
Tirando fotos e salvando fotos em uma tela

Os usuários poderão clicar no botão btnTakePicture ou no botão btnCamera

para começar a invocar o aplicativo de câmera interna do dispositivo. Há 4
componentes de tela no layout da tela e eles são chamados canvas1 através
do Canvas4. Cada vez que uma foto é tirada, definiremos o fundo de um dos
componentes da tela na nova imagem. A 1ª imagem será definida como pano
de fundo do Canvas1 e a 2ª imagem será definida como pano de fundo do
Canvas2 e etc. Isso continuará para todos os quatro componentes de tela e,
em seguida, irá girar de volta para a primeira tela. Para acompanhar qual tela
deve ser usada, usamos uma variável global que será incrementada para cada
vez que uma foto for tirada.

Inicializando a variável global: Da gaveta De variáveis incorporadas,

selecione o bloco "initialize global name to". Mude seu nome para canvasNum.
Em seguida, da gaveta Matemática selecione o bloco número "0" e conecte-o
ao soquete do novo bloco variável:

Iniciando a câmera: Quando os botões btnTakePicture ou btnCamera forem

clicados, usaremos seu manipulador de eventos Click associado para capturar
o evento e iniciar a câmera usando o bloco Camera1.TakePicture:

Salvando imagens como fundos de tela: Depois que uma foto for tirada e
aceita, o evento Camera.AfterPicture será acionado. Neste evento, a tela
variável globalNum é incrementada por 1. Isso nos permitirá girar a tela e
salvar, como plano de fundo, o Canvas1 através do Canvas4. Quando o
canvasNum exceder 4, nós o fixamos de volta para 1 para que possamos
salvar a imagem de volta ao fundo do Canvas1. Para manter o código
modularizado, usamos um procedimento que pode aceitar uma imagem como
argumento (o caminho completo da imagem da foto apenas tirada).
Usando a gaveta Procedimentos Incorporados, selecione o bloco
"Procedimento" e adicione ao visualizador de editor de blocos. O procedimento
de volta tem um mutador. A figura abaixo mostra como usar o mutador para
construir o conjunto de procedimentos necessários PictureToCanvas.

Os blocos no procedimento precisarão inspecionar o valor do nosso índice

global, canvasNum. Se esse valor for 1, então definimos a imagem designada
(caminho) como o fundo do Canvas1, se o CanvasNum for 2, o definimos como
o fundo do Canvas2, e assim por diante. Para o propósito deste tutorial,
usaremos e senão bloco. O código completo se parecerá com a figura abaixo.

O procedimento setPictureToCanvas precisará ser invocado depois que uma

foto for tirada (Camera1.AfterPicture). Neste manipulador de eventos,
incrementamos nossa variável global "canvasNum" por 1.
Em seguida, inspecionamos se o valor resultante é maior que 4. Se assim for,
nós o devolvemos para 1.

O manipulador de eventos Camera.AfterPicture passa por um parâmetro

chamado "imagem" que é o caminho completo da imagem que acabou de ser
tirada. Sabendo disso, invocamos nosso procedimento "setPictureToCanvas"
passando este parâmetro de "imagem" para ele. O código de bloco completo
para Camera1.AfterPicture é mostrado na figura abaixo:

Agora, toda vez que uma foto é tirada, ela será exibida no Canvas1, depois no
Canvas2, depois no Canvas3, depois no Canvas4 e de volta para redefinir de
volta para o Canvas1.

Compartilhamento de fotos: Para um recurso adicional do aplicativo de

cabine de fotos, permitiremos que os usuários compartilhem uma imagem
selecionando-a (tocando em uma tela) e, em seguida, tocando no botão
"Compartilhar imagem". Para capturar os eventos de toque de tela, usamos o
manipulador de eventos Canvas.Touched. Este manipulador de eventos é
acionado toda vez que a tela é tocada. O Canvas também inclui uma
propriedade de bloco chamada Canvas.BackgroundImage que retorna o
caminho completo da imagem que é atribuído ao seu plano de fundo.
Recuperamos o caminho de imagem e o exibimos em nossa TextBox
(txtPictureToShare):
O código de bloco completo para lidar com os eventos de toque em todas as 4
telas é mostrado na figura abaixo. Observe que o código para todas as 4 telas
são iguais, com exceção do nome de tela:

A funcionalidade final a ser implementada é compartilhar a imagem através do

componente Sharing. Quando btnSharePicture é clicado, precisamos verificar
se uma imagem válida foi selecionada. Uma imagem válida significaria que seu
caminho completo começa com "file:///". Para isso, usamos o bloco "contém" na
gaveta Texto Embutido.
Se o caminho incluir "file:///", então usamos o bloco
"Sharing.ShareFileWithMessage" e passamos por seu caminho completo de
imagem e corpo de mensagens.
Se o caminho for inválido (não incluir "file:///", exibiremos uma mensagem de
alerta usando o bloco "Notifier.ShowAlert".
Fonte:
PhotoBoothApp (google.com)