Api Dragon Ball Super

Abel Cabrera Miranda — Mon, 28 Apr 2025 06:06:21 +0000

Este es un proyecto desarrollado para plataformas móviles y en este blog muestro de cómo consumir una api(Application Programming Interface) y poder utilizar la información. Implementando Repository Pattern y Model View ViewModel como buenas prácticas y tener un código limpio.

Aplicacion:

Proyecto desarrollado con .Net C# MAUI 8.0

Especificamos el PageContent con el que inicializaría la aplicación al ejecutarse:

using AppDragonBallZ.View;

namespace AppDragonBallZ
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage = new NavigationPage(new Characters());
        }
    }
}

View(Vista): Creamos un nuevo archivo ContentPage con el nombre 'Characters' que será la vista para mostrar los personajes.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppDragonBallZ.View.Characters"
             NavigationPage.HasNavigationBar="False"
             Title="Characters">


    <!--imagenes-->
    <ScrollView BackgroundColor="White">

        <StackLayout >
            <!--logo-->
            <StackLayout Margin="5,5">
                <Image Source="dragonballsuper.png"/>
                <Border Margin="10">
                    <Border.Shadow>
                        <Shadow Brush="Black"
                                Opacity="0.9"
                                Offset="5,5"
                                Radius="10" />
                    </Border.Shadow>
                </Border>

            </StackLayout>

            <!--etiquetas-->
            <ScrollView Orientation="Horizontal"
                        HorizontalScrollBarVisibility="Never">
                <HorizontalStackLayout HorizontalOptions="Center"
                                       Spacing="5"
                                       Margin="10,10">
                    <Button Text="{Binding Pagination.Meta.TotalItems, StringFormat='Total personajes: {0}'}"
                            FontAttributes="Bold"
                            BackgroundColor="#ba0f42"
                            CornerRadius="20"
                            HeightRequest="35"
                            Padding="15,0,15,0" />
                    <Button Text="{Binding Pagination.Meta.TotalPages, StringFormat='Total página: {0}'}"
                            FontAttributes="Bold"
                            BackgroundColor="#30915f"
                            CornerRadius="20"
                            HeightRequest="35"
                            Padding="15,0,15,0" />
                    <Button Text="{Binding Pagination.Meta.CurrentPage, StringFormat='Página actual: {0}'}"
                            FontAttributes="Bold"
                            BackgroundColor="#2c74ab"
                            CornerRadius="20"
                            HeightRequest="35"
                            Padding="15,0,15,0" />
                    <Button Text="{Binding Pagination.Meta.ItemsPerPage, StringFormat='Cantidad personajes por página: {0}'}"
                            FontAttributes="Bold"
                            BackgroundColor="#2c74ab"
                            CornerRadius="20"
                            HeightRequest="35"
                            Padding="15,0,15,0" />
                </HorizontalStackLayout>
            </ScrollView>

            <!--Personajes-->               
            <CollectionView ItemsSource="{Binding Pagination.Characters}"
                            x:Name="characters">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical"
                                        Span="2" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="20,0,20,0"
                                RowDefinitions="*,*"
                                Margin="0,10">
                            <!--card imagen-->
                            <Grid Grid.Row="0">
                                <Border HeightRequest="280"
                                        Stroke="#87878a"
                                        StrokeShape="RoundRectangle 20,20,20,20"
                                        StrokeThickness="0">
                                    <!--color de fondo degradado-->
                                    <Border.Background>
                                        <LinearGradientBrush StartPoint="0,0"
                                                                EndPoint="1,1">
                                            <GradientStop Color="#5da1a3"
                                                            Offset="0.0" />
                                            <GradientStop Color="#ffffff"
                                                            Offset="0.5" />
                                            <GradientStop Color="#ffffff"
                                                            Offset="1.0" />
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <!--sombra-->
                                    <Border.Shadow>
                                        <Shadow Brush="Black"
                                                Opacity="0.5"
                                                Offset="5,5"
                                                Radius="10" />
                                    </Border.Shadow>
                                </Border>
                                <!--imagen personaje-->
                                <Image Aspect="AspectFit"
                                       HeightRequest="300"
                                       Source="{Binding Image}" />
                                <Grid.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding Path=BindingContext.SeleccionarPersonajeCommand, Source={x:Reference characters}}"
                                                          CommandParameter="{Binding Id}" />
                                </Grid.GestureRecognizers>
                            </Grid>

                            <!--Nombre personaje-->
                            <Grid Grid.Row="1"
                                    Margin="0,0,0,0">
                                <Label HorizontalOptions="Center"
                                        TextColor="Black"
                                        Text="{Binding Name}"
                                        FontAttributes="Bold"
                                        FontSize="15"
                                        VerticalOptions="End" />
                                <BoxView HeightRequest="1"
                                            BackgroundColor="#d1d1d1"
                                            Margin="0,25,0,0" />
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

            <!--boton paginación-->
            <HorizontalStackLayout HorizontalOptions="Center"
                                    Margin="0,10"
                                    BindableLayout.ItemsSource="{Binding Pagination}"
                                    x:Name="paginationCharacters">
                <Button Text="Anterior"
                        IsEnabled="{Binding BtnAnterior}"
                        FontAttributes="Bold"
                        TextColor="White"
                        BackgroundColor="#262626"
                        CornerRadius="20"
                        HeightRequest="35"
                        Margin="0,0,5,0"
                        Padding="15,0,15,0">
                    <Button.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding Path=BindingContext.AnteriorPaginaCommand, Source={x:Reference paginationCharacters}}"
                                                CommandParameter="{Binding Pagination}" />
                    </Button.GestureRecognizers>
                </Button>

                <Button Text="Siguiente"   
                        IsEnabled="{Binding BtnSiguiente}"
                        FontAttributes="Bold"
                        TextColor="White"
                        BackgroundColor="#262626"
                        CornerRadius="20"
                        HeightRequest="35"
                        Margin="5,0,0,0"
                        Padding="15,0,15,0">
                    <Button.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding Path=BindingContext.SiguientePaginaCommand, Source={x:Reference paginationCharacters}}"
                                                CommandParameter="{Binding Pagination}" />
                    </Button.GestureRecognizers>
                </Button>
            </HorizontalStackLayout>

        </StackLayout>
    </ScrollView>

</ContentPage>

Métodos de Interfaz: ICharactersRepository. En esta interfáz creamos 3 métodos y de los cuáles solo utilizaremos 2. Una interfaz define un contrato o conjunto de reglas que las clases que lo implementen deben cumplirlos.

using AppDragonBallZ.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace AppDragonBallZ.RepositoryPattern.IRepositoryPattern
{
    public interface ICharactersRepository
    {
        Task<Respuesta> Characters(string uriApi);
        Task<Respuesta> GetCharacterById(long characterId);
        Task<Respuesta> GetCharacterByName(string name);

    }
}

Repository Pattern: CharactersRepository, implementa los métodos de la Interfaz: ICharactersRepository. Este contiene únicamente la lógica para consumir la api y poder deserealizarlo y retornar los datos para luego ser utilizado de acuerdo a la información que necesitaríamos visualizar en vista de la aplicación.

using AppDragonBallZ.Model;
using AppDragonBallZ.Model.DBZmodel;
using AppDragonBallZ.RepositoryPattern.IRepositoryPattern;
using AppDragonBallZ.Generico;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace AppDragonBallZ.RepositoryPattern
{
    public class CharactersRepository : ICharactersRepository
    {
        public async Task<Respuesta> Characters(string uriApi)
        {
            Respuesta respuesta = new();
            try
            {                
                string urlApi = uriApi;

                var httpClient = new HttpClient();
                Pagination pagination = new();

                var response = await httpClient.GetAsync(urlApi);
                if (response.IsSuccessStatusCode)
                {
                    var content = await response.Content.ReadAsStringAsync();
                    var result = JsonConvert.DeserializeObject<Pagination>(content);
                    pagination = result;
                }

                respuesta.Data = pagination;
                respuesta.Resultado = true;
                respuesta.Mensaje = "Consulta exitosa";

            }
            catch (Exception ex)
            {
                respuesta.Resultado = false;
                respuesta.Mensaje = "Error en método: Characters - > " + ex.Message.ToString();
            }

            return respuesta;
        }

        public async Task<Respuesta> GetCharacterById(long characterId)
        {
            Respuesta respuesta = new();
            try
            {
                string urlApi = $"{Utilidades.UrlApiDBZ}/{characterId}";

                var httpClient = new HttpClient();
                Character character = new();

                var response = await httpClient.GetAsync(urlApi);
                if (response.IsSuccessStatusCode)
                {
                    var content = await response.Content.ReadAsStringAsync();
                    var result = JsonConvert.DeserializeObject<Character>(content);
                    character = result;
                }

                respuesta.Data = character;
                respuesta.Resultado = true;
                respuesta.Mensaje = "Consulta exitosa";

            }
            catch (Exception ex)
            {
                respuesta.Resultado = false;
                respuesta.Mensaje = "Error en método: GetCharacterById - > " + ex.Message.ToString();
            }

            return respuesta;
        }

        public Task<Respuesta> GetCharacterByName(string name)
        {
            throw new NotImplementedException();
        }
    }
}

ViewModel(Modelo de Vista): CharactersViewModel.
Es una clase que encapsula la lógica de la interfaz de usuario, separándola de la vista (la interfaz de usuario XAML) y del modelo (los datos y la lógica de negocio). Esto facilita el desarrollo de aplicaciones más organizadas, testables y mantenibles.

using AppDragonBallZ.RepositoryPattern;
using AppDragonBallZ.Generico;
using AppDragonBallZ.Model;
using AppDragonBallZ.Model.DBZmodel;
using AppDragonBallZ.RepositoryPattern.IRepositoryPattern;
using AppDragonBallZ.View;
using System.Windows.Input;

namespace AppDragonBallZ.ViewModel
{
    public class CharactersViewModel : BaseViewModel
    {
        #region VARIABLES
        private readonly ICharactersRepository charactersRepository = new CharactersRepository();

        Pagination _pagination = new();
        public bool IsRefreshing { get; set; }

        int _page =1;
        int _limit=10;
        bool _btnAnterior;
        bool _btnSiguiente;

        #endregion

        #region OBJETOS
        public Pagination Pagination
        {
            get { return _pagination; }
            set { SetValue(ref _pagination, value); }
        }
        public bool BtnAnterior
        {
            get { return _btnAnterior; }
            set { SetValue(ref _btnAnterior, value); }
        }
        public bool BtnSiguiente
        {
            get { return _btnSiguiente; }
            set { SetValue(ref _btnSiguiente, value); }
        }
        public int Page
        {
            get { return _page; }
            set { SetValue(ref _page, value); }
        }

        public int Limit
        {
            get { return _limit; }
            set { SetValue(ref _limit, value); }
        }
        #endregion

        #region CONSTRUCTOR
        public CharactersViewModel(INavigation navigation)
        {
            Navigation = navigation;
            BtnSiguiente = true;
            ObtenerPersonajes();
        }
        #endregion

        #region PROCESOS
        public async void ObtenerPersonajes()
        {
            try
            {               
                Respuesta respuesta = await charactersRepository.Characters($"{Utilidades.UrlApiDBZ}?page={Page}&limit={Limit}");

                if (respuesta.Resultado!=true)
                {
                    await DisplayAlert("Error", respuesta.Mensaje, "Ok");
                }

                Pagination = (Pagination)respuesta.Data;

            }
            catch (Exception ex)
            {
                await DisplayAlert("Error en método: ObtenerPersonajes -> ", ex.Message.ToString(), "Ok");
            }
        }

        public async void SiguientePagina(Pagination pagination)
        {
            try
            {              
                Respuesta respuesta = await charactersRepository.Characters(pagination.Links.Next.ToString());

                if (respuesta.Resultado != true)
                {
                    await DisplayAlert("Error", respuesta.Mensaje, "Ok");
                }

                Pagination = (Pagination)respuesta.Data;
                  ValidarEstadoBoton("Siguiente");
            }
            catch (Exception ex)
            {
                await DisplayAlert("Error en método: SiguientePagina -> ", ex.Message.ToString(), "Ok");
            }
        }

        public async void AnteriorPagina(Pagination pagination)
        {
            try
            {

                Respuesta respuesta = await charactersRepository.Characters(pagination.Links.Previous.ToString());

                if (respuesta.Resultado != true)
                {
                    await DisplayAlert("Error", respuesta.Mensaje, "Ok");
                }

                Pagination = (Pagination)respuesta.Data;
                ValidarEstadoBoton("Anterior");
            }
            catch (Exception ex)
            {
                await DisplayAlert("Error en método: AnteriorPagina -> ", ex.Message.ToString(), "Ok");
            }
        }

        public async void ValidarEstadoBoton(string boton)
        {
            try
            {
                if (boton.Equals("Siguiente"))
                {
                    BtnSiguiente = Pagination.Links.Next == null ? false : true;
                    BtnAnterior = Pagination.Links.Previous == null ? false : true;
                }
                else if (boton.Equals("Anterior"))
                {
                    BtnAnterior = Pagination.Links.Previous == null ? false : true;
                    BtnSiguiente = Pagination.Links.Next == null ? false : true;
                }
            }
            catch (Exception ex)
            {
                await DisplayAlert("Error en método: ValidarEstadoBoton -> ", ex.Message.ToString(), "Ok");
            }

        }

        public async void SeleccionarPersonaje(long characterId)
        {
            try
            {

                await Navigation.PushAsync(new CharacterDetail(characterId));
            }
            catch (Exception ex)
            {

                await DisplayAlert("Error en método: SeleccionarPersonaje -> ", ex.Message.ToString(), "Ok");
            }
        }
        #endregion

        #region COMANDOS        
        public ICommand SiguientePaginaCommand => new Command<Pagination>(SiguientePagina);
        public ICommand AnteriorPaginaCommand => new Command<Pagination>(AnteriorPagina);
        public ICommand SeleccionarPersonajeCommand => new Command<long>(SeleccionarPersonaje);
        #endregion
    }
}

Model(Modelo): En estas clases están todas las propiedades de acuerdo a la información de la API obtenida; estos nos servirá para setear los datos despues de ser deserealizados.

BindingContext:, creamos una instancia hacia CharactersViewModel permitiendo así que los elementos de la Interfaz de usuario se vinculen a sus propiedades, métodos, comandos etc.

using AppDragonBallZ.ViewModel;

namespace AppDragonBallZ.View;

public partial class Characters : ContentPage
{
    public Characters()
    {
        InitializeComponent();
        BindingContext = new CharactersViewModel(Navigation);
    }
}

Beneficion de utilizar este patrón:

Separación de responsabilidades: La vista no necesita conocer la lógica del modelo de vista.
Actualización automática: Cuando una propiedad cambia en el modelo de vista, la interfaz de usuario se actualiza automáticamente.
Facilita pruebas: Permite probar la lógica de negocio sin depender de la interfaz gráfica.

Nota:
Descargar el nugget: Newtonsoft.Json. Esta biblioteca .NET permite serializar (convertir objetos .NET a JSON o viceversa).

Código completo del proyecto:
[https://github.com/12AbelCabreraMiranda/AppDragonBallZ]

Referencias:
[https://learn.microsoft.com/es-es/dotnet/architecture/maui/mvvm]
[https://web.dragonball-api.com/documentation]

Número mayor de un Array

Abel Cabrera Miranda — Sat, 23 Jul 2022 03:04:00 +0000

Ejercicio #1
Definición: Desarrollaré un programa con C# para obtener el valor mayor de un array.

Nota: el código compartido es una de las maneras de como encontrar la solución, si tienes otra manera de como solucionarlo, nos lo puedes compartir en los comentarios.

static void Main(string[] args)
{
    //Invocamos nuestro Método
    Array1();
}

public static void Array1()
{
     //Declaramos nuestra variable array
     int[,,,] Array = new int[9, 5, 15, 2];

     //Declaramos valiable para obtener la longitud de nuestro array
     int Valor = Array.Rank;

     //Inicializamos nuestra variable
     int ValorMaximo = 0;

     //Recorremos la cantidade de veces de longitud de nuestro array
     for(int i=0; i<Valor; i++)
     {
         //Validamos el valor obtenido de nuestro array en cada ciclo
         if (Array.GetLength(i) > ValorMaximo)
         {
             //Si el valor es mayor del valor que tiene nuestra 
             variable, entonces le asignamos el nuevo valor
             ValorMaximo = Array.GetLength(i);
          }
      }

      //Imprimimos el valor maximo
      Console.WriteLine(ValorMaximo);
}

Resultado:15

DEV Community: Abel Cabrera Miranda

Api Dragon Ball Super

Número mayor de un Array