Taller práctico en el que vimos como crear desde cero una aplicación web utilizando varias funcionalidades de Firebase (Storage, Auth y Database) e integrándolas con React.js como librería del Frontend

1. 9 y 10 de febrero
#T3chFest2017
Workshop
Integrando Firebase con React.js
Carlos Azaustre
Chefly

2. 9 y 10 de febrero
#T3chFest2017
Sobre mi
Carlos 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

3. 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

4. 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

5. 9 y 10 de febrero
#T3chFest2017
create-app-react
Generador oficial de Facebook para iniciar un
app React rápidamente
Incluye:
● Scaffolding
● Transpiladores y empaquetador (webpack)
● Testing
● Linter
github.com/facebookincubator/create-react-app

6. 9 y 10 de febrero
#T3chFest2017
create-app-react

7. 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
Recomendado: Instalar Yarn

8. 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
Recomendado: Instalar Yarn

9. 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
Recomendado: Instalar Yarn

10. 9 y 10 de febrero
#T3chFest2017
Crear un Proyecto en Firebase

11. 9 y 10 de febrero
#T3chFest2017
Crear un Proyecto en Firebase

12. 9 y 10 de febrero
#T3chFest2017
Crear un Proyecto en Firebase

13. 9 y 10 de febrero
#T3chFest2017
Crear un Proyecto en Firebase

14. 9 y 10 de febrero
#T3chFest2017
Crear un Proyecto en Firebase

15. 9 y 10 de febrero
#T3chFest2017
Configurar Firebase en React.js
$ yarn add firebase

16. 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

17. 9 y 10 de febrero
#T3chFest2017
Añadir autenticación

18. 9 y 10 de febrero
#T3chFest2017
Añadir autenticación

19. 9 y 10 de febrero
#T3chFest2017
Añadir autenticación
Métodos a utilizar
https://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)

20. 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

21. 9 y 10 de febrero
#T3chFest2017
…
render () {
return (
…
<button onClick={this.handleAuth} className="App-btn">
Iniciar sesión con Google
</button>
);
}
}
src/App.js

22. 9 y 10 de febrero
#T3chFest2017
Firebase Storage

23. 9 y 10 de febrero
#T3chFest2017
Añadir Firebase Storage
Métodos a utilizar
https://firebase.google.com/docs/storage/web/create-reference
firebase.storage().ref(URL)
firebase.storage().ref(URL).put(FILE)

24. 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

25. 9 y 10 de febrero
#T3chFest2017
Añadir Firebase Storage

26. 9 y 10 de febrero
#T3chFest2017
Añadir Firebase Storage

27. 9 y 10 de febrero
#T3chFest2017
Almacenar en Firebase Database
Métodos a utilizar
https://firebase.google.com/docs/database/web/start
firebase.database().ref(URL)
firebase.database().ref(URL).push()
.set(FILE)
firebase.database().on(LISTENER)

28. 9 y 10 de febrero
#T3chFest2017
Almacenar en Firebase Database

29. 9 y 10 de febrero
#T3chFest2017
Almacenar en Firebase Database

30. 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

31. 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

32. 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

33. 9 y 10 de febrero
#T3chFest2017
BONUS: Firebase Hosting

34. 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