Workshop React + Firebase | T3chFest 2017
2 recomendaciones390 vistas
El taller #t3chfest2017 sobre la integración de Firebase con React.js, impartido por Carlos Azaustre, cubre conceptos clave de ambas tecnologías, como la autenticación y el almacenamiento de datos. Se presenta un enfoque práctico para crear aplicaciones web utilizando Firebase como backend y React para la interfaz. Además, se incluye la configuración y despliegue de un proyecto en Firebase, junto con ejemplos de código y recursos adicionales.
![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](https://image.slidesharecdn.com/t3chfest-workshop-react-firebase-170210095401/85/Workshop-React-Firebase-T3chFest-2017-24-320.jpg)
Workshop React + Firebase | T3chFest 2017
- 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