• 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} />
Made with Slides.com