Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Curso Angular 17 - CRUD Completo com Firebase

Name: Curso Angular 17 - CRUD Completo com Firebase
Rating: 4.8 (239 reviews)

Aprenda a criar um CRUD completo com Angular 17 + Firebase

Created byJoão Sena

Last updated 8/2024

Portuguese

What you'll learn

Criar projeto em Angular 17 (projeto, componentes e serviços)
Criar um CRUD completo desde o Front-End até a integração com o Banco de dados
Integração de serviços com os componentes (assim como são feitas com API's)
Criar e integrar Firebase com o projeto
Ter experiência para trabalhar profissionalmente com o Angular

Course content

10 sections • 39 lectures • 6h 49m total length

Introdução ao curso + apresentação do projeto e Professor10:10
Nesta aula será apresentado:
Projeto final
Objetivo deste curso
Professor
O que é Angular
Pré-requisitos
Programas necessários
Grade Curricular
Navegando pelo projeto - Mostrando todas as funcionalidades4:17
O que é o Angular? Detalhes sobre o Framework - Informativa8:10
O que é o Firebase? Banco de Dados por interface gráfica5:54
O que é o Typescript? Para que ele serve? Como usar - Extra11:55

Instalar Angular na versão 17 (obrigatório - aula atualizada)2:41
Apenas uma atualização de como instalar a versão específica do Angular 17, pois alguns alunos vinham tendo problemas com versões mais novas do que a 17, então siga esse comando para a próxima aula que você evitará estes problemas.

Caso não de certo pode ser que tenha uma outra forma mais nova de instalar a versão 17 do Angular, então pesquise na internet ou chat gpt algo como: Instalar versão especifica do Angular, e troque o exemplo que irão dar pela 17.
Instalar Node e Angular - Para iniciar o projeto4:35
Instalação do Node
Instalação do Angular
Visual Studio Code (ou outra IDE para codificar)
Google Chrome (ou outro Browser para rodar o projeto)
Instalar Visual Studio Code + Google Chrome2:09

Criação do Projeto + Estrutura do Angular e como funciona18:54
Iremos aprender a criar um projeto em Angular e entender como funciona sua estrutura de pasta, arquivos e componentes.
Iremos ver como identificar e separar pastas deste projeto (organização)
Instalação do Bootstrap 5 e Angular Material 1710:11
Instalação do Bootstrap 5 e Angular Material 17
Obs: Ambos são frameworks visuais apenas que irão facilitar nosso desenvolvimento (porém não são obrigatórios) caso você queira utilizar outro framework ou até fazer tudo na mão via CSS puro, isso não influência no curso. Porém utilizaremos estas tecnologias apenas para facilitar o nosso desenvolvimento já que o foco é o Angular e não o CSS.

Criação do componente de Login + Configuração de rota6:39
Iremos criar o componente de Login
- Configurar rota para acessar este componente
Obs: Essa criação servirá de base para todas as outras páginas ou serviços que formos criar
Pt.1 - Estrutura da tela Login HTML + CSS23:13
Criação do componente de Login (tela)
- Estruturação via HTML (conteúdo e containers)
- Estilização desta tela via CSS
- Adicionar imagens ao assets do Angular
Pt.2 - Estrutura da tela Login Typescript (Estrutura, funções e variável)9:45
Criação da variável e uso do NgModel do Angular, assim capturando o valor e salvando no Session Storage e configurando a rota
Criação do componente da Home + Configuração de rota2:34

Criação do componente de CRUD + configuração de Rota3:50
Pt.1 - Montando estrutura da tela CRUD (HTML + CSS)8:58
Pt.2 - Tabela de usuários (HTML + CSS)19:54
Pt.3 - Consumindo serviço Firebase e preenchendo tabela de usuários23:27
Pt.1 - Modal Visualizar + passagem de dados do usuário13:09
Pt.2 - Modal Visualizar + montando dados em tela (HTML + CSS)11:14
Pt.1 - Criação do Modal Adicionar usuários5:50
Pt.2 - Modal para Adicionar usuários (Formulário + Typescript)28:00
Pt.3 - Modal Adicionar Usuários - Captura de dados + Salvar8:39
Pt.1 - Modal Editar Usuários - Preenchimento de dados + Salvar edição13:43
Pt.1 - Excluir usuários da tabela4:03
Extra - Lazy Loading - @defer / @placeholder / @error6:28

Requirements

Conhecimento prévio em HTML, CSS e Javascript
Conhecimento em lógica da programação
Noção básica de Bootstrap e Typescript (para que serve e porque utilizar)

Description

Introdução:

Neste curso você vai criar um CRUD completo (ler, adicionar, editar e excluir) com Angular 17, Bootstrap 5, Angular Material e Firebase. Este projeto se trata de um Crud de usuários, onde iremos fazer o gerenciamento deles e salvar no banco de dados do Firebase, tudo isso seguindo padrões modernos de design e usabilidade utilizados no mercado de trabalho.

Você vai criar um projeto completo com um design moderno que encanta os olhos de quem vê, e 100% funcional desde o Front-End até salvar os dados no Banco de dados reais no Firebase.

Resumo do projeto:

- Projeto inclui Página de Login

- Página Home ( com um estilo Dashboard)

- Página de CRUD (Tabela, modal para adicionar e editar usuários e exclusão de usuários)

- Projeto na pegada e design moderno e reais (assim como é exigido no mercado de trabalho)

Objetivos:

- Saber criar um projeto em Angular 17 do zero até a integração final com o Banco de dados

- Criar um CRUD completo

- Utilizar Bootstrap 5 e Angular Material de maneira simples

- Criar um projeto moderno e completo assim como é exigido no mercado de trabalho ou coorporativo

- Entender como funciona a estrutura do Angular e porque utilizar o Angular para o desenvolvimento

Obs: Este projeto tem foco no Front-End, porém a integração ao Firebase ocorre de maneira muito simples e tudo será explicado não é necessário de conhecimento prévio do mesmo.

Who this course is for:

Desenvolvedores Front-End que desejam aprender a trabalhar com Angular
Desenvolvedor Front-End que desejam se atualizar para a nova versão do Angular de maneira simples

Curso Angular 17 - CRUD Completo com Firebase

What you'll learn

Explore related topics

Course content

Introdução5 lectures • 40min

Instalações e Programas3 lectures • 9min

Criação do Projeto + Estrutura + Instalações2 lectures • 29min

Core do Angular - Funções e detalhes importantes do Framework4 lectures • 41min

Criação da tela de Login + Configuração de rota + Menu Lateral4 lectures • 42min

Criando o Menu lateral - componente2 lectures • 20min

Criação da tela Home + Configuração de rota3 lectures • 45min

Firebase - Criação do banco de dados e conexão no Angular3 lectures • 33min

Criação da tela CRUD de usuários12 lectures • 2hr 27min

Considerações Finais1 lecture • 2min

Requirements

Description

Who this course is for: