Neste tutorial, vamos nos aprofundar na criação de componentes no Blazor, uma poderosa ferramenta para desenvolvimento web com .NET. Este vídeo é ideal tanto para iniciantes que desejam entender a reatividade quanto para aqueles que estão um passo à frente e querem compreender a criação de componentes mais interativos.
Aprenderemos a usar o Visual Studio Code para criar um projeto Blazor, utilizar perfis e extensões, e implementar um contador interativo que incorpora conceitos de gerenciamento de estado.
Vamos também mostrar como configurar uma barra de progresso interativa e transformar todo o contador em um componente reutilizável. Além disso, abordaremos a organização do projeto e a estrutura dos arquivos relevantes para a aplicação Blazor.
### Índice de Capítulos
- 00:00:00 Criando um Novo Projeto Blazor (dotnet new)
- 00:02:38 Organizando Perfis do VS Code
- 00:03:25 Estrutura de Pastas do Projeto Blazor
- 00:06:10 Detalhes sobre o Arquivo program.cs
- 00:07:33 Compilando e Executando a Aplicação (dotnet build e watch)
- 00:10:04 Codificando a interface de usuário (UI) do arquivo razor
- 00:12:09 Implementando Interatividade com um Contador
- 00:12:34 Codificando Métodos, Variáveis e Eventos
- 00:17:16 Definindo o Render Mode InteractiveServer (rendermode)
- 00:19:18 Criando Lógica de Fluxo Condicional
- 00:21:15 Implementando uma Barra de Progresso interativa (Bootstrap)
- 00:24:55 Criando um Componente Reutilizável no Blazor
- 00:27:50 Integração e Parametrização de Componente Blazor
Compartilhamos um tutorial detalhado sobre como criar animações em SVG usando .NET Blazor e C#. Você aprenderá a aplicar técnicas de animação para desenvolver barras de progresso dinâmicas e interativas em aplicativos Web, tendo como destaque a possibilidade de usar SVG em vez do tradicional canvas, oferecendo um resultado visualmente atraente e performático. Ao longo do vídeo, aprenderemos passo a passo a configurar um novo projeto Blazor, explorar a estrutura de arquivos do projeto, e adicionar animações em SVG ao HTML gerado.
### Índice de Capítulos
00:00 - Organização de projetos e criação da aplicação Blazor (dotnet new blazor)
03:30 - Configuração do ambiente Blazor e dicas de extensões para Visual Studio Code
04:32 - Estrutura inicial do projeto Blazor (template padrão Blazor e suas páginas)
05:17 - Compilação Inicial e .NET CLI (dotnet build)
05:49 - Comando dotnet watch para atualizações dinâmicas no navegador
10:04 - Declaração e Utilização de Variáveis
11:11 - Criação de estilos personalizados (CSS) do Blazor (Separação de layout)
14:34 - Utilização do evento onClick para manipular o valor de uma variável com fluxo condicional
15:11 - Render Modes no Blazor
21:12 - Implementação da barra de progresso com Bootstrap (dinamicamente)
25:29 - Animando SVG com substituição de valores fixos pelo valor dinâmico de variáveis
Nesta aula, aprenderemos desde a criação de um simples "Hello World" até a utilização de modos de renderização em Blazor. Vamos abordar a interatividade, identificando como os diferentes render modes (InteractiveServer, InteractiveWebAssembly e InteractiveAuto) afetam sua aplicação. Entenda as nuances de cada modo de renderização. Durante o vídeo, também discutiremos como utilizar o .NET CLI para iniciar seus projetos e manter seu código organizado, além de práticas recomendáveis para desenvolvimento web.
**Índice de Capítulos:**
00:00:00 - Criando um Projeto Blazor
00:03:36 - Estrutura de Arquivos do Projeto Blazor (HeadOutlet, Routes, appSettings, etc.)
00:09:35 - Compilando e executando Projeto Blazor (dotnet cli)
00:11:40 - Criando o Comportamento com Condicionais
00:15:36 - Iniciando com métodos, variáveis e eventos do Blazor
00:19:40 - Criando um Projeto Blazor no Visual Studio (diferentes render modes)
00:22:47 - Configurando componentes e rotas para diferentes render modes
00:25:08 - Trabalhando em Blazor sem Rende Modes (Static Server e form get/post)
00:25:52 - Introdução aos Blazor Render Modes (Static Server, InteractiveServer, InteractiveWebAssembly, InteractiveAuto)
00:32:10 - Trabalhando com Render Mode InteractiveServer (SSR)
00:34:37 - Trabalhando com Render Mode InteractiveWebAssembly (CSR)
00:38:27 - Trabalhando com Render Mode InteractiveAuto (SSR + CSR)
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)
Aprenda a consumir a API do MixCloud com .NET MAUI e Blazor, criando uma aplicação C# e integrando dados externos
Neste vídeo tutorial, vamos explorar como construir uma aplicação multi-plataforma utilizando .NET MAUI Blazor com C#, consumindo dados da API do MixCloud. Você aprenderá desde conceitos básicos sobre .NET MAUI e Blazor até a criação de um cliente HTTP para consumir API’s de forma eficiente.
O conteúdo abrange a instalação de workloads necessários, configuração de projetos MAUI Blazor, manipulação de formulários e componentes via Blazor, além de um guia passo a passo sobre como integrar e consumir o conteúdo através de chamadas HTTP. Detalhamos também a estruturação dos modelos C# para deserialização dos dados recebidos da API do MixCloud.
Com um exemplo prático e didático, este vídeo é voltado para desenvolvedores iniciantes em .NET MAUI ou Blazor que desejam consolidar conceitos de integração de API em suas aplicações.
### Índice de Capítulos
00:00 - Introdução ao vídeo e objetivo
00:45 - Link dos recursos na descrição
01:18 - Explicação sobre .NET MAUI e Blazor
02:57 - Introdução à API do MixCloud
05:47 - Discussão sobre parâmetros da API
08:00 - Configuração do Base URL e parâmetros da API
12:41 - Criando projeto com .NET New
15:22 - Exploração de workloads no .NET
18:23 - Organização de soluções e projetos no .NET
24:30 - Compilação e teste inicial do projeto
27:36 - Configurando extensões recomendadas
30:06 - Trabalhando com páginas e layout no Blazor
32:15 - Construção de um formulário no Blazor
37:35 - Ajuste de layout e responsividade
47:14 - Uso do "Paste JSON as Code" para modelos
49:42 - Instalando componente (NewtonSoft.Json)
51:49 - Adicionando namespaces organizados
54:49 - Ligação de variáveis com elementos no Blazor
56:30 - Utilização do @bind e métodos de busca
1:02:09 - Exibição de resultados no layout
1:04:45 - Simplificação do modelo JSON
1:06:40 - Implementação do método de busca (Search)
1:08:58 - Introdução ao uso de await e chamadas assíncronas
1:14:15 - Testes iniciais com buscas no MixCloud
1:21:22 - Correção de erros e injeção de dependência com HttpClient
1:23:15 - Resolução de nullable warnings no C#
1:27:15 - Tratamento de erros para requisições na API
Aprenda a usar Blazor e a API Clipdrop para remover fundos de imagem de forma eficaz
Neste tutorial, mostraremos como criar uma aplicação em Blazor utilizando C# e a API do Clipdrop (que uso o Stable Diffusion) para remover automaticamente o fundo de imagens. Ao longo do vídeo, você aprenderá a configurar seu ambiente de desenvolvimento, manusear a API do Clipdrop e implementar funcionalidades que permitem o upload e processamento de imagens diretamente na aplicação.
Você também verá como manipular requisições HTTP e trabalhar com injeção de dependência no .NET. Esta aplicação oferece um ponto de partida para desenvolvedores interessados em incorporar funcionalidades de manipulação de imagem usando inteligência artificial em seus projetos.
**Índice de Capítulos:**
- 00:00:00 Apresentação da Clipdrop e sua API
- 00:02:38 Acesso à API do Clipdrop (API Key)
- 00:04:30 Criando o projeto .net Blazor
- 00:06:15 Estrutura inicial do projeto .net Blazor
- 00:06:30 Uso de Extensões e Perfis com VSCode com .net Blazor
- 00:13:10 Layout da página usando Razor com .net Blazor
- 00:16:00 Codificação da página usando C# com .net Blazor
- 00:25:28 Implementando upload de imagens no .net Blazor
- 00:31:40 Configurando rendermode InteractiveServer no .net Blazor
- 00:34:15 Criando POST MultiPartFormData para a API do Clipdrop
- 00:38:17 Usando Injeção de Dependência (DI) no .net Blazor (HttpClient)
- 00:41:33 Preenchendo form MultiPartFormData por código no .net Blazor (HttpClient)
Aprenda a construir aplicações interativas com Blazor e .NET 8, integrando com a poderosa API GPT-4 Vision da OpenAI. Este vídeo te guiará pelo processo de análise de imagens, desenvolvimento e geração de conteúdo de forma prática e direta. Iremos criar uma pequena aplicação Blazor .net 8 que permitirá o upload de imagens para análise, resposta à questões, e criação de conteúdo.
Índice de Capítulos:
- 00:00:00 - Introdução: Objetivos e Ferramentas Utilizadas
- 00:00:49 - Começando a Aplicação Blazor: Estrutura e Layout
- 00:03:14 - Criando e Configurando API Key na OpenAI
- 00:04:00 - Configurando Ambiente de Desenvolvimento dotnet 8 Blazor (dotnet list / new)
- 00:07:41 - Executando e Testando o Projeto Blazor Inicial (dotnet build / watch)
- 00:12:36 - Preparando o Layout para Perguntas e Respostas (HTML e SCSS)
- 00:19:27 - Usando SASS/SCSS com Blazor (com o Live SASS Compiler)
- 00:21:14 - Estilizando a Aplicação com SASS e CSS
- 00:22:22 - Extensões VSCode para desenvolvimento com Blazor
- 00:45:45 - Criando namespace e model de payload para serialização com o HttpClient
- 00:47:11 - Codificando Blazor usando Binding com variáveis, listas, e eventos
- 00:52:09 - Atribuindo RenderMode InteractiveServer à página
- 00:54:42 - Implementando upload de arquivos de imagem em Blazor
- 00:56:58 - Serializando arquivo de imagem para base64
- 01:06:00 - Implementando o envio de informações com a tecla Enter e tratamento de erros
- 01:11:54 - Montando Payload, Models, Trabalhando com serialização JSON, e fazendo o POST a API OpenAI com HttpClient
- 01:29:22 - Criando uma API Key OpenAI GPT 4
Neste tutorial, vamos dar continuidade ao projeto de lista de tarefas usando Blazor Server, perfeito para quem está iniciando na área de desenvolvimento web com tecnologias .NET. Abordaremos conceitos como Dependency Injection, Entity Framework, Migrations, Fluent API, páginas Razor, criação de componentes, e interação entre front e back-end de forma simples e prática. Curta o vídeo e inscreva-se no canal para não perder os próximos conteúdos!
00:00:00 - Introdução
00:04:20 - Configurando o Ambiente de Desenvolvimento
00:11:39 - Criação da Aplicação Blazor Server
00:21:11 - Extensões do VSCode para programar .Dotnet
00:22:58 - Explicação do Modelo de Dados (Models)
00:34:55 - Explicando namespaces
00:38:00 - Relacionamentos entre tabelas com Entity Framework
00:45:39 - Criando um Contexto com Entity Framework
00:55:41 - Validações usando a Fluent API com EF
00:58:34 - Seed de Dados Iniciais com Entity Framework
01:01:46 - Configurando Strings de Conexão para EF
01:04:39 - Dependency Inject do Contexto Entity Framework
01:07:11 - Migrations do Entity Framework
01:14:48 - Criando um Service para CRUD usando DI do Contexto EF
01:17:44 - Consulta (Query) usando Linq e o Contexto do EF
01:38:24 - Rotas e Páginas Razor no Blazor
01:41:10 - Desenvolvendo a Interface de Usuário (Razor e Bootstrap)
01:56:57 - Criando Componentes Reutilizáveis no Blazor
01:59:18 - Propriedades, Manipulação de Eventos e Data Binding no Blazor
02:11:14 - Injeção de Dependência (Dependency Injection) em Páginas Blazor
02:17:24 - Manipulação de Eventos e Data Binding no Blazor
02:19:24 - Operações de CRUD com Service e EF na Lista de Tarefas
02:28:25 - Atribuindo RenderMode InteractiveServer ao Componente
02:29:32 - Estilos Condicionalmente na página
02:39:00 - Dados iniciais da página Razor (OnInitializedAsync)
02:43:55 - Propriedades NotMapped (não mapeadas) no Model EF
02:47:39 - Ajustando a Ordenação com o Entity Framework
Nesse vídeo, iremos aprender como converter um endereço em coordenadas de geolocalização (geolocation) sem usar componentes extras, usando apenas o HttpClient acessando o Google Places API no Blazor Server. O tutorial fala um pouco também sobre Injeção de Dependência, interface, tipagem de dados, dentre outros assuntos interessantes.
Nesse vídeo simples e explicativo, iremos criar uma aplicação usando o Blazor Server e o componente OpenAI para geração e exibição de imagens de acordo com um prompt fornecido pelo usuário.
Playlist:
https://www.youtube.com/playlist?list=PLZX7p4VzbEf-ro3otiL7WPdCYjMZyqNEX
Neste tutorial, vamos dar continuidade ao projeto de lista de tarefas usando Blazor Server, perfeito para quem está iniciando na área de desenvolvimento web com tecnologias .NET. Abordaremos conceitos como Dependency Injection, Entity Framework, Migrations, Fluent API, páginas Razor, criação de componentes, e interação entre front e back-end de forma simples e prática. Curta o vídeo e inscreva-se no canal para não perder os próximos conteúdos!
00:00 - Manipulação de Eventos e Data Binding no Blazor
02:00 - Operações de CRUD com Service e EF na Lista de Tarefas
10:13 - Atribuindo RenderMode InteractiveServer ao Componente
11:48 - Estilos Condicionalmente na página
21:05 - Dados iniciais da página Razor (OnInitializedAsync)
26:05 - Propriedades NotMapped (não mapeadas) no Model EF
29:51 - Ajustando a Ordenação com o Entity Framework
Playlist:
https://www.youtube.com/playlist?list=PLZX7p4VzbEf-ro3otiL7WPdCYjMZyqNEX
Neste tutorial, vamos dar continuidade ao projeto de lista de tarefas usando Blazor Server, perfeito para quem está iniciando na área de desenvolvimento web com tecnologias .NET. Abordaremos conceitos como Dependency Injection, Entity Framework, Migrations, Fluent API, páginas Razor, criação de componentes, e interação entre front e back-end de forma simples e prática. Curta o vídeo e inscreva-se no canal para não perder os próximos conteúdos!
00:00 - Rotas e Páginas Razor no Blazor
03:46 - Desenvolvendo a Interface de Usuário (Razor e Bootstrap)
19:33 - Criando Componentes Reutilizáveis no Blazor
21:54 - Propriedades, Manipulação de Eventos e Data Binding no Blazor
34:40 - Injeção de Dependência (Dependency Injection) em Páginas Blazor (Razor)
Playlist:
https://www.youtube.com/playlist?list=PLZX7p4VzbEf-ro3otiL7WPdCYjMZyqNEX
Neste tutorial, vamos dar continuidade ao projeto de lista de tarefas usando Blazor Server, perfeito para quem está iniciando na área de desenvolvimento web com tecnologias .NET. Abordaremos conceitos como Dependency Injection, Entity Framework, Migrations, Fluent API, páginas Razor, criação de componentes, e interação entre front e back-end de forma simples e prática. Curta o vídeo e inscreva-se no canal para não perder os próximos conteúdos!
00:00 - Criando um Contexto com Entity Framework
10:02 - Validações usando a Fluent API com EF
12:55 - Seed de Dados Iniciais com Entity Framework
16:07 - Configurando Strings de Conexão para EF
19:00 - Dependency Inject do Contexto Entity Framework
22:16 - Migrations do Entity Framework
30:32 - Criando um Service para CRUD usando DI do Contexto EF
49:39 - Consulta (Query) usando Linq e o Contexto do EF
Neste tutorial, vamos iniciar o projeto de lista de tarefas usando Blazor Server, perfeito para quem está iniciando na área de desenvolvimento web com tecnologias .NET. Abordaremos conceitos como Dependency Injection, Entity Framework, Migrations, Fluent API, páginas Razor, criação de componentes reutilizáveis, e interação entre front e back-end de forma simples e prática. Curta o vídeo e inscreva-se no canal para não perder os próximos conteúdos!
00:00 Introdução
04:20 Configurando o Ambiente de Desenvolvimento
11:39 Criação da Aplicação Blazor Server
21:11 Extensões do VSCode para programar .Dotnet
22:58 Explicação do Modelo de Dados (Models)
34:55 Explicando namespaces
38:00 Relacionamentos entre tabelas com Entity Framework
