Baixado 20 vezes
Carregado porAndre Baltieri
TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
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.
TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
- 2. REAL-TIME WEB APPS COMANGULARJS 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 feitocom AngularJs e Firebase, utilizando autenticação com Facebook Exemplo
- 5. • Antes decomeçar... • Como funciona uma aplicação convencional? • Como funcionam as aplicações conectadas? • Real-time no cenário SPA Aplicações Conectadas?
- 6. • Sigla paraSingle 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.NETe SignalR • NodeJs e Socket.io • Firebase • Entre outros... • Frontend • AngularJs • Backbone • EmberJs • Entre outros... Alternativas
- 8. • Todo usuárioestará 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 mantidopela Google • API integrada • Three-way Binding • Autenticação Integrada • Publicação da Aplicação • Pago Firebase
- 10. • Só podeser 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çõesgrandes 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 umaaplicação • Executando um POST • Executando um GET DEMO: Iniciando com Firebase
- 14. • Criando aaplicação • Instalando os pacotes • Criando o Index.html DEMO: Iniciando a aplicação
- 15. • Modularizando • Definindoas rotas • Configurando a aplicação DEMO: Iniciando com AngularJs
- 16. • Autenticando comFacebook • Fazendo logout DEMO: Autenticação
- 17. • Exibindo osposts na tela • Postando uma nova imagem • Recebendo notificações do servidor DEMO: Trabalhando com Firebase
- 18. • firebase-tools efirebase init • Publicando a aplicação DEMO: Publicacão
- 19.
- 21. • E-mail: contato@andrebaltieri.net •Site: http://andrebaltieri.net Treinamentos online ao vivo! Assinem o site Contato