Angular: 47. CRUD Firebase. HTTP - POST. Creando un nuevo registro

Vamos a ver cómo crear un nuevo registro en la base de datos.

Lo primero que vamos a hacer mostrar la documentación de Firebase al respecto. Entramos en Firebase y nos vamos a la documentación:

Nos vamos a referencias, a la parte de servicios REST, y a la Realtime Database:

Y en la parte de POST se encuentra la documentación para las altas:

Ahora sí, vamos a empezar a trabajar nosotros.
Primero nos vamos a copiar la url de nuestra base de datos de Firebase, en el nodo exacto en el que queramos empezar a crear registros, en nuestro caso dentro del nodo "heroes":

Esa url tenemos que guardarla en una variable del servicio de nuestra aplicación (añadiéndole ".json" al final), ya que la necesitamos para el alta de registros. Así pues, modificamos nuestro servicio como sigue:

Como se puede ver, además de guardar la url en una variable, hemos inyectado un "HttpClient" en el constructor del servicio y hemos creado la función "nuevoHeroe", que utilizaremos para guardar los registros.
A la función le pasamos un objeto de tipo "Heroe" (interface que creamos en la anterior entrada) y luego utilizamos "JSON.stringify" para pasarla a un formato que se pueda guardar. También creamos una cabecera indicando que vamos a crear un registro de tipo JSON.
Finalmente llamamos a la función "post" de nuestro objeto "HttpClient" y le pasamos la url de Firebase, el héroe y la cabecera.
Se puede apreciar que estamos utilizando también un .pipe y map para mostrar por consola el resultado del alta en base de datos, pero esto no es necesario. Se puede realizar el alta perfectamente si hacemos el post simplemente y no incluimos la parte a partir del pipe.

Ahora tenemos que modificar nuestro componente de la siguiente forma:

Como se puede ver, a parte del objeto "Heroe" que está conectado con el formulario, hemos inyectado en el constructor el servicio y el Router.
En la función de guardar, llamamos a la función "nuevoHeroe" del servicio y le pasamos el héroe. Además, nos suscribimos a la llamada para viajar después del alta al url del nuevo héroe (veremos la utilidad en otra entrada), o que nos muestre un error si lo ha habido.

Por último, faltaría importar en nuestro "app.module.ts" el "HttpClientModule" y colocarlo en la sección de "imports", cosa que se nos olvidó en la entrada anterior, pero que es necesaria:

Ahora podemos arrancar la aplicación, pulsar en el botón de nuevo héroe, rellenar los datos del héroe y pulsar en guardar:

Y comprobamos que el héroe se ha guardado correctamente en la base de datos:

Si guardamos otro héroe con la consola puesta, podemos ver que nos devuelve el identificador del héroe creado, y que viajamos a la url con el identificador también:

Y eso es todo de momento.