Aplicações realtime com Angular, Firebase e PhaserJS

Aprenda a criar um CRUD completo e um jogo multiplayer com aulas 100% práticas

4.50 (27 reviews)
Udemy
platform
Português
language
Other
category
Aplicações realtime com Angular, Firebase e PhaserJS
155
students
9.5 hours
content
Dec 2018
last update
$19.99
regular price

What you will learn

Criar um CRUD completo com Angular e Firebase

Aprender o que é o Firebase

Aprender programação reativa (RxJS) com o Angular, integrando ao Firebase

Integrar componentes do Angular Material para consumir dados do Firebase (Data table)

Aprender a hospedar uma aplicação Angular no Firebase Hosting

Utilizar o Angular Fire para integrar o Firebase com o Angular

Criar controle de acesso no Angular (autenticação e autorização)

Autenticar usuários no Google com o Firebase (mesmo conceito para Facebook, Twitter...)

Utilizar o Firebase para sincronizar os dados entre usuários em tempo real

Criar um jogo de quiz multiplayer

Aprender a realizar consultas (queries) no Firebase

Aprender sobre o framework PhaserJS

Criar uma animação para o jogo utilizando o PhaserJS

Aprender boas práticas de programação, como utilizar o design pattern Strategy

Criar um aplicativo com aulas 100% práticas

Why take this course?

O curso visa introduzir um conceito cada vez mais requisitado entre aplicações, principalmente as de dispositivos móveis, que são aplicações realtime (de tempo real).

** Para ver a demonstração do que será desenvolvido durante, assista a primeira aula do curso, que está disponível na prévia do mesmo!

Com o recurso de realtime, conseguimos criar cada vez mais uma experiência única ao nosso usuário, e as empresas estão cada vez mais na busca por profissionais com esses requisitos, então por que não ser um dos primeiros a domina esses conceito?

Com o surgimento de frameworks como o Angular e Firebase por exemplo, está cada vez mais simples criarmos tal aplicações, e o curso tem como objetivo lhe ensinar a utilizar ambas tecnologias, para que você seja capaz de criar os mais variados tipos de aplicações realtime com os conceitos que serão ensinados.

Você criará no curso um jogo de quiz multiplayer completo, assim como seu painel de administração, que introduzirá conceitos essenciais como a criação de um CRUD completo com o Angular e Firebase.

As aulas são 100% práticas, portanto se você é apaixonado por TI, será diversão garantida ao mesmo tempo que você aprende!

E de quebra ainda apresento o framework PhaserJS, que é um framework popular utilizado na criação de jogos web, o utilizando para criar uma animação para o jogo a ser desenvolvido durante o curso.

Tenho certeza de que esse curso será de grande valor para você e sua carreira profissional, portanto espero te ver em breve no curso!

Content

Introdução

Demonstração do que será desenvolvido no curso
Obtendo o código fonte do projeto

Angular CLI

Instalando o Angular CLI
Criando o projeto com o Angular CLI

Firebase e Angular

Entendendo o Firebase
Entendendo a arquitetura do projeto
Criando o projeto no Firebase
Configurando o Firebase no projeto Angular
Configurando o acesso aos dados do Firebase
Instalando o Angular Fire 2 no projeto
Instalando a biblioteca do Firebase no projeto
Configurando o módulo do Firebase no projeto

Assets

Adicionando os assets no projeto

Angular Material

Instalando e configurando o Angular Material no projeto

Tela de login

Criando o componente de login
Criando as rotas de logiin
Importando os módulos do Angular Material no projeto
Implementando o CSS da tela de login
Implementando o HTML da tela de login
Implementando o componente de login
Criando o módulo de pré jogo
Demonstrando a tela de login

Tela de administração

Criando o módulo de administração
Criando o model de perguntas
Criando o serviço de perguntas
Instalando o rxjs-compat
Implementando a ação de obter perguntas
Implementando o CSS da tela de administração
Implementando o HTML da tela de administração
Implementando ações de logout, autorização, e listagem de perguntas
Implementando o cadastro de perguntas
Criando o componente modal de cadastro de perguntas
Registrando o componente modal de cadastro de perguntas
Implementando o HTML da modal de cadastro de perguntas
Implementando o componente da modal de cadastro de perguntas
Implementando a modal de cadastro de perguntas no componente de administração
Implementando a ação de atualização de uma pergunta
Implementando a atualização de perguntas no componente de administração
Implementando no serviço de perguntas a ação de remoção de uma pergunta
Criando a modal de remoção de uma pergunta
Implementado o código da modal de remoção de perguntas
Implementando a ação de remoção de perguntas no componente de administração
Implementando a restauração de perguntas no serviço de perguntas
Criando a modal de restauração de perguntas
Implementando o CSS e HTML da modal de restauração de perguntas
Implementando o componente da modal de restauração de perguntas
Criando o serviço de jogo
Criando as models do gerenciamento do jogo
Entendendo a arquitetura realtime com o Firebase
Implementando no serviço de jogo a ação de inicialização de jogos
Criando o componente modal de inicialização de jogos
Implementando o HTML da modal de inicialização de jogos
Implementando o componente da modal de inicialização de jogos

Tela de pré jogo

Criando e entendendo o design pattern Strategy para a tela de pré jogo
Implementando o método padrão da Strategy
Criando o serviço de Strategy para o jogador 1
Implementando o serviço de Strategy para o jogador 1
Criando o serviço de Strategy para o jogador 2
Implementando o serviço de Strategy para o jogador 2
Criando o serviço de pré jogo
Implementando o serviço de pré jogo - parte 1/2
Implementando o serviço de pré jogo - parte 2/2
Implementando o CSS do componente de pré jogo
Implementando o HTML do componente de pré jogo
Implementando o componente de pré jogo

Tela de Jogo

Criando o componente de jogo
Implementando o serviço de jogo - parte 1/3
Implementando o serviço de jogo - parte 2/3
Implementando o serviço de jogo - parte 3/3
Implementando o CSS da tela de jogo - parte 1/2
Implementando o CSS da tela de jogo - parte 2/2
Implementando o HTML da tela de jogo
Implementando o componente da tela de jogo
Demonstrando o jogo em funcionamento

Animação com o PhaserJS no jogo

Instalando a dependência do PhaserJS no projeto
Criando o serviço de animação
Adicionando o código do serviço de animação
Adicionando o serviço de animação no componente de jogo

Firebase Hosting - hospedagem do projeto na nuvem

Efetuando o deploy do projeto no Firebase Hosting

PhaserJS em detalhes (opcional)

Implementando os atributos e constantes
Iniciando a animação do jogo
Implementando a ação de pre-load dos assets
Gerando arquivos JSON no formato Atlas para mapear os personagens
Implementado a ação de criação da animação - parte 1/3
Implementado a ação de criação da animação - parte 2/3
Implementado a ação de criação da animação - parte 3/3
Implementando a ação de main loop (update) da animação
Implementando a ação de ataque

Screenshots

Aplicações realtime com Angular, Firebase e PhaserJS - Screenshot_01Aplicações realtime com Angular, Firebase e PhaserJS - Screenshot_02Aplicações realtime com Angular, Firebase e PhaserJS - Screenshot_03Aplicações realtime com Angular, Firebase e PhaserJS - Screenshot_04

Reviews

João
September 27, 2022
Atualizar o curso seria ótimo, quase consegui finalizar o projeto. Mas o professor está incomunicável. Seria bom se o mesmo desse algum suporte aos alunos.

Charts

Price

Aplicações realtime com Angular, Firebase e PhaserJS - Price chart

Rating

Aplicações realtime com Angular, Firebase e PhaserJS - Ratings chart

Enrollment distribution

Aplicações realtime com Angular, Firebase e PhaserJS - Distribution chart
2073972
udemy ID
12/7/2018
course created date
3/22/2020
course indexed date
Bot
course submited by