Alvaro Viebrantz
aviebrantz.com.br
@alvaroviebrantz
FROM ZERO TO APP
Criando uma aplicação com
React e Firebase
✓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
O que é o React ?
Direto ao que interessa
Just the V of MVC
4
React é apenas uma biblioteca
Criado pelo Facebook em 2013
5
D ATA D O M
f(data) = View
One-way Data Flow
React
Visão funcional
6
Simple and Declarative
A Polêmica - JSX
O que esse HTML tá fazendo no meio do meu Javascript
7
JSX é um “Syntactic Sugar”
No final tudo vira Javascript
8
Tudo é um componente
Com API simples de se entender
9
Tudo é um componente
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
• 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
O React deu uma empurrada na web
Sempre vivendo na risca da lei
13
O React deu uma empurrada na web
Muitos conceitos considerados modernos hoje em dia
14
Traga sua própria arquitetura
Surgiram arquiteturas bastante avançadas por conta disso
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
Let’s code P1
May the demo gods be with us
Develop Grow
Desenvolvendo seu app
Develop Grow
• Cloud-hosted NoSQL database
• Synchronization & conflict
resolution
• Access directly from your app
• Email & password
• Google, Facebook, Twitter, and
GitHub sign-in
• Existing auth systems
• Phone number
Storage
Cloud Messaging
Hosting
26
27
28
Let’s code P2
May the demo gods be with us
Functions
Adicionando Machine Learning à nossa aplicação
Não precisa ser um expert em Machine Learning
Cloud 

Natural Language
Cloud 

Speech
Cloud 

Vision
Cloud Machine Learning APIs
Veja, Ouça e Entenda o mundo
Cloud 

Video Intelligence
Cloud 

Translation
31
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
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
Let’s code P3
May the demo gods be with us
OBRIGADO !!!
35
Alvaro Viebrantz
aviebrantz.com.br
@alvaroviebrantz
https://github.com/alvarowolfx/friendlychat-react
http://friendlychat-react-f2b83.firebaseapp.com/

From Zero to App - Usando React e Firebase