Creando un pequeño sample con .Net Maui

Con ánimo de aportar algún ejemplo a la comunidad, he creado un pequeño proyecto de ejemplo en el que hacemos uso de una api pública de Rick And Morty para rellenar dos listados.

Para obtener los datos usamos https://rickandmortyapi.com con la librería de Refit para ayudarnos a montar las llamadas. Primero tenemos un modelo para parsear los datos.

Este sería el modelo del personaje:

 public class Character
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public string Status { get; set; }

        public string Species { get; set; }

        public string Type { get; set; }

        public string Gender { get; set; }

        public string Image { get; set; }

        public List<string> Episode { get; set; }

        public string Url { get; set; }

        public DateTime Created { get; set; }

    }

Además de este modelo, tenemos otro para el episodio y uno para englobar la respuesta que es una lista de items. He creado un modelo genérico para reutilizarlo en una llamada para obtener personajes y episodios. Seria algo asi:

    public class RickAndMortyResponse<T>
    {
        public Info info { get; set; }
        public IEnumerable<T> results { get; set; }

        public class Info
        {
            public int count { get; set; }
            public int pages { get; set; }
            public string next { get; set; }
            public object prev { get; set; }
        }
    }

Y lo definiríamos en refit de esta forma:

 public interface IRickAndMortyApi
    {
        [Get("/api/episode")]
        Task<RickAndMortyResponse<Episode>> GetEpisodes();
        
        [Get("/api/character")]
        Task<RickAndMortyResponse<Character>> GetCharacters();
    }

Una vez que tengamos los datos, vamos a por la UI. Vamos a tener un CollectionView que con un viewmodel rellenará los datos.

 <ContentPage.Content>
        <CollectionView
                ItemsSource="{Binding Characters}"
                SelectionMode="Single"
                SelectedItem="{Binding SelectedCharacter}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid 
                        RowDefinitions="auto,auto,auto" 
                        ColumnDefinitions="2*,8*"
                        Margin="4" Padding="8,0"
                        ColumnSpacing="8"
                        RowSpacing="4">
                        <Image
                            GridLayout.RowSpan="3"
                            Source="{Binding Image}"
                            WidthRequest="{x:OnIdiom Default=80, Desktop=220}"
                            HeightRequest="{x:OnIdiom Default=80, Desktop=220}"/>

                        <Label 
                            GridLayout.Column="1"
                                Text="{Binding Name}" 
                                TextColor="Black"
                                FontSize="18"
                                FontAttributes="Bold"/>

                        <HorizontalStackLayout 
                            Spacing="4" 
                            HorizontalOptions="StartAndExpand"
                            GridLayout.Column="1"
                            GridLayout.Row="1">
                            <Label
                                    Text="{Binding Species}" 
                                    TextColor="Black"
                                    FontSize="16"
                                    />
                            <Label
                                    Text="{Binding Gender}" 
                                    TextColor="Black"
                                    FontSize="16"
                                    />
                        </HorizontalStackLayout>

                        <Label
                            GridLayout.Column="1"
                            GridLayout.Row="2"
                            Text="{Binding Status}" 
                            TextColor="{Binding Status,Converter={StaticResource StatusToColorConverter}}"
                            FontSize="16"
                            />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage.Content>

El viewmodel es básico simplemente llamando a la api antes mencionada.

Me gustaría cambiar el TabbedPage a Shell, quizás en los próximos días y también lo enseño por eso no he mostrado la estructura de las dos páginas.

El repositorio es público y podeis verlo aqui https://github.com/migueBarrera/sample-maui-Rick-And-Morty

La idea no es evolucionarlo mucho más pero se aceptan PR.