Desenvolvimento Web com JavaScript, TypeScript e Angular
Aprenda a desenvolver aplicações Web com JavaScript, TypeScript e Angular. Um curso 100% prático e super completo.
ENTENDENDO AS TECNOLOGIAS:
O que é JavaScript / ECMAScript?
O ECMAScript, popularmente conhecido como JavaScript, é uma linguagem de programação consagrada no universo WEB. Praticamente qualquer aplicação WEB utiliza o JavaScript em algum momento, ou mesmo em toda sua concepção.
O que é TypeScript?
TypeScript é um superset (superconjunto) de funcionalidades aplicadas a linguagem JavaScript que nos permite criar aplicações mais robustas e seguras. Além disso com TypeScript podemos utilizar todo o poder do JavaScript moderno mesmo nos browsers atuais.
O que é Angular?
Angular é um framework JavaScript de código fonte aberto desenvolvido e mantido pelo Google que permite a criação de aplicações WEB e Mobile baseadas no modelo Single-Page Application (SPA).
RESUMO DO CURSO:
Neste curso você aprenderá a criar aplicações WEB utilizando o framework Angular em sua versão 4. Além disso, no processo de desenvolvimento das aplicações você utilizará o JavaScript juntamente com o superset TypeScript.
NESSE CURSO VOCÊ:
Aprenderá diversas features do JavaScript/ECMAScript (ES6, ES7, ES8, ES9, ES10, ES11 e ES12) tornando seu conhecimento sobre JavaScript ainda mais completo.
Irá adquirir conhecimentos básicos e intermediários no uso do TypeScript.
Aprenderá Orientação a Objetos em JavaScript com TypeScript.
Aprenderá tudo o que é necessário para criar aplicações WEB incríveis utilizando o framework Angular 4.
Aprenderá a fazer o build dos seus projetos tanto nas versões de desenvolvimento quanto de produção.
Aprenderá a fazer o deploy dos builds de produção tanto local (http-server e apache) quanto na nuvem (AWS S3).
Aprenderá a utilizar o pacote json-server para criação de APIs fake (ambiente de desenvolvimento).
Aprenderá a utilizar o Firebase (banco de dados real-time) como back-end das aplicações.
Conteúdo Vantagens Detalhes
- Mapa do curso
- Introdução a seção
- [Windows] Instalando o NodeJS, NPM e Angular CLI
- Instalando o Visual Studio Code
- [IMPORTANTE] Aula de adaptação para o estudo do ECMAScript
- Instalando a extensão Live Server no VSCode
- Existe diferença entre JavaScript e ECMAScript?
- Let e Const - Entendendo o comportamento do Var
- Let e Const - Entendendo o comportamento do Let
- Let e Const - Entendendo o comportamento do Const
- Arrow function
- Template strings
- Default parameters
- Operador Rest/Spread parte 1
- Operador Rest/Spread parte 2
- Destructuring assignment parte 1
- Destructuring assignment parte 2
- Destructuring assignment parte 3
- Destructuring assignment parte 4
- Class keyword parte 1
- Class keyword parte 2
- Generators parte 1
- Generators parte 2
- Promises parte 1
- Promises parte 2
- Array.prototype.includes
- Exponential operator
- Async/Await
- Object.values
- Object.entries
- Object.getOwnPropertyDescriptors
- String padStart e padEnd
- Asynchronous iteration
- Promise finally
- Array flat
- Array flatmap
- String trimStart (trimLeft), trimEnd (trimRight)
- Object.fromEntries
- Function toString
- Catch com parâmetro opcional
- Dynamic Import parte 1
- Dynamic Import parte 2
- Dynamic Import parte 3
- Operador de visibilidade Private
- Optional Chaining
- Promise allSettled
- Nullish Coalescing Operator
- Logical Nullish Assignment
- Logical OR Assignment
- Logical AND assignment
- Numeric separator
- String replaceAll
- Promise any
- Introdução a seção
- O que é TypeScript?
- Instalando o TypeScript
- Criando o nosso primeiro script TypeScript
- Entendendo o compilador e o arquivo de configuração tsconfig.json
- Inferência de tipos
- Introdução ao desafio de Orientação a Objetos com TypeScript
- Orientação a objetos - Classes, objetos, atributos e métodos
- Class Carro - Criando e instanciando a nossa primeira classe
- Visibilidade de atributos e métodos (public e private)
- Classe Concessionaria - Praticando mais um pouco
- Class Pessoa - Agora é com você!
- Aplicando regras de negócio parte 1
- Aplicando regras de negócio parte 2
- Modularizando o código
- Herança - Introdução
- Herança - Prática
- Sobrescrita de métodos
- Interfaces - Introdução
- Interfaces - Um pouco mais a fundo
- Interfaces - Praticando mais um pouco
- Generics
- Extensão vscode-icons
- Introdução a seção
- Introdução ao Angular 4
- Criando o primeiro App Angular 4
- Entendendo a estrutura de um projeto Angular 4
- Como o App foi carregado e iniciado?
- Introdução aos Componentes Angular
- App1 - Introdução ao projeto
- App1 - Criando o componente Topo manualmente
- Component Templates
- Component Styles
- Component Selector
- App1 - Criando o componente Painel via CLI
- App1 - Criando o componente Tentativas e Progresso via CLI
- Instalando o Bootstrap no projeto
- App1 - Topo (Template)
- App1 - Painel (Template)
- App1 - Progresso (Template)
- App1 - Tentativas (Template)
- Databinding
- App1 - Topo (String Interpolation)
- App1 - Tentativas (Property Binding)
- Property Binding vs String Interpolation
- Criando a classe Frase
- Criando um Mock de objetos Frase
- App1 - Importando as frases para o componente Painel
- App1 - Exibindo instrução e frase (String interpolation)
- Event binding - Introdução
- Event binding - Prática
- App1 - Definindo resposta do usuário (tradução da frase)
- One-way-binding vs Two-way-binding
- App1 - Verificando resposta parte 1
- App1 - Estabelecendo a lógica das rodadas de frases
- App1 - Verificando resposta parte 2
- App1 - Controlando o progresso das respostas
- App1 - @Input (property binding entre o componente painel e progresso)
- App1 - Atualizando a rodada
- App1 - Criando a classe Coracao
- Diretivas
- App1 - Exibindo corações com ngFor
- App1 - Controlando as tentativas parte 1
- App1 - @Input (property binding entre o componente painel e tentativas)
- Introdução ao ciclo de vida dos componentes
- App1 - Tratando parâmetros atualizados com ngOnChanges
- App1 - Controlando as tentativas parte 2
- App1 - Encerrando as traduções parte 1 (Vitória e derrota)
- App1 - @Output (event binding entre o componente painel e App)
- App1 - Executando método do componente pai através do componente filho
- App1 - Controlando a exibição do Painel e testando o método ngOnDestroy
- App1 - Exibindo mensagem de derrota
- App1 - Exibindo mensagem de vitória
- App1 - Reiniciando a aplicação
- Introdução a seção
- Build de desenvolvimento vs Build de produção
- Deploy local via pacote http-server
- Deploy local via XAMPP
- Deploy na nuvem com Amazon AWS S3
- Iniciando o projeto e entendendo a flag --prefix
- Instalando o Bootstrap, JQuery e Tether no projeto
- Criando os componentes Topo, Home e Rodape
- Criando e alterando o favicon
- O que são Serviços (Services)?
- App2 - Criando um serviço para exibir ofertas
- App2 - Injetando o serviço de ofertas no componente Home parte 1
- App2 - Injetando o serviço de ofertas no componente Home parte 2
- App2 - Exibindo ofertas com base no serviço OfertasService parte 1
- App2 - Exibindo ofertas com base no serviço OfertasService parte 2
- Promises - Entendendo o processamento síncrono e assíncrono
- Promises na prática parte 1 - Introdução a estratégia de uso
- Promises na prática parte 2 (Resolve e then)
- Promises na prática parte 3 (Reject e then)
- Promises na prática parte 4 (Reject e catch)
- Promises na prática parte 5 (Processamento assíncrono e encadeamento)
- Promises na prática parte 6 (Promises encadeadas)
- Introdução a APIs Rest
- Introdução, instalação e testes do pacote json-server
- Estratégia de consumo de APIs Rest via Angular HTTP
- Injetando o serviço HTTP do Angular como dependência de outros serviços
- Efetuando requisições HTTP para APIs Rest
- Filtrando ofertas
- Entendendo a estratégia de implementação do recursos de rotas (Routes)
- Criando as páginas Restaurantes e Diversão
- Criando o mapa de rotas
- Estabelecendo a navegação entre rotas
- Alterando a classe do elemento associado a rota ativa
- Recuperando ofertas do tipo Restaurantes (HTTP Resquest / API Rest / Promise)
- Ajustando o template do RestauranteComponent
- Recuperando ofertas do tipo Diversao (HTTP Resquest / API Rest / Promise)
- Ajustando o template do DiversaoComponent
- Criando e navegando para a página Oferta
- Passando parâmetros na navegação
- Recuperando parâmetros da rota (Snapshot vs Subscribe)
- Recuperando parâmetros da rota com Snapshot
- Recuperando parâmetros da rota com Subscribe
- Recuperando a oferta selecionada (HTTP Resquest / API Rest / Promise)
- Ajustando o template do OfertaComponent
- Processamento assíncrono e a construção do template
- Ajustando a url de acesso a API
- Criando as tabs "Como usar" e "Onde fica"?
- Criando os componentes ComoUsarComponent e OndeFicaComponent
- Configurando rotas filhas
- Navegando entre as rotas filhas como-usar e onde-fica
- Recuperando parâmetros da rota parent (pai) nas rotas filhas
- Recuperando dados "Como usar" via HTTP Request
- Recuperando dados "Onde fica?" via HTTP Request
- Introdução a Reactive Programming
- Reactive Programming: Estudo de caso
- Introdução a Observables
- Observables na pratica parte 1 - Subscribe em ActivatedRoute.Params
- Observables na prática parte 2 - Interval operator
- Observables na prática parte 3 - Um pouco mais a fundo
- Observables na prática parte 4 - Finalizando stream com error() e ou complete()
- Observables na prática parte 5 - Memory leak e Unsubscribe
- Incluindo o campo de pesquisa de ofertas
- Capturando entrada do usuário - Approach $event e
- Capturando entrada do usuário - Approach: Variável de referência do template
- Criando um Observable para pesquisa de ofertas em OfertasService
- Lógica da pesquisa de ofertas parte 1 - Executando pesquisaOfertas
- Lógica da pesquisa de ofertas parte 2 - Erro e Retry Operator
- Lógica da pesquisa de ofertas parte 3 - Complete
- HTTP Response (Ajustando inferência de tipo)
- Uma pausa para recapitular!
- Lógica da pesquisa de ofertas parte 4 - Subject e switchMap
- Lógica da pesquisa de ofertas parte 5 - DebounceTime
- Lógica da pesquisa de ofertas parte 6 - Evitando pesquisas por strings vazias
- Lógica da pesquisa de ofertas parte 7 - DistinctUntilChanged
- Lógica da pesquisa de ofertas parte 8 - Catch
- Lógica da pesquisa de ofertas parte 9 - Trabalhando o template
- Lógica da pesquisa de ofertas parte 10 - Exibindo ofertas
- Ajustando importações de recursos dos rxjs
- O que são Pipes?
- Usando os pipes json, uppercase e lowercase
- Pipe date e a parametrização de pipes
- Pipe Currency (formatando moedas)
- Ajustando a formatação de moedas para o padrão Brasileiro (internacionalização)
- Criando um pipe customizado parte 1 - Criando e utilizando
- Criando um pipe customizado parte 2 - Configurando parâmetros
- Encadeando múltiplos pipes
- Pipe async (Inscrição em Observables e Promises)
- Navegando para oferta a partir do campo de pesquisa
- Atualizando oferta no processo de mudança de rota
- Atualizando "como usar" e "onde fica" no processo de mudança de rota
- [Fix Bootstrap] - Ajustando a versão de alpha para beta
- Criando e navegando para página OrdemCompra
- Entendendo a dinâmica de formulários em SPA
- Impedindo a validação de formulários pelo navegador (novalidate)
- Two-Way-Binding dos dados do formulário
- Validando dados do formulário parte 1 - Aplicando feedback visual nos campos
- Validando dados do formulário parte 2 - Controlando estado primitivo dos campos
- Validando dados do formulário parte 3 - Exibindo mensagens de suporte
- Validando dados do formulário parte 4 - Controlando botão "Confirmar compra"
- Criando um serviço para ordens de compra
- Criando um model para ordem de compra
- Implementando o método confirmarCompra
- Injetando o serviço HTTP do Angular 4 em OrdemCompraService
- Enviando o formulário via requisição HTTP (POST) para API Rest
- Feedback parte 1 - Criando o componente OrdemCompraSucesso
- Feedback parte 2 - Aplicando a lógica
- Introdução a Template Forms
- FormsModule parte 1 - Importando módulo para aplicação
- Ajustando as coisas antes de iniciar com Template Forms
- FormsModule parte 2 - Recuperando dados do formulário com ngForm e ngModel
- Enviando formulário (ngSubmit) e explorando os dados do objeto NgForm
- Acessando o formulário e explorando os dados do objeto NgForm com @ViewChild
- Validando dados do formulário parte 1 - Introdução
- Validando dados do formulário parte 2 - Required, Minlength e Maxlength
- Aplicando feedback visual parte 1 - Campos do formulário
- Aplicando feedback visual parte 2 - Mensagens de controle
- Enviando o formulário via requisição HTTP (POST)
- Feedback de envio do formulário
- Introdução a Reactive Forms
- Reactive Forms - Importando módulo para aplicação
- Ajustando as coisas antes de iniciar com Reactive Forms
- Criando um FormGroup na classe do componente (form programático)
- Sincronizando o FormGrupo com o formulário do template
- Enviando formulário (ngSubmit) e explorando os dados do objeto FormGroup
- Aplicando validações (Validators)
- Aplicando feedback visual - Mensagens de controle
- Controlando envio do formulário
- Enviando o formulário via requisição HTTP (POST)
- Feedback de envio do formulário
- Estratégia de implementação do carrinho de compras
- Criando o model ItemCarrinho
- Atribuindo CarrinhoService ao componente OrdemCompra
- Atribuindo CarrinhoService ao componente Oferta
- Incluindo itens (ofertas) no carrinho de compras
- Ajustando a navegação para página de ordem de compra
- Entendo e corrigindo a instância do serviço CarrinhoServico
- Exibindo itens do carrinho de compras em OrdemCompra
- Ajustando a inclusão de itens (ofertas) no carrinho de compras
- Ajustando o total dos itens
- Aumentando a quantidade dos itens
- Diminuindo a quantidade dos itens
- Diminuindo a quantidade dos itens - tratando a quantidade zero
- Tratando ordem de compra sem itens
- Impedindo confirmação da compra se ordem compra não possuir itens
- Enviando pedido com itens de carrinho para API Rest
- Removendo os itens do carrinho após a efetivação da compra
- Atualizando o Angular/Cli
- Migrando o projeto Pássaro Urbano
- Build de produção do App Pássaro Urbano
- Just-in-Time Compilation vs Ahead-of-Time Compilation - Introdução
- Just-in-Time Compilation vs Ahead-of-Time Compilation - Prática
- Deploy local via pacote http-server
- Deploy local via XAMPP
- Deploy na nuvem com Amazon AWS S3
- Iniciando o projeto Instagram Clone
- Instalando o Bootstrap, JQuery e Popper no projeto
- Criando os componentes Acesso, Banner, Login e Cadastro
- Ajustando os componentes AppComponente e AcessoComponent
- Ajustando o componente Banner
- Ajustando o componente Login
- Ajustando o componente Cadastro
- Criando e alterando o favicon
- Introdução a animações em Angular
- Instalação e setup do módulo de animações do Angular 4 + web-animations-js
- Animations, triggers, states e styles
- Transitions e animate
- Criando um Model para imagens do banner
- Implementando lógica do banner
- Estado especial void e estilos na transição de estados - Banner
- Estado especial void e estilos na transição de estados - Login
- Renderização condicional do login e do cadastro parte 1 (ngIf)
- Output (EventEmitter) parte 1 (LoginComponent)
- Output (EventEmitter) parte 2 (CadastroComponent)
- Animações com Keyframes
- Customizando a animação do painel (Login e Cadastro) com keyframes
- Usando callbacks
- Espera, espera, o que vai acontecer agora e o que é Firebase?
- Controlando o formulário de cadastro
- Criando um model Usuario
- Criando o serviço de Autenticação
- Incluindo o Firebase SDK no projeto
- Conhecendo o console do Firebase
- Conectando o Firebase SDK do projeto com o Back-end do Firebase
- Cadastrando usuários no Firebase parte 1
- Cadastrando usuários no Firebase parte 2
- Controlando o formulário de login
- Autenticando usuário no Firebase
- Criando o component HomeComponent e PublicacoesComponent
- Configurando rotas
- Melhorando o processo de cadastro
- Entendendo a estratégia para proteção de rotas
- Armazenando o token de autenticação dentro do serviço Autenticacao
- Redirecionando para rota home após login
- Protegendo a rota home com CanActivate (checando autenticação) parte 1
- Protegendo a rota home com CanActivate (checando autenticação) parte 2
- Utilizando LocalStorage para armazenamento do token de autenticação
- Efetuando logout
- Redirecionando para o path raiz se usuário não estiver autenticado
- Atividades complementares
- Criando o componente NovaPublicacaoComponent e incluindo um modal (Bootstrap)
- Ajustando o modal de inclusão de publicações
- Criando o serviço de controle de dados
- Cadastrando publicações no Firebase
- Introdução a estratégia de upload de imagens
- Incluindo Input file e recuperando os dados do arquivo selecionado
- Upload de arquivos para o Firebase Storage
- Controlando o progresso do upload
- Criando um serviço para controlar o progresso do upload
- Atualizando o progresso com Observable Interval
- Apresentando o progresso do upload
- Ajustando a gravação da imagem (Storage) e título (Database) da publicação
- Recuperando publicações (database)
- Recuperando imagens (storage)
- Recuperando detalhes do usuário (database)
- Encapsulando o método de consulta de publicações em uma Promise
- Listando publicações na timeline
- Atualizando a timeline após inclusão de nova publicação - EventEmitter
- Atualizando a timeline após inclusão de nova publicação - ViewChild
- Ordenando publicações - OrderByKey()
- Ordenando publicações - Refactoring do método de consulta
- Databinding vs render view
- Agradecimento
Jorge Sant' Ana é Tecnólogo em Informática para Gestão de Negócios pela Fatec e Pós-Graduado em Gestão de Projetos de TI pela Fundação Vanzolini.
Sua trajetória na programação teve início aos 18 anos, e, desde então, tem se dedicado com entusiasmo ao desenvolvimento de software. Ao longo da carreira, adquiriu experiência em diversas tecnologias, padrões e frameworks, incluindo HTML, CSS, JavaScript, TypeScript, Node.js, PHP, MySQL, PostgreSQL, Oracle, SQL Server, MongoDB, XML, APIs (SOAP e REST), Orientação a Objetos, MVC, SOLID, Bootstrap, Tailwind CSS, Angular, React, Vue, Next.js, Nest.js, React Native e Docker.
A atuação em projetos variados proporcionou uma visão abrangente e prática do desenvolvimento de software, consolidando sua expertise na área.
Convicto de que a educação é uma ferramenta essencial para a transformação social, Jorge Sant' Ana também se dedicado à criação de cursos acessíveis e alinhados às demandas do mercado, impactando positivamente a vida de milhares de pessoas.
Perguntas Frequentes
Todas as avaliações mostradas aqui foram feitas por pessoas reais que compraram e deram sua opinião sobre o curso. Quando alguém compra um curso através da Hotmart, a pessoa recebe um convite para avaliar o conteúdo dele. A nota nesta página é o resultado da média das avaliações feitas por estes compradores, que vai de 1 a 5 estrelas.
O Prazo de Garantia é o período que você tem para pedir o reembolso integral do valor pago pela sua compra, caso o produto não seja satisfatório. Assim que solicitado, seu reembolso é processado automaticamente pela Hotmart em até 5 dias. Para pagamentos com boleto bancário, você precisa preencher uma conta bancária para receber o dinheiro. Passados os 5 dias, o valor poderá ser identificado em sua conta em até 7 dias úteis. Já o estorno da fatura do cartão de crédito varia de acordo com o meio de pagamento e pode ocorrer na fatura atual ou na seguinte.
Primeiro, você precisa criar seu cadastro grátis, clicando aqui. Lá dentro, você tem acesso a mais de 15 formatos pra transformar o que você sabe em um produto digital. Além disso, vai poder acessar também o Hotmart Academy.
Alguns cursos online oferecem um certificado digital de conclusão. Alunos podem emitir esse certificado ao final do curso ou entrando em contato com o Autor ou Autora. Esses certificados podem ser compartilhados em redes sociais como o LinkedIn e inseridos em informações curriculares.
Os produtos na Hotmart têm diferenciais que mudam de acordo com o tipo de produto e a disponibilidade. Por exemplo, produtos do tipo "Cursos online" podem ou não oferecer certificado digital de conclusão. Caso o certificado esteja disponível, alunos podem emiti-lo dentro do curso ou entrando em contato com o(a) Autor(a). Os certificados podem ser compartilhados em redes sociais como o LinkedIn e inseridos em informações curriculares. A garantia também é um diferencial dos nossos produtos e pode variar de 7, 15 ou 30 dias, de acordo com o oferecido pelo Autor(a). Para ver os diferenciais disponíveis neste produto, basta checar a seção Diferenciais.
Você receberá o acesso a Desenvolvimento Web com JavaScript, TypeScript e Angular por email. Pode ser um curso online, um ebook, uma série de videoaulas, um serviço, evento, etc. O conteúdo será acessado ou baixado através de um computador, celular, tablet ou outro dispositivo digital. Você também pode acessar o produto comprado nesta página:
Para comprar este curso, clique no botão “Comprar”. Lembre-se de que nem todos os cursos estarão sempre disponíveis para compra. É possível que o Autor ou Autora esteja preparando uma nova turma ainda sem inscrições abertas.
Para ser Afiliado(a), recomendamos que leia os guias que disponibilizamos em todos os canais da Hotmart. Além disso, uma boa maneira de se informar um pouco mais é acessando nosso blog. O produto desta página está disponível apenas para compra, para ver os produtos de afiliação, vá até o Mercado de Afiliação.
Temos um canal exclusivo para receber denúncias em produtos que não estão de acordo com as regras da plataforma Hotmart. Se você vir informações inadequadas, denuncie aqui
Acesse nossa Central de Atendimento, onde explicamos, em detalhes, todas as dúvidas que você possa ter antes, durante ou depois de comprar um produto digital na Hotmart.
