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

21

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

Page 1: TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
Page 2: TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase

REAL-TIME WEB APPSCOM ANGULARJS E FIREBASE

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

• 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

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

• Instagram feito com AngularJs e Firebase, utilizando autenticação com Facebook

Exemplo

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

• 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?

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

• 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

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

• Backend• ASP.NET e SignalR• NodeJs e Socket.io• Firebase• Entre outros...

• Frontend• AngularJs• Backbone• EmberJs• Entre outros...

Alternativas

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

• 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...

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

• NoSQL mantido pela Google• API integrada• Three-way Binding• Autenticação Integrada• Publicação da Aplicação• Pago

Firebase

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

• Só pode ser utilizado via “firebase.com”• Preço pode ser alto• Material ainda é pobre

Desvantagens do Firebase

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

• Framework MV* mantido pela Google• Possui quase todas as funcionalidades necessárias integradas• Muito material na internet

AngularJs

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

• 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

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

• Criando uma aplicação• Executando um POST• Executando um GET

DEMO: Iniciando com Firebase

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

• Criando a aplicação• Instalando os pacotes• Criando o Index.html

DEMO: Iniciando a aplicação

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

• Modularizando• Definindo as rotas• Configurando a aplicação

DEMO: Iniciando com AngularJs

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

• Autenticando com Facebook• Fazendo logout

DEMO: Autenticação

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

• Exibindo os posts na tela• Postando uma nova imagem• Recebendo notificações do servidor

DEMO: Trabalhando com Firebase

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

• firebase-tools e firebase init• Publicando a aplicação

DEMO: Publicacão

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

OBRIGADO!

Page 20: TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
Page 21: TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase

• E-mail: [email protected]• Site: http://andrebaltieri.net

Treinamentos online ao vivo!Assinem o site

Contato