Aprenda Angular + Nativescript e crie um WhatsApp
4.0 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
104 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprenda Angular + Nativescript e crie um WhatsApp to your Wishlist.

Add to Wishlist

Aprenda Angular + Nativescript e crie um WhatsApp

Crie apps nativas para Android e iPhone como WhatsApp usando Angular 4, Nativescript, Firebase e Typescript
4.0 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
104 students enrolled
Last updated 8/2017
Portuguese
Curiosity Sale
Current price: $10 Original price: $90 Discount: 89% off
30-Day Money-Back Guarantee
Includes:
  • 14.5 hours on-demand video
  • 3 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Criar web pages e web apps com Angular 2
  • Criar apps nativas de altíssimo desempenho para Android com Nativescript
  • Criar apps nativas de altíssimo desempenho para iPhone/iPod/iPad com Nativescript
  • Dominar conceitos ES6 e Typescript
  • Programar componentes desacoplados do DOM (até mesmo sem o DOM)
  • Acessar APIs nativas dos celulares através de Javascript
  • Criar truly native apps. Nativescript não é web app, é código nativo
  • Desenvolver apps complexos como um clone do WhatsApp
  • Acessar servidores Firebase para troca de mensagens e muito mais
View Curriculum
Requirements
  • Noções básicas de Javascript
  • Noções básicas de HTML ou XML
  • Noções elementares de CSS
  • Não é necessário já ser desenvolvedor Android ou iOS
Description

Neste curso, você vai aprender as seguintes tecnologias:

Angular 2/4 - um dos frameworks Javascript mais populares do mercado. Liderada pelo Google, sua segunda versão destaca-se pela facilidade, alto desempenho e filosofia mobile first. Ela é uma total reescrita do popular framework AngularJS. No lançamento da versão 2, foi anunciada a política de publicações de novas versões a cada 6 meses mas, diferente do que estava sendo feito naquele momento, garantindo um bom nível de compatibilidade reversa. Portanto, este curso está atualizado até a versão 4, e o que você aprender aqui terá valiosa utilidade nas versões posteriores.

Nativescript - poderoso framework capaz de gerar apps nativas a partir de programação web. No entanto, não roda sobre uma Webview, por isso possui desempenho e look and feel idênticos aos de apps desenvolvidas em Java para Android ou Objective C / Swift para iOS.

Typescript - linguagem de tipagem estática que vem se firmando como evolução natural do Javascript. Juntamente com o padrão ES6 (ou ES2015), proporciona a criação de um código mais claro, organizado e previsível.

Firebase - Servidor BaaS  - backend as a service - (adquirido pelo Google) para simplificar a vida de quem desenvolve apps que precisam de um servidor para centralizar bases de dados e outros processamentos.

Para aprender de fato, não basta exercícios Hello World. O projeto do curso precisa ser agradável e ao mesmo tempo desafiador. Você será capaz de construir um aplicativo de mensagens instantâneas bem semelhante ao WhatsApp. Boa parte feita durante as aulas, o resto você terá plenas condições de concluir por conta própria.

Não é Cordova/PhoneGap, não é Ionic ou qualquer outro framework que precise rodar dentro de  um browser simulando componentes nativos. Também não é necessário aprender mais de uma linguagem para ser capaz de programar para Android e iPhone. Assista aos primeiros vídeos free para entender melhor.

Who is the target audience?
  • Desenvolvedores Android
  • Desenvolvedores iOS
  • Estudantes de engenharia ou ciência da computação
  • Nenhum acima. Qualquer pessoa com noções fundamentais de web (HTML/CSS/Javascript)
Students Who Viewed This Course Also Viewed
Curriculum For This Course
75 Lectures
14:17:45
+
Visão geral do ambiente adotado
5 Lectures 30:20

A abrangência e ubiquidade do trio HTML, CSS e Javascript e onde o TypeScript e o Nativescript se encaixam nessa combinação.

Preview 05:27

Vantagens de se ter um framework robusto, o que há de novo na versão 2 / 4 e posteriores e comparações com algumas outras soluções como React, VueJS e Aurelia.

Preview 06:49

Semelhanças entre programar em Javascript com Nativescript e Java / Kotlin para Android ou Objective C / Swift para iOS

Preview 04:21

Quais as vantagens dos componentes nativos sobre web apps / hybrid apps. Quais as diferenças entre o Nativescript e frameworks como Cordova/PhoneGap e Ionic

Preview 09:06

Semelhanças e diferenças entre Nativescript e React Native, Xamarin, Firemonkey ou Codename One

Preview 04:37
+
Instalações das Ferramentas
6 Lectures 53:21

Instalação do Xcode para permitir desenvolver para iOS e Homebrew para gerenciar melhor os demais softwares utilizados no ecossistema do Nativescript

Preview 05:13

Instalação do Android SDK através do comando brew install android-sdk, brew cask install android-studio ou baixando no site oficial de acordo com sua plataforma.

Android SDK
11:35

Como instalar o NodeJS através de gestor de versões como n ou nvm.

NodeJS e NPM
08:55

Instalação e configuração do Visual Studio Code para uso durante o curso. Além de dicas de plugins para qualidade e produtividade.

Visual Studio Code
18:02

Após todas as ferramentas obrigatórias (como o Android SDK) ou opcionais, a instalação do Nativescript fica bem simples.

Nativescript
09:22

Vejamos o que você aprendeu sobre o ambiente de desenvolvimento que será utilizado durante todo o curso.

Instalações das Ferramentas
5 questions

Um pequeno script para simplificar sua vida durante o processo de instalação. Se não quiser perder tempo, apenas execute um único comando e instale tudo de uma vez.

Script de configuração total no Mac OS
00:14
+
Emulando Dispositivos
3 Lectures 23:18

Aprenda a trabalhar com o simulador de dispositivos iOS como iPhones e iPads.

iOS Simulator
05:26

Aprenda como trabalhar com o Android Virtual Device manager (AVD), uma ferramenta bastante flexível para minimizar sua necessidade de possuir dispositivos reais para testar sua app.

AVD - Android Virtual Devices
11:25

Conheça essa excelente alternativa ao AVD, mais leve e rápida.

Genymotion
06:27
+
Indo além com Javascript - ES6
8 Lectures 01:38:12

Aprenda como utilizar recursos ECMAScript 2015 extensamente utilizados em qualquer código Angular 2. Nesta aula, vamos focar em orientação a objetos, com os seguintes tópicos.

  • Classes
  • Constructor
  • toString
  • Getter / Setter
  • Extra: String interpolation
Preview 19:32

Seguindo a linha dos novos recursos voltados a orientação a objetos no ES6, vamos tratar de:

  • Herança
  • Sobrescrita de métodos
  • Extra: Property shorthand
Novos recursos ES6 - Herança
06:57

Antes de seguir adiante, vamos aprofundar no git e forçar lint rules mais criteriosas para padronizar melhor nosso código.

Mais sobre git, npm scripts e lint
14:34

Na continuação das features ES6 mais utilizadas em projetos Angular 2, vamos focar em funções, com as novas arrow functions.

Preview 06:13

Nessa aula vamos deixar de declarar variáveis com var, e conhecer let e const. Vamos tratar de questões de escopo de variáveis e this léxico através de arrow e shorthand functions. Em nosso exemplo, criamos e consumimos uma promise. Caso você ainda não trabalhe com promises, confira dois links adicionais.

Novos recursos ES6 - Escopo
19:20

Array destructuring, items spread, filter, Set e Map são novos recursos para ampliar o suporte a coleções de dados.

Novos recursos ES6 - Arrays e Collections
11:57

Uma conversa sobre CommonJS (CJS), Asynchronous Module Definition (AMD), ES6 Modules e ferramentas chamadas package managers, bundlers, loaders e transpilers como Bower, Browserify, SystemJS, Babel, Rollup e Webpack.

Javascript Modules e ferramentas para client side
10:57

Aprenda a exportar e importar através do padrão ES6.

Novos recursos ES6 - Módulos
08:42

Classes, herança, arrow functions, destructuring, spread, let, const, módulos, vamos revisar todos esses tópicos abordados até aqui.

Fixando conceitos ES6
4 questions
+
Webpack
10 Lectures 02:09:43

Aprenda conceitos básicos de configuração do webpack.config.js como entries, outputs, context e o que são loaders e plugins.

Preview 15:05

O webpack.config.js é o arquivo de configuração básico do Webpack. Nesta aula, você aprenderá sua estrutura e conceitos principais como entry, output, loadersfilters.

O arquivo webpack.config.js
05:46

Com o Webpack Dev Server é possível rodar sua aplicação em um servidor web capaz de atualizar o browser automaticamente sempre que seus fontes forem salvos (vejamos aqui o Hot Reload, já o Hot Module Replacement na próxima). Com o Webpack Dev Middleware, é possível chamar o webpack para servir seu front-end a partir de servidores web como o Express.

Webpack Dev Server e Webpack Dev Middleware
13:25

Vamos conhecer como adicionar um plugin para mudar o comportamento padrão do Webpack. Através do HotModuleReplacementPlugin, veja como é possível realizar atualizações incrementais de código sem precisar recarregar toda a página.

HMR - Hot Module Replacement
08:21

Embora já tenhamos adicionado um primeiro plugin (HotModuleReplacementPlugin), discutir um pouco mais esse assunto e instalar o HTML Webpack Plugin. Aprenda também o que são loaders. Vamos trabalhar com um que eu mesmo preparei e publiquei no NPM/GitHub, o HTML ES6 Template Loader.

Webpack 2 Plugins e Loaders
14:50

Vamos mergulhar no Babel para entender a utilidade de um transpiler loader e compilar, ou melhor transpilar, código ES6 para ES5.

Transpiling com Babel
08:51

Aprenda como encadear loaders para manipulação de estilos CSS e auto pre-compilação Sass.

CSS e SASS Loaders
15:47

Vamos trabalhar com url-loader para carregar imagens a partir de CSS url(), HTML (por exemplo tags img) ou JS (através de import). Imagens podem ser salvas em arquivos separados ou mesmo serializadas no bundle. Vamos ainda trabalhar com compressão automática de imagens.

Carregando imagens
13:20

Vejamos como inserir mais de um entry point no mesmo bundle (multi entries) e como dividir o processo em bundles diferentes (code splitting). Além de utilizar o HtmlWebpackPlugin para inserir o bundle correto em cada Html template de entrada e o CommonsChunkPlugin para extrair para bundles separados chunks comuns a mais de um entry point.

Multi entries e Code Splitting
19:10

Confira como o Webpack evita exports desnecessários (tree shaking) e código não inalcançável (DCE - dead code elimination). Vamos ajustar performance budgets realizando minifying e mangling através do UglifyJsPlugin e compressão de assets através do CompressionPlugin

Tree Shaking, Dead Code Elimination e Performance Tuning
15:08
+
TypeScript
11 Lectures 02:17:45

Vamos instalar o compilador TypeScript (tsc) e aprender a tipagem básica do TypeScript, além dos tipos especiais any, void e never, e como lidar melhor com null e undefined.

Preview 15:33

Continuando a prática anterior, vamos discutir ainda inferência de tipos e geração de arquivos .d.ts

Inferência de tipos e declarations
04:56

Nesta aula vamos instalar o Awesome TypeScript Loader para compilar arquivos .ts durante o building no Webpack, definir configurações no tsconfig.json e lintar o código através do tslint.

Aprofundando nas configurações - Parte 1
11:21

Continuando a resolução de problemas encontrados quando o arquivo index.js foi renomeado para index.ts. Vamos conhecer o projeto @types para resolver tipagens de bibliotecas Javascript, utilizar type assertions para informar ao compilador que funções nativas como getElementById, que por padrão são entendidas como se declarassem o retorno HTMLElement | void, vão na prática retornar o elemento que esperamos. Configuramos também o loader e finalmente garantimos o mesmo pre-requisito para que o tree shaking possa ser efetuado.

Aprofundando nas configurações - Parte 2
12:11

Revisitando conceitos acerca de classes, abordamos modificadores de acesso public, private e protected, o modificador readonly e atributos declarados e inicializados no construtor.

Classes e modificadores
16:25

Introdução a generics, porém em uma aula prática onde vamos trabalhar com promises, fetch e expressões regulares. - Giphy public key: dc6zaTOxFJmzC

Generics - Parte 1
19:17

O foco dessa aula é conhecer como criar generics (e o real significado do termo).
Vamos criar uma generic store de messages para colecionar mensagens em Set de Message e persistir em localStorage. Vamos editar o old-messages.js (renomeado old-messages.ts) para carregar essas mensagens salvas em localStorage.

Generics - Parte 2
15:00

De volta ao playground.ts, vamos dissecar o poder de tipagem do TypeScript. Serão três aulas em sequência. Nesta primeira, trataremos de structural typing e interfaces.

Structural Typing e Interfaces
15:31

Continuando a aula anterior (mesma branch), vamos tratar de Union e Intersect types, type aliases, literal types e classes abstratas.

Tipos compostos, types aliases e classes abstratas
11:54

Fechando a sequência de três aulas na mesma branch (TypesTypes), vamos abordar os antigos módulos internos do Typescript, rebatizados de namespaces. Vamos discutir também as razões da sua não recomendação face aos módulos ES6.

Módulos e namespaces
05:39

ES7 Decorators
09:58
+
Projeto básico Angular
21 Lectures 04:29:39

Utilizando o angular-cli para criar um primeiro componente e rodar a aplicação no browser.

Preview 11:46

Após criado um projeto através do angular-cli, vamos conhecer mais alguns arquivos gerados. Vamos ainda ejetar o webpack.config.js e criar os primeiros componentes através do angular-cli.

Estrutura básica e Components
09:45

Vamos resgatar o projeto em https://github.com/Especializa/es6 para Angular (https://github.com/Especializa/angular-simple-messages) e assim garantir a mesma dinâmica dos capítulos anteriores.

Portando pra Angular o projeto anterior
09:20

Vejamos a finalidade dos módulos, como funciona o módulo root e como criar novos módulos usando o angular-cli, além de detalhes sobre a declaração ngModule.

ngModule e bootstraping
17:28

Vamos fixar a criação de módulos criando dois especiais muito comuns em projetos Angular.

A criação desses dois módulos não é obrigatória, mas será interessante para discutirmos mais na frente Lazy Loading e escopo de serviços compartilhados.

Criando Core e Shared Modules
11:15

Vejamos como um componente gerencia sua template, como podemos inserir tags referentes a outros componentes compartilhados e como funciona o data binding, ou seja como passar valores e controlar eventos disparados na template.

Esse é o início do data binding, focado especificamente em property binding e interpolation.

Templating e Data Binding
13:29

Na continuação do assunto Data Binding, vamos abordar Event Binding e Two-Way Binding

Event Binding e Two-Way Binding
16:23

Aproveitando o que aprendemos sobre property binding e event binding, vamos apresentar duas das técnicas mais utilizadas de comunicação entre componentes.

Vamos falar sobre os Decorators @Input e @Output

Comunicação entre components
14:20

O que são Directives, como funciona a diretiva *ngIf e o componente ng-template.

Diretivas e *ngIf
17:41

Vejamos como funciona a diretiva estrutural *ngFor desde sua representação como atributo de ng-template até o uso prático do asterisco. Vamos tratar ainda do ng-container e template input variables.

*ngFor e ng-container
14:12

Vamos trabalhar com outras formas de data bindings, através de property bindings para atributos class e style, e vamos conhecer as diretivas ngClass, ngStyle.

Outros bindings: ngClass e ngStyle
09:42

Vamos conferir as vantagens de se declarar @Input em setters ao invés de diretamente em atributos. Vamos criar também um two-way bind customizado.

Outros bindings: Setter binding e custom two-way binding
10:10

Para finalizar a sequência de três vídeos sobre outros bindings e diretivas, vamos tratar sobre a diretiva de atributo ngSwitch e suas diretivas estruturais *ngSwitchCase e *ngSwitchDefault. Vamos mais uma vez lidar com ng-container.

Outros bindings: ngSwitch
06:26

Vamos abordar métodos que uma vez declarados em nossas diretivas e componentes, são automaticamente chamados em momentos específicos.

Apresentando nessa aula ngOnInit, ngOnDestroy, ngOnChanges e ngDoCheck.

Lifecycle Hooks
10:48

Continuando com os lifecycle hooks, veremos ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit e ngAfterViewChecked. Vamos dissecar o processo de detecção de mudanças e trabalhar com a ChangeDetectionStrategy.OnPush

Change Detection
18:47

O que são os Services e como usufruir da técnica de injeção de dependências. Vamos extrair a regra de negócio para uma classe separada e discutir escopo da instância única (singleton) injetada.

Services e Dependency Injection
18:54

O que são pipes, como usar os built in pipes e como criar pipes customizados.

Pipes
12:38

Introdução ao elaborado sistema de rotas do Angular. Vamos criar nossas primeiras rotas usando a técnica padrão chamada de Eager Loading. Vamos abordar ainda Single Page Apps e criar links sem requisitar o servidor através de routerLink

Routes - Eager Loading Single Page App (SPA)
10:32

Vamos criar novas rotas para conhecer os atributos redirectTo e pathMatch além de wildcards.

Routes - Mais rotas e redirecionamentos
08:58

Vamos implementar nosso exemplo OldMessages e criar botões que onde vamos conseguir detectar qual rota está ativa no momento.

Routes - routerLinkActive
10:00

Vejamos na prática como recuperar parâmetros das rotas e como navegar programaticamente. Vamos aprofundar um pouco na API, tratando de Router e ActivatedRoute.

Routes - Parâmetros
17:05
+
Angular + Nativescript - Breve Introdução
4 Lectures 42:27

Como criar um projeto Nativescript utilizando o comando tns.

Como criar projetos Nativescript
10:03

Executando o comando tns create para criar projetos a partir de outras templates.

Criar projetos a partir de outras templates
07:00

Como rodar projetos Nativescript no simulador iOS e emulador Genymotion para Android. Vemos ainda como preparar seu aparelho Android físico para rodar diretamente nele. Fechamos essa aula apresentando como rodar em modo debug, através do Chrome Dev Tools para Android e do Nativescript Inpector para iOS.

Preview 12:40

Um passeio pelo conteúdo da template blank-ng pra entender o que ela já traz antes de começar a modificar.

Vamos comparar o projeto anterior criado através do angular-cli.

Conteúdo da template
12:44
+
WhatsApp Nativescript Template
5 Lectures 01:12:58

Aqui vamos clonar o repositório da template do nosso aplicativo e conhecer como contar com os diversos temas já disponíveis.

Lidando com temas
12:08

Vamos instalar o plugin nativescript-dev-sass e efetuar os ajustes necessários para trabalhar com o SASS para pré-compilar saída CSS.

Estilizando com Sass
10:49

Primeiro componente que vamos explorar ao longo das aulas, ActionBar é a barra de título superior de um aplicativo mobile. Vamos explorar a adição de componentes à ela, em específico, vamos adicionar uma Label para o título e trabalhar com ActionItems sempre preocupados com os padrões para Android e iOS.

Action Bar
12:23

Vamos importar o módulo platform para explorar dados sobre a plataforma onde roda o aplicativo e conhecer o diretório de conteúdo nativo para cada plataforma App_Resources

Platform & App_Resources
19:26

Imagens e ícones são assets fundamentais em qualquer aplicativo. Vejamos como adicionar ícones disponíveis no iOS e no Android e como trabalhar com icon fonts para maior flexibilidade no trato com ícones.

System Icons & Icon Fonts
18:12
+
A lista de chats do WhatsApp
2 Lectures 00:03
Objetos de negócio Chat e Message
00:01

Storage providers
00:01
About the Instructor
Jose Berardo Cunha
4.4 Average rating
251 Reviews
1,586 Students
3 Courses
Desenvolvedor e professor na Especializa

Sou desenvolvedor desde 1999, certificado pela Sun/Oracle nos níveis Java Programmer (SCJP) e Java Web Component Developer (SCWCD). Certificado pela Zend em PHP 4 e PHP 5.

Sou professor há mais de 15 anos, tendo ministrado cursos de Java, PHP, Javascript, HTML5, Android e Bancos de Dados PostgreSQL, na Especializa Treinamentos, empresa a qual também sou diretor desde 2005.

Atualmente moro em Sydney, Austrália, onde atuo como Software Engineer na Freelancer.com. Empresa com mais de 20 milhões de clientes entre employers e freelancers.