Primeiras aulas do curso Xamarin parte 2: crie aplicativos mobile com Visual Studio

Xamarin parte 2: crie aplicativos mobile com Visual Studio

Implementando Padrão o MVVM - Apresentação

E aí, pessoal, tudo bem com vocês? Eu sou o Marcelo Oliveira. Bem-vindos ao nosso curso do Xamarin com Visual Studio – parte 02. Na primeira parte do curso, a gente viu como construir uma aplicação de agendamento de teste drive para a empresa Alura Car.

A gente fez isso utilizando o Xamarin Forms. Só que nessa parte 02, a gente vai prosseguir com o desenvolvimento dessa aplicação, melhorando alguns aspectos de arquitetura e a gente vai fazer isso atacando dois problemas básicos que são: o alto acoplamento e o isolamento da aplicação.

Por que acoplamento? Bom, o auto acoplamento vai contra alguns princípios de designer de aplicações. Com o auto acoplamento, com muito acoplamento, a gente tem componentes que dependem muito uns dos outros. Então, para evitar isso, para facilitar o baixo acoplamento da aplicação...

A gente vai utilizar um padrão de projeto chamado: MVVM ou Model View ViewModel. Então, hoje a gente já tem a view, que é a que apresenta os dados e a gente já tem o model, que é onde estão os dados do negócio e a lógica de apresentação.

A gente já tem a lógica de negócio e os dados de negócio, a gente vai introduzir um componente intermediário chamado viewmodel, que vai fazer esse médio de campo. Então ele vai desacoplar a view do nosso modelo. A gente vai fazer isso usando o padrão MVVM.

Em seguida, a gente vai ver como aumentar esse desacoplamento, permitindo que os componentes se comuniquem entre si, não diretamente, mas com um intermediário, que é o componente MessagingCenter do Xamarin Forms. Então, o MessagingCenter vai receber uma mensagem que foi enviada.

E vai passar para frente, vai passar para outro componente. Então, com isso, os componentes da aplicação ficam menos dependentes entre si e continuando com o desacoplamento, a gente também vai remover a assinatura dos eventos de botão, o botão “clic”, por exemplo.

A gente vai remover esses eventos e vai transformar eles em actions, em comandos que são componentes que vão estar na nossa classe viewmodel, que é a classe que vai ser criada com esse objetivo de desacoplar a aplicação. Em prosseguindo, a gente vai atacar o segundo problema, que é o isolamento da aplicação.

Então, a aplicação do jeito que ela está, a gente trabalha com uma lista fixa nessa aplicação. Então, imagine que você tenha que incluir no veículo ou que você tenha que remover um veículo que não está mais disponível para o agendamento do test drive.

Então, você teria que criar uma nova aplicação, criar uma nova versão, colocar nas lojas para os usuários baixarem essa nova versão e aí sim, ter a lista atualizada. Então, a gente não quer isso, a gente quer que os usuários automaticamente tenham essa lista atualizada.

Então, por isso mesmo, a gente tem que utilizar alguma estratégia de acesso a dados remotos. Então, a gente vai fazer isso, utilizando Http GET, para puxar. A partir do servidor da Alura Car, a gente vai utilizar uma tecnologia para baixar essa lista de veículos disponíveis para o agendamento.

Da mesma maneira, quando terminar o agendamento, a gente não vai deixar isso gravado somente no dispositivo do usuário, a gente quer mandar isso lá para o servidor da Alura Car, para oficializar o agendamento do test drive.

Então, para isso, a gente vai usar a tecnologia Http POST, para poder salvar no servidor da Alura Car, os dados do agendamento desse veículo pelo usuário. Tá bom, gente? Então, espero que vocês gostem dessa parte do curso, dessa parte 02.

Vamos ter mais duas partes, a parte 03 e 04, mais adiante, tá bom? Então, para essa parte 02, espero que vocês façam os exercícios, que vocês continuem prosseguindo nos estudos, tá bom? Ainda tem chão pela frente, espero que vocês curtam bastante essas novidades, tá bom?

Então, muito obrigado. Até a próxima.

Implementando Padrão o MVVM - Acoplamento model

Oi, pessoal, tudo bem com vocês? Eu sou Marcelo Oliveira. Bem-vindos de volta ao nosso curso do Xamarin com Visual Studio. Pelo o que a gente viu no curso até agora, toda a nossa lógica da aplicação está contida dentro das views. Eu tenho aqui três views.

Eu tenho a view de listagem, a view detalhe e a view agendamento. Então, todo o nosso código, toda a nossa lógica, seja lógica de negócios ou lógica de apresentação, está toda ela contida aqui dentro das nossas views. Cada view tem um code behind. Então, olha só, eu não tenho nada fora das views.

Então, essa estrutura pode ser um pouco problemática para a gente, porque a gente está misturando junto com a apresentação, a gente está misturando a lógica de negócios e a lógica de apresentação também. Então, olha só como está a estrutura atual da nossa aplicação.

Aqui nesse desenho, a gente vê, que a gente tem aqui um desenho de uma view. Então aqui nessa parte azul, a gente tem a apresentação dela feita com o xaml e por trás dessa view, a gente tem o code behind, que é o código que está atrás da nossa página xaml.

Então esse código que está aqui pontilhado, ele está em C Sharp. Então, esse código C Sharp, ele está fazendo a lógica de apresentação, ele está fazendo também o data binding com o xaml, está trabalhando com o xaml para fazer o binding das propriedades e está fazendo também a lógica de dados e negócios.

Agora, o que a gente precisa fazer para melhorar isso? Porque a gente está tendo muito acoplamento aqui, a gente está misturando muitos conceitos dentro de uma view e a view não deveria servir para isso. A view serve para simplesmente mostrar os dados para o usuário.

E estar ali presente para poder receber o input, para poder receber a interação do usuário. Então, o primeiro passo para a gente melhorar essa estrutura, essa arquitetura da nossa aplicação é pegar aqui a lógica de dados de negócios e mover para outro lugar mais adequado e remover ele do nosso code behind.

E assim, a gente vai livrar a nossa página de um trabalho que não deveria ser dela. Então, a gente vai fazer isso agora. O primeiro passo é verificar que na nossa listagem view, a gente tem aqui, além da partial class, que é a listagem view, a gente também tem a class veículo.

Então, não é bom deixar duas classes no mesmo arquivo. O que a gente vai fazer agora é pegar esse veículo, que é o nosso modelo e mover ele para uma outra pasta chamada models. Então, a gente já tem uma pasta chamada views, eu vou criar aqui uma pasta chamada models.

Então, eu criei aqui models e dentro de models, eu vou ter os modelos que vão existir na nossa aplicação. Então, dentro de models, eu venho aqui em adicionar em adicionar classe e vou dar o nome dessa classe de veículo, que vai conter a lógica do veículo da nossa aplicação.

Eu vou copiar aqui, simplesmente recortar essa classe pública veículo e colar aqui na pasta de models. Agora, a aplicação vai começar a falhar, porque a classe veículo mudou de namespace. Agora, ela não é mais TestDrive.Views. Ela é uma TestDrive.Models, como a gente está vendo aqui.

Então o Visual Studio está começando a reclamar aqui de algumas referências a essa classe veículo, então eu vou acertar as referências com o Ctrl + ponto + ponto, troco para using TestDriveModels. Já resolvi a referência. Ele está reclamando agora aqui desse veículo, mas é porque o veículo que está sendo passado para dentro do detalhe view.

Lá no detalhe view, a gente tem uma referência também com o namespace antigo. Então, eu vou trocar aqui, vou colocar Ctrl + ponto + ponto e troco para using TestDriveModels. Acertei a referência. Agora, aqui tem um outro problema na referência, que a gente passa para o construtor do agendamento view, aqui em baixo.

Vamos lá com F12, vou navegar para o agendamento view, vou acertar a referência com Ctrl + ponto + ponto, using TesteDriveModels. Agora deve funcionar. Vamos rodar aplicação, ver se não quebrou nada. Agora vai rodar o emulador, está rodando o emulador agora e vai rodar a aplicação, vamos ver.

Legal, apareceu aqui a listagem dos veículos, então a gente trocou o nosso modelo, a gente trocou de lugar, colocou na pasta models, trocou os namespaces, está funcionando normalmente. Agora, uma outra melhoria que a gente também pode fazer, é mover a nossa lista de veículos para uma outra classe...

Para um outro modelo. Olha só, a gente está fazendo aqui, dentro do nosso ListagemView.xaml.cs, que é o code behind, a gente está colocando a listagem de veículos. Só que a gente poderia fazer melhor, se a gente movesse isso para uma outra classe, especializada dentro do modelo.

Então a gente vai criar uma classe aqui dentro de models e vou chamar de listagem veículos, que vai conter a lista de veículos. Então, aqui dentro eu vou deixar essa classe pública e no construtor, eu vou preencher essa classe, vou preencher uma lista aqui dentro com a lista que já existe dentro do nosso code behind.

Então aqui no code behind, eu vou remover essa atribuição dessa lista de veículos, vou recortar e vou mover lá para a nossa classe, a listagem veículos. E agora, o nosso code behind, eu vou pegar e acessar essa listagem veículos para “popular” a nossa listagem de veículos, lá dentro do code behind.

Então eu coloco aqui this.veiculos = new listagemVeciulos().Veiculos. Então, a agora a gente vai rodar a aplicação, ver se não quebrou nada, se está funcionando ainda. Agora, está rolando o emulador, vou rodar a aplicação. Legal, está aparecendo aqui a lista sem problemas.

Então, a gente conseguiu remover a definição dessa listagem. A gente moveu isso lá para o nosso modelo, para tirar da nossa view a responsabilidade de criar uma lista de veículos. Então, como fica o nosso code behind? A gente continua tendo a propriedade veículos.

Só que agora, a gente não está instanciando uma listagem de veículos. Então, com isso a gente tem um code behind mais enxuto. Então, continuando com essa nossa refatoração, a gente pode ir para a próxima view, que é a view de detalhes e ver se a gente pode extrair alguma coisa para o modelo.

Estou entrando aqui em detalhe view, do lado direito da tela e no detalhe view, logo de cara a gente vê que tem algumas constantes aqui, que representam o preço de cada um dos acessórios, mas olha só, detalhe view serve para quê? Serve para exibir simplesmente a nossa tela de seleção de acessórios do veículo.

Só que essa tela, sendo uma tela de exibição de dados, ela não deveria se preocupar, por exemplo, com o preço do freio ABS ou preço do ar-condicionado ou preço do MP3 Player. Então, essas constantes, elas fariam mais sentido, se elas estivessem numa classe especializada em tratar do veículo.

Então, olhando o nosso modelo, a gente tem essa classe já, que é a classe veículo. Então, o que a gente vai fazer agora? É mover essas três constantes lá para dentro da nossa classe veículo. Eu estou recortando aqui, recortei e vou colar lá em veículo. Só que se eu removo essas três constantes, o que acontece?

Eu vou quebrar a minha classe, o meu code behind e do detalhe view. Então, eu vou ter que acertar algumas coisas aqui, para fazer ele voltar a funcionar. Então, olha só, o Visual Studio começou a reclamar aqui, que ele não está encontrando a referência para o freio ABS.

Claro, porque a gente moveu essas três constantes lá para a outra classe. Então, eu vou ter que, invés de simplesmente jogar aqui o frio ABS, eu tenho que colocar primeiro uma referência do objeto que contém o freio ABS, que é a instância veículo. Então, eu coloco Veiculo.FREIO_ABS.

Só que com isso, eu continuo tendo problemas, por quê? Porque freio ABS, ele está marcado como privado, então eu teria que marcar isso como público. Então, eu vou modificar aqui de privado para público, vou fazer isso com as três constantes. Então agora está resolvido, pelo menos para o freio ABS.

Então, eu vou fazer isso para as outras constantes. Então, aqui embaixo, ar-condicionado, eu coloco Veiculo.AR_CONDICIONADO, Veiculo.MP3_PLAYER. Aqui em baixo, quando a gente está exibindo a mensagem para o usuário, a gente tem acessa essas três constantes.

Porque a gente tem que verificar qual é o preço de cada um dos acessórios. Então eu vou colocar aqui: Veiculo.FREIO_ABS, Veiculo.AR_CONDICIONADO e Veiculo MP3_PLAYER. Agora a gente roda a aplicação e vê se não quebrou nada. Agora está rodando o emulador, vai rodar a aplicação.

Então agora eu consigo verificar aqui os preços de cada um dos acessórios, consigo marcar e desmarcar. Então, chaveando aqui, a gente vê que o preço está sendo alterado com sucesso aqui em baixo.

Implementando Padrão o MVVM - Model de Detalhe Agendamento

No fim do vídeo há um corte que poderia não existir. O Marcelo altera o string.Format() para incluir o nome do veículo no alert da mensagem, porém esquece de colocar o novo valor no início dos argumentos, mantendo apenas os antigos. Isso, com certeza, gerou um erro. Acredito eu que vocês tenham cortado pra não deixar o vídeo ainda maior e eu até entendo isso, porém isso é algo que considero importante. Muita gente acaba tendo esse problema e terão se seguirem o vídeo sem olhar o código-fonte, uma vez que no vídeo não mostra esse argumento sendo adicionado.

Enfim, entendo que não vale a pena regravar isso. É mais uma visão sobre o que vale cortar e o que não vale.

Abraços.

Agora que a gente está refatorando a code behind da página detalhe view, que a gente está movendo algumas coisas para o modelo veículo. A gente percebe que tem algumas coisas que ainda estão de fora, por exemplo, as propriedades tem o freio ABS, tem ar-condicionado, elas não estão ainda no nosso modelo do veículo.

Então, o que a gente vai fazer é copiar para lá essas propriedades, para que o nosso modelo veiculo também tenha essa informação de que ele tem esses acessórios incluídos. Então, esse vai modificar aqui o modelo e colocar três propriedades, uma delas vai ser o TemFreioABS.

E aí, a outra propriedade vai ser também o (boleano), que é o TemArCondicionado e a outra propriedade vai ser tem TemMP3Player. Agora, o que a gente vai fazer? invés de acessar essas propriedades privadas aqui, tem freio ABS, tem ar-condicionado no code behind, a gente vai remover e vai acessar diretamente a partir do objeto veículo.

Então eu vou colocar aqui, invés de return, eu tenho freio ABS, eu coloco Veiculo.TemFreioABS. Vou fazer isso aqui para as outras referências desse tem freio ABS. Aqui, eu removo essa referência privada e vou trocar aqui em baixo por tem ar-condicionado, que vem lá do objeto veículo e aqui embaixo também.

Vai vir lá do nosso objeto veículo. Removo também o tem MP3 Player aqui e vou trocar por uma referência lá do veículo. Então é isso. Agora, eu vou ter que remover também essa propriedade valor total, que para a gente não faz sentido ter ela aqui no nosso code behind.

Então, faz mais sentido ter esse valor total lá no nosso modelo, porque o veículo sabe, deveria saber como tratar, como calcular o preço total, de acordo com as propriedades, de acordo com as chaves, de acordo com as condições, se ele tem um acessório ou não, que ele vai acabar somando com o preço do veículo, com o preço base e vai retornar o valor total.

Então aqui, eu vou substituir o valor total no retorno, eu vou substituir por... eu vou retornar, Veiculo.PreçoTotalFormatado. Essa propriedade ainda não existe, então a gente vai recortar isso aqui, colar lá no veículo. Então, vamos lá para o veículo, vamos criar uma nova propriedade que vai ter só um get, aqui.

Então, vou lá para o veículo e vou colocar aqui: public, string e vou colocar, PreçoTotalFormatado e dentro do get eu coloco, vou dar aquele return e vou retornar aqui uma string com o preço total formatado do veículo. Aqui, eu removo a referência para veiculo, porque eu não preciso dessa instância.

O próprio veículo já tem essas informações, então eu estou removendo aqui. Então, voltando lá para o nosso detalhe view, aqui no code behind. Agora a gente roda a aplicação, vê se não quebrou nada, se continua funcionando, sempre bom a gente garantir que a aplicação funcione a cada mudança pequena que a gente faz na aplicação.

Para a gente não ter uma surpresa maior lá na frente, então vamos lá. Rodando a aplicação, agora está rodando o emulador, vai abrir a aplicação. Então, aqui a gente tem os acessórios, conforme eu mudo aqui, altera com sucesso aqui em baixo. Então, continua a aplicação rodando sem problemas.

Então, a gente está conseguindo refatorar, sem quebrar a aplicação. Muito bem. Então a gente conseguiu dar uma enxugada no code behind, no detalhe view e a gente vai agora para a terceira tela, que é o agendamento view. A gente vai lá no code behind ver o que a gente pode fazer para mover alguns dados lá para o modelo.

Então, olha só, a gente tem aqui a referência para o veículo, nome, fone e Email. A gente também tem: data do agendamento e a hora do agendamento. Então, será que a gente consegue mudar, mover algumas propriedades aqui para algum modelo?

Então, olha só. Eu tenho um veiculo, até aqui tudo bem, mas eu também tenho nome, fone e Email do usuário, data do agendamento e hora do agendamento. Então, essas informações todas, elas poderiam estar numa outra entidade, numa outra classe, lá no nosso modelo.

Essa classe representaria o quê? Ela representaria o agendamento que o usuário faz no seu smartphone. Então o que a gente vai fazer é criar uma classe chamada agendamento. Então, lá no nosso modelo, eu venho aqui e adiciono classe, coloco agendamento, ter uma classe

Que é o nome da classe e aí, eu vou ter uma classe vazia, vou colocar como pública e aí, eu vou preencher essa classe, eu vou acrescentar algumas propriedades que vão conter, que vão armazenar o agendamento. Essas propriedades vão ser essas quadro: veículo, nome, fone e Email.

Eu coloco aqui: veículo, nome, fone e Email e vou ter também a data do agendamento e a hora do agendamento. Então, eu copio também a data do agendamento e a hora do agendamento. Agora, o que eu vou fazer? Eu vou criar aqui uma nova propriedade para o agendamento view, que vai ser agendamento.

Agendamento, agendamento. Agora, dentro de veículo, eu vou trocar aqui o get, aqui dentro eu vou colocar retornando uma referência para o agendamento, Agendamento.Veiculo e no set, eu retorno. Aliás, eu vou setar o veículo que está lá no agendamento. Então, eu coloco Agendamento.Veiculo = value.

Formato aqui o nosso código, eu faço isso para as outras propriedades também. Aqui para o nome, eu vou colocar nome return, Agendamento.Nome. Aqui no set, vou fazer Agendamento.Nome = value. Aqui em baixo no fone, dou um return, Agendamento.Fone e aí, no set, eu coloco Agendamento.Fone = value.

Aí, lá no Email, coloco get, Agendamento.Email e aí, no set, eu coloco aqui Agendamento.Email = velue. Lá em baixo na data de agendamento, eu vou expandir aqui, vou remover essa linha, porque já tem o return agendamento, coloco Agendamento.DataAgendamento.

E aqui na linha de baixo, no set, eu coloco Agendamento.DataAgendamento = value. E agora, na hora do agendamento, eu coloco no get: return Agendamento.HoraAgendamento e no set, eu modifico também para (setar) o valor lá no Agendamento.HoraAgendamento = value.

Agora eu formato aqui o documento para ficar bonitinho com o Ctrl + K + D, formatou. É isso. Então, a gente conseguiu limpar aqui esse code behind. O que a gente vai fazer é rodar a aplicação, ver se não quebrou nada. Então está rodando o emulador, vai rodar a aplicação.

Agora a gente vai lá para a terceira página. Vou digitar aqui Fulano de Tal no nome, vou colocar um telefone aqui: 2345678, ok. No Email: fulano@gmail.com. Agora, na data do agendamento, eu coloco semana que vem. Horário, eu vou colocar cinco horas da tarde e vou clicar em agendar.

Apareceu agendamento, nome: Fulano de Tal, fone, E-mail, hora e data do agendamento. Correto. Bom, então agora, a gente quer colocar também na mensagem que vai ser exibida para o usuário, qual foi o veículo que ele selecionou. Então, eu vou colocar aqui na string, vou deixar veiculo: {0}, a posição zero.

Aí, eu vou renumerar. Aqui no nome: {01}, no fone: {02}, no Email: {03}, na data do agendamento: {04} e na hora do agendamento: {05}. Só que, olha só, eu ainda nao inicializei o nosso objeto agendamento. Eu tenho aqui a inicialização do veículo, só que esse veículo, na verdade, ele vai pegar lá do agendamento.

Então, eu vou remover essa linha, vou colocar this.Agendamento, eu vou instanciar um novo agendamento, que é a nossa classe do modelo. E aí, eu vou fazer this.Agendamento.Veiculo = veiculo e vou rodar a aplicação. Vamos lá, vou preencher de novo o nome, o fone e o Email. Aqui, data e hora, não vou mexer.

E vou agendar. Apareceu lá: agendamento, veículo, o nome, o telefone, o Email, a data e a hora do agendamento. Então, com isso, a gente conseguiu mover algumas coisas que estavam nos nossos views. Lá para o modelo, porque aí, a gente conseguiu separar.

Aquilo que era regra de negócio, a gente moveu do nosso view. A gente conseguiu ter um desacoplamento de algumas funcionalidades da aplicação.

Sobre o curso Xamarin parte 2: crie aplicativos mobile com Visual Studio

O curso Xamarin parte 2: crie aplicativos mobile com Visual Studio possui 211 minutos de vídeos, em um total de 34 atividades. Gostou? Conheça nossos outros cursos de Multiplataforma em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Multiplataforma acessando integralmente esse e outros cursos, comece hoje!

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas