Desenvolvimento de Aplicações para Dispositivos Móveis - Android Studio - Parte 2

Desenvolvimento de Aplicações para
Dispositivos Móveis
[Parte 02] - MVC e GeoQuiz 2.0 / 3.0
Prof. Elmano Ramalho Cavalcanti
http://sites.google.com/site/elmano
* Apresentação construída com base no capítulo 2 do livro Android Programming: the Big Nerd Ranch
Guide, 3a edição, 2017, 624p.

Agenda
1. GeoQuiz 2.0
2. Criar uma nova classe
3. Diagrama de Objetos do GeoQuiz
4. Padrão MVC no Android
5. Fluxo de Dados no MVC
6. Atualizar a camada Visão
7. Atualizar a camada Controle
7b. Refatoração
7c. Verificando resposta do usuário
1. Executando App em dispositivo real
2

1. GeoQuiz 2.0
A versão 1.0 só possui uma questão.
● Acrescentar lista de questões
● Botão Next>
● Informar se acertou a resposta
3

2. Adicionar Classe: Questão
File > New > Java Class
public class Question {
private int mTextResID;
private boolean mAnswerTrue;
}
4
Por que int em vez de String?

2.1 Adicionar getters e setters
Considerar letra ‘m’ como prefixo de nomenclatura
File > Preferences > Editor > Code Style > Java > Code Generation
5

2.1 Adicionar getters e setters
Code > Generate > Getter and Setter
ou
Alt+Insert
public int getTextResID() {
return mTextResID;
}
public void setTextResID(int textResID) {
mTextResID = textResID;
}
public boolean isAnswerTrue() {
return mAnswerTrue;
}
public void setAnswerTrue(boolean answerTrue) {
mAnswerTrue = answerTrue;
}
6

3. Diagrama
de Objetos
do GeoQuiz
7
Três Camadas:
<M, V, C>

Agenda
8
1. GeoQuiz 2.0
7b. Refatoração

MVC (Model, View, Controller): padrão de arquitetura de software
● Modelo: Lógica do negócio
○ Exemplos: usuário, produto, conta corrente, boletim, ...
● Visão: interface gráfica, o que é visível ao usuário
○ Widgets
● Controle: conecta Modelo à Visão. Lógica de aplicação.
○ Respondem a eventos da Visão (ex: cliques)
○ Gerenciam o fluxo de dados Modelo Visão
○ Ex: subclasse de Activity
9

4. Padrão MVC no Android (GeoQuiz 2.0)
MVC (Model, View, Controller): padrão de arquitetura de software
● Modelo: Question.java
● Visão: quiz_activity.xml (widgets)
● Controle: QuizActivity.java
10

11
Usuário interage com
objetos da visão
Visão envia mensagens
ao Controlador
Controlador atualiza
objetos do Modelo
Controlador pega dados dos
modelos de objeto que a
Visão está interessada
Controlador atualiza
Visão com mudanças nos
objetos do Modelo

Benefícios do MVC
Separar código (variáveis, métodos) em classes ajuda a compreender e projetar
um sistema;
Separar classes em camadas tem um objetivo semelhante.
O uso de camadas facilita na reutilização de software.
Ex: software bancário
12

Agenda
13
1. GeoQuiz 2.0
7b. Refatoração

6. Atualizando a Camada de Visão (quiz_activity.xml)
14
● Alterar TextView
● Adicionar o botão Next

6. Atualizando a Camada de Controle
public class QuizActivity extends AppCompatActivity {
…
private TextView mQuestionTextView;
private Question[] mQuestionBank = new Question[]{
new Question(R.string.questao1, true),
new Question(R.string.questao2, true),
new Question(R.string.questao3, false),
};
15

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_quiz);
mQuestionTextView = (TextView)
findViewById
(R.id.question_text_view);
int question = mQuestionBank[mCurrentIndex].getTextResID();
mQuestionTextView.setText(question);
... 16

Abrir emulador e testar as alterações.
A primeira questão apareceu na tela?
Próximo passo: acionar o botão Next
17

7. Atualizando a Camada de Controle: botão Next
mNextButton = (Button) findViewById(R.id.next_button);
mNextButton.setOnClickListener(new View.OnClickListener(){
public void onClick(View v) {
mCurrentIndex = (mCurrentIndex + 1) % mQuestionBank.length;
int idQuestion = mQuestionBank[mCurrentIndex].getTextResID();
mQuestionTextView.setText(idQuestion);
//updateQuestion();
}
});
18

7b. Refatoração
De tempos em tempos, é sempre bom fazer refatoramento
de código!
Você identificou alguma repetição de código após as
alterações no slide anterior?
19

7b. Refatoração
private void updateQuestion() {
int question = mQuestionBank[mCurrentIndex]
.getTextResID();
mQuestionTextView.setText(question);
}
20

● Até aqui o GeoQuiz não verifica se o usuário acertou ou não a
questão!
Criar método que realiza essa ação:
private void checkAnswer(boolean userPressedTrue)
→ Tente implementar esse método agora. Não avance o slide!
21

private void checkAnswer(boolean userPressedTrue){
boolean answerIsTrue = mQuestionBank[mCurrentIndex]
.isAnswerTrue();
int messageResId = (answerIsTrue == userPressedTrue) ?
R.string.correct_toast :
R.string.incorrect_toast;
Toast.makeText(this, messageResId,
Toast.LENGTH_SHORT).show();
} 22

mTrueButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
checkAnswer(true);
}
});
mTrueButton.setOnClickListener(e -> {
checkAnswer(true);
});
23
Alternativa
simplificada
utilizando função
lambda (JDK 8)

● Conectar smartphone ao computador (USB)
● Instalar abd (Android Debug Bridge)
● Habilitar depuração por USB no smartphone
○ Config. → Sobre o dispositivo → Info.
software → Número de compilação [clicar 7 vezes]
○ Config. → Opções do desenv. → Depuração de
USB [ativar]
● Tools → Android → Android Device Monitor
24

Ao executar uma aplicação, o Android Studio perguntará
como deseja executá-la, por emulação ou por dispositivo
real:
25

Verificação da Aprendizagem: GeoQuiz 3.0
1. Adicionar Listener ao TextView
2. Adicionar botão Voltar
3. Substituir Button por ImageButton
26
Avançar questão ao clicar no texto

Verificação da Aprendizagem: GeoQuiz 3.0
4. Mostrar as questões em ordem aleatória
5. Mostrar pontuação após responder a última questão
Para efeitos de teste da aplicação, a equipe deverá criar uma
lista de cinco questões.
Ao final, compartilhar projeto (.zip) com o professor usando
algum serviço de compartilhamento (Dropbox, Google drive,
…).
27

Desenvolvimento de Aplicações para Dispositivos Móveis - Android Studio - Parte 2

Mais conteúdo relacionado

Mais de Elmano Cavalcanti

Último

Desenvolvimento de Aplicações para Dispositivos Móveis - Android Studio - Parte 2