Saltar al pie de página
Iron Academy Logo
Aplicación C#
Aplicación C#

Otras categorías

Spinner de espera personalizado - Serie de consolas Spectre

Tim Corey
6m 12s

Spectre Console es una biblioteca .NET que permite crear hermosas aplicaciones de consola con salida enriquecida, color y formato. Tim Corey comienza su vídeo "Build a Custom Waiting Spinner - Spectre Console Series" recordándonos que Spectre Console convierte las sencillas aplicaciones de consola de C# en herramientas visualmente más atractivas e informativas. En esta lección, Tim muestra cómo implementar un spinner de carga personalizado: una función pequeña pero potente que puede hacer que los indicadores de estado y progreso de tu programa de consola sean más fáciles de seguir.

Tim explica en el minuto 0:16 que el código fuente del proyecto está enlazado debajo del vídeo. Anima a los espectadores a probarlas y experimentar con ellas ellos mismos, cambiando ajustes o añadiendo funciones para entender cómo funcionan en su propio entorno. Esto es especialmente útil si desea dar soporte a diferentes terminales, como Windows Terminal o PowerShell, que tienen comportamientos ligeramente diferentes para los caracteres Unicode.

Utilización de un Spinner incorporado

Tim empieza con un ejemplo sencillo. En el minuto 0:37, escribe código utilizando AnsiConsole.Status para mostrar un estilo de spinner conocido mientras se ejecuta algún trabajo en segundo plano. Selecciona Spinner.Known.Aesthetic pero señala que Spectre ofrece muchas opciones en la lista Spinner.Known. Tim añade una cadena "Loading" para mostrar junto al spinner para que el usuario sepa lo que está pasando.

Dentro del bloque de estado, Tim inserta un Thread.Sleep(10000) - diez segundos - sólo para probar. Esto obliga a la consola a mostrar el spinner en acción el tiempo suficiente para verlo. En el minuto 1:23 explica que, una vez completada la tarea, el spinner desaparece automáticamente. Este es el patrón predeterminado que Spectre fomenta para mostrar el estado o el progreso en una aplicación de consola.

Hacia un spinner personalizado

En el minuto 1:41, Tim dice: "Muy bien, vamos a crear un spinner personalizado", mostrando cómo ir más allá de las opciones incorporadas. Explica que a veces se desea dar un formato o estilo al spinner que se adapte al propio proyecto, a los colores de la marca o incluso al tipo de datos que se procesan. Al escribir su propia clase spinner, usted controla los marcos, la temporización y si utiliza caracteres Unicode o no.

Creación de la clase Spinner

Tim crea un nuevo archivo llamado TestSpinner.cs. En el minuto 2:05, hace pública la clase y la configura para que herede de la clase abstracta Spinner de Spectre. Utiliza la función "implementar clase abstracta" de Visual Studio para generar los miembros necesarios. Aquí es donde usted proporciona sus propios valores, como la velocidad, los marcos y la configuración Unicode, en lugar de utilizar los valores predeterminados.

Tim destaca en el minuto 2:18 que se trata de propiedades get-only, lo que simplifica la escritura de miembros con cuerpo de expresión. Este formato hace que la definición del spinner sea compacta y más fácil de mantener o actualizar posteriormente.

Control de la velocidad por fotograma

A las 2:30, Tim establece la propiedad de temporización en TimeSpan.FromMilliseconds(200). Esto significa que el spinner se moverá a unos cinco fotogramas por segundo. Explica que puedes seleccionar un valor diferente si quieres que el spinner funcione más rápido o más lento. Ajustar esta configuración es una forma sencilla de mejorar la sensación de la animación de carga en función de lo que esté haciendo su comando o proceso.

Manejo de caracteres Unicode

A las 3:00, Tim aborda un tema clave: Unicode. Señala que, al ejecutar el proyecto en la consola integrada de Visual Studio, es posible que los caracteres Unicode no se muestren correctamente, provocando errores o la ausencia de símbolos. Sin embargo, si ejecutas el mismo proyecto en Windows Terminal o PowerShell, Unicode y emoji generalmente se muestran bien. En su demostración, establece la propiedad en false para evitar este problema, pero señala que puedes establecerla en true cuando tu terminal lo admita.

Esto hace que sea más fácil añadir a tu aplicación símbolos coloridos, flechas o incluso indicadores de progreso basados en emoji. Podrías dar formato a los marcos con ✅, 🌧, 🔄, o cualquier carácter que desees para proporcionar información más rica.

Definición de los marcos

La siguiente propiedad es la lista de marcos. En el minuto 3:34, Tim escribe una función de flecha que devuelve una matriz de cadenas. Cada cadena es un "fotograma" del spinner. En su ejemplo, utiliza una "O" grande y varias "o" pequeñas para simular el movimiento a través de la línea.

Copia y pega el fotograma base cinco veces y, a continuación, a las 4:12, sustituye una "O" en una posición diferente en cada fotograma. Esto crea una animación sencilla: la gran "O" parece moverse de izquierda a derecha y luego vuelve al principio. Tim señala en el minuto 4:26 que puedes añadir más cuadros para invertir la dirección, añadir formato de color (Spectre admite marcado enriquecido como [green]text[/]) o experimentar con caracteres Unicode si tu consola lo admite.

Aquí está el código de la clase TestSpinner de Tim:

using Spectre.Console;

namespaces SpectreDemos;

public class TestSpinner : Spinner
{
    public override TimeSpan Interval => TimeSpan.FromMilliseconds(200);

    public override bool IsUnicode => false;

    public override IReadOnlyList<string> Frames => 
    [
        "Ooooo",
            "oOooo",
            "ooOoo",
            "oooOo",
            "ooooO"
    ]
}
using Spectre.Console;

namespaces SpectreDemos;

public class TestSpinner : Spinner
{
    public override TimeSpan Interval => TimeSpan.FromMilliseconds(200);

    public override bool IsUnicode => false;

    public override IReadOnlyList<string> Frames => 
    [
        "Ooooo",
            "oOooo",
            "ooOoo",
            "oooOo",
            "ooooO"
    ]
}

Implementación y prueba del spinner personalizado

Una vez definida la clase, Tim vuelve a su programa principal. En el minuto 4:42, sustituye Spinner.Known.Aesthetic por new TestSpinner(). Eso es todo - no se requieren otros cambios en el código. A continuación, ejecuta la aplicación en el minuto 4:52 para mostrar el nuevo spinner en acción.

Spectre Console Custom Waiting Spinner 1 related to Implementación y prueba del spinner personalizado

Este paso de prueba es importante. Tim recomienda que ejecutes tu proyecto en el mismo terminal que utilizarán tus usuarios, de modo que puedas detectar problemas con la codificación, los colores o la sincronización con antelación. Las diferentes carcasas y tipos de letra pueden afectar a la apariencia del spinner.

Spectre Console Custom Waiting Spinner 2 related to Implementación y prueba del spinner personalizado

Añadir Unicode, Emojis y Color

Tim explica en el minuto 5:00 que nada impide utilizar emojis o caracteres especiales como marcos si se activa Unicode. Podrías construir un spinner del tiempo, una barra de progreso verde utilizando el marcado de Spectre, o cualquier visualización creativa que se adapte a tu aplicación. Esto es especialmente útil en el caso de comandos que tardan mucho tiempo en iniciarse o seguir ejecutándose, ya que los usuarios aprecian una respuesta visual clara.

También señala que Spectre Console simplifica la adición de colores y texto formateado al spinner. Por ejemplo, podrías escribir [green]Loading...[/] junto al spinner para enfatizar el éxito, o resaltar los errores con texto rojo cuando sea necesario.

Consejos de rendimiento y configuración

En el minuto 5:19, Tim resume los elementos clave que se necesitan para un spinner personalizado:

  • Tiempo: cuánto dura cada fotograma.

  • IsUnicode: si se utiliza Unicode/emoji o texto sin formato.

  • Marcos: el conjunto de cadenas que se animan.

Advierte de que un número excesivo de fotogramas o una velocidad demasiado lenta pueden hacer que los usuarios no vean nunca los últimos fotogramas, a menos que el proceso sea muy largo. Seleccionar las opciones correctas aquí hace que tu spinner sea más eficaz. Estos ajustes también facilitan el incremento de tu proyecto con el tiempo - puedes añadir más fotogramas o ajustar la temporización sin reescribir toda tu aplicación de consola.

Resumen

En el minuto 5:38, Tim muestra que heredando de la clase Spinner y proporcionando tus propios valores, puedes construir rápidamente un indicador de carga personalizado para tu consola o herramientas basadas en PowerShell. De este modo, tendrá más control sobre la información y la sensación que ofrece a sus usuarios. En el minuto 5:47, recuerda a los espectadores que el código fuente y la documentación se encuentran en la descripción del vídeo para que puedas explorarlo y ampliarlo tú mismo.

Conclusión

Siguiendo el vídeo de Tim Corey, hemos visto exactamente cómo implementar un spinner de carga personalizado de Spectre Console: hereda de Spinner, proporciona un valor de temporización, especifica el soporte Unicode y define tus marcos. A continuación, sólo tiene que sustituir un spinner conocido por su nueva clase para añadirlo a su proyecto. Tim también señala formas de añadir caracteres Unicode, emojis y marcas de color para que las pantallas de estado y progreso de tu aplicación de consola sean más informativas y bonitas.

Al utilizar las capacidades de Spectre Console, puede proporcionar comentarios más claros, encontrar y solucionar problemas antes, y crear aplicaciones de consola hermosas que los usuarios disfrutan.

Hero Worlddot related to Spinner de espera personalizado - Serie de consolas Spectre
Hero Affiliate related to Spinner de espera personalizado - Serie de consolas Spectre

Gana más compartiendo lo que te gusta

¿Creas contenidos para desarrolladores que trabajan con .NET, C#, Java, Python o Node.js? ¡Convierte tu experiencia en un ingreso extra!

Equipo de soporte de Iron

Estamos disponibles online las 24 horas, 5 días a la semana.
Chat
Email
Llámame