TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
Transferir como PPTX, PDF2 gostaram924 visualizações
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 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