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

Xamarin parte 3: crie aplicativos mobile com Visual Studio

Criando um Mecanismo de Login - Introdução

Olá, tudo bem com vocês? Sou Marcelo Oliveira, bem-vindos ao curso de Xamarin com Visual Studio. Neste curso, começaremos implementando uma tela de login para o usuário na aplicação do TestDrive, cujo acesso se dá pelo preenchimento dos campos de usuário e senha, liberando-se a comunicação e autenticação deste usuário e, consequentemente, a utilização da aplicação.

Na tela inicial, utilizaremos uma imagem, logotipo da Aluracar. Em seguida coletaremos os dados de usuário e senha, sendo que este último campo terá os caracteres ocultos - a partir da propriedade específica do campo de entrada da senha -, impedindo que outras pessoas possam vê-la.

Quando o usuário loga na aplicação, no TestDrive, haverá comunicação com o servidor da Aluracar pelo serviço de HTTP REST. Caso ele esteja autenticado, com usuário e senha batendo com as informações do servidor, os dados deste usuário serão reenviados para nós (nome, e-mail, telefone, por exemplo).

Tela inicial Aluracar

Entrando-se na aplicação, ou seja, com a autenticação do usuário efetiva, vamos seguir o fluxo normal da aplicação, indo à listagem de veículos, implementando-se uma tela (ou menu) lateral, que abre com um clique em seu referido ícone:

Ícone da tela lateral

Tela lateral aberta

Trata-se de uma tela lateral padrão de Android. Também conseguimos acessá-la por meio de um gesto de swipe, movendo o dedo da esquerda para a direita na tela. O menu lateral é desenvolvido pelo uso da tela Master Detail, em que master é o menu lateral, e o detail é a listagem de veículos que já tínhamos anteriormente na aplicação.

Há uma aba de "Usuário", com foto de perfil, nome, e-mail e alguns botões de comando ("Perfil", "Meus agendamentos" e "Novo agendamento"), e outra de "Editar", em que conseguimos editar os dados de perfil do usuário obtidos por meio do serviço de Aluracar.

Em seguida aprenderemos como desenvolver as telas de perfil do usuário. Clicando-se no botão "Perfil", navegaremos para a tela de perfil, iremos em "Editar" para podermos alterar seus dados, selecionando "Salvar" para gravar estes dados na aplicação.

Espero que gostem do curso, participem do fórum, deem suas opiniões. Nos vemos em breve!

Criando um Mecanismo de Login - LoginView

Este curso dá prosseguimento à primeira parte do curso de Xamarin Forms, e nele veremos algumas features bem interessantes do Xamarin Forms.

Nossa última jornada da parte 1 do curso termina com a aplicação para a empresa fictícia Aluracar, e uma listagem de veículos disponíveis para agendamento do TestDrive. Há uma seleção dos recursos opcionais do veículo escolhido, na qual iremos preencher os dados que serão enviados no fim.

Antes, aplicação se iniciava pelo carregamento da lista de veículos obtidos por meio de uma requisição HTTP GET no servidor da Aluracar.

Tela inicial com lista de veículos

Em geral, a aplicação deve ir direto ao ponto, mostrando a listagem dos veículos disponíveis para TestDrive. No entanto, este não é exatamente o fluxo que desejamos. Nós queremos que o aplicativo esteja disponível e acessível somente aos usuários cadastrados no sistema da Aluracar.

Queremos evitar que a aplicação seja aberta por usuários não logados, ou seja, anônimos.

Portanto, utilizaremos um mecanismo de autenticação do usuário, criando uma tela que receberá o login do usuário e sua senha. Desta forma protegeremos contra acessos indevidos de pessoas estranhas, ou caso tenham acesso ao seu smartphone, ou ainda em caso de roubo, extravio, ou mesmo alguém "xeretando" seus dados, coletando informações que não deveriam ser acessadas por terceiros.

Iniciaremos este mecanismo de autenticação pela tela inicial de login, que será a nova view inicial da aplicação, seu ponto de partida. Como faremos isto no Xamarin Forms? É muito simples.

Acessaremos o projeto portable, ou PCL (portátil, "TestDrive Portable"), em seguida, clicaremos em "Views" e adicionando um novo item (com o lado direito do mouse: "Add > New Item"). Na nova janela, selecionaremos "Forms Xaml Page" e criaremos um arquivo para esta nova view de login, chamada "LoginView".

Feito isto, precisamos descobrir como inseri-la ao fluxo de navegação do aplicativo para que seja um novo ponto de entrada da aplicação do Xamarin Forms.

No primeiro curso, vimos que para definirmos a view de entrada da aplicação, entramos na classe App.xaml e em App.xaml.cs, neste code behind, na linha:

MainPage = new NavigationPage(new ListagemView());

A propriedade MainPage da classe App definirá a view de entrada da aplicação, anteriormente definido como NavigationPage, uma estrutura ou "pilha de navegação" que começa pela view de listagem (ListagemView). O que faremos agora é definir uma nova instância de nossa nova view, de login, como MainPage, ou página principal da aplicação.

public partial class App : Application
{
  public App()
  {
    InitializeComponent();

    MainPage = new LoginView;
  }
//...

Talvez você esteja se perguntando por que simplesmente não trocamos o ListagemView por LoginView? Ou por que não mantivemos a pilha de navegação, trocando-a simplesmente por LoginView? O motivo é simples.

Imagine a situação em que fazemos o login, pela LoginView, e seguíssemos para a tela de listagem de veículos. Em seguida, se colocássemos tudo dentro de um NavigationPage (ou seja, uma pilha de navegação), quando navegarmos para outras páginas, como a listagem de veículos e, depois, nos detalhes do veículo selecionado. Se decidíssemos clicar no botão "Voltar" da navegação, retornaríamos à listagem. Ainda teríamos uma seta indicando que podemos voltar mais uma tela, chegando ao login.

Porém, o melhor é evitarmos o uso da tela de login como raiz da navegação, pois ao retornarmos das páginas seguintes, não queremos chegar até ao login. No máximo, poderíamos chegar na tela de listagem (ListagemView).

Por isto, a navegação inicial aponta diretamente para LoginView, e precisamos implementar a view de login. Recebemos uma especificação com o desenho da tela:

Wireframe do app

É uma tela simples, e a implementaremos utilizando o Xamarin Forms. Vamos abrir o arquivo LoginView.xaml, então, removeremos a tag <Label> que vem automaticamente quando criamos este item:

<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center"/>

No desenho recebido, há uma imagem com logotipo, uma caixa de texto para nome de usuário, outro para senha e um botão de "Entrar". Sendo a entrada de dados a parte mais simples, para "Usuário" e "Senha", utilizaremos alguns componentes do próprio Xamarin Forms, os quais permitem que digitemos.

No primeiro curso, vimos o controle chamado EntryCell, que nos permitia fazer uma digitação, ou entrada de dados, dentro de um outro controle, denominado Table View.

O EntryCell não está disponível entre os controles deste contexto de uma Content Page, portanto, deixaremos de usá-lo. Utilizaremos um controle similar fora do contexto do Table View, o Entry, que em inglês significa "Entrada". Dentro destas tags, incluiremos as informações do usuário, em seguida, adicionaremos um segundo par de tags para digitação da senha:

<!--imagem-->
<Entry></Entry>
<Entry></Entry>
<!--entrar-->

Podemos também acrescentar um label, ou rótulo, uma legenda que indique ao usuário o tipo de campo a ser preenchido naquele determinado espaço em branco. Quando colocamos a propriedade label, nenhuma opção é mostrada. Isto ocorre porque o controle Entry, diferentemente do EntryCell, não possui um label, ou seja, falta uma legenda indicando ao usuário qual campo deverá ser preenchido.

Para contornar esta situação, podemos colocar StackLayout na horizontal e, juntamente com o Entry, um campo Label indicando, por exemplo, "Usuário:":

<!--imagem-->
<StackLayout>
  <Label Text="Usuário:"></Label>
<Entry></Entry>
</StackLayout>
<!--entrar-->

No entanto, isto ficaria inapropriado para nossa tela. Se olharmos o wireframe enviado, o "Usuário" não é um label e a legenda exibida está dentro do próprio controle de entrada. Estamos impossibilitados de criar outro controle Label separadamente. A solução é colocar as legendas dentro do controle Entry usando a propriedade Placeholder:

<!--imagem-->
<Entry Placeholder="Usuário"></Entry>
<Entry Placeholder="Senha"></Entry>
<!--entrar-->

Enquanto estiver vazio, o texto definido como placeholder será exibido, e conforme os dados são digitados pelo usuário, o placeholder deixará de aparecer. Para organizarmos estes dois campos na tela, utilizaremos um recurso velho conhecido, o StackLayout. Este será responsável por "empilhar" os dois controles, ordenando-os verticalmente.

<StackLayout>
  <!--imagem-->
  <Entry Placeholder="Usuário"></Entry>
  <Entry Placeholder="Senha"></Entry>
  <!--entrar-->
</StackLayout>

Agora vamos rodar a aplicação e verificar que tudo isto é exibido. Temos "Usuário" e "Senha", os dois controles que acionamos. Para testarmos, digitaremos "fulano" como usuário e "fulano123" como senha.

Criando um Mecanismo de Login - Entry

IMPORTANTE: Para começar este vídeo, implemente as classes Usuario e LoginResult, conforme abaixo:

    public class Usuario
    {
        public int id { get; set; }
        public string nome { get; set; }
        public string dataNascimento { get; set; }
        public string telefone { get; set; }
        public string email { get; set; }
    }

    public class LoginResult
    {
        public Usuario usuario { get; set; }
    }

Quando o usuário preenche o campo de "Senha" com "fulano123", por exemplo, acontece algo estranho: será usado um padrão diferente de preenchimento de senhas, que geralmente envolve uso de caracteres especiais e ocultos. É melhor evitarmos a exibição de senhas por questões de segurança e privacidade.

Felizmente o Xamarin Forms tem uma maneira elegante e prática de resolver este problema, por meio da propriedade IsPassword, que o controle Entry possui, e que determina se é uma senha que está sendo digitada ou não.

<StackLayout>
    <!--imagem-->
    <Entry Placeholder="Usuário"></Entry>
    <Entry Placeholder="Senha" IsPassword="True"></Entry>
    <!--entrar-->
</StackLayout>

Veremos como um campo determinado como senha se comporta rodando-se a aplicação. No emulador, digitamos "fulano" como "Usuário" e "fulano123" como "Senha". Conseguimos ver cada letra durante 1 ou 2s, porém, no fim da digitação, todos os caracteres estarão ocultos, sendo substituídos por caracteres especiais.

Emulador mostrando senha com caracteres ocultos

Ainda precisamos acertar o layout desta tela, ainda muito diferente do que recebemos na especificação (mais agradável, alinhado no centro). Sendo assim, modificaremos a view para obtermos espaçamentos melhores.

Alteraremos o StackLayout para centralizarmos os elementos por meio da propriedade VerticalOptions, que determina como o StackLayout, que armazena os controles internos, será exibido verticalmente. Acrescentaremos também uma margem de 64, um número aleatório.

<StackLayout VerticalOptions="Center" Margin="64">
    <!--imagem-->
    <Entry Placeholder="Usuário"></Entry>
    <Entry Placeholder="Senha" IsPassword="True"></Entry>
    <!--entrar-->
</StackLayout>

Rodando a aplicação, verificaremos como se exibe o layout:

Layout modificado com os elementos centralizados na tela

Agora, a tela de login está "tomando corpo", vamos continuar inserindo o logotipo da Aluracar, enviado pela equipe de design da empresa.

Para fazer esse exercício, abra este link, clicando com o botão direito na imagem, e em seguida em "Salvar como" para baixá-la.

Para adicionar esta imagem ao projeto, pausamos a aplicação, abriremos TestDrive.Droid, indo em "Resources > drawable". Este é o diretório padrão para inserção de imagens, e é onde salvaremos o logotipo recebido pela Aluracar.

A imagem não aparece imediatamente na pasta pois não a adicionamos ao projeto. Para tal, clicaremos no botão "Show All Files" com o lado direito do mouse, selecionando em seguida "Include In Project", sinalizando que ele pode ser utilizado no projeto Xamarin.

O próximo passo consiste em consumirmos esta imagem na aplicação. Como exibimos uma imagem em um projeto Xamarin Forms? É muito simples: substituiremos <!--imagem--> pelo componente de imagem Image. Porém, precisamos definir o arquivo de imagem a ser utilizado, sua propriedade, origem ou fonte, que serão simplesmente o nome e extensão da imagem.

<StackLayout VerticalOptions="Center" Margin="64">
    <Image Source="aluracar.png"></Image>
    <Entry Placeholder="Usuário"></Entry>
    <Entry Placeholder="Senha" IsPassword="True"></Entry>
    <!--entrar-->
</StackLayout>

Feito isto, a imagem aparecerá como é exibido abaixo:

Layout com logotipo em imagem

Falta adicionarmos o botão de login, "Entrar", para realizar autenticação da tela de login. O componente Button fará isto, e definiremos como texto o que queremos que seja exibido nele:

<StackLayout VerticalOptions="Center" Margin="64">
    <Image Source="aluracar.png"></Image>
    <Entry Placeholder="Usuário"></Entry>
    <Entry Placeholder="Senha" IsPassword="True"></Entry>
    <Button Text="Entrar"></Button>
</StackLayout>

Vamos rodar a aplicação mais uma vez, verificando-se como ficou o layout:

Layout da aplicação com botão "Entrar"

Neste momento, quando a tela de login é exibida e preenchemos os campos disponíveis, quando clicamos em "Entrar", nada acontecerá. Pensaremos agora em como navegar às próximas telas da app. Considerando que a navegação é mais simples do que a autenticação, ou seja, do que a verificação de usuário e senha no banco de dados do servidor, vamos começar por ela.

Programaremos o evento do botão acionado assim que for clicado pelo usuário, o Clicked, apertando o "TAB" para adição do método Button_Clicked, o qual aparecerá no code behind da view de login ( LoginView).

<StackLayout VerticalOptions="Center" Margin="64">
    <Image Source="aluracar.png"></Image>
    <Entry Placeholder="Usuário"></Entry>
    <Entry Placeholder="Senha" IsPassword="True"></Entry>
    <Button Text="Entrar" Clicked="Button_Clicked"></Button>
</StackLayout>

No lado direito da tela do Visual Studio, acessaremos "Views > LoginView.xaml > LoginView.xaml.cs". Quando abrimos este arquivo, veremos que foi criado o método Button_Clicked. Em seguida, iremos à tela de listagem de veículos (ListagemView.xaml) para que, ao clicarmos no botão, isto ocorrerá sem que haja necessidade de autenticação.

No entanto, é insuficiente que o usuário navegue pela aplicação. Queremos criar a mesma pilha de navegação que tínhamos antes. Neste ponto, estabeleceremos que o novo MainPage da app, ou seja, sua página principal, seja a ListagemView. Vimos que ela é definida em App.xaml.cs, é nela que devemos alterar o MainPage (e não em LoginView.xaml.cs).

Precisamos acessar a classe App a partir de LoginView. Devemos utilizar a técnica de troca de mensagens entre componentes vistos no primeiro curso de Xamarin, por meio da classe MessagingCenter do Xamarin Forms.

A partir de LoginView, a classe App.xaml.cs será "avisada" sobre uma nova MainPage a ser definida para a aplicação. Desta forma, no evento Button_Clicked do LoginView.xaml.cs, lançaremos uma mensagem:

private void Button_Clicked(object sender, EventArgs e)
{
  MessagingCenter.Send<Usuario>(new Usuario(), "SucessoLogin");
}

Também precisamos definir o tipo de mensagem. Neste caso será Usuario, que a enviará a partir de LoginView, e será recebida na classe App, passando por parâmetro o novo usuário. O nome desta mensagem será do tipo SucessoLogin, e inicialmente todo login será bem-sucedido pois ainda falta criar um mecanismo de autenticação.

No evento OnStart() do arquivo App.xaml.cs, ao inicializarmos, rodaremos MessagingCenter.Subscribe para a captura da mensagem, então substituiremos a linha // Handle when your app starts, como é mostrado abaixo:

protected override void OnStart()
{
  MessagingCenter.Subscribe<Usuario>(this, "SucessoLogin",
  (usuario) =>
  {
    MainPage = new NavigationPage(new ListagemView());  
  });
}

No código acima, Usuario é o tipo de objeto que está sendo passado na mensagem, e o objeto responsável por capturá-laé this, que referencia o próprio App. O nome da mensagem é SucessoLogin, como já havíamos determinado. Colocamos também um método anônimo (uma expressão lambda) que receberá o procedimento a ser executado quando a mensagem for capturada. Nele, deve ocorrer a alteração do MainPage. Tínhamos um NavigationPage no início do curso, para o qual se passava a instância nova do ListagemView como raiz desta pilha da navegação.

Feitas estas alterações, rodaremos a aplicação para ver se o mecanismo de navegação funciona. Faremos um teste preenchendo os campos com palavras quaisquer e, com isto, acabamos de navegar para a página de ListagemView, a página inicial da nossa navegação.

Conforme vamos navegando, conseguimos voltar pela seta que indica o sentido à esquerda (localizado no topo do layout). Assim, chegamos até a página de listagem de veículos, porém, sem a possibilidade de voltar mais do que isso, porque a tela inicial (a raiz de navegação) é ListagemView.

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

O curso Xamarin parte 3: crie aplicativos mobile com Visual Studio possui 219 minutos de vídeos, em um total de 37 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!

  • 1120 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

  • 1120 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

  • 1120 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

  • 1120 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 toda semana