React e Firebase: Criando uma aplicação de chat em tempo real
•
2 gostaram•790 visualizações
O documento descreve como criar uma aplicação de chat em tempo real usando React e Firebase. Ele explica como usar o React para construir componentes, gerenciar estado e fluxo de dados. Também mostra como o Firebase fornece armazenamento em nuvem, autenticação e hospedagem para a aplicação.
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a React e Firebase: Criando uma aplicação de chat em tempo real
Semelhante a React e Firebase: Criando uma aplicação de chat em tempo real (20)
Mais de Alvaro Viebrantz
Mais de Alvaro Viebrantz (20)
React e Firebase: Criando uma aplicação de chat em tempo real
- 1. Alvaro Viebrantz aviebrantz.com.br @alvaroviebrantz FROM ZERO TO APP Criando uma aplicação com React e Firebase
- 2. ✓Envio de texto e imagens ✓One way data flow com React ✓Login social ✓Upload de arquivos com Cloud Storage ✓Hosting no Firebase ✓Machine Learning !!! O que vamos fazer Chat em tempo real https://github.com/alvarowolfx/friendlychat-react http://friendlychat-react-f2b83.firebaseapp.com/
- 3. 3 O que é o React ? Direto ao que interessa
- 4. Just the V of MVC 4 React é apenas uma biblioteca Criado pelo Facebook em 2013
- 5. 5 D ATA D O M f(data) = View One-way Data Flow React Visão funcional
- 6. 6 Simple and Declarative A Polêmica - JSX O que esse HTML tá fazendo no meio do meu Javascript
- 7. 7 JSX é um “Syntactic Sugar” No final tudo vira Javascript
- 8. 8 Tudo é um componente Com API simples de se entender
- 9. 9 Tudo é um componente
- 10. 10 S TAT E State vs Props Mutable vs Immutable What you Own vs What you Won P R O P S Fluxo de dados nos componentes Um pouco do funcionamento interno
- 11. • componentWillMount • render • componentDidMount •shouldUpdateComponent •componentWillUpdate •render •componentDidUpdate • componentWillUnmount M O U N T U P D AT E U N M O U N T 11 Ciclo de Vida dos componentes Um pouco do funcionamento interno
- 12. 12 O React deu uma empurrada na web Sempre vivendo na risca da lei
- 13. 13 O React deu uma empurrada na web Muitos conceitos considerados modernos hoje em dia
- 14. 14 Traga sua própria arquitetura Surgiram arquiteturas bastante avançadas por conta disso
- 15. 15 Create React App Hoje é mais fácil do que nunca iniciar com React • Apenas crie o projeto e manda bala • Babel, Webpack, ESLint, Live Reload, Minify e Uglify • Apenas uma dependência • Sem configuração necessária • Você pode ejetar quando quiser https://github.com/facebookincubator/create-react-app
- 16. 16 Let’s code P1 May the demo gods be with us
- 17. Develop Grow
- 19. Develop Grow
- 20. • Cloud-hosted NoSQL database • Synchronization & conflict resolution • Access directly from your app
- 22. • Email & password • Google, Facebook, Twitter, and GitHub sign-in • Existing auth systems • Phone number
- 23. Storage
- 24. Cloud Messaging
- 25. Hosting
- 26. 26
- 27. 27
- 28. 28 Let’s code P2 May the demo gods be with us
- 29. Functions
- 30. Adicionando Machine Learning à nossa aplicação Não precisa ser um expert em Machine Learning
- 31. Cloud Natural Language Cloud Speech Cloud Vision Cloud Machine Learning APIs Veja, Ouça e Entenda o mundo Cloud Video Intelligence Cloud Translation 31
- 32. Faces Faces, marcações faciais, emoções OCR Ler e extrair texto, com suporte para > 10 linguagens Classificação Detectar entidades de mobília a meios de transporte Logos Identificar logos de produtos Marcos e Propriedades da imagem Busca Segura Detectar conteúdo explícito - adulto, violência, médicas e fraudes Cloud Vision API Reconhecimento de imagens 32
- 33. Extrair frases, identificar partes da fala e criar uma árvore de dependências para cada sentença. Análise de Sintaxe Identificar entidades e classificá-las por tipos, como pessoa, organização local, evento, produto e media. Reconhecimento de entidades Entender o sentimento dominante do bloco de texto. Análise de sentimentos 33 Cloud Natural Language API Reconhecimento de linguagem natural
- 34. 34 Let’s code P3 May the demo gods be with us