Workshop React + Firebase | T3chFest 2017

9 y 10 de febrero#T3chFest2017

WorkshopIntegrando Firebase con React.js

Carlos AzaustreChefly


Sobre miCarlos Azaustre@carlosazaustre

Ingeniero en Telemática / UC3M

> Desarrollador Web (JS, React, Node)> CTO y Cofundador de Chefly> Tech Blogger y Formador en carlosazaustre.es> JavaScript Nerd

https://chefly.co

https://carlosazaustre.es/blog


¿Qué es Firebase?Infraestructura y conjunto de herramientas para ayudarnos a construir aplicaciones web y móviles

● Base de datos realtime● Autenticación● Cloud Messaging● Storage● Hosting● etc…

firebase.google.com


¿Qué es React.js?Librería JavaScript creada por Facebook para el desarrollo de interfaces.

Permite modularizar el desarrollo en componentes.

Ecosistema y comunidad muy amplios.

facebook.github.io/react


create-app-reactGenerador oficial de Facebook para iniciar un app React rápidamenteIncluye:

● Scaffolding● Transpiladores y empaquetador (webpack)● Testing● Linter

github.com/facebookincubator/create-react-app


create-app-react


create-app-react

$ npm install -g create-app-react$ create-app-react react-firebase-t3chfest...$ cd react-firebase-t3chfest

curl -o- -L https://yarnpkg.com/install.sh | bash

y

Recomendado: Instalar Yarn


create-app-react

$ npm install -g create-app-react$ create-app-react react-firebase-t3chfest...$ cd react-firebase-t3chfest


y



create-app-react

$ yarn add react react-dom

$ npm start


y



Crear un Proyecto en Firebase










Configurar Firebase en React.js

$ yarn add firebase


import React from 'react';

import ReactDOM from 'react-dom';

import firebase from 'firebase';

import App from './App';

import './index.css';

firebase.initializeApp({

apiKey: "AIzaSyA2r-MouLjwaR7KUyMRi8K5OCED1bE7BAw",

authDomain: "t3chfest-b3577.firebaseapp.com",

databaseURL: "https://t3chfest-b3577.firebaseio.com",

storageBucket: "t3chfest-b3577.appspot.com",

messagingSenderId: "714780734095"

});

ReactDOM.render(

<App />,

document.getElementById('root')

);

src/index.js


Añadir autenticación


Añadir autenticación


Añadir autenticaciónMétodos a utilizarhttps://firebase.google.com/docs/auth/web/manage-users

firebase.auth().onAuthStateChanged()

firebase.auth().signOut()

https://firebase.google.com/docs/auth/web/google-signin

firebase.auth.GoogleAuthProvider

firebase.auth().signInWithPopup(provider)

https://firebase.google.com/docs/auth/web/manage-users

https://firebase.google.com/docs/auth/web/manage-users




…import firebase from 'firebase';

class App extends Component {

constructor () {

super();

this.state = { user: null };

this.handleAuth = this.handleAuth.bind(this);

}

componentWillMount () {

firebase.auth().onAuthStateChanged(user => {

this.setState({ user });

});

}

handleAuth () {

const provider = new Firebase.auth.GoogleProvider();

firebase.auth().signInWithPopup(provider)

.then(result => console.log(`${result.user.email} ha iniciado sesión`))

.catch(error => console.log(`Error ${error.code}: ${error.message}`));

}

...

}

src/App.js


…render () {

return (

…<button onClick={this.handleAuth} className="App-btn">

Iniciar sesión con Google

</button>

);

}

}

src/App.js


Firebase Storage


Añadir Firebase StorageMétodos a utilizarhttps://firebase.google.com/docs/storage/web/create-reference

firebase.storage().ref(URL)

firebase.storage().ref(URL).put(FILE)

https://firebase.google.com/docs/storage/web/create-reference

https://firebase.google.com/docs/storage/web/create-reference


import React, { Component } from 'react';import firebase from 'firebase';

class FileUpload extends Component {

constructor () {

super();

this.state = {

uploadValue: 0

};

this.handleOnChange =

this.handleOnChange.bind(this);

}

handleOnChange (event) {

const file = event.target.files[0];

const storageRef =

firebase.storage().ref(`fotos/${file.name}`);

const taks = storageRef.put(file);

}

render () {

return (

<div>

<progress value={this.state.uploadValue} max='100'>

{this.state.uploadValue} %

</progress>

<br/>

<input type="file" onChange={this.handleOnChange}

/>

<br/>

<img width="320" src={this.state.picture} alt=""/>

</div>

)

}

}

export default FileUpload;

src/FileUpload.js


Añadir Firebase Storage


Añadir Firebase Storage


Almacenar en Firebase DatabaseMétodos a utilizarhttps://firebase.google.com/docs/database/web/start

firebase.database().ref(URL)

firebase.database().ref(URL).push().set(FILE)

firebase.database().on(LISTENER)

https://firebase.google.com/docs/database/web/start

https://firebase.google.com/docs/database/web/start


Almacenar en Firebase Database


Almacenar en Firebase Database


task.on('state_changed', snapshot => {

let percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;

this.setState({

uploadValue: percentage

})

}, error => {

// Ocurre un error

console.error(error.message);

}, () => {

const pictureUpload = task.snapshot.downloadURL;

const dbRef = firebase.database().ref('pictures');

const newPicture = dbRef.push();

newPicture.set(pictureUpload);

});

}

src/App.js


componentWillMount () {

firebase.auth().onAuthStateChanged(user => {

this.setState({ user });

});

firebase.database().ref('pictures').on('child_added', snapshot => {

this.setState({

pictures: this.state.pictures.concat(snapshot.val())

});

});

}

src/App.js


$ npm run build // Optimización para producción

$ npm install -g firebase-tools

$ firebase login

$ firebase init

> Hosting: Configure and Deploy Firebase Hosting sites

> ? What Firebase project do you want to associate as default

> ? Public directory (build)

> ? Configure as SPA

BONUS: Firebase Hosting

Crea los ficheros .firebaserc y firebase.json con información de configuración de nuestro proyecto

$ firebase deploy


BONUS: Firebase Hosting


Gracias!!Código del Taller

github.com/carlosazaustre/react-firebase-t3chfest

React en 10 Minutos: Guía GRATIS en PDF

carlosazaustre.es/guia-react

http://github.com/carlosazaustre/react-firebase-t3chfest

http://github.com/carlosazaustre/react-firebase-t3chfest

https://carlosazaustre.es/guia-react

https://carlosazaustre.es/guia-react

Software

Workshop React + Firebase | T3chFest 2017