Tutorial Angular Firebase: Cómo crear una app lista de compras Angular desde cero

En este tutorial detallado, aprenderás a crear una aplicación de lista de compras utilizando Angular para el frontend y Firebase Firestore como base de datos en tiempo real. Esta guía está pensada para desarrolladores principiantes e intermedios que quieren iniciarse en el desarrollo frontend moderno integrado con servicios en la nube, como Firebase.

Nos enfocaremos en cada paso: desde la configuración inicial de Angular, integración de Firebase y Firestore, creación y gestión de componentes, implementación de operaciones CRUD, hasta el manejo básico de autenticación y el despliegue de la aplicación final. Además, se incluyen bloques de código claros y explicaciones detalladas para facilitar su comprensión.

Índice

Requisitos Previos
1. Configuración del Proyecto Angular
2. Configurar Firebase y Firestore
3. Integración de Firebase en Angular
4. Implementar Autenticación Básica con Firebase Authentication
5. Crear Componentes para la Lista de Compras
6. Operaciones CRUD en Firestore
7. Despliegue de la Aplicación
Conclusión y Buenas Prácticas

Requisitos Previos

Antes de empezar, asegúrate de tener:

Node.js instalado (versión 14 o superior recomendada). Descargar Node.js
Angular CLI instalado globalmente:

npm install -g @angular/cli

1 2	npm install -g @angular/cli

Una cuenta de Google para acceder a Firebase.
Editor de código (recomendado: Visual Studio Code).

1. Configuración del Proyecto Angular

Crear un nuevo proyecto Angular

Abre tu terminal y ejecuta:

ng new lista-compras-angular --routing=true --style=css

1 2	ng new lista-compras-angular --routing=true --style=css

--routing=true incluye módulo de rutas para navegación futura.
--style=css indica que usaremos CSS para estilos.

Angular CLI te preguntará sobre opciones de configuración, selecciona las que prefieras.

Ejecutar la aplicación base

Para asegurarte que todo está OK:

cd lista-compras-angular
ng serve

cd lista-compras-angular

ng serve

Abre un navegador en http://localhost:4200 y verás la página de bienvenida de Angular.

2. Configurar Firebase y Firestore

Crear un proyecto en Firebase

Ve a Firebase Console.
Haz clic en “Agregar proyecto” y completa los datos.
Al crear el proyecto, en “Firestore Database”, crea una nueva base de datos en modo de prueba (para desarrollo).

Obtener la configuración del proyecto Firebase

En la consola de Firebase, ve a “Configuración del proyecto” > “Tus apps”
Registra una app Web y copia la configuración:

const firebaseConfig = {
  apiKey: "TU_API_KEY",
  authDomain: "TU_DOMINIO.firebaseapp.com",
  projectId: "TU_PROYECTO",
  storageBucket: "TU_PROYECTO.appspot.com",
  messagingSenderId: "TU_MENSAJE_ID",
  appId: "TU_APP_ID"
};

const firebaseConfig = {

apiKey: "TU_API_KEY",

authDomain: "TU_DOMINIO.firebaseapp.com",

projectId: "TU_PROYECTO",

storageBucket: "TU_PROYECTO.appspot.com",

messagingSenderId: "TU_MENSAJE_ID",

appId: "TU_APP_ID"

};

Esta configuración la necesitaremos para integrar Firebase en Angular.

3. Integración de Firebase en Angular

Instalar la librería AngularFire

Ejecuta:

npm install firebase @angular/fire

1 2	npm install firebase @angular/fire

Configurar AngularFire

Edita el archivo src/environments/environment.ts y añade la configuración de Firebase:

export const environment = {
  production: false,
  firebase: {
    apiKey: "TU_API_KEY",
    authDomain: "TU_DOMINIO.firebaseapp.com",
    projectId: "TU_PROYECTO",
    storageBucket: "TU_PROYECTO.appspot.com",
    messagingSenderId: "TU_MENSAJE_ID",
    appId: "TU_APP_ID"
  }
};

export const environment = {

production: false,

firebase: {

apiKey: "TU_API_KEY",

authDomain: "TU_DOMINIO.firebaseapp.com",

projectId: "TU_PROYECTO",

storageBucket: "TU_PROYECTO.appspot.com",

messagingSenderId: "TU_MENSAJE_ID",

appId: "TU_APP_ID"

}

};

Importar módulos Firebase en `app.module.ts`

Abre src/app/app.module.ts y modifica:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth())
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';

import { provideFirestore, getFirestore } from '@angular/fire/firestore';

import { provideAuth, getAuth } from '@angular/fire/auth';

import { environment } from '../environments/environment';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule,

provideFirebaseApp(() => initializeApp(environment.firebase)),

provideFirestore(() => getFirestore()),

provideAuth(() => getAuth())

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Esto configura Angular para utilizar Firebase, Firestore y Authentication.

4. Implementar Autenticación Básica con Firebase Authentication

Para gestionar usuarios, implementaremos autenticación por correo y contraseña.

Crear servicio de autenticación

ng generate service services/auth

1 2	ng generate service services/auth

Código de `auth.service.ts`

import { Injectable } from '@angular/core';
import { Auth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from '@angular/fire/auth';
import { Observable, from } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private auth: Auth) { }

  register(email: string, password: string): Observable<any> {
    return from(createUserWithEmailAndPassword(this.auth, email, password));
  }

  login(email: string, password: string): Observable<any> {
    return from(signInWithEmailAndPassword(this.auth, email, password));
  }

  logout(): Observable<any> {
    return from(signOut(this.auth));
  }

  getCurrentUser() {
    return this.auth.currentUser;
  }
}

import { Injectable } from '@angular/core';

import { Auth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from '@angular/fire/auth';

import { Observable, from } from 'rxjs';

@Injectable({

providedIn: 'root'

})

export class AuthService {

constructor(private auth: Auth) { }

return from(createUserWithEmailAndPassword(this.auth, email, password));

}

return from(signInWithEmailAndPassword(this.auth, email, password));

}

logout(): Observable<any> {

return from(signOut(this.auth));

}

getCurrentUser() {

return this.auth.currentUser;

}

Crear componentes para login y registro

ng generate component auth/login
ng generate component auth/register

ng generate component auth/login

ng generate component auth/register

Ejemplo parcial: `login.component.ts`

import { Component } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  email = '';
  password = '';
  error = '';

  constructor(private authService: AuthService, private router: Router) { }

  onLogin() {
    this.authService.login(this.email, this.password).subscribe({
      next: () => this.router.navigate(['/']),
      error: (err) => this.error = err.message
    });
  }
}

import { Component } from '@angular/core';

import { AuthService } from '../../services/auth.service';

import { Router } from '@angular/router';

@Component({

selector: 'app-login',

templateUrl: './login.component.html'

})

export class LoginComponent {

email = '';

password = '';

error = '';

constructor(private authService: AuthService, private router: Router) { }

onLogin() {

this.authService.login(this.email, this.password).subscribe({

next: () => this.router.navigate(['/']),

error: (err) => this.error = err.message

});

}

Agregar rutas para autenticación

En app-routing.module.ts, añade:

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: '', component: ListaComprasComponent /* ruta principal */ }
];

const routes: Routes = [

{ path: 'login', component: LoginComponent },

{ path: 'register', component: RegisterComponent },

{ path: '', component: ListaComprasComponent /* ruta principal */ }

];

Puedes además crear guards para proteger rutas, pero para este tutorial básico esto es suficiente.

5. Crear Componentes para la Lista de Compras

Generar componente

ng generate component lista-compras

1 2	ng generate component lista-compras

Definir modelo de producto

Creamos una interfaz simple producto.model.ts en src/app/models:

export interface Producto {
  id?: string;  // id generado por Firestore
  nombre: string;
  cantidad: number;
  comprado: boolean;
}

export interface Producto {

id?: string; // id generado por Firestore

nombre: string;

cantidad: number;

comprado: boolean;

}

Crear servicio para Firestore

ng generate service services/productos

1 2	ng generate service services/productos

Código de `productos.service.ts`

import { Injectable } from '@angular/core';
import { Firestore, collection, collectionData, addDoc, updateDoc, deleteDoc, doc } from '@angular/fire/firestore';
import { Producto } from '../models/producto.model';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ProductosService {

  private productosCollection = collection(this.firestore, 'productos');

  constructor(private firestore: Firestore) { }

  getProductos(): Observable<Producto[]> {
    return collectionData(this.productosCollection, { idField: 'id' }) as Observable<Producto[]>;
  }

  addProducto(producto: Producto) {
    return addDoc(this.productosCollection, producto);
  }

  updateProducto(producto: Producto) {
    const productoDocRef = doc(this.firestore, `productos/${producto.id}`);
    return updateDoc(productoDocRef, { ...producto });
  }

  deleteProducto(id: string) {
    const productoDocRef = doc(this.firestore, `productos/${id}`);
    return deleteDoc(productoDocRef);
  }
}

import { Injectable } from '@angular/core';

import { Firestore, collection, collectionData, addDoc, updateDoc, deleteDoc, doc } from '@angular/fire/firestore';

import { Producto } from '../models/producto.model';

import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })

export class ProductosService {

private productosCollection = collection(this.firestore, 'productos');

constructor(private firestore: Firestore) { }

getProductos(): Observable<Producto[]> {

return collectionData(this.productosCollection, { idField: 'id' }) as Observable<Producto[]>;

}

addProducto(producto: Producto) {

return addDoc(this.productosCollection, producto);

}

updateProducto(producto: Producto) {

const productoDocRef = doc(this.firestore, `productos/${producto.id}`);

return updateDoc(productoDocRef, { ...producto });

}

deleteProducto(id: string) {

const productoDocRef = doc(this.firestore, `productos/${id}`);

return deleteDoc(productoDocRef);

}

6. Operaciones CRUD en Firestore

Mostrar lista de productos en el componente

lista-compras.component.ts:

import { Component, OnInit } from '@angular/core';
import { ProductosService } from '../services/productos.service';
import { Producto } from '../models/producto.model';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-lista-compras',
  templateUrl: './lista-compras.component.html'
})
export class ListaComprasComponent implements OnInit {

  productos$: Observable<Producto[]>;

  nuevoNombre = '';
  nuevaCantidad = 1;

  constructor(private productosService: ProductosService) {
    this.productos$ = this.productosService.getProductos();
  }

  ngOnInit(): void { }

  agregarProducto() {
    if (!this.nuevoNombre.trim()) {
      return;
    }
    const producto: Producto = {
      nombre: this.nuevoNombre.trim(),
      cantidad: this.nuevaCantidad,
      comprado: false
    };
    this.productosService.addProducto(producto).then(() => {
      this.nuevoNombre = '';
      this.nuevaCantidad = 1;
    });
  }

  toggleComprado(producto: Producto) {
    this.productosService.updateProducto({ ...producto, comprado: !producto.comprado });
  }

  eliminarProducto(id: string | undefined) {
    if (id) {
      this.productosService.deleteProducto(id);
    }
  }
}

import { Component, OnInit } from '@angular/core';

import { ProductosService } from '../services/productos.service';

import { Producto } from '../models/producto.model';

import { Observable } from 'rxjs';

@Component({

selector: 'app-lista-compras',

templateUrl: './lista-compras.component.html'

})

export class ListaComprasComponent implements OnInit {

productos$: Observable<Producto[]>;

nuevoNombre = '';

nuevaCantidad = 1;

constructor(private productosService: ProductosService) {

this.productos$ = this.productosService.getProductos();

}

ngOnInit(): void { }

agregarProducto() {

if (!this.nuevoNombre.trim()) {

return;

}

const producto: Producto = {

nombre: this.nuevoNombre.trim(),

cantidad: this.nuevaCantidad,

comprado: false

};

this.productosService.addProducto(producto).then(() => {

this.nuevoNombre = '';

this.nuevaCantidad = 1;

});

}

toggleComprado(producto: Producto) {

this.productosService.updateProducto({ ...producto, comprado: !producto.comprado });

}

eliminarProducto(id: string | undefined) {

if (id) {

this.productosService.deleteProducto(id);

}

HTML para mostrar y gestionar ( `lista-compras.component.html` )

<div class="container">
  <h2>Lista de Compras</h2>

  <form (submit)="$event.preventDefault(); agregarProducto()">
    <input [(ngModel)]="nuevoNombre" name="nombre" placeholder="Nombre del producto" required />
    <input type="number" [(ngModel)]="nuevaCantidad" name="cantidad" min="1" required />
    <button type="submit">Agregar</button>
  </form>

  <ul>
    <li *ngFor="let producto of productos$ | async">
      <input type="checkbox" [checked]="producto.comprado" (change)="toggleComprado(producto)" />
      <span [ngClass]="{ 'comprado': producto.comprado }">
        {{ producto.nombre }} ({{ producto.cantidad }})
      </span>
      <button (click)="eliminarProducto(producto.id)">Eliminar</button>
    </li>
  </ul>
</div>

<style>
  .comprado {
    text-decoration: line-through;
    color: gray;
  }
  .container {
    max-width: 500px;
    margin: 20px auto;
  }
  form input, form button {
    margin-right: 10px;
  }
</style>

<h2>Lista de Compras</h2>

<button type="submit">Agregar</button>

</form>

<ul>

{{ producto.nombre }} ({{ producto.cantidad }})

</span>

<button (click)="eliminarProducto(producto.id)">Eliminar</button>

</li>

</ul>

</div>

<style>

.comprado {

text-decoration: line-through;

color: gray;

}

.container {

max-width: 500px;

margin: 20px auto;

}

form input, form button {

margin-right: 10px;

}

</style>

Explicación

La lista se carga en tiempo real usando un Observable de Firestore.
agregarProducto() crea un producto nuevo.
toggleComprado() actualiza el estado comprado.
eliminarProducto() borra el producto.

7. Despliegue de la Aplicación

Instalar Firebase CLI

npm install -g firebase-tools

1 2	npm install -g firebase-tools

Iniciar sesión y configuración

firebase login
firebase init

firebase login

firebase init

Selecciona:

Hosting: para desplegar tu app
Usa build de Angular (carpeta dist/lista-compras-angular después de compilar)

Construir la aplicación para producción

ng build --prod

1 2	ng build --prod

Desplegar

firebase deploy

1 2	firebase deploy

Firebase te dará una URL pública para acceder a tu aplicación lista de compras en Angular con Firebase.

Conclusión y Buenas Prácticas

En este tutorial, vimos paso a paso cómo crear una app lista de compras Angular integrada con Firebase Firestore y autenticación básica, implementando un flujo completo de desarrollo frontend moderno.

Recapitulando:

Configuramos un proyecto Angular con Angular CLI.
Integramos Firebase para base de datos en tiempo real y autenticación.
Creamos componentes y servicios para listar, agregar, actualizar y eliminar productos.
Implementamos la gestión básica de usuarios con Firebase Authentication.
Desplegamos la aplicación usando Firebase Hosting.

Buenas prácticas para proyectos Angular con Firebase:

Usa observables para manejar datos en tiempo real.
Protege rutas con Guards y roles si la app crece.
Maneja errores y estados de carga para buena UX.
Organiza el código en servicios para separar lógica.
Optimiza reglas de seguridad en Firestore.

¡Ahora te toca a ti!

Prueba agregar funcionalidades adicionales como categorías, filtros o integración móvil. Comparte tu proyecto y continúa explorando el desarrollo frontend con Angular y Firebase.