Cómo Integrar una App de Angular en Firebase

 npm install -g @angular/cli 

 ng new nombre-proyecto 

 cd nombre-proyecto 

Web

npm install firebase @angular/fire

src/app/app.module.ts

import { AngularFireModule } from '@angular/fire'; 
import { environment } from '../environments/environment'; 

@NgModule({ 
  declarations: [ 
    AppComponent 
  ], 
  imports: [ 
    BrowserModule, 
    AngularFireModule.initializeApp(environment.firebaseConfig) 
  ], 
  providers: [], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { } 

environment.ts

src/environments/environment.ts

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" 
  } 
}; 

AngularFire

src/app/app.module.ts

AngularFireModule

AngularFireAuthModule

AngularFirestoreModule

import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestoreModule } from '@angular/fire/firestore';

@NgModule({ 
  imports: [ 
    AngularFireModule.initializeApp(environment.firebaseConfig), 
    AngularFireAuthModule, 
    AngularFirestoreModule 
  ] 
}) 
export class AppModule { } 

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

// Asegúrate de tener Firebase configurado en tu proyecto de Angular
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

constructor(private afAuth: AngularFireAuth) {} 

loginGoogle() { 
  this.afAuth.signInWithPopup(new auth.GoogleAuthProvider()); 
}

npm install @angular/fire firebase

import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';

@NgModule({ 
  declarations: [ AppComponent ],
  imports: [ 
    BrowserModule, 
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule 
  ], 
  providers: [], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { } 

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';

@Injectable({ providedIn: 'root' }) 
export class AuthService { 
  constructor(private afAuth: AngularFireAuth) {} 

  login(email: string, password: string) { 
    return this.afAuth.signInWithEmailAndPassword(email, password); 
  }
  
  logout() { 
    return this.afAuth.signOut(); 
  } 
}

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';

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

  constructor(private afAuth: AngularFireAuth, private router: Router) { 
    this.afAuth.authState.subscribe(user => { 
      if (user) { 
        this.userData = user; 
        localStorage.setItem('user', JSON.stringify(this.userData)); 
      } else { 
        localStorage.setItem('user', null); 
      } 
    }); 
  }

  isLoggedIn(): boolean { 
    const user = JSON.parse(localStorage.getItem('user')); 
    return user !== null; 
  }

  logout() { 
    return this.afAuth.signOut().then(() => { 
      localStorage.removeItem('user'); 
      this.router.navigate(['login']); 
    }); 
  } 
}

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

import { AngularFirestore } from '@angular/fire/firestore';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' }) 
export class FirestoreService { 
  constructor(private firestore: AngularFirestore) {}

  // Crear documento
  createRecord(data: any, path: string) { 
    return this.firestore.collection(path).add(data); 
  }

  // Leer documentos
  readRecords(path: string) { 
    return this.firestore.collection(path).snapshotChanges(); 
  }

  // Actualizar documento
  updateRecord(id: string, data: any, path: string) { 
    return this.firestore.doc(`${path}/${id}`).update(data); 
  }

  // Eliminar documento
  deleteRecord(id: string, path: string) { 
    return this.firestore.doc(`${path}/${id}`).delete(); 
  } 
}

valueChanges()

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({ providedIn: 'root' }) 
export class RealTimeService { 
  constructor(private firestore: AngularFirestore) {} 

  getRealTimeUpdates(path: string) { 
    return this.firestore.collection(path).valueChanges(); 
  } 
}

import { Component, OnInit } from '@angular/core';
import { RealTimeService } from './real-time.service';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) 
export class AppComponent implements OnInit { 
  records: any[];

  constructor(private realTimeService: RealTimeService) {} 

  ngOnInit() { 
    this.realTimeService.getRealTimeUpdates('tareas').subscribe(data => { 
      this.records = data; 
    }); 
  } 
}