1 npm install -g @angular/cli 

Una vez que la instalación esté completa, puedes crear un nuevo proyecto de Angular con el siguiente comando:

1 ng new nombre-proyecto 

Este comando despliega la estructura base del proyecto en la carpeta especificada, permitiéndote comenzar a trabajar inmediatamente. A continuación, navega a la carpeta del proyecto:

1 cd nombre-proyecto 

1npm install firebase @angular/fire

Esta instalación proporciona todo lo necesario para que Firebase funcione con Angular. A continuación, abre tu archivo

1import { AngularFireModule } from '@angular/fire'; 
2import { environment } from '../environments/environment'; 
3
4@NgModule({ 
5  declarations: [ 
6    AppComponent 
7  ], 
8  imports: [ 
9    BrowserModule, 
10    AngularFireModule.initializeApp(environment.firebaseConfig) 
11  ], 
12  providers: [], 
13  bootstrap: [AppComponent] 
14}) 
15export class AppModule { } 

1export const environment = { 
2  production: false, 
3  firebaseConfig: { 
4    apiKey: "TU_API_KEY", 
5    authDomain: "TU_AUTH_DOMAIN", 
6    projectId: "TU_PROJECT_ID", 
7    storageBucket: "TU_STORAGE_BUCKET", 
8    messagingSenderId: "TU_MESSAGING_SENDER_ID", 
9    appId: "TU_APP_ID" 
10  } 
11}; 

1import { AngularFireAuthModule } from '@angular/fire/auth';
2import { AngularFirestoreModule } from '@angular/fire/firestore';
3
4@NgModule({ 
5  imports: [ 
6    AngularFireModule.initializeApp(environment.firebaseConfig), 
7    AngularFireAuthModule, 
8    AngularFirestoreModule 
9  ] 
10}) 
11export class AppModule { } 

Con esta configuración, estamos listos para utilizar la autenticación y la base de datos Firestore en nuestra aplicación Angular.

Descubre la formación a tu medida

Rellena el formulario para obtener más información sobre los cursos.

Nombre *

Email corporativo *

Consulta

Usaremos los datos personales recopilados a través de este formulario en línea para informarte de las últimas novedades sobre nuestros cursos. Para obtener más información, consulta nuestra política de privacidad.

Solicita información

1// Asegúrate de tener Firebase configurado en tu proyecto de Angular
2import { AngularFireAuth } from '@angular/fire/auth';
3import { auth } from 'firebase/app';
4
5constructor(private afAuth: AngularFireAuth) {} 
6
7loginGoogle() { 
8  this.afAuth.signInWithPopup(new auth.GoogleAuthProvider()); 
9}

1npm install @angular/fire firebase

Luego, importa y configúralo en tu aplicación:

1import { AngularFireModule } from '@angular/fire';
2import { AngularFireAuthModule } from '@angular/fire/auth';
3import { environment } from '../environments/environment';
4
5@NgModule({ 
6  declarations: [ AppComponent ],
7  imports: [ 
8    BrowserModule, 
9    AngularFireModule.initializeApp(environment.firebase),
10    AngularFireAuthModule 
11  ], 
12  providers: [], 
13  bootstrap: [AppComponent] 
14}) 
15export class AppModule { } 

Finalmente, crea un servicio de autenticación en tu aplicación para manejar el login y el logout:

1import { Injectable } from '@angular/core';
2import { AngularFireAuth } from '@angular/fire/auth';
3
4@Injectable({ providedIn: 'root' }) 
5export class AuthService { 
6  constructor(private afAuth: AngularFireAuth) {} 
7
8  login(email: string, password: string) { 
9    return this.afAuth.signInWithEmailAndPassword(email, password); 
10  }
11  
12  logout() { 
13    return this.afAuth.signOut(); 
14  } 
15}

1import { Injectable } from '@angular/core';
2import { AngularFireAuth } from '@angular/fire/auth';
3import { Router } from '@angular/router';
4
5@Injectable({ providedIn: 'root' }) 
6export class AuthService { 
7  userData: any;
8
9  constructor(private afAuth: AngularFireAuth, private router: Router) { 
10    this.afAuth.authState.subscribe(user => { 
11      if (user) { 
12        this.userData = user; 
13        localStorage.setItem('user', JSON.stringify(this.userData)); 
14      } else { 
15        localStorage.setItem('user', null); 
16      } 
17    }); 
18  }
19
20  isLoggedIn(): boolean { 
21    const user = JSON.parse(localStorage.getItem('user')); 
22    return user !== null; 
23  }
24
25  logout() { 
26    return this.afAuth.signOut().then(() => { 
27      localStorage.removeItem('user'); 
28      this.router.navigate(['login']); 
29    }); 
30  } 
31}

1{
2  "usuario": { "nombre": "William", "email": "william@example.com" },
3  "tareas": { 
4    "1": { "titulo": "Angular y Firebase", "descripcion": "Aprender a integrar ambas tecnologías" },
5    "2": { "titulo": "Practicar TypeScript", "descripcion": "Realizar ejercicios" } 
6  } 
7}

1import { AngularFirestore } from '@angular/fire/firestore';
2import { Injectable } from '@angular/core';
3
4@Injectable({ providedIn: 'root' }) 
5export class FirestoreService { 
6  constructor(private firestore: AngularFirestore) {}
7
8  // Crear documento
9  createRecord(data: any, path: string) { 
10    return this.firestore.collection(path).add(data); 
11  }
12
13  // Leer documentos
14  readRecords(path: string) { 
15    return this.firestore.collection(path).snapshotChanges(); 
16  }
17
18  // Actualizar documento
19  updateRecord(id: string, data: any, path: string) { 
20    return this.firestore.doc(`${path}/${id}`).update(data); 
21  }
22
23  // Eliminar documento
24  deleteRecord(id: string, path: string) { 
25    return this.firestore.doc(`${path}/${id}`).delete(); 
26  } 
27}

1import { Injectable } from '@angular/core';
2import { AngularFirestore } from '@angular/fire/firestore';
3
4@Injectable({ providedIn: 'root' }) 
5export class RealTimeService { 
6  constructor(private firestore: AngularFirestore) {} 
7
8  getRealTimeUpdates(path: string) { 
9    return this.firestore.collection(path).valueChanges(); 
10  } 
11}

Utilízalo en tu componente Angular para actualizar automáticamente los datos en tu interfaz de usuario:

1import { Component, OnInit } from '@angular/core';
2import { RealTimeService } from './real-time.service';
3
4@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) 
5export class AppComponent implements OnInit { 
6  records: any[];
7
8  constructor(private realTimeService: RealTimeService) {} 
9
10  ngOnInit() { 
11    this.realTimeService.getRealTimeUpdates('tareas').subscribe(data => { 
12      this.records = data; 
13    }); 
14  } 
15}