-
Site de E-Commerce
-
Cliníca Médica
-
Site de Eventos
Marquem DUAS opções
React
Firebase
&
Sem preocupações com server side
Banco de Dados
Authentication
Storage
Primeiros Passos
Login no Firebase com
Conta do Google
Primeiros Passos
Primeiros Passos
Crie um
novo projeto
Primeiros Passos
Preencha
os dados
Aceite os termos
Primeiros Passos
Pronto!
:)
Primeiros Passos
Pegue seus
dados!
Primeiros Passos
var config = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
databaseURL: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
};
firebase.initializeApp(config);
Primeiros Passos
Primeiros Passos
npm install firebase --save
import firebase from 'firebase';
const config = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
databaseURL: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
};
firebase.initializeApp(config);
index.js
Primeiros Passos
Authentication
Authentication
Authentication
Authentication
firebase.auth()
.createUserWithEmailAndPassword(email, password)
.catch( (error) => {
} )
error.code;
error.message;
let code =
let mesg =
import firebase from 'firebase';
...
Authentication
createUser = () => {
const authRef = firebase.auth();
authRef.createUserWithEmailAndPassword(this.state.email, this.state.userPassword).catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorCode);
console.log(errorMessage);
});
}Authentication
firebase.auth()
import firebase from 'firebase';
...
.onAuthStateChanged( (user)=>{
} )
if(user){...}
else {}
Authentication
Objeto user
user.
displayName
email
emailVerified
photoURL
isAnonymous
uid
providerData
Authentication
firebase.auth().onAuthStateChanged((user) => {
if (user) {
let displayName = user.displayName;
let email = user.email;
let emailVerified = user.emailVerified;
let photoURL = user.photoURL;
let isAnonymous = user.isAnonymous;
let uid = user.uid;
let providerData = user.providerData;
} else {
}
});
Database
Database
Database
Database
Database
Grande Árvore JSON
J
S
O
N
ava
cript
bject
otation
Parece um
objetozão JS
Database
{
"congressos": [
{
"name": "Anestesiologia",
"path": "anestesiologia",
"key": "YW5lc3Rlc2lh",
"events": [
{"name": "PLACEHOLDER"}
]
},
{
"name": "Alergia",
"path": "alergia",
"key": "YWxlcmdpYQ==",
"events": [
{"name": "PLACEHOLDER"}
]
} ...Database
Database
...
firebase.database().ref('/')
.on('value', (snap)=>{
})
let database = snap.val();
import firebase from 'firebase';
Database
set
update
Sobrescreve
Atualiza o que
voce colocou
Database
...
firebase.database().ref('/meuCampo')
.set({
campo1: valor1,
campo2: valor2
})
import firebase from 'firebase';
Database
Database
...
firebase.database().ref('/meuCampo')
.set({
campo1: qualquerOutroValo,
campo3: valor3
})
import firebase from 'firebase';
Database
Database
...
firebase.database().ref('/meuCampo')
.update({
campo1: valor1
})
import firebase from 'firebase';
Database
Storage
Storage
Storage
Storage
Storage
let storageRef = firebase.storage().ref(
let upload=storageRef.put(current.img);
upload.on('state_changed',INICIA,PROGRESSO,TERMINA);
CallBacks
Storage
Recuperando arquivos
Get Download URL
<img src="URL" />
Storage
const images = firebase.storage().ref('/imagens')
const image = images.child('imagem1');
image.getDownloadURL().then( (url) => {
this.setState(
{ img: url }
)
);...
<img src = {this.state.img} /> 
Workshop 5 - Firebase
By João Batista
