Palestra apresentada ao GDG Duque de Caxias, na Universidade Unigranrio

1. Construindo um chat com
Vue.js e Firebase

2. Emanuel Gonçalves
Desenvolvedor Front-End na Intercase
Sistemas de Informação - Unigranrio

3. O que veremos?
Um app de chat construído com Vue.js e Firebase

4. O que é o Vue.js

5. Um framework / lib js para
construção de interfaces web
ricas

6. Framework ou lib?

7. O que é o Firebase?

8. O Firebase é uma Bass (Backend as Service)
Oferece as seguintes funcionalidades:
• Autenticação;
• Banco de Dados NoSQL Realtime;
• Armazenamento de arquivos;
• Hosting;
• Cloud Functions;
• E muito mais...

9. Vantagem
Ter uma infraestrutura pronta para uso

10. Desvantagem
Ser uma plataforma proprietária, com um serviço todo pronto, o que
acaba limitando em algumas situações.

11. Conceitos importantes

12. Eventos
O Firebase trabalha com a ideia de eventos, principalmente quando o
assunto é banco de dados

13. O banco de dados

14. É necessário especificar um caminho da raiz até o nó que você queira
acessar ou ‘ouvir’
Após colocar a referência, é necessário adicionar um listener:
• on (‘value’) - ouve qualquer alteração
• on (‘child-added’) - ouve inserções de dados
• on (‘child-removed’) - ouve remoções de dados
• on (‘child-changed’) - ouve mudanças nos dados
• once (‘value’) - captura o estado atual do nó, apenas uma vez

17. Autenticação usando o Github

18. Armazenando a foto de perfil

19. Pensando o banco de dados

20. Código final
https://github.com/emanuelgsouza/githubchat
http://emanuelgdev.com.br/githubchat/

21. Aonde encontrar mais
conteúdo?
Firebase:
Documentação: https://firebase.google.com/docs/
Canal no Youtube: https://www.youtube.com/user/Firebase
Vue.js
Documentação Oficial: https://vuejs.org/v2/guide/
Blog brasileiro: http://www.vuejs-brasil.com.br/