Ionic 4, Angular, Firebase, Firestore e Login com Facebook

Name: Ionic 4, Angular, Firebase, Firestore e Login com Facebook
Rating: 4.7 (492 reviews)

Aprenda Ionic 4 integrado ao Angular, armazene dados com o Firestore e adicione Login com Facebook e Email e Password!

Created byPlínio Naves

Last updated 9/2019

Portuguese

Portuguese [Auto],

What you'll learn

Criar aplicações com Ionic 4
Integrar o Ionic com o Angular
Utilizar Ionic CLI
Integrar aplicações Ionic com o Firebase
Armazenar dados no banco de dados Firestore
Receber dados Realtime por meio do Firestore
Autenticação com Email e Password no Firebase
Autenticação com Login do Facebook no Firebase

Course content

9 sections • 110 lectures • 7h 20m total length

Introdução ao curso4:15
Visualizando o projeto concluido6:12
Participe dos canais de interação0:08

Sobre a seção0:35
Gerando página de Login com Ionic CLI3:55
Criando SharedModule para recursos compartilhados4:21
Organizando aplicação com CoreModule4:36
Criando layout da página de Login8:14
Validando formulário com Reactive Forms10:15
Mensagens de erro de validação com ion-note6:45
Formatador de templates Angular3:10
Preparando formulário para SignUp11:00
Criando novo projeto no Firebase Console3:29
Complemento: nova interface do Firebase Console0:23
Instalando Firebase e AngularFire via NPM3:18
Integrando Ionic e Firebase4:14
Habilitando autenticação com Email e Password no Firebase2:58
Habilitando autenticação com Facebook no Firebase6:09
Criando AuthService com Ionic CLI1:30
AuthService: implementando login com Email e Password3:50
AuthService: implementando signup com Email e Password3:57
AuthService: implementando login com Facebook3:45
AuthOptions, AuthProvider e User4:49
AuthService: orquestrando métodos de login3:53
AuthService: implementando logout1:03
AuthService: armazenando o AuthState do Firebase2:33
AuthService: Observable para determinar se usuário está autenticado2:41
Autenticando usuários no Ionic com Firebase7:10
OverlayService: Toast, Alert e Loading9:10
Exibindo Loading e Mensagem de erro ao autenticar4:43
AuthGuard para proteger rotas da aplicação14:22
AuthModule e AuthRoutingModule5:35
Conclusão da seção0:37

Sobre a seção0:42
Gerando TasksListPage com Ionic CLI1:03
TasksModule e TasksRoutingModule3:08
Protegendo rotas com AuthGuard4:44
Redirecionando usuário apos login bem sucedido7:14
TasksListPage: Estrutura inicial2:57
TaskItem para exibir uma única Tarefa1:39
Criando interface TaskModel0:55
TaskItem: Input e Output Properties3:23
TaskItem: template com ion-item-sliding9:13
ComponentsModule: declarando e exportando Components3:28
Mockando lista de tarefas para pré-visualizar interface5:21
Habilitando o Firestore no projeto do Firebase6:28
Integrando Firestore no Ionic1:22
Firestore: Classe genérica para CRUD no banco de dados3:15
Firestore Collections: listando registros5:52
Firestore: criando novos registros8:55
Modificando tipagem do método setItem0:36
Firestore: alterando registros existentes0:57
Firestore: deletando registros existentes1:18
Firestore: buscando registro por id1:26
Gerando TasksService com Ionic CLI0:47
TasksService: herdando Classe Abstrata Firestore2:07
TasksService: collection de Tarefas do usuário logado5:47
Listando Tarefas do usuário na TasksListPage5:14
Criando novas tarefas no Console do Firestore4:50
Gerando TaskSavePage com Ionic CLI1:46
Configurando rota para criar Tarefas2:25
Navegando para TaskSavePage via FabButton2:35
TaskSavePage: implementando interface1:43
TaskSavePage: adicionando Back Button2:29
TaskSavePage: validando formulário com ReactiveForms4:51
TaskSavePage: cadastrando novas Tarefas no Firestore3:49
Navigation Back após cadastrar nova Tarefa1:45
Exibindo Loading ao enviar requisição ao Firestore2:48
Toast para mensagem de erro do servidor1:16
Nova rota para editar Tarefas existentes2:18
Navegando para a rota de edição ao selecionar uma Tarefa4:20
Extraindo parâmetro da rota e exibindo Tarefa para edição9:51
Salvando alterações de Tarefas existentes no Firestore3:18
Deletando Tarefas no Firestore6:37
Concluindo Tarefas diretamente na lista5:01
Exibindo loading ao carregar lista de Tarefas2:43
Conclusão da seção0:59

Sobre a seção0:26
Ordenando lista de Tarefas e criando índices no Firestore8:21
Criando menus no Ionic8:42
Fechando Menu ao selecionar uma opção1:28
Usando IonMenuToggle para acionar menu2:18
Criando Component reusável para IonMenuToggle6:42
Exibindo nome do usuário logado no Menu3:01
Criando Component para logout do Firebase7:42
Habilitando e desabilitando Menu baseado no authState6:57
Iniciando com o Menu desabilitado1:59
Usando Grid do Ionic para dimensão e posicionamento6:58
SplitPane: layout multi-view baseado em breakpoints6:33
Conclusão da seção0:47

Requirements

Conhecimentos básicos de HTML, CSS e JavaScript
Conhecimento básico sobre Angular

Description

O Ionic 4 chegou recentemente e já é um grande sucesso, é hoje um dos frameworks mais (se não o mais) usados para o desenvolvimento de Apps Híbridos para Android e iOS, Web, PWA's e até mesmo Desktop.

Trouxe como grande novidade nesta última versão a aposta nas tecnologias da Web ao se basear agora em Web Components, permitindo assim que desenvolvedores o utilizem para criar Apps não mais somente com o Angular, mas também usando Vue, React, qualquer outro framework Front-end, ou mesmo nenhum usando JavaScript puro!

Com grandes melhorias principalmente em relação à performance por conta de trazer o recurso de Lazy Loading dos Components por padrão, a V4 promete manter e ainda elevar o ótimo legado que as versões anteriores construíram.

Neste curso você vai aprender a desenvolver uma aplicação focada na Web usando Ionic 4 e sua integração oficial com o Angular, Firebase com Firestore, Login com Facebook e Email e Password, Menus, Grid, SplitPane e muito mais!

Ao final do curso você terá conhecimento suficiente para construir seus próprios Apps com o Ionic e ainda usar boas práticas de projetos com o Angular.

Who this course is for:

Desenvolvedores JavaScript que desejam aprender a trabalhar com o Ionic 4
Desenvolvedores Angular que gostariam de integrar o framework com o Ionic 4
Desenvolvedores que precisam implementar Autenticação com Facebook em seus apps
Desenvolvedores que precisam implementar Autenticação com Email e Password em seus apps

Ionic 4, Angular, Firebase, Firestore e Login com Facebook

What you'll learn

Explore related topics

Course content

Introdução3 lectures • 11min

Setup do ambiente5 lectures • 12min

Iniciando a construção da aplicação5 lectures • 20min

Autenticação com Firebase30 lectures • 2hr 23min

Dashboard: Firestore CRUD, Rotas e Navegação no Ionic44 lectures • 2hr 33min

Ordenação e Índices no Firestore, Menu, Grid e SplitPane13 lectures • 1hr 2min

Build de Produção e Deploy no Firebase Hosting8 lectures • 27min

Conclusão do curso1 lecture • 5min

Conteúdo extra: Firestore Offline1 lecture • 6min

Requirements

Description

Who this course is for: