Nesse vídeo iremos aprender a criar um chatGPT personalizado usando Angular, o mesmo código servirá no Ionic, iremos aprender também a criar um contexto de memória de conversa para o GPT e iremos explorar algumas das novidades do novo GPT-4!
Nesse vídeo apresento duas maneiras de criar um accordion, uma utilizando apenas HTML5 e outra usando código em React onde você aprenderá noções básicas de React e de JavaScript.
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
Neste vídeo, abordamos a utilização do input datetime do HTML em projetos Angular, mostrando como configurar e manipular este componente para visualizar e editar datas de maneira eficaz, especialmente em conjunto com dados vindos de API. Vamos criar um exemplo de utilização, resolver problemas clássicos de formatação e exibição do input datetime, e ainda garantir que dados sejam manipulados corretamente no front-end. Dentre os tópicos explorados estão a configuração do ambiente Angular, manipulação de dados com TypeScript, uso de diretivas como ngModel, importação de módulos necessários, e a abordagem correta para lidar com timezones e formatação de datas para uma melhor integração com API
### Índice de Capítulos
- 00:00:00 - Problemas na utilização do HTML input datetime no angular
- 00:01:56 - Verificando a versão do Angular
- 00:02:37 - Criando uma nova Aplicação Angular (ng new)
- 00:03:54 - Utilizando o Visual Studio Code, configurando o ambiente de desenvolvimento e extensões importantes para Angular
- 00:06:08 - Compilação do projeto e execução do servidor local Angular
- 00:07:50 - Criando Array de dados simulando retorno de API com datas no formato ISO
- 00:09:19 - Trabalhando com código tipado usando Type e Interface
- 00:10:35 - Codificando a interface/UI HTML com table (for of track)
- 00:12:15 - Exibindo json formatado na página (PipeJson)
- 00:12:58 - Implementando o input datetime-local com ngModel (FormsModule), demonstrando erro na exibição da data
- 00:14:32 - Utilizando binding do tipo One-Way e implmentando o evento ngModelChange
- 00:17:57 - Alternativa para ligar com problemas de timezone no Angular
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 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
Descubra como integrar facilmente o serviço de e-mail Resend com o ASP.NET usando Razor Views. O mesmo exemplo pode ser feito em Blazor com poucas adaptações. Domine o envio de emails em suas aplicações de maneira prática e eficiente.
### Índice de Capítulos:
- 00:00 Explicação sobre o Resend e configuração de domínios
- 03:10 Criação e configuração de API Keys no Resend
- 03:37 Exploração do GitHub do Resend e de seu criador
- 04:42 Configuração de envio de emails via API
- 11:15 Estrutura inicial em Razor e conceitos de layout
- 14:22 Criação de formulário de envio de email no Razor
- 19:29 Code Behind e tratamento de métodos no Razor
- 23:42 Debugging da aplicação
- 25:43 Tratamento de erro e explicando o comportamento da página
- 30:20 Codificação do envio de e-mail usando Resend com código no Code Behind (MailMessage)
- 30:25 Informações sobre os SDKs do Resend e SMTP
- 38:52 Melhorias no código e no tratamento de configuração de emails (Configutation)
- 44:55 Criação de EmailService e refatorações de código (Dependecy Inject)
- 53:44 Concluindo o serviço de envio de email com Resend
Descubra como usar a API GPT-4 Vision em uma aplicação Ionic neste tutorial prático. Passaremos pelo processo de configuração, desenvolvimento e testes tando em ambiente Web como em um Dispositivo Móvel (AVD) de um aplicativo que interage com a poderosa API de análise de imagens do OpenAI, explorando as funcionalidades através de perguntas e respostas sobre as imagens.
### Índice de capítulos:
00:00:00 - Introdução ao GPT-4 Vision e configuração do projeto Ionic
00:00:49 - Criação do projeto (aplicação) Ionic (e verificando a versão)
00:03:06 - Exploração do mecanismo de módulos Standalone do Angular
00:04:44 - Execução da aplicação com Ionic serve
00:05:52 - Estrutura de diretórios do projeto Ionic
00:07:12 - Estilização inicial da aplicação (ion-input, ion-buttons, img)
00:11:42 - Ajustes finais de estilo com SCSS
00:14:21 - Criação de variáveis para bind com TypeScript
00:15:54 - Inclusão da plataforma Android, Instalação e configuração da câmera do Capacitor (npx cap sync)
00:20:25 - Preparação para consumir a API do GPT-4 Vision
00:21:01 - Implementação do método para chamar a API de Vision
00:22:14 - Geração e uso de uma chave da API OpenAI (usando environment)
00:24:29 - Execução da chamada API dentro do código
00:27:10 - Teste de requisição e análise dos erros de CORS
00:27:58 - Ajuste do método de chamada API com o Capacitor HTTP
00:30:53 - Adição de um loading controller
00:32:26 - Testes finais no navegador da aplicação
00:34:09 - Execução e teste da aplicação em um emulador AVD Android
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 rápido e simples iremos aprender como criar um menu de compartilhamento (share) em uma aplicação Angular e também fazer um comparativo com o método navigator.share do HTML
Nesse vídeo rápido eu aproveito para fazer uma comparação simples entre os serviços mais conhecidos de IA Bing Chat, Google Bard e ChatGPT fazendo upload da imagem de uma tela de cadastro simples para o Bing Chat e descrevendo como quero essa tela em HTML/CSS.
Nesse vídeo, iremos criar uma aplicação MVC básica (genérica) para acesso a um banco de dados usando ef com migrations, aprenderemos um pouco sobre configuration (settings) e strings de conexão, acessaremos o contexto do ef através de injeção de depedencia, criaremos mapeamento de rotas com controllers e views usando o aspnet-codegenerator para CRUD (listagem, inserção, atualização e exclusão) de registros.
Nessa vídeo aula rápida, iremos criar de maneira básica, uma aplicação MAUI Razor que consome uma WEB API REST do JsonPlaceholder e iremos executando no Windows e num dispositivo Android.
Nessa dica básica iremos que criar, do zero, usando o template web, uma aplicação Mvc, entender a configuração de rotas e criar tasks no VSCode para compilação automática de styles escritos em SASS.
Nesse vídeo nós iremos aprender, de maneira rápida e prática, a utilização da câmera e sabemos como obter as coordenadas e geolocalização do dispositivo.
Aqui nós iremos retornar às origens do Angular aprendendo e brincando um pouco com o saudoso AngularJs, ainda bastante utilizado em aplicações legadas, iremos criar uma listagem dinâmica de objetos.
Nessa dica você aprenderá instalar, configurar e utilizar o Sentry para visualizar os erros tratados e não tratados ocorridos em produção durante o uso de uma aplicação Ionic/Capacitor. Aprenderá também configurar uma caixa de diálogo para receber informações do que o usuário estava tentando fazer quando tais erros ocorrem.
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)
