Library

Course: Angular 6 e 7, Apollo, GraphQL e Graphcool - Guia completo

Angular 6 e 7, Apollo, GraphQL e Graphcool - Guia completo

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

Construa uma aplicação web do Mundo Real usando o novo Angular! Passo a passo do Zero ao Deploy na Nuvem!


Obs: este curso ainda não está completo, novas aulas estão sendo publicadas até a finalização.

Neste curso você irá aprender a usar o Angular juntamente com o Angular Material, Apollo, GraphQL e Graphcool para criar um Chat Realtime com perfil para os usuários com foto e algumas informações, e conversas privadas ou em grupo.

Iremos usar o Graphcool, que é um Backend as a Service (BaaS) baseado no GraphQL para armazenar nossos registros, modelar dados usando o sistema de tipos do GraphQL, implementar autenticação, configurar um sistema de permissões e fazer upload de arquivos.

Com o Angular você vai aprender a implementar uma tela de login, integrá-lo com o Graphcool por meio do Apollo Client, implementar Rotas e protegê-las com Guardas de rotas, utilizar Lazy Loading, criar uma estrutura modular, usar formulários, diretivas, pipes, serviços, e muito mais!

Tudo isso usando programação reativa com o RxJS, otimização de Queries e Mutations no GraphQL com Apollo Cache, Optimistic UI para melhorar a experiência do usuário, e Realtime Subscriptions no GraphQL para garantir a receber mensagens em tempo real.

Por fim iremos gerar um build de produção da aplicação para fazermos o deploy.

Espero que tire o máximo de proveito de todo esse conteúdo que foi preparado especialmente para você!

Nos vemos no curso!

Basic knowledge
  • Conhecimento básicos de HTML, CSS e JavaScript
  • Conhecimento básico de Angular (2 ou superior)
  • NodeJS instalado (preferência 10+)
  • Editor de código (sugestão: Visual Studio Code)
What you will learn
  • Criar aplicações modernas, complexas e escaláveis com Angular, Apollo, GraphQL e Graphcool
  • Entender o funcionamento de uma aplicação Angular e como integrá-la com um Back-end GraphQL
  • Usar todo o conhecimento adquirido para criar aplicações Realtime
  • Consumir uma API GraphQL utilizando o Apollo Client para Angular
  • Interceptar requisições HTTP e WebSocket do Apollo Client para anexar token de autenticação
  • Usar Route Guard para proteger seções da aplicação
  • Criar formulários com Reactive Forms e Template Driven Forms
  • Modularizar a aplicação Angular e carregar módulos sob demanda com Lazy Loading
  • Implementar sistema de autenticação sofisticado (inclui Login Automático)
  • Usar Programação Reativa com RxJS 6
  • Fazer validação de formulários
  • Comunicação entre Components
  • Criar Single Page Applications com um dos frameworks mais completos da atualidade
Curriculum
Number of Lectures: 254
Total Duration: 31:43:43
Introdução
  • Apresentação  
  • Como o curso está estruturado  
  • Ferramentas  
  • Código fonte do projeto  
Iniciando a construção do Chat
  • Sobre a seção  
  • Instalando o Angular CLI  
  • Criando novo projeto  
  • Adicionando Angular Material com ng add  
  • Usando components do Angular Material  
  • Conclusão  
Graphcool: Backend as a Service baseado no GraphQL
  • Graphcool - Sobre a seção  
  • Introdução do GraphQL  
  • Introdução ao Graphcool  
  • Conhecendo o Graphcool e criando uma conta  
  • Instalando o Graphcool CLI  
  • Criando novo projeto no Graphcool  
  • Entendendo o modelo de dados do Chat  
  • Modelando o Chat no Graphcool  
  • Relacionando entidades do Chat no Graphcool  
  • Deploy do projeto Graphcool e visualização no playground  
  • Graphcool - Conclusão  
Integrando Angular com GraphQL via Apollo Client
  • Integrando Angular com GraphQL via Apollo Client - Sobre a seção  
  • Atualizando pacotes com ng update  
  • Ajustando margem do Angular Material  
  • Query na API GraphQL com HttpClient  
  • Mutation na API GraphQL com HttpClient  
  • Conhecendo Apollo Client para Angular  
  • Instalando dependências  
  • Configurando o Apollo Client  
  • AsyncIterable no tsconfig.json  
  • ApolloClient: Testando comunicação por meio de Queries  
  • ApolloClient: Criando novo registro com Mutations  
  • Apollo Client Developer Tools  
  • Manipulando erros com Apollo Link Error  
  • Integrando Angular com GraphQL via Apollo Client - Conclusão  
Modularizando com NgModules
  • Modularizando com NgModules - Sobre a seção  
  • Introdução a modularização no Angular  
  • CoreModule  
  • SharedModule  
  • Novas atualizações com ng update  
  • Modularizando com NgModules - Conclusão  
Autenticação JWT e Permissões com Graphcool
  • Autenticação JWT e Permissões com Graphcool - Sobre a seção  
  • Introdução a autenticação com Graphcool  
  • Usando templates com Graphcool CLI  
  • Implementando signupUser e gerando tokens (parte 1)  
  • Implementando signupUser e gerando tokens (parte 2)  
  • Implementando signupUser e gerando tokens (parte 3)  
  • Deploy e teste no playground  
  • Implementando authenticateUser  
  • Novo deploy e teste no playground  
  • Identificando usuário logado com loggedInUser  
  • Testando loggedInUser com JWT no playground  
  • Definindo permissões para User  
  • Definindo permissões para Chat  
  • Definindo permissões para Message  
  • Definindo permissões para File  
  • Permissoes para relacionamento entre tipos  
  • Permission Query para proteger conta do usuário  
  • Implementando a Permission Query  
  • Testes finais  
  • Autenticação JWT e Permissões com Graphcool - Conclusão  
Autenticação no Angular
  • Autenticação no Angular - Sobre a seção  
  • Introdução a autenticação no Angular  
  • Gerando LoginModule e LoginRoutingModule  
  • Organizando AppComponent e CoreModule  
  • Criando LoginComponent com Angular CLI  
  • LoginComponent: interface com Angular Material  
  • LoginComponent: ajustando elementos na tela com CSS  
  • LoginComponent: usando Reactive Forms  
  • LoginComponent: validações com Reactive Forms  
  • LoginComponent: exibindo mensagens de validação  
  • LoginComponent: SignIn e SignUp no mesmo Component  
  • Criando AuthService com Angular CLI  
  • Método para autenticar usuários na API GraphQL  
  • Método para cadastrar novos usuários na API GraphQL  
  • LoginComponent: autenticando e cadastro usuários  
  • Não se esqueça do unsubscribe  
  • Tratando mensagem de erro com ErrorService  
  • Mensagens de erro para usuário com MatSnackBar  
  • Loading para aguardar resposta do servidor  
  • Configurando rota inicial no AppRoutingModule  
  • Configurando rota do módulo de Login  
  • Observação sobre seletores de componentes roteados  
  • AuthState no AuthService com RxJS ReplaySubject  
  • Mudando AuthState baseado na resposta da API GraphQL  
  • Mudando AuthState em caso de erros  
  • AuthGuard para rotas protegidas: CanActivate  
  • AuthGuard para rotas protegidas: CanActivateChild  
  • AuthGuard para rotas protegidas: CanLoad  
  • AuthGuard: redirecionando para a rota de login  
  • AuthGuard: salvando a url para fazer redirect  
  • StorageKeys para salvar informações no Local Storage  
  • Salvando Token no LocalStorage  
  • AuthService: método para manipular "keep signed"  
  • Toggle para login automático no LoginComponent  
  • Método para validar token do usuário  
  • Interceptando requisições HTTP do Apollo Client e adicionando Token JWT  
  • Auto Login no AuthService e chamada no AppComponent  
  • Tratando erros no Auto Login  
  • AutoLoginGuard com CanActivate para rota de login  
  • Implementando método para logout  
  • Configurações do Graphcool via Injeção de Dependências  
  • Bônus: lembrando dados de login  
  • Autenticação no Angular - Conclusão  
Dashboard Module, Lazy Loading, Content projection, Input e Output Properties
  • Dashboard Module - Sobre a seção  
  • DashboardModule e DashboardRoutingModule com Angular CLI  
  • DashboardHomeComponent para apresentação do módulo  
  • Configurando rota interna para Component Home  
  • Protegendo a rota com AuthGuard no CanActivate  
  • Introdução ao Lazy Loading com Angular  
  • Carregando DashboardModule sob demanda com Lazy Loading  
  • Testando redirect após login automático, e Lazy Loading  
  • Component para Header da aplicação  
  • Manipulando título da aplicação no Header  
  • Component para exibir links para outros módulos  
  • Criando menu e conteúdo com MatSidenav  
  • Adicionando menu no DashboardHeader usando Input Property  
  • Criando conteúdo do menu  
  • Configurando rota filha para DashboardResources  
  • Content Project e Output Property no DashboardResources  
  • Dashboard Module - Conclusão  
Chat Module: estrutura inicial
  • Chat Module: estrutura inicial - Sobre a seção  
  • ChatModule e ChatRoutingModule com Angular CLI  
  • ChatTabComponent para agrupar seções do Chat  
  • Configurando rota interna para o ChatTabComponent  
  • Carregando ChatModule com Lazy Loading  
  • ChatUsersComponent para exibir lista de usuários do Chat  
  • ChatListComponent para exibir lista de chats  
  • Configurando rotas e router outlet para lista de usuários e chats  
  • UserService com Angular CLI  
  • Criando UserModel  
  • Método para buscar usuários cadastrados com Query allUsers  
  • Listando usuários no ChatUsersComponent  
  • ID do usuário logado no AuthService  
  • Omitindo usuário logado da lista  
  • Aguardando carregamento da lista de usuários  
  • NoRecordComponent para mensagem de lista vazia  
  • Exibindo NoRecordComponent condicionalmente  
  • Chat Module: estrutura inicial - Conclusão  
Chat Module: criando Chats One to One e Mensagens
  • Chat Module: criando Chats One to One e Mensagens - Sobre a seção  
  • ChatWindowComponent para troca de mensagens  
  • Configurando rota para janela de Chat  
  • Exibindo janela de chat ao selecionar um usuário  
  • ChatService com Angular CLI  
  • Criando ChatModel e MessageModel  
  • Query para buscar lista de Chats do usuário autenticado  
  • Método no ChatService para buscar lista de chats  
  • Listando Chats no ChatListComponent  
  • Criando Chats e Mensagens manualmente no Playground  
  • Entendendo o que ChatWindowComponent precisa fazer  
  • Query dupla: Chat por id ou por usuários  
  • ChatService: buscando Chat por id ou por usuários na mesma requisição  
  • Criando Resolve Guard para buscar Chat antes de ativar a rota  
  • Configurando Resolve Guard na rota  
  • Capturando o Chat no ChatWindowComponent  
  • Identificando se o id da rota é do Chat ou do Usuário  
  • UserService: método para buscar usuário por id  
  • Exibindo nome do usuário ou titulo do chat na toolbar  
  • Dica: loading antes de exibir o nome  
  • MessageService com Angular CLI  
  • Query na API para listar mensagens de determinado Chat  
  • Método para listar mensagens de um Chat por id  
  • Listando mensagens do Chat no ChatWindowComponent  
  • Mutation para criar novas mensagens  
  • Método para criar novas mensagens  
  • ChatWindowComponent: interface para enviar novas mensagens  
  • Enviando novas mensagens em Chats existentes  
  • Planejando o próximo passo: enviar mensagens em chats ainda não criados  
  • Mutation para criar novos Chats privados  
  • Método para criar novos Chats privados  
  • Criando novo Chat privado ao enviar nova mensagem  
  • Ordenando Chats pela última mensagem ou data de criação  
  • ChatMessageComponent para cada mensagem com Angular CLI  
  • ChatMessageComponent: configurando Input Properties  
  • ChatMessageComponent: criando o template  
  • Acessando cores das paletas do Angular Material  
  • ChatMessageComponent: estilizando com CSS  
  • Usando ChatMessageComponent no ChatWindowComponent  
  • Ajustando visualização da lista de mensagens com CSS  
  • Loading com MatSpinner e aviso para lista de mensagens vazia  
  • AvatarComponent para exibir foto do usuário com Angular CLI  
  • AvatarComponent: configurando Input Properties  
  • AvatarComponent: criando o template  
  • AvatarComponent: estilizando com CSS  
  • Usando AvatarComponent na lista de mensagens  
  • Usando AvatarComponent na lista de chats e de usuários  
  • FromNowPipe para formatar data da mensagem  
  • FromNowPipe: tratando atrasos e avanços do relógio  
  • Otimizando renderização do ngFor com trackByFunction  
  • Usando BaseComponent para otimizar ngFor com trackByFunction  
  • Link para a rota da lista de usuários  
  • Dica: Otimizando Queries e Mutations com Fragments  
  • Chat Module: criando Chats One to One e Mensagens - Conclusão  
Apollo Client: watchQuery, acesso direto ao cache e Optimistic UI
  • Apollo Client - Sobre a seção  
  • Apollo Devtools e normalização do ID no Apollo Cache In Memory  
  • Usando watchQuery para novas mensagens  
  • Acessando Cache diretamente após uma mutation e reescrevendo Query  
  • Otimizando tempo de exibição na tela com Optimistic UI  
  • Tratando erro ao enviar nova mensagem para chat ainda não existente  
  • "Reload" da Query feita na Resolve Guard usando acesso ao cache  
  • Monitorando Query da lista de chats com watchQuery  
  • Atualizando cache após criar novos chats localmente  
  • Monitorando lista de chats do usuário no ChatTabComponent  
  • Tratando unsubscribe por meio de eventos do Roteador do Angular  
  • Atualizando última mensagem enviada para o Chat  
  • Tornando fromNowPipe impuro  
  • Scroll automático da tela ao criar novas mensagens  
  • Bônus: Apollo Cache Persist e dica sobre recursos Offline com Apollo Client  
  • Apollo Client - Conclusão  
Chat Module: Comunicação Realtime com GraphQL Subscriptions
  • Chat Module: Comunicação Realtime com GraphQL Subscriptions - Sobre a seção  
  • Introdução a Realtime Subscriptions com GraphQL  
  • Instalando pacotes NPM e configurando WebSocketLink  
  • Autenticação com WebSockets  
  • Tratando "reconnect" para enviar token atualizado  
  • Testando Realtime Subscriptions no PlayGround do Graphcool  
  • Subscription para receber novas mensagem em tempo real  
  • SubscribeToMore: exibindo última mensagem dos chats em tempo real (parte 1)  
  • SubscribeToMore: exibindo última mensagem dos chats em tempo real (parte 2)  
  • Apollo SubscribeToMore: atualizando lista de mensagens recebidas em tempo real  
  • Tratanto multiplos "subscribes" do ChatTab e nova chamada no ChatWindow  
  • Testando aplicação com mensagens em tempo real  
  • Subscription para notificar sobre novos Chats do usuário  
  • Atualizando lista de Chats do usuário com Subscription Data  
  • Subscription para notificar sobre novos Usuários  
  • Atualizando lista de Usuários em tempo real com subscriptions  
  • Monitorando lista de usuários fora do ChatUsersComponent  
  • Ajustando monitoramento da lista de Chats  
  • Dica: fetchPolicy e CachePersistor para ajustar uso do apollo cache persist  
  • Bônus: melhorando tratamento de erros quando o token for inválido  
  • Alterando fetchPolicy da lista de mensagens do Chat  
  • Chat Module: Comunicação Realtime com GraphQL Subscriptions - Conclusão  
Chat Module: Criando grupos de conversação
  • Chat Module: Criando grupos de conversação - Sobre a seção  
  • FabButton e MatMenu para adicionar novos grupos  
  • ChatAddGroupComponent para criar novos grupos de conversa  
  • Exibindo ChatAddGroupComponent com MatDialog  
  • Implementando interface do ChatAddGroupComponent  
  • Configurando formulário com ReactiveForms  
  • Trabalhando com FormArray para a lista de membros do grupo  
  • Listando usuarios disponiveis para adicao nos grupos  
  • Adicionando novos membros ao FormArray com FormBuilder  
  • Listando membros adicionados ao FormArray  
  • Removendo da lista de usuarios o membro que ja foi adicionado ao FormArray  
  • Removendo membros ja adicionados ao FormArray  
  • Preparando formulario para ser enviado a API GraphQL  
  • Mutation para criar novos grupos  
  • Metodo no ChatService para criar novos grupos  
  • cesso ao cache e Optimistic UI ao criar novo grupo  
  • Cadastrando novo grupo na API GraphQL  
  • Fechando MatDialog programaticamente e exibindo mensagem com MatSnackBar  
  • Exibindo imagem para grupo sem foto de capa  
  • Testando funcionalidade de conversa em grupo  
  • BaseService e metodo generico para ler e escrever no Apollo Cache parte 1  
  • BaseService e metodo generico para ler e escrever no Apollo Cache parte 2  
  • Chat Module: Criando grupos de conversação - Conclusao  
Reviews (0)