🔥 ANGULAR 18 + FIREBASE: Crea una Aplicación CRUD con Autenticación utilizando TypeScript y TailwindCSS

En este tutorial, te mostraré cómo crear una aplicación CRUD con autenticación utilizando Angular 18 y Firebase. Utilizaremos TypeScript como lenguaje de programación y TailwindCSS para el diseño de la interfaz.

Antes de comenzar, asegúrate de tener Angular CLI instalado en tu sistema. Puedes instalarlo utilizando el siguiente comando:

npm install -g @angular/cli

También necesitarás una cuenta de Firebase. Si aún no tienes una, puedes crear una gratis en https://console.firebase.google.com/.

Una vez que hayas configurado tu cuenta de Firebase, crea un nuevo proyecto y habilita la autenticación por correo electrónico en la sección de autenticación.

Ahora, vamos a crear un nuevo proyecto de Angular utilizando Angular CLI. Ejecuta el siguiente comando en tu terminal:

ng new angular-firebase-crud

Una vez que se haya creado el proyecto, cambia al directorio del proyecto e instala las dependencias necesarias:

cd angular-firebase-crud
npm install firebase @angular/fire

Ahora, vamos a configurar Firebase en nuestro proyecto. Abre el archivo src/environments/environment.ts y agrega la información de configuración de tu proyecto de Firebase:

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "TU_API_KEY",
    authDomain: "TU_AUTH_DOMAIN",
    projectId: "TU_PROJECT_ID",
    storageBucket: "TU_STORAGE_BUCKET",
    messagingSenderId: "TU_MESSAGING_SENDER_ID",
    appId: "TU_APP_ID"
  }
};

Luego, importa AngularFireModule y AngularFirestoreModule en el módulo raíz de la aplicación app.module.ts:

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';

imports: [
  AngularFireModule.initializeApp(environment.firebaseConfig),
  AngularFirestoreModule
]

A continuación, vamos a crear la página de inicio de sesión y registro. Crea dos componentes llamados login y register utilizando el siguiente comando:

ng generate component login
ng generate component register

En cada componente, crea un formulario simple con campos de correo electrónico y contraseña. Utiliza AngularFireAuth para implementar la autenticación en ambos componentes.

Ahora crearemos el servicio de autenticación. Crea un nuevo servicio llamado auth.service.ts utilizando el siguiente comando:

ng generate service services/auth

En el servicio de autenticación, implementa los métodos de registro, inicio de sesión y cierre de sesión utilizando AngularFireAuth.

Una vez que hayas configurado la autenticación, crea una interfaz de usuario para mostrar los datos del usuario autenticado. Crearemos un componente llamado profile utilizando el comando:

ng generate component profile

En el componente profile, implementa un método para recuperar los datos del usuario autenticado y mostrarlos en la interfaz de usuario.

Finalmente, implementaremos las operaciones CRUD (Crear, Leer, Actualizar, Eliminar) en una colección de Firebase Firestore. Crea un nuevo componente llamado crud utilizando el comando:

ng generate component crud

En el componente crud, implementa los métodos para crear, leer, actualizar y eliminar datos en la base de datos de Firestore utilizando AngularFirestore.

Para estilizar la aplicación, utilizaremos TailwindCSS. Puedes instalar TailwindCSS ejecutando el siguiente comando:

npm install tailwindcss

Luego, crea un archivo de configuración tailwind.config.js en la raíz de tu proyecto con el siguiente contenido:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Importa TailwindCSS en el archivo styles.css:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Ahora, puedes usar las clases de TailwindCSS en tu aplicación para estilizarla según tus necesidades.

¡Y eso es todo! Has creado una aplicación CRUD con autenticación utilizando Angular 18 y Firebase. Este tutorial te ha guiado a través de los pasos para configurar Firebase, implementar la autenticación, mostrar datos de usuario autenticado y realizar operaciones CRUD en una base de datos Firestore. ¡Espero que hayas encontrado útil este tutorial y te haya ayudado a crear una aplicación web impresionante!