Utilizando uma API de teste com WinForms e Blazor

Introdução à API de exemplo e ao Visual Studio

Tim começa enfatizando a importância de uma API de exemplo ao aprender desenvolvimento web ou programação em Windows Forms. Uma API confiável funciona como um backend estável para testar funcionalidades em diversos ambientes de interface do usuário. Utilizando o ambiente de desenvolvimento integrado (IDE) Visual Studio, Tim demonstra a criação de novos projetos, apresentando as plataformas Blazor e Windows Forms.

Começando com uma aplicação web Blazor

Usando a caixa de diálogo "Novo Projeto" do Visual Studio, Tim seleciona um aplicativo Blazor WebAssembly. Ele nomeou o projeto de "BlazorDemo" dentro de uma solução intitulada "DemoApps". Essa configuração usa o modo "automático" para suportar renderização tanto no lado do servidor quanto em WebAssembly.

Adicionando um modelo a partir da API

Tim cria um novo arquivo chamado CourseModel.cs no projeto do lado do cliente. Ao copiar um payload JSON do endpoint /courses da API, ele usa a ferramenta "Colar JSON como Classes" do Visual Studio para gerar automaticamente a estrutura da classe. Embora a ferramenta não seja perfeita, Tim aprimora a classe usando a sintaxe Pascal e strings anuláveis ​​para corresponder aos padrões do C#.

Ajustando os tipos de dados e o mapeamento JSON

Tim revisa manualmente as propriedades geradas, convertendo valores como preço em USD para decimal para garantir a precisão. Ele também configura um objeto JsonSerializerOptions para tornar os nomes das propriedades insensíveis a maiúsculas e minúsculas, garantindo que as chaves JSON sejam mapeadas corretamente para as propriedades C#.

Criando e conectando uma página Razor

Em seguida, Tim adiciona um componente Razor chamado Razor, tornando-o uma página acessível através da URL /courses. Ele inicializa uma lista. e injeta um HttpClient para chamar a API de exemplo. A lógica do componente inclui tratamento de erros com blocos try-catch e renderização condicional da interface do usuário com base na disponibilidade de dados.

Exibindo informações do curso

Utilizando sintaxe básica de HTML e Razor , Tim percorre a lista de cursos e exibe a imagem de cada curso como um link clicável. Ele aplica estilos embutidos para controlar o layout e atribui atributos alt para acessibilidade.

Registrando o cliente HTTP em Program.cs

Tim configura o cliente HTTP no arquivo Program.cs do aplicativo Blazor , registrando-o usando builder.Services.AddScoped(...) e atribuindo o endereço base dehttps://thesampleapi.com . Ele explica que esse registro deve ocorrer tanto na configuração do cliente quanto na do servidor para dar suporte ao modelo de renderização híbrida do Blazor.

Corrigindo o problema de chamada dupla à API

Devido ao comportamento de pré-renderização padrão do Blazor, a página faz duas chamadas de API ao ser carregada. Tim desativa a pré-renderização definindo @rendermode InteractiveAuto e pre-render=false, o que evita solicitações de API duplicadas e melhora o desempenho ao lidar com dados remotos.

Mudando de marcha: criando um aplicativo Windows Forms

Utilizando o ambiente Visual Studio, Tim cria um novo aplicativo Windows Forms chamado WinFormDemo, direcionado ao .NET Framework. Ele altera o nome do formulário padrão para "Cursos" e modifica o tamanho da fonte através da janela Propriedades para tornar a interface do usuário mais legível.

Organizando o projeto com o Solution Explorer

Tim adiciona duas pastas: Modelos e Serviços. Em Serviços, ele cria uma classe estática HttpService com uma instância de HttpClient. Este cliente está configurado para acessar a mesma URL base da API. Embora Tim utilize uma abordagem estática por simplicidade, ele recomenda a injeção de dependência para desenvolvimento em nível de produção.

Criando a interface do usuário do formulário com controles da caixa de ferramentas

No Designer de Formulários do Windows, Tim arrasta um PictureBox e dois controles Button ("Anterior" e "Próximo") para o formulário. Ele define o SizeMode da caixa de imagem como Zoom, garantindo que as imagens do curso se ajustem perfeitamente ao controle. Ele também renomeia o título do formulário para "Cursos DevForge", refletindo a identidade visual de sua empresa.

Implementando a lógica do código subjacente

Utilizando o evento Form_Load (acionado por um clique duplo na janela Propriedades), Tim escreve a lógica assíncrona para buscar dados da API. Ele também define um método auxiliar LoadCourse(int index) que lida com a exibição da imagem e a validação dos limites. O método é robusto, lidando de forma adequada com listas nulas e índices fora do intervalo.

Navegando pelos percursos com botões

Tim conecta os botões "Anterior" e "Próximo" clicando duas vezes neles para gerar seus manipuladores de eventos (remetente de objeto, EventArgs e). Cada botão ajusta o índice do curso atual e chama a função LoadCourse() para atualizar a imagem exibida. Isso proporciona uma experiência de usuário fluida, semelhante a uma apresentação de slides.

Migrando para o desenvolvimento local usando o Docker

Tim demonstra como usar um contêiner Docker local em vez da API remota. Ele baixa a imagem mais recente, executa-a em uma porta aleatória e atualiza o URI base em HttpService.cs. Após confirmar a funcionalidade, ele demonstra como parar o contêiner Docker para testar o tratamento de falhas e como reiniciá-lo para verificar a recuperação.

Considerações finais e aplicações práticas

Tim conclui enfatizando o quão útil uma API de exemplo pode ser ao aprender a criar aplicativos para desktop Windows ou interfaces Blazor . Com uma fonte de dados confiável, os desenvolvedores podem se concentrar em dominar o design da interface gráfica do usuário, controles de formulário, eventos e ferramentas de layout, sem se preocuparem com a configuração do backend.

Conclusão

Seguindo o tutorial em vídeo detalhado de Tim Corey, os desenvolvedores ganham experiência prática com a programação em Blazor e Windows Forms. Utilizando o Visual Studio e uma API de teste, eles aprendem a construir interfaces de usuário modernas e a conectá-las a fontes de dados reais, tornando este tutorial um recurso valioso para desenvolvedores que exploram o ecossistema .NET .

Se você é iniciante em programação de formulários ou busca aprimorar suas habilidades na criação de aplicativos para Windows, este guia oferece informações práticas e atualizadas, além de boas práticas para apoiar sua jornada de desenvolvimento.