Transferir como PDF, PPTX
Carregado porAlvaro Viebrantz
From Zero to App - Usando React e Firebase
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.
From Zero to App - Usando React e Firebase
- 1. Alvaro Viebrantz aviebrantz.com.br @alvaroviebrantz FROM ZEROTO APP Criando uma aplicação com React e Firebase
- 2. ✓Envio de textoe 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 Vof MVC 4 React é apenas uma biblioteca Criado pelo Facebook em 2013
- 5. 5 D ATA DO M f(data) = View One-way Data Flow React Visão funcional
- 6. 6 Simple and Declarative APolê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 é umcomponente Com API simples de se entender
- 9. 9 Tudo é umcomponente
- 10. 10 S TAT E Statevs 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 deuuma empurrada na web Sempre vivendo na risca da lei
- 13. 13 O React deuuma empurrada na web Muitos conceitos considerados modernos hoje em dia
- 14. 14 Traga sua própriaarquitetura 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 Maythe demo gods be with us
- 17.
- 18.
- 19.
- 20. • Cloud-hosted NoSQLdatabase • Synchronization & conflict resolution • Access directly from your app
- 22. • Email &password • Google, Facebook, Twitter, and GitHub sign-in • Existing auth systems • Phone number
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. 28 Let’s code P2 Maythe demo gods be with us
- 29.
- 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, identificarpartes 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 Maythe demo gods be with us
- 35.