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

Ementa do Curso

• Introdução
  • Review do curso
  • O que é o Ionic?
  • Considerações sobre o Angular 2
  • Documentação e Github oficiais
  • Canais de comunicação
• Ferramentas
  • Node.js e NPM
  • Git
  • Ionic e Cordova
  • Removendo warning do Cordova
  • Instalando Visual Studio Code
  • Extensões (Icons, Auto Import, Ionic 2 Snippets, Cordova Tools, Angular 2)
• Dominando os princípios
  • Sobre a seção
  • Gerando e servindo uma aplicação
  • Estrutura de um projeto Ionic 2
  • Introdução aos módulos com ngModule
  • Pages vs Components
  • Como funciona a navegação
  • Empilhando e desempilhando páginas
  • Navegando a partir da raiz
  • Passando parâmetros entre páginas
  • Introdução aos Lifecycle Events
  • Lifecycle Events na prática
  • Configurando aparência das plataformas
  • Introdução a estilização do app
  • 03 formas de estilizar
  • Observação sobre os imports
• Ambiente Android
  • Sobre a seção
  • Instalando Java JDK
  • Instalando Android SDK
  • Espelhamento de tela com Vysor
  • Sugestão de emulador: Genymotion
  • Cordova Tools
• Ionic CLI
  • Introdução ao Ionic CLI
  • Start: gerando um novo projeto
  • Serve e Lab
  • Info
  • Platform
  • Plugin
  • State e Save
  • Run e Emulate
  • Build
  • Ionic View: Login e Upload
  • Gerando Pages
  • Gerando Components
  • Gerando Directives
  • Gerando Providers
  • Gerando Pipes (Filtros)
  • Gerando Tabs
• Menus
  • Criando um side menu
  • Recursos adicionais nos menus
  • Trabalhando com múltiplos menus
  • MenuController
  • CustomHeaderComponent
• Components
  • Sobre a seção
  • Criando novo projeto
  • Buttons
  • Cards (parte 1)
  • Cards (parte 2)
• Criando um chat com Firebase
  • Sobre a seção
  • Introdução ao Firebase
  • Documentação
  • Criando novo projeto no Firebase
  • Criando novo projeto no Ionic
  • Integrando Firebase ao Ionic
  • Upgrade para Ionic 3
  • Aviso sobre Lazy Loading
  • Criando página de Sign Up
  • UserService e UserModel
  • Cadastrando usuário
  • Listando usuários cadastrados
  • Ativando autenticação por email e password
  • AuthService
  • Cadastrando usuário para autenticação
  • Usando id de autentição no Realtime Database
  • Exibindo mensagens para o usuário
  • BaseService
  • Prevenindo username duplicado
  • Criando página de Sign In (Login)
  • Criando método Sign In no AuthService
  • Logando usuários
  • Redirecionar usuário ao criar nova conta
  • Usando índices no Firebase
  • Método para logout no AuthService
  • Usando guardas em páginas autenticadas
  • Preparando a HomePage com IonSegment
  • BaseComponent
  • CustomLoggedHeaderComponent
  • Tratando título da página com CapitalizePipe
  • Estruturando dados no Realtime Database
  • Entendendo a estrutura de dados do nosso ChatApp
  • Refatorando o UserModel
  • Criando página de chat/conversa
  • Usuário atual no UserService
  • Omitindo usuário logado da lista
  • Título do chat, recipient e sender users
  • ChatModel
  • ChatService e método create
  • Retornando um Chat específico
  • Criando novos chats
  • Lista de chats no ChatService
  • Índices: nome do usuário e timestamp do chat
  • Listando chats do usuário na HomePage
  • Método get no UserService
  • Abrindo chat já existente
  • Refatoração no UserModel
  • MessageModel
  • MessageService e método create e getMessages
  • Lista de mensagens da ChatPage
  • Enviando e recebendo mensagens em tempo real
  • Atualizando chats com última mensagem enviada
  • Índice para timestamp das mensagens
  • Component para exibir mensagem (parte 1)
  • Component para exibir mensagem (parte 2)
  • Rolagem automática com scrollToBottom
  • Limitando quantidade de mensagens listadas
  • Exercício opcional: InfiniteScroll Limit com BehaviorSubject
  • Filtrando chats e user com SearchBar
  • Criando o menu
  • UserInfoComponent
  • UserMenuComponent
  • Exibindo menu na aplicação
  • Botão de toggle do menu
  • Criando página de perfil do usuário
  • Método edit no UserService
  • Editando informações do usuário
  • Sobre o Storage do Firebase
  • Método para upload da foto no UserService
  • Preparando a foto para upload
  • Fazendo upload da foto do perfil
  • ProgressBarComponent
  • Exibindo a barra de progresso
  • Dica: Ajuste da foto e detecção de mudanças
  • Exibindo fotos dos chats e users na HomePage
  • Método para atualizar a foto do Chat sob demand
  • Atualizando foto do chat
  • Exibindo foto do usuário na ChatPage
  • Verificando nosso Firebase Storage
  • Ativando Service Worker com SW Toolbox
  • Sobre o manifest.json
  • Ajustes finais
  • Gerando build de produção para web
  • Deploy no Firebase Hosting
  • Configurando Git com Github
  • Deploy no Github Pages
  • Alterações adicionais e novo deploy
  • Conclusão
  • Bônus: foto atual ao criar novo chat

Plínio Naves

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 e Mongo DB.

Cursos Relacionados

• Comentários
• Avaliações

Qual a sua avaliação para este hangout?

Enviar

AVALIAÇÕES

Ninguém avaliou este curso ainda. Seja o primeiro...