ccc

Mostrando entradas con la etiqueta Firebase. Mostrar todas las entradas
Mostrando entradas con la etiqueta Firebase. Mostrar todas las entradas

Instalar Firebase en tu proyecto angular

Desde la consola:
npm install firebase
Si diese error al instalar probar con:
npm install --save firebase

Si da error de caché sucia:
npm install --save firebase --allow-dirty --force

Abrir el bloc de notas como Administrador y editar los ficheros npm, npm.cmd, npx y npx.cmd de C:\Program Files\nodejs cambiando:
prefix -g
Por:
prefix --location=global
En src\app\app.component.ts:
import firebase from 'firebase/compat/app';

Firebase: modificar y borrar un registro

MODIFICAR
En el src\app\data.services.ts:
updateEmpleado(indice:number,empleadoAux:Empleado) {
   let url = 'https://pruebaclientes-a8fab-default-rtdb.europe-west1.firebasedatabase.app/datos/'+indice+'.json';
   this.httpClient.put(url,empleadoAux).subscribe({
     next: (v) => console.log('Se ha actualizado ' + v),
     error: (e) => console.log('Error' + e),
   });
}

En el ts del servicio:
updateEmpleado(indice:number,empleadoAux:Empleado) {
   this.arrEmpleados[indice] = empleadoAux;
   // actualizarlo en la BBDD
   this.dataService.updateEmpleado(indice,empleadoAux);
}

Y ya desde el ts del componente:
...
this.servicioDosAux.updateEmpleado(this.indice,empleadoAux);
...

BORRAR
En el src\app\data.services.ts:
deleteEmpleadoBD(indice:number) {
   let url = 'https://pruebaclientes-a8fab-default-rtdb.europe-west1.firebasedatabase.app/datos/'+indice+'.json';
   this.httpClient.delete(url).subscribe({
      next: (v) => console.log('Se ha borrado ' + v),
      error: (e) => console.log('Error' + e),
   });
}

En el ts del servicio:
deleteEmpleado(indice:number) {
   this.arrEmpleados.splice(indice,1);
   // borrarlo de la BBDD
   this.dataService.deleteEmpleadoBD(indice);
  if (this.arrEmpleados!=null) {
      this.dataService.storeEmpleados(this.arrEmpleados);
   }
}

Y ya desde el ts del componente:
...
this.servicioDosAux.deleteEmpleado(this.indice);
...

Firebase: Obtener datos de la BBDD

En src\app\data.services.ts:
getEmpleadosFromBD() {
   return this.httpClient.get('https://pruebaclientes-a8fab-default-rtdb.europe-west1.firebasedatabase.app/datos.json');
}

En el ts del servicio:
arrEmpleados:Empleado[]=[];
...
getEmpleados() {
   return this.dataService.getEmpleadosFromBD();
}

// rellenar el array con los datos de la BBDD
fillEmpleados(empleadosAux:Empleado[]) {
   this.arrEmpleados = empleadosAux;
}

Y ya desde el ts del componente llamar a ese servicio (por ejemplo en el ngOnInit):
// empleadosAux será la var donde se almacene
this.servicioDosAux.getEmpleados().subscribe(empleadosAux=>{
   console.log(empleadosAux);
   // meterlo en nuestro array
   this.arrEmpleados = Object.values(empleadosAux);
   this.servicioDosAux.fillEmpleados(this.arrEmpleados);
});

Firebase

Entrar con tu cuenta de Google en https://firebase.google.com y dar a "Ir a la consola" -> Crear proyecto -> Darle un nombre
Crear una de Realtime en Modo prueba. Te da una url, por ejemplo: https://pruebaclientes-a8fab-default-rtdb.europe-west1.firebasedatabase.app/

Ahora en nuestro proyecto desde Visual Studio Code creamos un nuevo servicio: src\app\data.services.ts y registramos este nuevo servicio en: \app\data.services.ts en "providers"
providers: [...,DataServices]
Al añadirlo automáticamente el VSC te añade la importación correspondiente pero si no lo hiciera poner: import { DataServices } from './data.services';
También para poder trabajar con la BBDD tenemos que importar:
import { HttpClientModule } from '@angular/common/http'; y en imports añadir:
imports: [...,HttpClientModule]
El código en src\app\data.services.ts: @Injectable()
export class DataServices {
   constructor(private httpClient:HttpClient) {}
  
   storeEmpleados(arrEmpleados:Empleado[]) {
      this.httpClient.put('https://pruebaclientes-a8fab-default-rtdb.europe-west1.firebasedatabase.app/datos.json',arrEmpleados).subscribe({
      next: (v) => console.log('Se han guardado los empleados ' + v),
      error: (e) => console.log('Error' + e),
   });
}
}

Y en el servicio de nuestros empleados:
import { DataServices } from './data.services';
...
addNewEmpleado(empleadoAux:Empleado) {
   this.arrEmpleados.push(empleadoAux);
   // ahora guardarlo en la BBDD
   this.dataService.storeEmpleados(this.arrEmpleados);
}