Xamarin Forms - Login usando Firebase e MVVM

Continuando a primeira parte do artigo vamos criar a página de Login e Registro e acessar o Firebase.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:vm="clr-namespace:XF_LancheApp.ViewModels"
             mc:Ignorable="d"
             x:Class="XF_LancheApp.Views.LoginView"
             BackgroundColor="White"
             Title="Login">

    <ContentPage.BindingContext>
        <vm:LoginViewModel />
    </ContentPage.BindingContext>

    <Grid Padding="10" VerticalOptions="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <StackLayout Grid.Row="0" VerticalOptions="Center">
                <Image Source="logorede1.jpg"
                       WidthRequest="150" HeightRequest="150" Visual="Material"/>
                <Label Text="Login" FontFamily="Verdana"
                       TextColor="Purple" FontSize="30" 
                       FontAttributes="Bold"
                       HorizontalOptions="Center"/>
            </StackLayout>

            <StackLayout Grid.Row="1" Spacing="5">
                <Entry Placeholder="Nome do usuário" Text="{Binding Username}" />
                <Entry Placeholder="Senha do usuário" Text="{Binding Password}" IsPassword="True"/>

                <Button Text="Login" HorizontalOptions="Center" BackgroundColor="Black"
                        TextColor="White" WidthRequest="300" HeightRequest="40"
                        Visual="Material"
                        Command="{Binding LoginCommand}"
                        />

                <Label Text="Novo Usuário ? " FontAttributes="Bold" TextColor="Purple"/>

                <Button Text="Registrar" HorizontalOptions="Center" BackgroundColor="DarkSlateGray"
                        TextColor="White" WidthRequest="300" HeightRequest="40"
                        Visual="Material"
                        Command="{Binding RegisterCommand}"
                        />
            </StackLayout>
        </Grid>

</ContentPage>

Inicialmente não teremos nenhum usuário cadastrado e ao tentar fazer um login iremos obter um erro de usuário/senha inválido(s).

Assim teremos que registrar o usuário primeiro e depois fazer o login. Ao fazer o login com sucesso seremos direcionados para a view ProdutosView().

Vamos criar na pasta Views o arquivo ProdutosView.xaml com o código abaixo apenas para exibir a pagina:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XF_LancheApp.Views.ProdutosView"
             Title="Produtos">
    <ContentPage.Content>

        <StackLayout>
            <Label Text="Produtos a serem exibidos"
                FontSize="20" TextColor="Red"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>

    </ContentPage.Content>
</ContentPage>

Agora para concluir vamos alterar o código do arquivo App.xaml.cs para indicar que nossa view LoginView é a página inicial:

Agora vamos executar o projeto e tentar fazer um login inicial com o usuário macoratti e senha numsey123.

Vamos obter um erro pois ainda não registramos nenhum usuário, assim vamos registrar esse usuário.

Observe que quando registramos o usuário será criada a coleção Users e as propriedades Username e Password no Firebase.

Depois de fazer o login iremos para a view ProdutosView conforme mostrado a seguir:

A seguir vamos implementar a criação dos produtos para exibir na respectiva view.

"Muitas são, Senhor meu Deus, as maravilhas que tens operado para conosco, e os teus pensamentos não se podem contar diante de ti; se eu os quisera anunciar, e deles falar, são mais do que se podem contar."
Salmos 40:5