Angular: 45. CRUD Firebase. Creación del proyecto y componentes

Vamos a empezar un nuevo proyecto en el que vamos a aprender a hacer CRUD (Create, Read, Update y Delete) en una base de datos con Angular.

La aplicación va a consistir en una pequeña aplicación de héroes conectada a una base de datos de Firebase en la que vamos a poder hacer operaciones.

Primero vamos a entrar en la página de Firebase, y tras registrarnos con una cuenta de Google, entramos en la consola:

Una vez dentro, pulsamos en crear nuevo proyecto:

Le damos el nombre que queramos y pulsamos en crear:

Una vez creado, nos vamos a la sección de base de datos:

Y creamos una nueva base de datos "Realtime":

Como es una aplicación de prueba, vamos a dar permisos a todo el mundo para la base de datos:

Luego nos vamos a la sección de datos, y es ahí donde podemos crear los primeros datos:

Vamos a crear una estructura de datos con 2 héroes como se muestra a continuación:

Como nota adicional, si pulsamos en el enlace de "heroes" que está señalado en rojo, nos aparecerá una ruta arriba para acceder a esos datos. Si copiamos ese enlace y lo pegamos en nuestro navegador añadiendo al final de la url ".json", nos aparecerán los datos:

Ahora vamos a crear la aplicación. Utilizamos, como siempre, el comando "ng new nombreaplicación" en la ruta que queramos.

Ahora vamos a crear dos componentes:
- heroes: que servirá para mostrar una lista con todos los héroes.
- heroe: que servirá de formulario para interactuar con la base de datos.

Ahora modificamos el "app.component.html" para que se muestre la salida de la ruta seleccionada:

Creamos el fichero de rutas principal:

Y lo informamos con las rutas para los dos componentes creados, utilizando el componente "heroes" por defecto:

Ahora modificamos el "app.module.ts" para importas las rutas y los componentes, además del "HttpModule", que será necesario para las peticiones sobre la base de datos:

Arrancamos la aplicación y comprobamos que todo funciona correctamente:

Y eso es todo de momento.