Busca

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, trabalhar com Markdown exibindo textos formatados e iremos explorar algumas das novidades do novo GPT-4!

Neste vídeo, você aprenderá a implementar o Server Side Rendering (SSR) em aplicações Angular, criando uma aplicação mista que utiliza tanto o lado do cliente quanto do servidor. Veremos como essa técnica melhora a performance e o SEO, além de explorar como criar aplicativos SSR no Angular e adicionar capacidade de Web API. ## Índice de Capítulos - 00:00:00 - O que é Angular SSR (Performance e SEO)? - 00:03:37 - Criando uma Aplicação SSR - 00:06:32 - Preparando o Ambiente de Desenvolvimento (VSCode, Perfils, Extensões) - 00:08:05 - Compilando e executando o projeto Angular - 00:09:16 - Definindo a interface (UI) da Aplicação (HTML, SCSS) - 00:12:37 - Codificando método (evento click) para execução no lado do Cliente (Client Side) - 00:14:57 - Codificando Endpoints para Web API que receberá requests no Servidor (Server Side SSR) - 00:17:19 - Codificando método (evento click) para execução no lado do Servidor (Server Side SSR) - 00:20:02 - Compilando e Executando a Aplicação Angular em Modo SSR

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

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!

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 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 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.

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.

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.