Desenvolvimento para Dispositivos Moveis

Prévia do material em texto

DESENVOLVIMENTO 
PARA DISPOSITIVOS 
MÓVEIS
PROF CLAUDIANY MARTINS
Aulas teóricas Aulas práticas Avaliação
Introdução à dispositivos 
móveis
Desenvolvimento de 
aplicação: Flutter
Prova/projeto - valendo 8 
pontos
Ambientes de 
desenvolvimento
Desenvolvimento de 
aplicação: Flutter + Emulador
Atividades EAD - valendo 2 
pontos 
Introdução a Flutter Desenvolvimento de 
aplicação: Flutter + Widgets
Atividades práticas - valendo 
2 pontos extras
Flutter - Interface gráfica
CONTEÚDO PROGRAMÁTICO
Os critérios de aprovação/reprovação são:
● Média Parcial maior ou igual a 7,0 (sete) => APROVADO
● Média Parcial menor a 7,0 (sete) ou maior ou igual a 4,0 (quatro) => 
AVALIAÇÃO FINAL
● Média Parcial menor a 4,0 (quatro) => REPROVADO
Os critérios de aprovação/reprovação para quem está em AVALIAÇÃO FINAL:
● Média Final maior ou igual a 5,0 (cinco) => APROVADO
● Média Final menor a 5,0 (cinco) => REPROVADO
DESENVOLVIMENTO PARA 
DISPOSITIVOS MÓVEIS
● Introdução a Dispositivos Móveis
● Padrões para o Desenvolvimento de 
Aplicativos
● Prototipagem de Apps Móveis
● Programação de Apps para Android
INTRODUÇÃO A DISPOSITIVOS MÓVEIS
O que é um dispositivo móvel?
O que é um dispositivo móvel?
● Dispositivo digital que permite a mobilidade e o acesso à internet
○ Dispositivo computadorizado que caiba no bolso
○ Que funcione e se utilize em movimento acessando a internet
Quais os desafios no Desenvolvimento de Apps Móveis?
Desafios no Desenvolvimento de Apps Móveis
● Recursos físicos limitados
● Contextos de uso diversificados
● Diferentes atividades
● Atenção limitada
Desafios no Desenvolvimento de Apps Móveis
● Recursos físicos limitados 
○ CPU
○ Memória
○ Tamanho da Tela 
○ Dispositivos de Entrada
○ Tempo de Bateria
○ Telas pequenas
○ Etc. 
Desafios no Desenvolvimento de Apps Móveis
● Contextos de uso diversificados
Desafios no Desenvolvimento de Apps Móveis
● Diferentes atividades
Desafios no Desenvolvimento de Apps Móveis
● Atenção limitada
Interagindo com dispositivos móveis
Exemplos de interação com dispositivos móveis: sensor de movimento, captura de voz, leitura de 
QR code
Dispositivos Móveis Hoje
Dispositivos Móveis Hoje
VAMOS CONFIGURAR O AMBIENTE DE 
DESENVOLVIMENTO PARA DISPOSITIVOS 
MÓVEIS?
O que preciso saber sobre apps para 
dispositivos móveis 
● Ao desenvolver para dispositivos móveis, é fundamental manter-se 
fiel aos estilos e recomendações:
○ Design guideline
● Respostas e percepções do usuário relacionadas a um produto, 
sistema ou serviço antes, durante e depois de utilizá-lo.
○ Experiência do Usuário (UX)
Ambiente de desenvolvimento
Flutter SDK
O Flutter SDK pode ser utilizado no Windows, 
MacOS e Linux.
Objetivo
Criar uma APK (Android Package Kit ou Android 
Application Package) para Android e usaremos 
o Android Studio.
Instalar o Android SDK
1. Clique em Ferramentas > SDK 
Manager.
2. Na guia SDK Platforms, selecione 
Android 12.
3. Na guia SDK Tools, selecione Android 
SDK Build-Tools 31.
4. Clique em OK para instalar o SDK.
Vídeo mostrando como configurar o Android 
SDK:
https://youtu.be/a3VYs_eB3Gw
Ambiente de desenvolvimento
https://youtu.be/a3VYs_eB3Gw
Ambiente de desenvolvimento
● Android SDK instalado 
● Iniciar a instalação do Flutter SDK: 
○ Acessar o site de instalação do Flutter SDK: https://docs.flutter.dev/get-started/install 
○ Na página de download do Flutter SDK, clique no botão Windows
○ Vai abrir uma página chamada Get the Flutter SDK, logo abaixo dos requerimentos do 
sistema, clique no botão flutter_windows_3.7.3-stable.zip.
○ Na partição C:\, criar uma pasta chamada src, e descompactar o arquivo zipado do Flutter 
SDK nela. 
○ Criar uma variável de ambiente do Windows para utilizar a ferramenta de linha de comando 
do Flutter através do terminal do Windows.
■ Em PATH, vai criar a variável de ambiente: C:/src/flutter/bin
https://docs.flutter.dev/get-started/install
Validar a instalação do Flutter SDK
1. Abrir CMD
2. Digitar flutter doctor
Ambiente de desenvolvimento
Criar um app com Flutter
● Android SDK instalado 
● Variável de ambiente para o flutter 
● Flutter SDK
● Criar app flutter
○ flutter create minha_app_movel
● Criação finalizada
○ Entrar na pasta da app: como comando cd minha_app_movel
○ Abrir a app no visual studio code
● Executando o emulador do Android
Criar um app com Flutter
O Android Studio nos fornece um emulador Android. Falando 
em emulador, o que podemos fazer com um emulador? 
Criar um app com Flutter
● Executando o emulador do Android
○ Abrir o arquivo lib/main.dart
○ No terminal, executar o comando: flutter run
Criar um app com Flutter
Criar um app com Flutter
Prototipagem
A prototipagem é a criação de um protótipo, o que possibilita que uma 
ideia de produto seja posta em prática. Assim, ela testa a viabilidade do 
projeto e analisa possíveis erros de design, formulação e usabilidade.
https://cstqjr.com.br/o-que-e-prototipagem/
Prototipagem trata-se de um processo realizado para transferir ideias 
do conceito para a realidade durante o desenvolvimento de um objeto 
virtual ou físico, por meio de protótipos.
https://www.yazigi.com.br/noticias/entretenimento/o-que-e-prototipagem
Prototipagem
Vantagens 
A prototipagem é uma das etapas mais importantes pois ela ajuda a diminuir desperdícios, gastos e 
permite avaliar o valor do produto na concepção do cliente. 
Vamos abordar mais algumas vantagens da realização da prototipagem: 
● Testagem 
● Viabilidade e usabilidade 
● Feedbacks 
Prototipagem
● Testagem: com o protótipo em mãos, são realizados testes que permitem a identificação de falhas e 
defeitos no produto que poderiam passar despercebidos apenas com a idealização do projeto. Dessa 
maneira, pode-se realizar o estudo e o levantamento de soluções e consertar esses erros antes do 
lançamento do produto final. 
● Viabilidade e usabilidade: a criação de um protótipo facilita observar se o propósito idealizado e suas 
funcionalidades foram alcançadas. Assim também permite visualizar o processo de produção e de 
viabilidade do seu desenvolvimento. Portanto, caso alguma etapa não esteja de acordo com a ideia 
proposta, pode-se mudá-la sem gerar grandes custos. 
● Feedbacks: possibilita a análise do produto do ponto de vista do cliente. Então, é possível realizar 
feedbacks e sugestões para o melhoramento do produto. Desse modo, observa-se a interação do 
produto com o público e seu nível de aceitação. 
Prototipagem
O objetivo de um protótipo é testar a validade de uma proposta, e apesar 
de sua similaridade com o produto final, não deve, necessariamente, ser 
encarado como tal.
https://medium.com/ladies-that-ux-br/prot%C3%B3tipos-baixa-m%C3%A9dia-ou-alta-fidelidade-71d897559135
Prototipagem
Existem alguns fatores importantes a serem considerados quando construímos um protótipo, são 
eles:
● Fidelidade: é o quanto o protótipo deve ser fiel ao produto final. 
○ Prototipagem é de baixa fidelidade é quando o modelo é o mais simples a ser feito, ele pode 
ser bastante diferente do produto final. 
○ Prototipagem é de média fidelidade é quando o modelo é um pouco mais refinado que o de 
baixa fidelidade, mas ainda não necessita de uma preocupação estética. 
○ Prototipagem é de alta fidelidade é quando o modelo é o que mais se aproxima do objetivo 
final. 
● Descartável: é quando a prototipagem é descartável e é usada apenas para analisar e visualizar o 
produto, sendo descartado mais tarde. 
● Evolutiva: Quando prototipagem é a evolutiva, ou seja, quando ela é reutilizada e ocorre a melhoria do 
protótipo até torná-lo mais próximo o possível do produto final.
 
Prototipagem
Como classificar se uma prototipagem é de baixa ou alta fidelidade?
Segundo Deborah J. Mayhew (autora do livro “The Usability Engineering Lifecycle“), são quatro as dimensões 
que definem a fidelidade de um protótipo:
● Detalhamento: a quantidade de detalhes que o modelo suporta.● Grau de funcionalidade: a extensão na qual os detalhes de operação são completos.
● Similaridade de interação: o quão similar as interações com o modelo serão com o produto 
final.
● Refinamento estético: o quão realista o modelo é.
 
https://medium.com/ladies-that-ux-br/prot%C3%B3tipos-baixa-m%C3%A9dia-ou-alta-fidelidade-71d897559135
Prototipagem
Características de uma prototipagem de 
baixa fidelidade
● Baixo nível de detalhamento.
● Preferencialmente feito com papel e 
caneta.
● Representa visualmente as 
funcionalidades.
● Baixo custo.
● Rapidez na prototipação.
● Descartável.
 
Prototipagem
Características de uma prototipagem de média 
fidelidade
● Prioriza a hierarquia das informações e o 
fluxo de navegação.
● Possui simulações simples de uso 
(interação com botões, por exemplo).
● Pode ser feito com o auxílio de um 
computador, utilizando ferramentas como 
Balsamiq, Mockflow ou Draw.io, que já 
oferecem elementos prontos para a 
interface (como botões, campos de 
formulário etc.), agilizando a criação.
 
Prototipagem
Características de uma prototipagem de 
alta fidelidade
● Foco em aspectos visuais e funcionais 
da interface.
● Permite navegação e interação 
similares à versão final do produto.
● São desenvolvidos com o auxílio de 
softwares para criação de interfaces, 
como o Sketch, Figma ou Adobe XD.
 
Prototipagem
Atividade em grupo (valendo 1 ponto):
- Cada grupo vai ter 1.5 hora para criar um protótipo de um projeto mobile e fazer uma apresentação
O que deve ser feito:
● Projetar um aplicativo para smartphone para dividir a conta em um restaurante, ou seja, dividir o valor 
total pelo número de participantes. E não esquecer a taxa de serviço.
○ Deve ter uma tela de login
○ Deve ter uma tela de cadastro
○ Deve ter a tela de esqueci minha senha
○ Deve ter uma tela de convidar/ adicionar participante 
○ Deve ter a tela para fazer a divisão por participante
● Apresentar essa prototipagem
Entendendo Flutter
Flutter é um toolkit (kit de ferramentas) do Google User Interface (SDK) para criar aplicativos nativos 
para dispositivos móveis, web e desktop a partir de uma única base de código. Os aplicativos tem sua 
composição a partir de widgets, e utilizando a linguagem Dart.
Documentação flutter: https://flutter.dev/ 
Para quê serve?
Para criar aplicativos de qualidade, multiplataforma - um único código em Dart cria apps nativos tanto 
para iOS quanto Android nativos - gerando velocidade no desenvolvimento.
https://flutter.dev/
Entendendo Flutter
Entendendo Flutter
Vantagens
Desenvolvimento Rápido
● Acompanhe no navegador as alterações feitas no 
código em tempo real (Hot Reload).
● Conjuntos de widgets totalmente 
personalizáveis para criar interfaces nativas em 
minutos.
Interface do Usuário Expressiva e Flexível
● Crie recursos rapidamente, com foco nas experiências 
nativas do usuário final.
● A arquitetura em camadas (composição/componentes) 
permite a personalização completa, o que resulta em 
renderizações rápidas e designs expressivos e 
flexíveis.
Performance Nativa
● Os widgets do Flutter incorporam todas as 
diferenças entre plataformas, como barras de 
rolagem, navegação, ícones e fontes.
● Seu código do Flutter é compilado no código de 
máquina ARM nativo usando os compiladores 
nativos do Dart.
● Acelerado para Mobile First.
Entendendo Flutter
Seja uma página, um botão ou um texto. Sempre que quisermos exibir qualquer tipo de elemento 
para o usuário, usaremos Widgets.
Tudo que exibimos no 
Flutter é Widget! 
Entendendo Flutter
O que são widgets?
Um widget é um componente visual para definir a interface de um aplicativo. Então podemos entender que 
toda interface de um aplicativo Flutter é criada com base em um conjunto de Widgets. 
Digamos que temos uma tela do aplicativo como um LEGO, onde cada widget é uma pequena peça e, ao 
final, este conjunto de peças representará uma interface completa. 
Entendendo Flutter
Os widgets são divididos em duas categorias:
● Layout: São widgets responsáveis por organizar e posicionar outros widgets. 
● Interface: São widgets responsáveis por criar componentes visuais que serão exibidos para os usuários. 
Widgets de Layout
São os widgets que servem para definir a estrutura da interface dos aplicativos e a organização de outros widgets que 
vão compor a tela do app. 
Alguns dos principais widgets de layout são:
● Scaffold: é um widget responsável por criar um layout “padrão” para o app.
● Stack: é um widget responsável por “empilhar” widgets na tela, do topo ao final da interface.
● Container: é um widget responsável por permitir novos widgets de layout. O Container é muito utilizado para 
organizar widgets em sua estrutura, separando-os com bordas.
Entendendo Flutter
Widgets de Interface
São os widgets de interface que servem para criar componentes visuais que serão adicionados ao widgets de layout 
e, assim, organizados na tela. Os componentes visuais podem ser botões, labels, ícones, textos, etc.
O Flutter possui muitos widgets de interfaces documentados e prontos para serem utilizados. Podemos dar destaque 
para 2(dois) conjuntos de widgets amplamente utilizados: 
● Material - é responsável por estilizar os widgets de interface com base nos padrões do Material Design da 
Google.
https://docs.flutter.dev/development/ui/widgets/material 
● Cupertino - o é responsável por estilizar os widgets de interface com base nos padrões de design do iOS.
https://docs.flutter.dev/development/ui/widgets/cupertino 
https://docs.flutter.dev/development/ui/widgets/material
https://docs.flutter.dev/development/ui/widgets/cupertino
Entendendo Flutter
O Flutter nos dá vários Widgets que são essenciais para o funcionamento da nossa app. 
No arquivo main.dart podemos encontrar todos os elementos utilizados na app demo.
Tudo que exibimos no 
Flutter é Widget! 
Entendendo Flutter
Importação do material design
Entendendo Flutter
Widget superior da app demo
No arquivo main.dart temos a função void main() , ela é a “porta de entrada” da app, onde é 
criada uma instância do Widget MyApp(), e onde é iniciado o aplicativo.
Entendendo Flutter
Entendendo o widget MyApp
● O widget superior MyApp extende de 
StatelessWidget (um widget que não 
armazena dados) 
● Dentro da classe MyApp é onde cria-se 
o widget principal da app demo.
● Em Widget build, vamos criar as 
informações no widget principal da 
app demo. 
● Em Widget build, temos o parâmetro 
context que é uma instância de 
BuildContext (que serve para informar 
ao Widget em que lugar ele se está 
dentro da árvore de Widgets da app).
Entendendo Flutter
Entendendo o widget MyApp
● Em return MaterialApp passamos 
algumas informações como título, 
tema e página principal da app.
● Em Theme, chamamos o construtor da 
classe ThemeData e passamos o 
parâmetro primarySwatch.
● Em home, chamamos nossa página 
principal, MyHomePage.
Entendendo Flutter
Entendendo o widget MyHomePage
● MyHomePage é um widget que 
extende de StatefulWidget (um 
Widget que armazena dados e 
possui Lifecycle)
● MyHomePage vai ter apenas os 
dados imutáveis do nosso 
Widget, ou seja, apenas os dados 
que forem passados como 
parâmetro para o Widget.
Entendendo Flutter
Entendendo o widget _MyHomePageState
● _MyHomePageState é uma classe 
onde vamos armazenar o estado do 
componente, ou seja, os dados mutáveis.
● _MyHomePageState é onde vamos 
implementar o método build que é 
utilizado pelo Flutter para criar o 
Widget na tela do usuário.
Entendendo Flutter
Entendendo o widget _MyHomePageState
● Em Widget Build, temos o widget de layout Scaffold que é um widget responsável por criar um 
layout “padrão” para a app, ele possui os atributos:
○ appBar 
○ Body
○ floatingActionButton 
Entendendo Flutter
Entendendo Flutter
Row(
 mainAxisAlignment: MainAxisAlignment.end,
 children: <Widget>[
 FloatingActionButton(
 onPressed: _incrementCounter,
 tooltip: 'Increment',
 child: constIcon(Icons.add),
 ),
 const SizedBox(
 width: 10.0,
 ),
 FloatingActionButton(
 onPressed: _decrementCounter,
 tooltip: 'Decrement',
 child: const Icon(Icons.remove),
 ),
 ],
Mãos na massa!
Entendendo Flutter
Com os protótipos que vocês criam no figma, vamos começar a 
dar forma às nossas app.
Acessem http://flutlab.io 
https://flutterparainiciantes.com.br/dart 
http://flutlab.io
https://flutterparainiciantes.com.br/dart