Curso de Desenvolvimento WEB com ES6, TypeScript e Angular
4.6 (3,039 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
11,207 students enrolled

Curso de Desenvolvimento WEB com ES6, TypeScript e Angular

Crie aplicações WEB incríveis como Peixe Urbano e Instagram utilizando JavaScript ES6, TypeScript e Angular
4.6 (3,039 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
11,207 students enrolled
Created by Jorge Sant Ana
Last updated 8/2020
Portuguese
Portuguese [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 31 hours on-demand video
  • 4 articles
  • 112 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Ao final do curso o aluno terá conhecimentos para criar aplicações JavaScript modernas (ES6) capazes de serem executadas em browsers atuais.
  • Saberá como utilizar o superset TypeScript para criação de aplicações JavaScript mais poderosas e seguras.
  • Poderá utilizar o framework Angular 4 para criação de aplicações WEB.
Course content
Expand all 305 lectures 30:51:16
+ Preparando o ambiente de desenvolvimento
3 lectures 13:37
[Windows] Instalando o NodeJS, NPM e Angular CLI
09:04
Instalando o Visual Studio Code
04:11
+ TypeScript e Orientação a Objetos em JavaScript
23 lectures 02:40:50
Instalando o TypeScript
01:36
Criando o nosso primeiro script TypeScript
06:49
Entendendo o compilador e o arquivo de configuração tsconfig.json
05:53
Inferência de tipos
08:49
Introdução ao desafio de Orientação a Objetos com TypeScript
03:21
Orientação a objetos - Classes, objetos, atributos e métodos
03:01
Class Carro - Criando e instanciando a nossa primeira classe
13:18
Visibilidade de atributos e métodos (public e private)
04:14
Classe Concessionaria - Praticando mais um pouco
05:47
Class Pessoa - Agora é com você!
06:47
Aplicando regras de negócio parte 1
10:16
Aplicando regras de negócio parte 2
10:09
Modularizando o código
09:02
Herança - Introdução
04:26
Herança - Prática
12:31
Sobrescrita de métodos
03:24
Interfaces - Introdução
08:18
Interfaces - Um pouco mais a fundo
06:01
Interfaces - Praticando mais um pouco
18:46
Generics
12:10
Extensão vscode-icons
02:25
+ Introdução ao Angular 4
51 lectures 04:49:26
Criando o primeiro App Angular 4
05:06
Entendendo a estrutura de um projeto Angular 4
07:51
Como o App foi carregado e iniciado?
11:53
Introdução aos Componentes Angular
10:25
App1 - Introdução ao projeto
03:31
App1 - Criando o componente Topo manualmente
11:40
Component Templates
04:51
Component Styles
04:14
Component Selector
04:09
App1 - Criando o componente Painel via CLI
05:26
App1 - Criando o componente Tentativas e Progresso via CLI
03:53
Instalando o Bootstrap no projeto
08:04
App1 - Topo (Template)
03:35
App1 - Painel (Template)
10:56
App1 - Progresso (Template)
03:52
App1 - Tentativas (Template)
04:30
Databinding
06:09
App1 - Topo (String Interpolation)
03:02
App1 - Tentativas (Property Binding)
05:50
Property Binding vs String Interpolation
02:29
Criando a classe Frase
06:35
Criando um Mock de objetos Frase
04:16
App1 - Importando as frases para o componente Painel
02:49
App1 - Exibindo instrução e frase (String interpolation)
02:43
Event binding - Introdução
03:44
Event binding - Prática
03:41
App1 - Definindo resposta do usuário (tradução da frase)
07:38
One-way-binding vs Two-way-binding
04:01
App1 - Verificando resposta parte 1
03:00
App1 - Estabelecendo a lógica das rodadas de frases
06:29
App1 - Verificando resposta parte 2
08:12
App1 - Controlando o progresso das respostas
05:04
App1 - @Input (property binding entre o componente painel e progresso)
08:54
App1 - Atualizando a rodada
07:56
App1 - Criando a classe Coracao
10:09
Diretivas
04:07
App1 - Exibindo corações com ngFor
06:47
App1 - Controlando as tentativas parte 1
05:09
App1 - @Input (property binding entre o componente painel e tentativas)
04:32
Introdução ao ciclo de vida dos componentes
07:39
App1 - Tratando parâmetros atualizados com ngOnChanges
07:11
App1 - Controlando as tentativas parte 2
07:14
App1 - Encerrando as traduções parte 1 (Vitória e derrota)
05:32
App1 - @Output (event binding entre o componente painel e App)
02:28
App1 - Executando método do componente pai através do componente filho
08:55
App1 - Controlando a exibição do Painel e testando o método ngOnDestroy
05:41
App1 - Exibindo mensagem de derrota
04:22
App1 - Exibindo mensagem de vitória
04:34
App1 - Reiniciando a aplicação
04:13
+ Build de desenvolvimento, build de produção e deploy
5 lectures 23:37
Introdução a seção
00:46
Build de desenvolvimento vs Build de produção
07:37
Deploy local via pacote http-server
03:58
Deploy local via XAMPP
01:45
Deploy na nuvem com Amazon AWS S3
09:31
+ #App2 (Pássaro Urbano) - Primeiros passos
4 lectures 25:27
Iniciando o projeto e entendendo a flag --prefix
06:52
Instalando o Bootstrap, JQuery e Tether no projeto
06:55
Criando os componentes Topo, Home e Rodape
06:09
Criando e alterando o favicon
05:31
+ Serviços e Promises
13 lectures 01:18:24
O que são Serviços (Services)?
06:16
App2 - Criando um serviço para exibir ofertas
03:02
App2 - Injetando o serviço de ofertas no componente Home parte 1
03:24
App2 - Injetando o serviço de ofertas no componente Home parte 2
06:12
App2 - Exibindo ofertas com base no serviço OfertasService parte 1
10:12
App2 - Exibindo ofertas com base no serviço OfertasService parte 2
05:43
Promises - Entendendo o processamento síncrono e assíncrono
05:36
Promises na prática parte 1 - Introdução a estratégia de uso
05:07
Promises na prática parte 2 (Resolve e then)
07:29
Promises na prática parte 3 (Reject e then)
07:41
Promises na prática parte 4 (Reject e catch)
02:50
Promises na prática parte 5 (Processamento assíncrono e encadeamento)
09:49
Promises na prática parte 6 (Promises encadeadas)
05:03
+ Criando uma API Rest fake, injeção de dependências e HTTP Request
6 lectures 35:53
Introdução a APIs Rest
03:09
Introdução, instalação e testes do pacote json-server
08:48
Estratégia de consumo de APIs Rest via Angular HTTP
08:37
Injetando o serviço HTTP do Angular como dependência de outros serviços
04:21
Efetuando requisições HTTP para APIs Rest
08:26
Filtrando ofertas
02:32
+ Rotas e Navegação
25 lectures 02:21:02
Entendendo a estratégia de implementação do recursos de rotas (Routes)
03:36
Criando as páginas Restaurantes e Diversão
05:05
Criando o mapa de rotas
08:40
Estabelecendo a navegação entre rotas
03:45
Alterando a classe do elemento associado a rota ativa
01:50
Recuperando ofertas do tipo Restaurantes (HTTP Resquest / API Rest / Promise)
10:43
Ajustando o template do RestauranteComponent
05:58
Recuperando ofertas do tipo Diversao (HTTP Resquest / API Rest / Promise)
05:05
Ajustando o template do DiversaoComponent
02:36
Criando e navegando para a página Oferta
03:25
Passando parâmetros na navegação
08:58
Recuperando parâmetros da rota (Snapshot vs Subscribe)
03:19
Recuperando parâmetros da rota com Snapshot
07:40
Recuperando parâmetros da rota com Subscribe
04:34
Recuperando a oferta selecionada (HTTP Resquest / API Rest / Promise)
08:47
Ajustando o template do OfertaComponent
03:56
Processamento assíncrono e a construção do template
04:45
Ajustando a url de acesso a API
06:22
Criando as tabs "Como usar" e "Onde fica"?
07:29
Criando os componentes ComoUsarComponent e OndeFicaComponent
03:30
Configurando rotas filhas
05:15
Navegando entre as rotas filhas como-usar e onde-fica
04:10
Recuperando parâmetros da rota parent (pai) nas rotas filhas
05:27
Recuperando dados "Como usar" via HTTP Request
10:51
Recuperando dados "Onde fica?" via HTTP Request
05:16
Requirements
  • Para aproveitar bem o curso é importante ter conhecimentos básicos em HTML, CSS e JavaScript.
  • Todas as ferramentas utilizadas neste treinamento são de uso profissional e livre, ou seja, são gratuitas.
Description

Aprenda a desenvolver aplicações WEB com JavaScript ES6, TypeScript e Angular, um curso 100% prático e super completo.


ENTENDENDO AS TECNOLOGIAS:

O que é JavaScript ES6?

JavaScript é uma linguagem de programação consagrada no universo WEB, praticamente qualquer aplicação WEB utiliza JavaScript em algum momento.

O termo ES6 (ECMAScript 6) consiste na versão atual do JavaScript lançada em junho de 2015, nessa versão diversas features foram disponibilizadas, como por exemplo a importação de módulos nativa e um suporte a orientação a objetos mais simplificado, entre muitos outros recursos.

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 ES6 mesmo nos browsers atuais (compatíveis apenas com ES5).

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 em sua versão mais recente (ES6) juntamente com o superset TypeScript.


NESSE CURSO VOCÊ:

  • Aprenderá diversas features do ES6 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 ES6 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.


COMO VOCÊ VAI APRENDER TANTO? É SIMPLES:

  • JavaScript Moderno ES6 (ECMAScript 2016): A proposta é atualizar você no uso das principais features do ES6.


  • TypeScript e Orientação a Objetos em JavaScript: Vamos nos aprofundar no uso do TypeScript em conjunto com o JavaScript explorando bastante os recursos de orientação a objetos (de forma teórica e prática).


  • #APP1 - Aprendendo Inglês: Aqui você será introduzido ao universo do framework Angular 4. Vamos criar nosso primeiro projeto que consiste em uma aplicação de tradução de frases. Ao longo do desenvolvimento desse projeto vamos aprender:

    • Como iniciar projetos Angular 4 via Angular-CLI

    • Como a SPA é iniciada no browser

    • Como criar componentes

    • Como integrar o Bootstrap 4 ao projeto (para criar aplicações responsivas)

    • Databinding (string interpolation, property binding e event binding)

    • LifeCicly Hooks (ngOnInit, ngOnChanges, ngOnDestroy)

    • Diretivas (ngFor e ngIf)

    • @Input e @Output


  • Build de desenvolvimento, build de produção e Deploy: Tão logo o nosso primeiro app em Angular 4 esteja pronto, vamos aprender a como podemos gerar builds de desenvolvimento e produção, bem como podemos distribuir esses builds, tanto utilizando servidores locais como http-server (NodeJS) e Apache (via XAMPP) quanto em servidores na nuvem (AWS S3 free)


  • #APP2 - Pássaro Urbano: Nosso segundo projeto será baseado no famoso site Peixe Urbano, ao longo do desenvolvimento desse projeto vamos aprender:

    • Como criar e consumir serviços

    • Promises

    • Como consumir uma API Rest

    • Rotas e navegação

    • Observables e o paradigma de Programação Reativa

    • Pipes (Utilização de pipes nativos e criação de novos pipes)

    • Formulários (Template forms / Reactive forms)


  • #APP3 - Instagram Clone: Nosso terceiro projeto será baseado no famoso site Instagram, ao longo do desenvolvimento desse projeto vamos aprender:

    • Como utilizar a biblioteca de animações do Angular (triggers, states, transitions, animate, keyframes)

    • Como conectar nossa SPA (front-end) ao Firebase (back-end)


Tá em dúvida? Experimente!

Esse curso tem 30 dias de garantia, tempo de sobra para você testar e aprovar. (E claro, se não gostar é só solicitar reembolso!)

Who this course is for:
  • Este curso é indicado para alunos que já participaram do treinamento "Web Completo 2.0 - 18 cursos + 18 projetos" ou que possuam conhecimentos equivalentes em HTML, CSS e JavaScript e que estejam interessados em aprimorar seus conhecimentos no desenvolvimento de sistemas web.
  • Qualquer pessoa interessada em aprender as novas features do JavaScript ES6.
  • Qualquer pessoa interessada em aprender a como podemos utilizar o superset TypeScript para escrever aplicações JavaScript ainda mais robustas.
  • Qualquer pessoa interessada em aprender o framework Angular 4 para criação de Single Page Applications (SPAs)