Uso de una API de prueba con WinForms y Blazor

Introducción a la API de muestra y a Visual Studio

Tim comienza haciendo hincapié en la importancia de una API de ejemplo a la hora de aprender desarrollo web o programación Windows Forms. Una API fiable actúa como backend estable para probar funciones en diversos entornos de interfaz de usuario. Utilizando el IDE de Visual Studio, Tim navega hasta la creación de nuevos proyectos, mostrando las plataformas Blazor y Windows Forms.

Comenzar con una aplicación web Blazor

Mediante el cuadro de diálogo "Nuevo proyecto" de Visual Studio, Tim selecciona una aplicación Blazor WebAssembly. Nombra el proyecto "BlazorDemo" dentro de una solución titulada "DemoApps" Esta configuración utiliza el modo "auto" para admitir la renderización tanto del lado del servidor como de WebAssembly.

Añadir un modelo desde la API

Tim crea un nuevo archivo llamado CourseModel.cs en el proyecto del lado del cliente. Copiando una carga útil JSON desde el punto final /courses de la API, utiliza la herramienta "Pegar JSON como clases" de Visual Studio para generar automáticamente la estructura de clases. Aunque la herramienta no es perfecta, Tim perfecciona la clase utilizando casing Pascal y cadenas anulables para ajustarse a los estándares de C#.

Ajuste de tipos de datos y mapeo JSON

Tim revisa manualmente las propiedades generadas, convirtiendo valores como precioUSD a decimal para garantizar la precisión. También configura un objeto JsonSerializerOptions para que los nombres de las propiedades no distingan entre mayúsculas y minúsculas, lo que garantiza que las claves JSON se correspondan correctamente con las propiedades de C#.

Creación y cableado de una página Razor

A continuación, Tim añade un componente Razor llamado Courses.razor, convirtiéndolo en una página accesible a través de la URL /courses. Inicializa una List e inyecta un HttpClient para llamar a la API de ejemplo. La lógica del componente incluye la gestión de errores con try-catch y la representación condicional de la interfaz de usuario en función de la disponibilidad de los datos.

Visualización de la información del curso

Utilizando HTML básico y sintaxis Razor, Tim recorre la lista de cursos y muestra la imagen de cada curso como un enlace en el que se puede hacer clic. Aplica estilos inline para controlar el diseño y asigna atributos alt para la accesibilidad.

Registro del cliente HTTP en Program.cs

Tim configura el cliente HTTP en Program.cs de la aplicación Blazor, registrándolo mediante builder.Services.AddScoped(...) y asignándole la dirección base https://thesampleapi.com. Explica que este registro debe producirse tanto en configuraciones de cliente como de servidor para admitir el modelo de representación híbrido de Blazor.

Cómo solucionar el problema de la doble llamada a la API

Debido al comportamiento de pre-renderización por defecto de Blazor, la página realiza dos llamadas a la API en la carga. Tim desactiva la renderización previa estableciendo @rendermode InteractiveAuto y pre-render=false, lo que evita la duplicación de solicitudes de API y mejora el rendimiento cuando se trabaja con datos remotos.

Cambiando de marcha: Creación de una aplicación Windows Forms

Utilizando el entorno Visual Studio, Tim crea una nueva aplicación Windows Forms llamada WinFormDemo orientada a .NET Framework. Cambia el nombre predeterminado del formulario a Cursos y modifica el tamaño de la fuente a través de la ventana de propiedades para que la interfaz de usuario sea más legible.

Organización del proyecto con Solution Explorer

Tim añade dos carpetas: Modelos y Servicios. En Servicios, crea una clase estática HttpService con una instancia HttpClient. Este cliente está configurado para dirigirse a la misma URL base de la API. Aunque Tim utiliza un enfoque estático para simplificar, recomienda la inyección de dependencias para el desarrollo en producción.

Diseño de la interfaz de usuario de formularios con controles de caja de herramientas

En el Diseñador de formularios de Windows, Tim arrastra un PictureBox y dos controles Button ("Anterior" y "Siguiente") al formulario. Establece el SizeMode de la caja de imagen en Zoom, asegurando que las imágenes del curso se ajustan perfectamente dentro del control. También cambia el título del formulario a "Cursos DevForge", reflejando la marca de su empresa.

Implementación de la lógica detrás del código

Utilizando el evento Form_Load (que se activa haciendo doble clic en la ventana de propiedades), Tim escribe la lógica asíncrona para obtener datos de la API. También define un método de ayuda LoadCourse(int index) que se encarga de la visualización de imágenes y la validación de límites. El método es robusto, gestiona listas nulas e índices fuera de rango con elegancia.

Cursos de navegación con botones

Tim conecta los botones "Anterior" y "Siguiente" haciendo doble clic sobre ellos para generar sus manejadores de eventos (object sender, EventArgs e). Cada botón ajusta el índice currentCourse y llama a LoadCourse() para actualizar la imagen mostrada. Esto proporciona una experiencia de usuario fluida similar a una presentación de diapositivas.

Cambio al desarrollo local mediante Docker

Tim ilustra cómo utilizar un contenedor Docker local en lugar de la API remota. Extrae la última imagen, la ejecuta en un puerto aleatorio y actualiza el URI base en HttpService.cs. Después de confirmar la funcionalidad, demuestra cómo detener el contenedor Docker para probar la gestión de fallos y cómo reiniciarlo para verificar la recuperación.

Pensamientos finales y aplicaciones prácticas

Tim concluye haciendo hincapié en lo útil que puede resultar una API de muestra a la hora de aprender a crear aplicaciones de escritorio de Windows o front-ends de Blazor. Con una fuente de datos fiable, los desarrolladores pueden centrarse en dominar el diseño de la interfaz gráfica de usuario, los controles de formularios, los eventos y las herramientas de diseño sin tener que preocuparse por la configuración del backend.

Conclusión

Siguiendo el detallado tutorial de Tim Corey video, los desarrolladores adquieren experiencia práctica con la programación tanto de Blazor como de Windows Forms. Utilizando Visual Studio y una API de prueba, aprenderán a crear interfaces de usuario modernas y a conectarlas a fuentes de datos en tiempo real, lo que convierte a este tutorial en un valioso recurso para los desarrolladores que exploran el ecosistema .NET.

Tanto si eres nuevo en la programación de formularios como si buscas mejorar tus habilidades en la creación de aplicaciones Windows, esta guía ofrece información práctica y actualizada y las mejores prácticas para apoyar tu viaje de desarrollo.