Programacao_para_Dispositivos_Moveis Slides de Aula - Unidade I

Prévia do material em texto

Prof. MSc. Olavo Ito
UNIDADE I
Programação para
Dispositivos Móveis
 Esta disciplina propõe ao aluno ingressante o entendimento e o desenvolvimento de 
pequenos projetos de aplicativos e jogos para celular, através de ferramentas visuais de 
uso livre, apresentando, também, diversos conceitos que serão tratados com profundidade 
no transcorrer dos cursos de CC e SI.
 Utilizaremos o MIT App Inventor 2 nas nossas aulas.
 Recurso mínimo: um computador conectado à internet.
 Recurso ótimo: um computador e um dispositivo móvel 
Android (smartphone ou tablet) conectados à mesma rede 
na internet.
Programação de dispositivos móveis – Apresentação
Aula 1 - 26/04/2022
2008:
 Google Android: Mark Friedman;
 MIT (Massachusetts Institute of Technology): Hal Abelson;
 Pedagogicamente, o App Inventor segue uma escola que começou com o trabalho de 
Seymour Papert e do MIT Logo Group;
 Scratch inspira o App Inventor, que é o ponto de partida para o Google Blockly.
2013:
 App Inventor 2.
História do App Inventor 
Lançado em setembro de 2008, o HTC 
Dream foi o primeiro dispositivo comercial 
com o sistema Android.
Autor: AKELA, N. D. E. Obra do próprio, 
CC BY-SA 3.0. Fonte: 
https://commons.wikimedia.org/w/index.ph
p?curid=6680413
Aula 1 - 26/04/2022
 PC Windows ou Mac, ou GNU/Linux conectado à internet. 
 Conta Gmail (Google) cadastrada.
Dispositivo Android podendo ser:
 Smartphone ou Tablet conectado ao PC por Wi-Fi;
 Smartphone ou Tablet conectado ao PC por cabo USB; ou
 EMULADOR Android instalado no PC ou Mac, ou Linux.
 Requisito ótimo: computador com Google Chrome ou Firefox, 
e internet de qualidade razoável, e um smartphone, ambos na 
mesma rede (Wi-Fi).
Pré-requisitos
Fonte: autoria própria.
Aula 1 - 26/04/2022
 No navegador, digitar o endereço appinventor.mit.edu.
 Para acessar o ambiente de desenvolvimento, clique em 
“Create Apps!”.
 Faça o login.
Acesso ao App Inventor 
Fonte: autoria própria.
Aula 1 - 26/04/2022
 A primeira providência sempre é configurar o ambiente para português do Brasil.
Acesso ao App Inventor
Fonte: autoria própria.
Aula 1 - 26/04/2022
 Lista com os projetos que já foram criados. 
 Botão “Iniciar novo projeto”.
 Botão “Apagar Projeto”: excluir um projeto assinalado. 
 Botão “Publicar na Galeria”: publicar aplicativo na galeria dos usuários do App Inventor e 
compartilhar com a comunidade dos desenvolvedores o seu projeto. 
 Botão “View Trash”: recuperar um projeto que foi apagado acidentalmente.
Tela de meus projetos
Fonte: autoria própria.
Aula 1 - 26/04/2022
Lixeira
 Para iniciar, clique no botão “Iniciar novo projeto”.
 Dar um nome ao projeto.
Iniciar um novo projeto
Fonte: autoria própria.
Aula 1 - 26/04/2022
Acesso às telas:
 Designer;
 Blocos.
Telas do App Inventor 
Fonte: autoria própria.
Aula 1 - 26/04/2022
 Os componentes são selecionados visualmente para fazer o seu layout das telas 
do aplicativo. 
 Cada componente presente na tela poderá ter o seu conjunto de propriedades predefinidas.
Apresentação – Designer
Fonte: autoria própria.
Aula 1 - 26/04/2022
Tela do designer:
- Nele estão listados todos os componentes que vamos usar e
como os componentes vão estar.
Tela dos blocos:
- Onde os componentes da tela do designer eles ganham vida,
é aquilo que fica atrás da tela. Como se comportam.
 No editor de blocos, os componentes adicionados na tela do Designer ficam disponíveis 
para a programação.
Apresentação – Blocos
Fonte: autoria própria.
Aula 1 - 26/04/2022
Qual das alternativas mostra o caminho correto para acessar o ambiente de desenvolvimento 
do App Inventor?
a) Criar uma conta do Google.
b) Utilizar um computador e um dispositivo móvel na mesma rede.
c) Alterar o idioma de English para português do Brasil.
d) Acessar o site appinventor.mit.edu e clicar no botão “Create Apps!”.
e) Instalar um emulador no computador de desenvolvimento.
Interatividade
Aula 1 - 26/04/2022
Qual das alternativas mostra o caminho correto para acessar o ambiente de desenvolvimento 
do App Inventor?
a) Criar uma conta do Google.
b) Utilizar um computador e um dispositivo móvel na mesma rede.
c) Alterar o idioma de English para português do Brasil.
d) Acessar o site appinventor.mit.edu e clicar no botão “Create Apps!”.
e) Instalar um emulador no computador de desenvolvimento.
Resposta
Aula 2 - 26/04/2022
Isso é equipamento
Isso é pré-requisito
Etapa posterior ao acesso ao site.
Esse é o caminho
Quando você só tem o PC ligado à rede.
 Dinâmica de funcionamento do App Inventor:
Concepção
APP
Componente
Comportamento:
manipulador de 
eventos
Visíveis
Botão, Caixa de 
Texto, Rótulo, Bola
Não visíveis
Sensor de 
Localização, Texto 
para a Fala, 
Temporizador
Evento
botão.Clique, 
pintura.ToquePara
Cima, 
bola.ColidiuCom
Respostas: a uma 
série de chamadas 
de função
Toque o Som, 
Bola, Enviar 
Mensagem
Aula 2 - 26/04/2022
Por exemplo, um GPS, um 
acelerômetro
 Relação entre os componentes, as suas características e a sua relação com o 
comportamento:
Comportamento
Componente
Não visíveisVisíveis
Manipulador
de Eventos
Bateu,
Refresh Time
Propriedades:
Texto,
Largura,
Altura,
Fundo
Aula 2 - 26/04/2022
Tela Designer
 Paleta (1);
 Visualizador (2);
 Componentes (3);
 Multimídia (4);
 Propriedades (5).
Espaço de trabalho – Designer
Fonte: autoria própria.
Aula 2 - 26/04/2022
Compôe por todos os componentes que podemos usar no app
inventor.
Pra onde os componentes da paleta vão ser movimen-
tados. Onde vamos ver o layout sendo feito.
Grupo dos componentes. Onde vemos a hierarquia
Onde está listado as nossas mídias que vão para dentro do
nosso sistema
Muda de formato conforme o componentes que tiver
mos apontando.
 As janelas estão conectadas.
 Uma peça arrastada da 
paleta para o visualizador, 
automaticamente, ocupa o 
seu lugar na árvore da janela 
dos componentes e a janela 
das propriedades é 
preenchida com os dados 
do componente.
Designer – Funcionamento
Fonte: autoria própria.
Aula 2 - 26/04/2022
 Todos os componentes 
estão na paleta.
Designer – Componentes
Paleta Finalidade do Componente
Interface do usuário 
Contém componentes visíveis com os quais o usuário
pode interagir, como: botão, rótulo, imagem, caixa de texto.
Organização 
Componentes de layout que são usados 
para organizar os componentes.
Mídia 
Contém componentes não visíveis, como: câmera,
filmadora, Sound Recorder, Text To Speech.
Desenho e Animação Contém componentes que podem ser usados para a animação.
Mapas 
Permite a inclusão de mapas para possibilitar 
ao usuário do aplicativo interagir com eles.
Sensores 
Inclui componentes que podem se comunicar
com os sensores Android, bússola, acelerômetro.
Social Inclui componentes sociais como as mensagens de texto.
Armazenamento
Recursos de armazenamento para a leitura/gravação de dados 
de/para o dispositivo.
Conectividade 
Inclui componentes para a conexão com a web ou outros
aplicativos nessa área, o programador pode incluir 
as funções relacionadas ao Bluetooth do smartphone.
LEGO®5MINDSTORMS®
Inclui componentes que permitem criar uma relação
entre o aplicativo e os equipamentos da LEGO.
Experimental
Por enquanto, inclui recursos de armazenamento
de dados na internet, ainda em caráter experimental.
Extension
Permite incluir novas funções desenvolvidas
por outros programadores ao aplicativo.
Fonte: autoria própria.
Aula 2 - 26/04/2022
 Conteúdo:
Designer – Paleta
Fonte: autoria própria.
Aula 2 - 26/04/2022
TV:
Designer – Exemplo
Fonte: autoria própria.
Aula 2 - 26/04/2022
Qual das alternativas mostra as características de um componente em relação ao layout
do visualizador?
a) Visível e não visível.
b) Evento e comportamento.
c) Organização vertical e organização horizontal.
d) Mídia e propriedade.
e) Interface do usuário, organização, mídia, desenho e animação, mapas,sensores, social, 
armazenamento, conectividade, LEGO®5MINDSTORMS®, experimental, extension.
Interatividade
Aula 2 - 26/04/2022
Qual das alternativas mostra as características de um componente em relação ao layout
do visualizador?
a) Visível e não visível.
b) Evento e comportamento.
c) Organização vertical e organização horizontal.
d) Mídia e propriedade.
e) Interface do usuário, organização, mídia, desenho e animação, mapas, sensores, social, 
armazenamento, conectividade, LEGO®5MINDSTORMS®, experimental, extension.
Resposta
Aula 3 - 27/04/2022
Grupos que compõe a paleta.
Grupos da janela do designer
É aquilo que compões alguns itens da paleta
O que um componente pode ter
Um componente pode ser visível ou não visível.
 Outros componentes:
Designer – Paleta
Fonte: autoria própria.
Aula 3 - 27/04/2022
- Os componentes do desenho e animação são essenciais pra desenvolver jogos
e animação.
- Com ele podemos desenvolver característivas especiais de criação de histórias
 e jogos.
- Armazenamento é onde guardamos informações.
- Mapas trabalhamos com mapas e google maps, marcadores e caminhos.
- Sensores acionam e dependem dos sensores q seu dispositivo possui. Ex: GPS, Acelerômetro, Orientação, proximidade,
barômetro
- Social é basicamente oq fazemos nas redes sociais, como compartilhar imagens com seguidores ou com contatos no Whatsapp.
- Conectividade se vc quer q o seu componente use bluetooth por exemplo.
- Experimental ainda está em fase de testes.
- Midia é basicamente oq está no slide
 Visualizador, Componentes e Mídia:
Tela do Designer
Fonte: autoria própria.
- Composto por diversas posições e montamos a hierarquia dos componentes.
- Treinaremos nas aulas práticas.
Aula 3 - 27/04/2022
 Propriedades:
Tela do Designer
Fonte: autoria própria.
Cada componentes tem as suas propriedades.
Aula 3 - 27/04/2022
Editor de Blocos
 A montagem dos blocos determina o comportamento de um componente.
Editor de blocos
Fonte: autoria própria.
Aula 3 - 27/04/2022
 Encaixes:
Editor de blocos
Fonte: autoria própria.
Aula 3 - 27/04/2022
 Blocos mutáveis:
Editor de blocos
Fonte: autoria própria.
Aula 3 - 27/04/2022
 O App Inventor é, muitas vezes, chamado de programação dirigida por eventos. (WOLBER; 
ABELSON; SPERTUS; LOONEY, 2011)
Editor de blocos
Tipo de evento Exemplo
Evento iniciado pelo usuário Quando o usuário clicar no Botão_1, faça...
Evento na inicialização Quando o aplicativo é iniciado, faça...
Evento do timer Após 20 milissegundos, faça...
Evento de animação Quando dois objetos colidirem, faça...
Evento externo Quando o telefone recebe uma mensagem de texto, faça...
Fonte: autoria própria.
Satélite
GPS
Sensores
Usuário
Relógio
Outros
dispositivos
WEB
APP
Aula 3 - 27/04/2022
Um evento tem q acontecer para que algo aconteça. Uma consequencia acontece por causa de
um evento.
 Evento iniciado pelo usuário.
Evento na inicialização:
 Quando o aplicativo precisa executar determinadas funções automaticamente; quando o 
aplicativo começa, utiliza-se os eventos de inicialização.
Evento do timer:
 Alguma atividade em um aplicativo é acionada pela passagem 
do tempo.
Editor de blocos
Fonte: autoria própria.
Fonte: autoria própria.
Fonte: autoria própria.
Aula 3 - 27/04/2022
Usuário clica ou arrasta em uma foto pra mudar de posição ou compartilhar
Indepente do usuário, o próprio app executa.
É um realógio que dispara um evento para que numa animação faça uma figura se mexer
Eventos de animação:
 Atividade envolvendo objetos gráficos (sprites) dentro de telas, que irão acionar eventos.
Evento externo:
 Atividade iniciada quando: um evento externo, uma mensagem, ligação, resposta da internet.
Editor de blocos
Fonte: autoria própria.
Fonte: autoria própria.
Uma bola encosta na parede ou uma bala atinge um jogador ele dispara um evento e vc faz o tratamento deste evento.
Aula 3 - 27/04/2022
Qual das alternativas mostra o que faz um aplicativo programado no App Inventor ter um 
comportamento ou outro?
a) Um botão.
b) Um clique.
c) Um evento.
d) Uma propriedade.
e) Um timer.
Interatividade
Aula 3 - 27/04/2022
Qual das alternativas mostra o que faz um aplicativo programado no App Inventor ter um 
comportamento ou outro?
a) Um botão.
b) Um clique.
c) Um evento.
d) Uma propriedade.
e) Um timer.
Resposta
Aula 4 - 27/04/2022
Nada mais é do que um componente. Ele é o que provoca ou não um evento.
Clique é o que o botão pode fazer.
App inventor é todo dirigido por eventos. Qualquer mudança de comportamento é iniciado por um evento.
É uma carecterística de um componente.
Um componente que gera eventos.
 Tela:
Editor de blocos
Fonte: autoria própria.
Aula 4 - 27/04/2022
Internos: Que estão permanentementes sempre presentes
no nosso app.
Componentes: Conforme o projeto de cada um.
Blocos:
 Os Blocos Internos alteram o comportamento geral do aplicativo ou do componente.
Editor de blocos
Fonte: autoria própria.
Aula 4 - 27/04/2022
Toda a programação acontece de cima pra baixo.
 Controle:
Editor de blocos
Fonte: autoria própria.
Aula 4 - 27/04/2022
Controles: Quando esse fluxo é interrompido, ele é alterado.
Vai alterar a corrente do meu programa.
Game over por exemplo
 Matemática:
Editor de blocos
Fonte: autoria própria.
Dessa forma consigo gerar blocos númericos, cálculos, etc.
Aula 4 - 27/04/2022
TV:
Fonte: autoria própria.
Aula 4 - 27/04/2022
 Texto:
Editor de blocos
Fonte: autoria própria.
Aula 4 - 27/04/2022
 Lógica:
Editor de blocos
Fonte: autoria própria.
Aula 4 - 27/04/2022
Falsos e verdadeiros. Operações lógicas.
 Variáveis:
 Procedimentos:
 Cores:
Editor de blocos
Fonte: autoria própria.
Aula 4 - 27/04/2022
Variáveis: São espaços nas memórias onde guardamos informações.
São programas que economizam códigos.
Trocar cor de algo ou até criar cores.
Listas:
 Listas são usadas para criar e manipular diferentes conjuntos de valores e seus elementos.
Dicionários:
 São estruturas de dados que associam um valor, geralmente, 
chamado de chave, a outro valor.
Editor de blocos
Fonte: autoria própria.
Aula 4 - 27/04/2022
Variável onde são guardadas informações em pilhas ou listas e acessamos através de índices.
Por exemplo uma lista de contatos.
Sabendo que o bloco faz o boneco dar um passo para frente, e as 
alternativas virar 90 graus, qual das alternativas mostra o conjunto de blocos que 
faz o boneco chegar ao marco de local?
a)
b)
Interatividade
d) .
e) .
Fonte: autoria própria.
c)
Aula 4 - 27/04/2022
Sabendo que o bloco faz o boneco dar um passo para frente, e as 
alternativas virar 90 graus, qual das alternativas mostra o conjunto de blocos que 
faz o boneco chegar ao marco de local?
a)
b)
Resposta
d) .
e) .
Fonte: autoria própria.
c)
Aula 4 - 27/04/2022
 AKELA, N. D. E. Obra do próprio, CC BY-SA 3.0. Disponível em: 
https://commons.wikimedia.org/w/index.php?curid=6680413.
 HOWE, D. Free on-line dictionary of computing. Disponível em: https://foldoc.org/. 1985.
 RESNICK, M. Give p’s a chance: projects, peers, passion, play. Boston, 2014.
 WOLBER, D.; ABELSON, H.; SPERTUS, E.; LOONEY, L. 
App Inventor. Sebastopol: O'Reilly Media Inc., 2011.
Referências
ATÉ A PRÓXIMA!