O documento apresenta uma introdução sobre aplicações web em tempo real utilizando AngularJS e Firebase. Apresenta exemplos de uso de autenticação com Facebook e manipulação de dados no Firebase. Demonstra o desenvolvimento de uma aplicação com autenticação, postagem e notificações em tempo real.

2. REAL-TIME WEB APPS
COM ANGULARJS E FIREBASE

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

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

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

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

7. • Backend
• ASP.NET e SignalR
• NodeJs e Socket.io
• Firebase
• Entre outros...
• Frontend
• AngularJs
• Backbone
• EmberJs
• Entre outros...
Alternativas

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

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

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

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

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

13. • Criando uma aplicação
• Executando um POST
• Executando um GET
DEMO: Iniciando com Firebase

14. • Criando a aplicação
• Instalando os pacotes
• Criando o Index.html
DEMO: Iniciando a aplicação

15. • Modularizando
• Definindo as rotas
• Configurando a aplicação
DEMO: Iniciando com
AngularJs

16. • Autenticando com Facebook
• Fazendo logout
DEMO: Autenticação

17. • Exibindo os posts na tela
• Postando uma nova imagem
• Recebendo notificações do servidor
DEMO: Trabalhando com
Firebase

18. • firebase-tools e firebase init
• Publicando a aplicação
DEMO: Publicacão

19. OBRIGA
DO!

21. • E-mail: contato@andrebaltieri.net
• Site: http://andrebaltieri.net
Treinamentos online ao vivo!
Assinem o site
Contato