- ¿Qué es Firebase?
- Crear un Proyecto
- Conexión del proyecto con Firebase
- Terminal
- Autenticación
- Modelo de BD no relacional
- Base de Datos
- Permisos
- Storage
- Hosting
- Firebase Functions
- Enlaces de Interés
Firebase es un servicio de Google que comenzó siendo una base de datos en tiempo real, pewro con el tiempo se han ido agregando nuevas características.
Firebase proporciona servicios que tradicionalmente se hacen desde el backend como la autenticación, la base de datos y el servicio de hosting.
Firebase se divide en 3 partes fundamentales:
- Develop
- Realtime database
- Authentication
- Cloud Messaging
- Storage
- Hosting
- Test Lab
- Crash Reporting
- Grow
- Notifications
- Remote Config
- App Indexing
- Dynamic Links
- Invites
- AdWords
- Earn
- AdMob
Podemos crear un nuevo proyecto desde la (consola de Firebase)[https://console.firebase.google.com].
Debemos de tener presente que como máximo solo podemos tener 6 proyectos a la vez.
Hay dos maneras de hacer esta conexión:
- La Manera manual: a través de la Consola de Firebase.
- Utilizando las herramientas de Firebase: a través de la Terminal.
- Entrar a la consola de Firebase.
- Hacer clic Add an app to get started.
- Se abrirá una ventana con un script.
- Copiar el script y pegarlo en el index.html.
- Ir a Authenticacion -> Sign-in method -> Authorized domains.
- Agregar el dominio en donde estará desplegada la aplicación.
Esta es la manera más adecuada de hacer la conexión ya que provee herramientas extras como el deploy automático.
-
Copiar la librería de firebase en el proyecto.
-
Instalar firebase tools.
$ npm i -g firebase-tools- Loguearse a Firebase con la cuenta de Google
$ firebase login- Ir a la carpeta del proyecto desde consola
- Iniciar el proyecto en Firebase.
$ firebase init- Se mostrarán las opciones de Firebase a usar. Escoger según necesidad.
Opciones de Firebase
- Se pregutará qué proyecto se va asociar a la carpeta. Escoger le proyecto adecuado.
Escoger Proyecto de Firebase
- Se preguntará el nombre del archivo de configuración para la base de datos. Escoger uno y continuar.
- Se preguntará el nombre de la carpeta pública. Esta es la carpeta donde se encontrarán los archivos a desplegar.
- Se preguntará si la aplicación es una SPA. Escoger según corresponda.
Se creará un archivo firebase.json en donde se almacenará las configuraciones:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "./",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}- Finalmente, para ver la página desde un servidor local, usar el comando
firebase serve.
Los proveedores de autenticación nos permite saber quién se conecta e indicar restricciones de inicio de sesión.
Los proveedores de autenticación disponibles en firebase son:
- Correo electrónico / contraseña
- Teléfono
- Play Juegos
- Github
- Anónimo
Para activar algún proveedor de autenticación, se debe de ir a la consola de Firebase -> Authentication -> Sign-in method.
const googleLogin = async () => {
const provider = new firebase.auth.GoogleAuthProvider()
provider.addScope('https://www.googleapis.com/auth/contacts.readonly')
try {
const datosUsuario = await firebase.auth().signInWithPopup(provider)
console.log(datosUsuario)
}
catch(err) {
console.log(err)
}
}- Lo primero que hay que hacer es registrar la app desde https://developers.facebook.com.
- Habilitar Facebook Login.
- Ir a Settings -> Basic.
- Se mostrará el App ID y el App Secret.
- Ir a la consola de Firebase.
- Ir a Authentication -> Sign-in method.
- Habilitar Facebook.
- Se abrirá un popup donde se solicitará el App ID y el App Secret.
- Poner los datos proporcionados en Facebook Developers.
- Copiar el OAuth redirect URI que brinda Firebase.
- Volver a Facebook Developers.
- Ir a Facebook Login -> Settings.
- Pegar el OAuth redirect URI brindado por Firebase en la sección Valid OAuth Redirect URIs.
- Guardar los cambios.
const facebookLogin = async () => {
const provider = new firebase.auth.FacebookAuthProvider()
provider.addScope('public_profile')
try {
const datosUsuario = await firebase.auth().signInWithPopup(provider)
console.log(datosUsuario)
}
catch(err) {
console.log(err)
}
}const githubLogin = async () => {
const provider = new firebase.auth.GithubAuthProvider()
provider.addScope('scope')
try {
const datosUsuario = await firebase.auth().signInWithPopup(provider)
console.log(datosUsuario)
}
catch(err) {
console.log(err)
}
}const logout = () => {
firebase.auth().signOut()
}firebase.auth().onAuthStateChanged((user) => {
console.log(user)
if (user) {
console.log("Usuario logueado")
}
else {
console.log("No hay usuario logueado")
}
})firebase.auth().currentUserPodemos usar el modelo no relacional siempre que consideremos lo siguiente:
- La coherencia de los datos No es crítica (sólo en casos específicos lo es, la mayoría de veces no)
- No hay estándares sobre cómo estructurar la información en el modelo no relacional.
- Hacer Business Intelligence sobre el modelo no relacional es más complicado.
- Se requieren un conocimiento sólido en programación.
- Cada base de datos tiene sus peculiaridades y métodos (Firebase, Mongo, etc).
Recordemos que no existe una herramienta mágica o definitiva cuando se trata de tecnología. Ambos modelos tienen sus ventajas y desventajas. Lo mejor que podemos hacer es aprender a usar ambos para poder usar el adecuado cuando sea necesario.
La base de datos y la autenticación están separadas en Firebase.
Para usar la base de datos de Firebase, escoger Realtime Database.
{
/* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
"rules": {
".read": true,
".write": true
}
}//Referenciar la tabla a modificar
const ref = firebase.database().ref("usuario")
const usuario = {
nombre: "Sergio",
email: "[email protected]",
uid: 123456
}
ref.push(usuario)El método update va a actualizar el dato de los campos que se han enviado. Si el objeto no existe, entonces lo inserta.
//Referenciar la tabla a modificar
const ref = firebase.database().ref("usuario")
const usuario = {
nombre: "Toshi",
email: "[email protected]",
uid: 123456
}
ref.child("-LOzkKghfl72Skc-wlPW").update(obj)El método set borra todo el nodo y lo reemplaza con la información brindada. Si el objeto no existe, entonces lo inserta.
//Referenciar la tabla a modificar
const ref = firebase.database().ref("usuario")
const usuario = {
nombre: "Freddy",
email: "[email protected]",
uid: 321654
}
ref.child("-LOzkKghfl72Skc-wlPW").set(obj)//Referenciar la tabla a modificar
const ref = firebase.database().ref("usuario")
ref.child("-LOzkKghfl72Skc-wlPW").remove()const ref = firebase.database().ref("usuario")
ref.child("glJBvRP9snPeQyTS9VOrrcVvCml1").once('value', (data) => {
console.log(data.val())
})const ref = firebase.database().ref("usuario")
ref.child("glJBvRP9snPeQyTS9VOrrcVvCml1").on('value', (data) => {
console.log(data.val())
})Para actualizar los permisos de la base de datos, se hace desde Database -> Rules.
Nota: Las reglas de seguridad superiores cancelan las inferiores.
{
"rules": {
".read": true,
".write": true
}
}{
"rules": {
".read": false,
".write": false
}
}{
"rules": {
"usuario": {
"$uid": {
".read": "$uid == auth.uid",
".write": "$uid == auth.uid"
}
}
}
}Se puede crear un documento en donde se almanecen los roles.
{
"rules": {
"usuario": {
"$uid": {
".read": true,
".write": "root.child('admin').hasChild(auth.uid)"
}
}
}
}{
"rules": {
"records": {
".indexOn": "tiempo",
".validate": "newData.isString() && newData.val().contains('.')"
}
}
}En este caso, las reglas superiores sobreescriben a las inferiores.
"guitarras": {
".write": "root.child('admin').hasChild(auth.uid)",
".read": "root.child('admin').hasChild(auth.uid)",
"normal": {
".read": true
},
"vip": {
".read": "root.child('vip').hasChild(auth.uid)"
}Storage permite almacenar archivos como imágenes y videos.
const refStorage = firebase.storage().ref()
refStorage.child("invie-classic.png").getDownloadURL().then((url) => {
console.log(url)
})Firebase solo permite la subida de archivos para el frontend.
- Abrir la terminal en la carpeta donde está el proyecto.
firebase deploy
Firebase Functions son código de Javascript que podemos ejecutar del lado del servidor de Firebase.