Dicas de .NET
Consumindo API de Temperatura com Blazor: Criando um Termômetro CSS Interativo
Aprenda a utilizar Blazor e C# para consumir APIs e crie um termômetro CSS visualmente interessante
Neste tutorial prático, você aprenderá a consumir uma API de temperatura (Weather API) utilizando Blazor com C# e criar um termômetro dinâmico usando CSS. Vamos explorar desde o consumo de dados de uma API até a implementação de um layout interativo
**O que você vai aprender:**
- Utilizar uma API Key no Weather API
- Configuração inicial e criação de um projeto Blazor
- Consumir informações da API utilizando HTTPClient
- Manipulação de JSON e mapeamento de dados
- Estruturação de um termômetro usando HTML e CSS
- Como alterar dinamicamente a cidade de interesse e atualizar a interface
⚠️ ENTRE NA NOSSA COMUNIDADE DO DISCORD
**Índice de Capítulos:**
- [00:00:00] Apresentação do Blazor e a API Weather (API Explorer e os Endpoints)
- [00:03:44] Criação do Projeto Blazor
- [00:04:25] Seleção de Template (Workloads) e Estruturação do Projeto
- [00:09:18] Compilação e Execução Inicial do Projeto
- [00:13:00] Implementando o Consumo da API com HttpClient (OnInitializeAsync)
- [00:16:04] Manipulando JSON e Utilizando Models / DTOs
- [00:17:26] Transformando Dados em Informações Tipadas (JsonPropertyName)
- [00:21:17] Binding e exibição de variáveis na página razor
- [00:24:18] Trabalhando com Injeção de Dependência (DI)
- [00:26:34] Trabalhando com CSS no Blazor (arquivo separado)
- [00:32:46] Implementando Seleção Dinâmica de Cidade (HTML select, bind, onchange)
Neste tutorial prático, você aprenderá a consumir uma API de temperatura (Weather API) utilizando Blazor com C# e criar um termômetro dinâmico usando CSS. Vamos explorar desde o consumo de dados de uma API até a implementação de um layout interativo
**O que você vai aprender:**
- Utilizar uma API Key no Weather API
- Configuração inicial e criação de um projeto Blazor
- Consumir informações da API utilizando HTTPClient
- Manipulação de JSON e mapeamento de dados
- Estruturação de um termômetro usando HTML e CSS
- Como alterar dinamicamente a cidade de interesse e atualizar a interface
⚠️ ENTRE NA NOSSA COMUNIDADE DO DISCORD
**Índice de Capítulos:**
- [00:00:00] Apresentação do Blazor e a API Weather (API Explorer e os Endpoints)
- [00:03:44] Criação do Projeto Blazor
- [00:04:25] Seleção de Template (Workloads) e Estruturação do Projeto
- [00:09:18] Compilação e Execução Inicial do Projeto
- [00:13:00] Implementando o Consumo da API com HttpClient (OnInitializeAsync)
- [00:16:04] Manipulando JSON e Utilizando Models / DTOs
- [00:17:26] Transformando Dados em Informações Tipadas (JsonPropertyName)
- [00:21:17] Binding e exibição de variáveis na página razor
- [00:24:18] Trabalhando com Injeção de Dependência (DI)
- [00:26:34] Trabalhando com CSS no Blazor (arquivo separado)
- [00:32:46] Implementando Seleção Dinâmica de Cidade (HTML select, bind, onchange)