Date post: | 15-Apr-2017 |
Category: |
Software |
Upload: | carlos-azaustre |
View: | 72 times |
Download: | 1 times |
9 y 10 de febrero#T3chFest2017
WorkshopIntegrando Firebase con React.js
Carlos AzaustreChefly
9 y 10 de febrero#T3chFest2017
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
9 y 10 de febrero#T3chFest2017
¿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
9 y 10 de febrero#T3chFest2017
¿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
9 y 10 de febrero#T3chFest2017
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
9 y 10 de febrero#T3chFest2017
create-app-react
9 y 10 de febrero#T3chFest2017
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
9 y 10 de febrero#T3chFest2017
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
9 y 10 de febrero#T3chFest2017
create-app-react
$ yarn add react react-dom
$ npm start
curl -o- -L https://yarnpkg.com/install.sh | bash
y
Recomendado: Instalar Yarn
9 y 10 de febrero#T3chFest2017
Crear un Proyecto en Firebase
9 y 10 de febrero#T3chFest2017
Crear un Proyecto en Firebase
9 y 10 de febrero#T3chFest2017
Crear un Proyecto en Firebase
9 y 10 de febrero#T3chFest2017
Crear un Proyecto en Firebase
9 y 10 de febrero#T3chFest2017
Crear un Proyecto en Firebase
9 y 10 de febrero#T3chFest2017
Configurar Firebase en React.js
$ yarn add firebase
9 y 10 de febrero#T3chFest2017
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
9 y 10 de febrero#T3chFest2017
Añadir autenticación
9 y 10 de febrero#T3chFest2017
Añadir autenticación
9 y 10 de febrero#T3chFest2017
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)
9 y 10 de febrero#T3chFest2017
…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
9 y 10 de febrero#T3chFest2017
…render () {
return (
…<button onClick={this.handleAuth} className="App-btn">
Iniciar sesión con Google
</button>
);
}
}
src/App.js
9 y 10 de febrero#T3chFest2017
Firebase Storage
9 y 10 de febrero#T3chFest2017
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)
9 y 10 de febrero#T3chFest2017
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
9 y 10 de febrero#T3chFest2017
Añadir Firebase Storage
9 y 10 de febrero#T3chFest2017
Añadir Firebase Storage
9 y 10 de febrero#T3chFest2017
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)
9 y 10 de febrero#T3chFest2017
Almacenar en Firebase Database
9 y 10 de febrero#T3chFest2017
Almacenar en Firebase Database
9 y 10 de febrero#T3chFest2017
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
9 y 10 de febrero#T3chFest2017
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
9 y 10 de febrero#T3chFest2017
$ 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
9 y 10 de febrero#T3chFest2017
BONUS: Firebase Hosting
9 y 10 de febrero#T3chFest2017
Gracias!!Código del Taller
github.com/carlosazaustre/react-firebase-t3chfest
React en 10 Minutos: Guía GRATIS en PDF
carlosazaustre.es/guia-react