Criação de app - parte 1

Prévia do material em texto

Aula -1 
Casas da Inovação 
AULA 1
APRESENTAÇÃO DO CURSO
➢O curso Criação de Aplicativos apresentará aos alunos
conceitos de lógica de programação e criação de
aplicativos em Android. Por meio deste curso o aluno
terá contato com ferramentas e exemplos práticos que
possam auxilia-lo no seu desenvolvimento.
O que são Softwares?
➢São um conjunto de códigos ou instruções
desenvolvidos com a finalidade de executar tarefas ou
resolver problemas (GADDIS, HALSEY, 2015).
Softwares Desktop?
➢São programas ou aplicativos desenvolvidos para
executar em computador de forma local.
➢ Exemplo:
Softwares Web?
➢São programas ou aplicativos desenvolvidos para
executar na internet.
➢Exemplo:
Softwares Mobile?
➢São programas ou aplicativos desenvolvidos para
executar em aparelhos móveis (celulares, tablets,
smartphones, entre outros).
➢Exemplo:
O que é o App Inventor?
➢O App Inventor é uma ferramenta visual de arrastar e
soltar para criar aplicativos móveis na plataforma
Android. Você projeta a interface do usuário de um
aplicativo usando um construtor de GUI (interface
gráfica do usuário) baseado na web e, em seguida,
especifica o comportamento do aplicativo reunindo
"blocos" como se estivesse trabalhando em um
quebra-cabeça (Wolber et al. 2011).
O que podemos fazer com App Inventor?
➢Exemplo: O aplicativo de "secretária eletrônica" de
texto.
O que é o App Inventor?
➢Executar e criar aplicativos para telefones de forma
divertida e interativa.
➢Construir protótipos de aplicativos de forma rápida.
➢Desenvolver aplicativos exatamente como desejar.
➢Desenvolver aplicativos completos e de uso geral.
➢Aprender juntamente com a criação do aplicativo.
Que tipos de aplicativos podemos criar 
com App Inventor?
➢ Games (ex: Pac-Man , Space Invaders).
➢ Softwares educativos (ex: Apps para auxiliar no
estudo de um teste ou prova).
➢ Apps com reconhecimento de localidade (ex: Apps
que saibam onde você está ou para ajudá-lo a lembrar
onde você estacionou seu carro).
Que tipos de aplicativos podemos criar 
com App Inventor?
✓Aplicativos de alta tecnologia(ex: Apps que digitalizam
códigos de barras, escutam e reconhecem palavras,
reproduzem música, reproduzem vídeo).
✓Apps que controlam robôs (ex: Apps que fazem uso do
telefone como controle remoto de um robô).
✓ Outros...
Como posso ter acesso ao App Inventor?
➢ O App Inventor está disponível gratuitamente para
qualquer pessoa. Ele é executado on-line e é acessível a
partir de qualquer navegador.
➢ Acesso no site: https://appinventor.mit.edu
➢ Depois clique em Create apps!
Google Chrome Mozilla Firefox
https://appinventor.mit.edu/
Como posso ter acesso ao App Inventor?
➢Será necessário ter uma conta de e-mail da Google (gmail).
➢Caso não possua, clique em Criar conta e siga os passos.
O ambiente do App Inventor 
➢A tela Inicial do App Inventor exibe uma lista de todos os
projetos que você está criando. Nesta tela, você pode
abrir, excluir, fazer download e upload de projetos.
O ambiente do APP INVENTOR 
➢Para acessar seus projetos basta clicar em My Projects.
O ambiente do APP INVENTOR 
➢Para criar um novo projeto, clique no botão New Project.
➢ Especifique o nome do projeto e clique em OK.
O ambiente do APP INVENTOR 
➢Esta tela é conhecida como Designer. Ela é utilizada para
criar a tela do aplicativo.
Paleta Visualizador Componentes Propriedades 
Mídia 
O ambiente do APP INVENTOR 
➢Paleta: fornece uma lista de componentes que você pode
usar para criar seu aplicativo. Um componente é um item
que executa um propósito específico dentro de um
aplicativo.
➢Exemplo:
Componente de imagem exibe uma imagem na tela.
Componente de botão aparece como um botão que o
usuário pode tocar.
Componente de mensagens de texto envia e recebe
mensagens de texto.
O ambiente do APP INVENTOR 
➢Obs: A Paleta é dividida em seções que contêm um grupo
de componentes. Cada seção representa uma categoria
de componentes. As diferentes seções são:
➢User Interface : são componentes fundamentais para
criar a tela de um aplicativo (botão, imagem, caixa de
texto, entre outros).
➢Layout: essa seção fornece componentes para organizar
outros componentes na tela do aplicativo. Eles fornecem
maneiras de organizar componentes horizontalmente,
verticalmente ou em linhas e colunas.
O ambiente do APP INVENTOR 
➢Media: fornece componentes para tirar fotos, gravar e
reproduzir vídeos, gravar e reproduzir sons, escolher
imagens da galeria do telefone, reconhecer fala e
converter texto em fala.
➢Drawing and Animation: fornece componentes para criar
desenhos simples e animações.
➢Sensors: permite que seu aplicativo acesse o
acelerômetro do dispositivo, sensor de localização, sensor
de orientação, componente de scanner de código de
barras e um sensor de comunicação de campo próximo.
O ambiente do APP INVENTOR 
➢Social: são componentes que trabalham com a lista de
contatos do telefone, fazem chamadas telefônicas,
enviam e recebem mensagens de texto e realizam
determinadas operações com o Twitter.
➢Storage: são componentes que armazenam dados
localmente no dispositivo ou remotamente em um
servidor da Web.
➢Connectivity: fornece componentes para iniciar
aplicativos externos, conectar-se a dispositivos Bluetooth
e navegar na Web.
O ambiente do APP INVENTOR 
➢LEGO MINDSTORM: esses componentes são
utilizados ​​para conectar um aplicativo a um robô LEGO.
O ambiente do APP INVENTOR 
➢Visualizador: aparece ao lado da coluna Paleta e mostra
uma área retangular que representa a tela do aplicativo.
O ambiente do APP INVENTOR 
➢Componentes: mostra uma árvore hierárquica listando
todos os componentes que você colocou no seu
aplicativo. Você pode usar a coluna Componente para
selecionar qualquer componente no seu aplicativo.
O ambiente do APP INVENTOR 
➢Mídia: abaixo da coluna Componentes, a coluna Mídia
permite gerenciar os arquivos de mídia (imagens, vídeos e
arquivos de áudio), ou seja, permite carregar esses
arquivos no servidor do App Inventor, fazer o download
deles do servidor para o computador e os excluir.
➢Obs:
➢Como o App Inventor armazena seus aplicativos na
nuvem, você precisa carregar os arquivos de mídia que
deseja usar em um aplicativo.
O ambiente do APP INVENTOR 
➢ Propriedades: permite alterar a aparência ou as
características de um componente.
➢Exemplos:
➢Componente Label (Exibe um texto): este componente
possui uma propriedade chamada Text. Você pode definir
a propriedade Text do componente Label para o texto que
deseja exibir.
➢Componente de imagem: este componente possui uma
propriedade chamada Picture que determina a imagem
exibida. Você define a propriedade Picture como o nome
do arquivo de imagem que deseja exibir.
O ambiente do APP INVENTOR 
➢ Editor de Blocos: é onde você monta blocos de código
que executam ações. Um bloco de código, ou
simplesmente um bloco, é uma forma que se parece com
uma peça de quebra-cabeça.
O ambiente do APP INVENTOR 
➢Editor de Blocos: O App Inventor fornece vários blocos
que representam ações e dados. Os blocos são moldados
de tal forma que você pode juntá-los para criar um
programa.
Blocos 
Embutidos 
gaveta de 
matemática
O ambiente do APP INVENTOR 
➢ Um ícone de lixeira aparece no canto inferior direito do
Blocks Editor, com este você pode excluir blocos que não
são mais necessários arrastando-os para a lixeira.
O ambiente do APP INVENTOR 
➢A área superior da tela do App Inventor: barra no topo
da tela que mostra os seguintes itens: Project, Connect,
Build, Help, My Projects, Guia e Relatar um problema.
Menu Superior 
O ambiente do APP INVENTOR 
➢ Project: o menu Project permite que você inicie, salve,
importe e exporte projetos.
➢Connect: permite se conectar a um dispositivo Android
ou ao emulador do Android.
O ambiente do APP INVENTOR 
➢Build: permite que você empacote um aplicativo para
que ele possa ser compartilhado com outras pessoas.
➢Help: fornece acesso à documentação, tutoriais e ao
fórum do App Inventor.
➢My Projects:exibe uma lista com todos os projetos
criados. Permite abrir, excluir, fazer download e upload de
projetos e executar outras ações.
O ambiente do APP INVENTOR 
➢Guia: abre uma página da Web separada contendo a
documentação do App Inventor.
➢Report an Issue (Relatar um problema): esse item leva
você ao fórum de suporte do App Inventor.
Exercícios de Fixação 
➢1-Quando um aluno está aprendendo programação de
computadores, é tradicional começar aprendendo a
escrever um programa Olá Mundo. Este é um programa
simples que exibe as palavras “Olá Mundo” na tela.
➢Instruções:
➢1- Clique em Start new project.
➢2- Atribua um nome para o projeto.
Exercícios de Fixação 
➢Instruções:
➢3- O componente Screen1 já deve estar selecionado na
coluna Componentes. Na coluna Properties, altere a
propriedade AlignHorizontal para Center e altere a
propriedade Title para Meu_Ola_Mundo.
Exercícios de Fixação 
➢ Instruções:
➢4- Arraste um componente Label da Paleta para o Viewer.
Isso cria um componente Label chamado Label1, com sua
propriedade Text definida como Text for Label1.
Exercícios de Fixação 
➢Instruções:
➢5 - Altere o nome do componente Label1. Verifique se o
componente Label1 está selecionado na coluna
Componentes e clique no botão Renomear. Digite
LabelMessage como o novo nome do componente e
clique em OK.
Exercícios de Fixação 
➢Instruções:
➢6 - Verifique se o componente LabelMessage está
selecionado na coluna Componentes e, na coluna
Propriedades, exclua o conteúdo da propriedade Text. (A
propriedade Text deve aparecer vazia.)
Exercícios de Fixação 
➢ Instruções:
➢7 - Criar um componente Button. Arraste o componente
Botão da seção Interface do usuário da Paleta para o
Visualizador.
Exercícios de Fixação 
➢ Instruções:
8 – Selecione o Button1 e altere o nome do componente
para BotaoMensagem. Em seguida, na coluna
Propriedades, altere a propriedade Text para Clique aqui.
Exercícios de Fixação 
➢Instruções:
9 – visualizar a tela do aplicativo no emulador. Clique no
botão Conectar na área superior da tela do App Inventor
e clique em Emulador no menu exibido.
Exercícios de Fixação 
➢ Instruções:
10 – Clique no editor de blocos: precisamos de um bloco
que seja executado quando o usuário clicar no
componente BotaoMensagem. Observe que a coluna
Blocos possui entradas para Screen1, LabelMessage e
BotaoMensagem.
Exercícios de Fixação 
➢ Instruções:
Obs: quando o componente BotaoMenssagem é
clicado,uma gaveta é aberta, revelando blocos que estão
relacionados ao componente BotaoMenssagem, Existem
numerosos blocos nesta gaveta (marrons, verde-claro e
verde-escuros)
Exercícios de Fixação 
➢Blocos marrons com a seguinte forma: são
manipuladores de eventos que funcionam com o
componente. Um manipulador de eventos é um bloco
que executa automaticamente quando ocorre um evento
específico.
Exercícios de Fixação 
➢Instruções:
Obs:
Blocos verdes claros com a seguinte forma: esses blocos
representam valores relacionados ao componente.
Blocos verde-escuros com a seguinte forma: esses blocos
são comandos que executam ações com o componente.
Exercícios de Fixação 
➢Instruções:
11 – Clique no BotaoMessagem, adicione a tela a opção
“when Click do”.
12 - Clique no LabelMessage, adicione a tela a opção “Set
text to”.
Exercícios de Fixação 
➢Instruções:
13 – Clique no Text, e adicione a tela a opção “Text String”.
14 - Junte os blocos conforme abaixo.
Exercícios de Fixação 
➢Resultado Final:
Atividades/Tarefas 
• Resolva o desafio da aula no documento desafio da aula
1.
• Tire suas dúvidas no Chat (entre as 8h da manhã ás 17h
– de segunda a sexta) -(Disponível na plataforma on-line
do curso).