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
Material para la sesión en la Universidad de Zaragoza: https://diis.unizar.es/noticias/seminario-del-grado-de-informatica-mirando-alfresco-desde-minecraft
Curso de Responsive Design impartido en Platzi, plataforma de educación online efectiva:
Suscríbete en https://platzi.com/cursos/responsive-design/
Entiende los patrones de diseño adaptativo
Utiliza Media Queries para hacer sitios responsivos
Aprende la diferencia y cómo usar los estándares Graceful Degradation y Progressive Enhacement
Maqueta pensando en Mobile First
Material para la sesión en la Universidad de Zaragoza: https://diis.unizar.es/noticias/seminario-del-grado-de-informatica-mirando-alfresco-desde-minecraft
Curso de Responsive Design impartido en Platzi, plataforma de educación online efectiva:
Suscríbete en https://platzi.com/cursos/responsive-design/
Entiende los patrones de diseño adaptativo
Utiliza Media Queries para hacer sitios responsivos
Aprende la diferencia y cómo usar los estándares Graceful Degradation y Progressive Enhacement
Maqueta pensando en Mobile First
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS...Ivan Petrlik
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS_REMOTAMENTE_A_TRAVES_DE_UNA_CONEXION REMOTA CON PHP Y MYSQL ANDROID ING IVAN PETRLIK AZABACHE
Almacenar Datos En Firebase con AndroidStudioANGELLEON93
Concepto Firebase , Caracteristicas, Ventajas y Desventajas , Crear cuenta en Firebase ,Crear un proyecto en Firebase , ...
#AndroidStudio
#Firebase
#Reverse_Engineering
A short introduction to Progressive Web Apps shown in .NET Conf UY 2017. The idea was to understand what is a PWA, what is needed to implement one and show some examples.
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS...Ivan Petrlik
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS_REMOTAMENTE_A_TRAVES_DE_UNA_CONEXION REMOTA CON PHP Y MYSQL ANDROID ING IVAN PETRLIK AZABACHE
Almacenar Datos En Firebase con AndroidStudioANGELLEON93
Concepto Firebase , Caracteristicas, Ventajas y Desventajas , Crear cuenta en Firebase ,Crear un proyecto en Firebase , ...
#AndroidStudio
#Firebase
#Reverse_Engineering
A short introduction to Progressive Web Apps shown in .NET Conf UY 2017. The idea was to understand what is a PWA, what is needed to implement one and show some examples.
Prototipado de Aplicaciones web con Firebase #CampusGiversCarlos Azaustre
Charla en Campus Madrid, dentro del programa Campus Givers donde explico las principales alternativas y herramientas disponibles para desarrollar aplicaciones web con Firebase, Polymer y React y lanzar cuanto antes tu proyecto al mercado.
Angular 2 is Coming - GDG DevFest Cordoba 2015Carlos Azaustre
Charla y pequeño taller sobre Angular 2 para ver las principales novedades que trae la nueva versión del framework y como utilizarlo empleando tecnologías como ES6, ES7 Decorators, Babel y Browserify
Taller práctico sobre SEO y creación de anuncios en Facebook Ads para #CampusForMoms en Google Campus Madrid.
Qué le gusta a Google,
Cómo conseguir posicionarse
Cómo elegir palabras claves adecuadas
Optimizar tu página para SEO OnPage y OffPage
Creación de audiencias en Facebook Ads y ReMarketing
Un vistazo al ecosistema JavaScript, sus frameworks, librerías, herramientas, etc...
Presentación utilizada en la charla "Game of Framework" dentro de la CodeWeek organizada por GDG Cáceres (España)
Keynote utilizada en la presentación de Chefly como invitados en la asignatura de Administración de Empresas para la Escuela Técnica Superior de Ingenieros Industriales de la Universidad Politécnica de Madrid
#PlatziConf - El camino para ser un Pro en JavaScriptCarlos Azaustre
Charla en la #PlatziConf sobre Desarrollo Web actual por Platzi, (antes conocida como Mejorando.la).
Por qué elegí aprender JavaScript y que pasos seguí y sigo para hacerlo.
Presentación utilizada en las Jornadas de sensibilicización con el emprendimiento organizadas por la Fundación de Antiguos Alumnos de la Universidad Carlos III de Madrid y el Vivero de Empresas de Leganés Tecnológico.
Hablamos de nuestra experiencia emprendedora como autoeditores de un cómic, publicado gratis en internet y posteriormente en formato papel consiguiendo 30.000 ejemplares vendidos en España
Si bien los hospitales conjuntan a profesionales de salud que atienden a la población, existe un equipo de organización, coordinación y administración que permite que los cuidados clínicos se otorguen de manera constante y sin obstáculos.
Mario García Baltazar, director del área de Tecnología (TI) del Hospital Victoria La Salle, relató la manera en la que el departamento que él lidera, apoyado en Cirrus y Estela, brinda servicio a los clientes internos de la institución e impulsa una experiencia positiva en el paciente.
Conoce el Hospital Victoria La Salle
Ubicado en Ciudad Victoria, Tamaulipas, México
Inició operaciones en el 2016
Forma parte del Consorcio Mexicanos de Hospitales
Hospital de segundo nivel
21 habitaciones para estancia
31 camas censables
13 camillas
2 quirófanos
+174 integrantes en su plantilla
+120 equipos médicos de alta tecnología
+900 pacientes atendidos
Servicios de +20 especialidades
Módulos utilizados de Cirrus
HIS
EHR
ERP
Estela - Business Intelligence
Escaneo y eliminación de malware en el equiponicromante2000
El malware tiene muchas caras, y es que los programas maliciosos se reproducen en los ordenadores de diferentes formas. Ya se trate de virus, de programas espía o de troyanos, la presencia de software malicioso en los sistemas informáticos siempre debería evitarse. Aquí te muestro como trabaja un anti malware a la hora de analizar tu equipo
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)
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
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