Ionic 2 e 3 - Apps Híbridos, PWA, Firebase e muito mais
4.6 (567 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.
2,519 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Ionic 2 e 3 - Apps Híbridos, PWA, Firebase e muito mais to your Wishlist.

Add to Wishlist

Ionic 2 e 3 - Apps Híbridos, PWA, Firebase e muito mais

Aprenda Ionic 2/3 através da abordagem de vários assuntos e no final desenvolva um aplicativo de Chat usando o Firebase!
4.6 (567 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.
2,519 students enrolled
Created by Plínio Naves
Last updated 8/2017
Portuguese
Current price: $10 Original price: $110 Discount: 91% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 30 hours on-demand video
  • 1 Article
  • 18 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Criar aplicações completas usando um dos frameworks mais conhecidos do mercado
  • Criar Progressive Web Apps Offline First
  • Criar aplicativos para Android, iOS e Windows Phone
  • Entender os conceitos fundamentais do Ionic
  • Criar menus, components reutilizáveis, serviços, etc
  • Criar aplicações com Ionic/Firebase a partir do Chat mostrado nas aulas
  • Utilizar recursos nativos como SQLite, BarcodeScanner, Camera e gerenciar arquivos
  • Fazer upload de fotos para o servidor
  • Utilizar armazenamento local com IonicStorageModule (IndexedDB, WebSQL, etc)
View Curriculum
Requirements
  • HTML
  • CSS
  • Noções de JavaScript (ES5/ES6)
  • Noções de Angular (2 ou superior)
Description

Ionic 2 é um framework para criação de aplicações híbridas com HTML, CSS (SASS) e JavaScript (TypeScript).

Se tornou muito famoso por conta de sua baixa curva de aprendizado e facilidade na criação de belíssimos aplicativos híbridos com componentes que se assemelham muito a aplicações Android, iOS e Windows Phone nativas. 

Com o framework é possível fazer acesso a recursos nativos do dispositivo tais como Câmera, GPS, Sistema de Arquivos, Armazenamento Local, Notificações, etc, através dos plugins Apache Cordova, tudo de forma muito simples e rápida, pois o Ionic encapsula estes recursos para facilitar ainda mais o desenvolvimento, provendo uma interface para trabalhar com os plugins usando TypeScript, Promises e Observables.

Ionic 2 já traz suporte também para Progressive Web Apps (PWA), um tema que vem ganhando cada vez mais destaque e é tendência já que uma PWA é basicamente uma aplicação web (com cara de aplicação mobile e que roda diretamente no navegador, não precisa ser instalado) e ainda sim pode fazer acesso nativo ao dispositivo.

Observação: o curso ainda não está completo, as aulas estão sendo gravadas e adicionadas progressivamente até a conclusão da grade curricular do curso.

Who is the target audience?
  • Desenvolvedores mobile
  • Desenvolvedores web
Students Who Viewed This Course Also Viewed
Curriculum For This Course
276 Lectures
30:08:27
+
Introdução
5 Lectures 35:36


Considerações sobre o Angular 2
07:41

Documentação e Github oficiais
06:46

Canais de comunicação
03:07
+
Ferramentas
6 Lectures 31:47
Node.js e NPM
07:58

Git
03:09

Ionic e Cordova
03:50


Instalando Visual Studio Code
08:15

Extensões (Icons, Auto Import, Ionic 2 Snippets, Cordova Tools, Angular 2)
07:13
+
Dominando os princípios
15 Lectures 02:50:35
Sobre a seção
00:38

Gerando e servindo uma aplicação
10:56

Estrutura de um projeto Ionic 2
13:04

Introdução aos módulos com ngModule
17:16

Pages vs Components
09:23

Como funciona a navegação
07:51


Navegando a partir da raiz
08:54

Passando parâmetros entre páginas
08:47

Introdução aos Lifecycle Events
06:21

Lifecycle Events na prática
17:52

Configurando aparência das plataformas
18:38

Introdução a estilização do app
13:43

03 formas de estilizar
17:00

Observação sobre os imports
03:06
+
Ambiente Android
6 Lectures 29:09
Sobre a seção
00:59

Instalando Java JDK
05:27

Instalando Android SDK
08:02

Espelhamento de tela com Vysor
04:35

Sugestão de emulador: Genymotion
02:04

Cordova Tools
08:02
+
Ionic CLI
16 Lectures 01:51:50
Introdução ao Ionic CLI
03:55

Start: gerando um novo projeto
05:37

Serve e Lab
04:35

Info
00:52

Platform
04:57

Plugin
07:20

State e Save
11:17

Run e Emulate
11:30

Build
06:15

Ionic View: Login e Upload
07:08

Gerando Pages
05:23

Gerando Components
04:11

Gerando Directives
05:57

Gerando Providers
12:53

Gerando Pipes (Filtros)
14:12

Gerando Tabs
05:48
+
Menus
5 Lectures 01:06:29
Criando um side menu
11:33

Recursos adicionais nos menus
13:36

Trabalhando com múltiplos menus
12:49

MenuController
21:08

CustomHeaderComponent
07:23
+
Components
5 Lectures 54:50
Sobre a seção
02:38

Criando novo projeto
05:33

Buttons
21:38

Cards (parte 1)
08:43

Cards (parte 2)
16:18
+
Criando um chat com Firebase
89 Lectures 09:49:07
Sobre a seção
07:11

Introdução ao Firebase
07:46

Documentação
05:32

Criando novo projeto no Firebase
04:02

Criando novo projeto no Ionic
01:53

Integrando Firebase ao Ionic
05:16

Upgrade para Ionic 3
09:50

Aviso sobre Lazy Loading
02:36

Criando página de Sign Up
14:27

UserService e UserModel
05:49

Cadastrando usuário
05:28


Ativando autenticação por email e password
02:13

AuthService
02:31

Cadastrando usuário para autenticação
04:20

Usando id de autentição no Realtime Database
06:50

Exibindo mensagens para o usuário
07:24

BaseService
09:32

Prevenindo username duplicado
11:01

Criando página de Sign In (Login)
08:19

Criando método Sign In no AuthService
02:07

Logando usuários
06:24

Redirecionar usuário ao criar nova conta
01:40

Usando índices no Firebase
06:50

Método para logout no AuthService
01:01

Usando guardas em páginas autenticadas
13:18

Preparando a HomePage com IonSegment
05:46

BaseComponent
06:02

CustomLoggedHeaderComponent
07:11

Tratando título da página com CapitalizePipe
01:52

Estruturando dados no Realtime Database
21:30

Entendendo a estrutura de dados do nosso ChatApp
12:32

Refatorando o UserModel
03:06

Criando página de chat/conversa
10:34

Usuário atual no UserService
03:16

Omitindo usuário logado da lista
10:55

Título do chat, recipient e sender users
04:36

ChatModel
01:23

ChatService e método create
04:07

Retornando um Chat específico
02:25

Criando novos chats
12:10

Lista de chats no ChatService
04:42

Índices: nome do usuário e timestamp do chat
01:21

Listando chats do usuário na HomePage
08:03

Método get no UserService
02:56

Abrindo chat já existente
05:08

Refatoração no UserModel
00:59

MessageModel
02:37

MessageService e método create e getMessages
07:23

Lista de mensagens da ChatPage
07:09

Enviando e recebendo mensagens em tempo real
09:35

Atualizando chats com última mensagem enviada
10:00

Índice para timestamp das mensagens
02:58

Component para exibir mensagem (parte 1)
10:29


Rolagem automática com scrollToBottom
09:58

Limitando quantidade de mensagens listadas
03:07

Exercício opcional: InfiniteScroll Limit com BehaviorSubject
05:25

Filtrando chats e user com SearchBar
14:45

Criando o menu
01:48

UserInfoComponent
07:54

UserMenuComponent
08:11

Exibindo menu na aplicação
10:26

Botão de toggle do menu
02:17

Criando página de perfil do usuário
06:00

Método edit no UserService
02:25

Editando informações do usuário
12:13

Sobre o Storage do Firebase
03:08

Método para upload da foto no UserService
06:54

Preparando a foto para upload
04:35

Fazendo upload da foto do perfil
06:34

ProgressBarComponent
04:52

Exibindo a barra de progresso
05:30

Dica: Ajuste da foto e detecção de mudanças
03:25

Exibindo fotos dos chats e users na HomePage
03:16

Método para atualizar a foto do Chat sob demand
06:37

Atualizando foto do chat
04:28

Exibindo foto do usuário na ChatPage
10:23

Verificando nosso Firebase Storage
02:38

Ativando Service Worker com SW Toolbox
08:30

Sobre o manifest.json
09:11

Ajustes finais
07:21

Gerando build de produção para web
10:10

Deploy no Firebase Hosting
12:02

Configurando Git com Github
09:02

Deploy no Github Pages
14:07

Alterações adicionais e novo deploy
05:57

Conclusão
09:07

Bônus: foto atual ao criar novo chat
05:08
+
Atualizando ferramentas
5 Lectures 33:02
Sobre a seção
00:33

Atualizando Node.js
05:21

Atualizando Ionic e Cordova
05:32

Atualizando Android SDK Tools
14:57

Resolvendo problemas com Gradle
06:39
+
Ionic Native
47 Lectures 05:01:26
Considerações sobre o Ionic Native
06:12

Código Fonte do projeto com SQLite
00:07

SQLite: Criando projeto e adicionando plataform android
04:42

SQLite: Instalando o plugin
02:31

SQLite: SQLiteHelperService
13:56

SQLite: MovieModel
01:24

SQLite: MovieService
08:45

SQLite: MovieService método getAll
09:02

SQLite: MovieService método create
05:42

SQLite: MovieService método update
03:49

SQLite: MovieService método delete
02:46

SQLite: MovieService método getById
02:10

SQLite: Interface na HomePage
08:32

SQLite: showAlert e showLoading
13:44

SQLite: onSave e present no showAlert
09:44

SQLite: onDelete
05:33

SQLite: ionViewDidLoad
02:26

SQLite: Testando no dispositivo
07:22

SQLite: Recaptulando
15:39

Criando novo projeto
09:31

Dica: problema de cache na aplicação
01:51

Adicionando plataforma android
01:02

BarcodeScanner: instalando e implementando
09:49

BarcodeScanner: template na página
02:20

BarcodeScanner: testando no dispositivo
03:53

Camera: instalando o plugin
05:14

Camera: criando a página
02:13

Camera: implementando os métodos
08:30

Camera: criando o template
05:01

Camera: testando no dispositivo
05:16

File e FilePath: instalando
05:36

File e FilePath: correctPathAndGetFileName
14:00

File e FilePath: testanfo a correção do Path
05:40

File e FilePath: método createNewFilename
02:41

File e FilePath: método saveFile
10:05

File e FilePath: testando tudo no device
05:51

Upload com Node.js: npm init
03:48

Upload com Node.js: http create server
04:54

Upload com Node.js: testando com Postman
04:05

Upload com Node.js: recebendo arquivos com Formidable
08:24

Upload com Node.js: preparando para salvar o arquivo
11:01

Upload com Node.js: visualizando fotos upadas
09:37

Upload com Node.js: deploy no now
13:05

FileTransfer: instalando plugin e preparando interface
03:48

FileTransfer: método onUpload
10:11

FileTransfer: testando no dispositivo
03:30

Conclusão
06:24
3 More Sections
About the Instructor
Plínio Naves
4.6 Average rating
1,085 Reviews
4,412 Students
2 Courses
Desenvolvedor Web e Mobile

Plínio Naves é formado em Sistemas de Informação pela Libertas Faculdades Integradas. Trabalha com diversas tecnologias como Javascript, TypeScript, jQuery, Angular JS, Angular 4, Ionic 3, Node JS, PHP, Java, CSS, LESS, HTML5, MySQL, Oracle DB, Mongo DB, Padrão MVC, Redux, Programação Reativa (Reactive Programming), entre outras. Apaixonado por desenvolvimento web, está sempre antenado as novidades e tecnologias emergentes da área.