Construindo um chat com Vuejs

Transcript

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/