REAL-TIME WEB APPS
COM ANGULARJS E FIREBASE
• Microsoft MVP – ASP.NET/IIS
• Trabalha com Desenvolvimento Web desde 2003
• Experiência em projetos de grande porte naci...
• Instagram feito com AngularJs e Firebase, utilizando autenticação com
Facebook
Exemplo
• Antes de começar...
• Como funciona uma aplicação convencional?
• Como funcionam as aplicações conectadas?
• Real-time n...
• Sigla para Single Page Application
• Aplicação carregada uma única vez
• Faz requisições apenas dos dados
• Gera o HTML ...
• Backend
• ASP.NET e SignalR
• NodeJs e Socket.io
• Firebase
• Entre outros...
• Frontend
• AngularJs
• Backbone
• EmberJ...
• Todo usuário estará conectado a minha aplicação?
• E ao meu banco de dados?
• Preciso de uma conexão para cada usuário?
...
• NoSQL mantido pela Google
• API integrada
• Three-way Binding
• Autenticação Integrada
• Publicação da Aplicação
• Pago
...
• Só pode ser utilizado via “firebase.com”
• Preço pode ser alto
• Material ainda é pobre
Desvantagens do
Firebase
• Framework MV* mantido pela Google
• Possui quase todas as funcionalidades necessárias integradas
• Muito material na int...
• Em aplicações grandes o bixo pega!!!
• Não tem AMD por padrão
• Renderização dos componentes na tela requer cuidado
• An...
• Criando uma aplicação
• Executando um POST
• Executando um GET
DEMO: Iniciando com Firebase
• Criando a aplicação
• Instalando os pacotes
• Criando o Index.html
DEMO: Iniciando a aplicação
• Modularizando
• Definindo as rotas
• Configurando a aplicação
DEMO: Iniciando com
AngularJs
• Autenticando com Facebook
• Fazendo logout
DEMO: Autenticação
• Exibindo os posts na tela
• Postando uma nova imagem
• Recebendo notificações do servidor
DEMO: Trabalhando com
Firebase
• firebase-tools e firebase init
• Publicando a aplicação
DEMO: Publicacão
OBRIGA
DO!
• E-mail: contato@andrebaltieri.net
• Site: http://andrebaltieri.net
Treinamentos online ao vivo!
Assinem o site
Contato
TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
Próximos SlideShares
Carregando em…5
×

TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase

686 visualizações

Publicada em

Palestra realizada no TDC 2015

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
686
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
18
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase

  1. 1. REAL-TIME WEB APPS COM ANGULARJS E FIREBASE
  2. 2. • Microsoft MVP – ASP.NET/IIS • Trabalha com Desenvolvimento Web desde 2003 • Experiência em projetos de grande porte nacionais e internacionais • Criador do aspnet{cast} – http://bity.ly/aspnetcast • Atualmente trabalha como consultor e ministra treinamentos • http://andrebaltieri.net/ Sobre
  3. 3. • Instagram feito com AngularJs e Firebase, utilizando autenticação com Facebook Exemplo
  4. 4. • Antes de começar... • Como funciona uma aplicação convencional? • Como funcionam as aplicações conectadas? • Real-time no cenário SPA Aplicações Conectadas?
  5. 5. • Sigla para Single Page Application • Aplicação carregada uma única vez • Faz requisições apenas dos dados • Gera o HTML no cliente • Fácil manipulação de DOM • Só HTML, CSS e JavaScript  SPA
  6. 6. • Backend • ASP.NET e SignalR • NodeJs e Socket.io • Firebase • Entre outros... • Frontend • AngularJs • Backbone • EmberJs • Entre outros... Alternativas
  7. 7. • Todo usuário estará conectado a minha aplicação? • E ao meu banco de dados? • Preciso de uma conexão para cada usuário? • Posso ter conteúdo Real Time sem SPA? Então...
  8. 8. • NoSQL mantido pela Google • API integrada • Three-way Binding • Autenticação Integrada • Publicação da Aplicação • Pago Firebase
  9. 9. • Só pode ser utilizado via “firebase.com” • Preço pode ser alto • Material ainda é pobre Desvantagens do Firebase
  10. 10. • Framework MV* mantido pela Google • Possui quase todas as funcionalidades necessárias integradas • Muito material na internet AngularJs
  11. 11. • Em aplicações grandes o bixo pega!!! • Não tem AMD por padrão • Renderização dos componentes na tela requer cuidado • AngularJs 2 será bem diferente! Desvantagens do AngularJs
  12. 12. • Criando uma aplicação • Executando um POST • Executando um GET DEMO: Iniciando com Firebase
  13. 13. • Criando a aplicação • Instalando os pacotes • Criando o Index.html DEMO: Iniciando a aplicação
  14. 14. • Modularizando • Definindo as rotas • Configurando a aplicação DEMO: Iniciando com AngularJs
  15. 15. • Autenticando com Facebook • Fazendo logout DEMO: Autenticação
  16. 16. • Exibindo os posts na tela • Postando uma nova imagem • Recebendo notificações do servidor DEMO: Trabalhando com Firebase
  17. 17. • firebase-tools e firebase init • Publicando a aplicação DEMO: Publicacão
  18. 18. OBRIGA DO!
  19. 19. • E-mail: contato@andrebaltieri.net • Site: http://andrebaltieri.net Treinamentos online ao vivo! Assinem o site Contato

×