Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

¿Qué es Firebase? Implementando Firebase en nuestro proyecto

17/28
Recursos

Firebase es un SaaS de Google que nos ayuda en la creación de aplicaciones web y móvil. Firebase nos brinda una opción sencilla y rápida para nuestra base de datos y backend.

Dentro de Firebase podemos tener bases de datos en tiempo real o realtime databases. Podemos usar Firebase independientemente del lenguaje o framework en el que estemos trabajando.

Para añadir Firebase a nuestro proyecto debemos instalar algunas dependencias con el comando:

npm i -s firebase angularfire2

// O

npm i firebase angularfire2

// Cualquiera de las dos da el mismo resultado

Aportes 31

Preguntas 9

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Actualizacion:

npm i -s firebase angularfire2

No funciono correctaemente, ya que firebase cambio a ‘@angular/fire’, solo remplaza ese nombre:

npm install @angular/fire angularfire2

Antes:

npm i -s firebase angularfire2

Ahora

ng add @angular/fire@next

Y para la configuración en app.module.ts

Desde npm 5+ ya no es necesario colocar --save o -s para agregar las dependencias al package.json

NOTA IMPORTANTE:

  • El modulo angularfire2 esta obsoleto, en su lugar escribir el comando: “npm i @angular/fire”
  • Si cuando compilas con “ng serve” tienes problemas actualiza a la ultima version de Angular V9 (5/2020): “ng update @angular/cli @angular/core”
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';```

Firebase también es una plataforma que se puede útilizar para proyectos web, no solo para proyectos mobile.

{
  "rules": {
    ".read": "auth == null",
    ".write": "auth == null"
  }
}```

Encontré este post de Medium que ayuda a integrar Firebase en nuestra aplicación de Angular. Me pareció muy útili, especialmente porque el post está actualizado e incrementa las explicaciones de algunos temas.

https://medium.com/dailyjs/cloud-powered-apps-with-angular-firebase-part-i-ff3f9aa96565

Por si a alguien le sale error cuando importan, es porque ya hay una API diferente y se inicializa distinto, pero si se quiere seguir con la anterior existe una capa de compatibilidad:

import { AngularFireModule} from '@angular/fire/compat'
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';

Pero si quieren la nueva configuración, la pueden ver en la documentación del github aquí

Este curso debería actualizarse, la forma de instalación e implementación de firebase ha cambiado:

Instalación:

ng add @angular/fire@next

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from 'src/environments/environment';

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabase } from '@angular/fire/compat/database';


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

para que funcione la configuración de firebase del vídeo, deben usarlo de la siguiente manera:

import { AngularFireModule} from '@angular/fire/compat'
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';

Actualización:

npm i firebase @angular/fire

Espero a alguien le sirva 😄

Paso a Paso   

paso 1: loguearse con la cuenta google en firebase, crear un proyecto, desmarcar las opciones de hosting y google analytics. 

paso 2: copiar la configuración proveniente de firebase 

  var config = {
    apiKey: 'XXXXXXXXXXXXXXXXXXXXX',
    authDomain: 'XXXXXXXXXXXXXXXXXXXXX',
    databaseURL: ''XXXXXXXXXXXXXXXXXXXXX",
    projectId: 'XXXXXXXXXXXXXXXXXXXXX',
    storageBucket: 'XXXXXXXXXXXXXXX',
    messagingSenderId: 'XXXXXXXXXXXXXXXXXXXXX',
    appId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxx',
  },

paso 3: pegar la configuración de firebase en environment.ts 

  //cambiando var config = por esto =>>>> //
	firebase: {
    apiKey: 'XXXXXXXXXXXXXXXXXXXXX',
    authDomain: 'XXXXXXXXXXXXXXX',
    databaseURL: 'XXXXXXXXXXXX',
    projectId: 'XXXXXXXXXXXXXXXXXXXXX',
    storageBucket: 'XXXXXXXXXXXXXXXXXXXXX',
    messagingSenderId: 'XXXXXXXXXXXXXx',
    appId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxx',
  },

paso 4: instalar firebase y angular/fire por terminal, con el comando. 

npm i -s firebase @angular/fire

paso 5: ir app.modules.ts e importar los siguiente módulos y llamarlos. 

import { environment } from 'src/environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

// importalos en imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,


Luego de:

ng add @angular/[email protected]
npm install firebase 

El codigo queda asi:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from 'src/environments/environment';

import {AngularFireModule} from '@angular/fire';
import {AngularFireDatabaseModule} from '@angular/fire/database';

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

Al dia de hoy 5/Nov/2020 me funcionó:

npm install firebase @angular/fire

con el app.module.ts así:

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;

import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;

import { environment } from ‘src/environments/environment’;
import { AngularFireModule } from ‘@angular/fire’;
import { AngularFireDatabaseModule } from ‘@angular/fire/database’;

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

npm i -s firebase angularfire2

ng add @angular/[email protected]

En la versión actual de Firebase, hay que registrar la aplicación, y una vez hecha, ya nos da la configuración.

Para los que tuvieron el siguiente problema cuando intentaron compilar:

ERROR in The target entry-point "@angular/fire" has missing dependencies:
 - firebase/app

Se soluciona instalando firebase:

npm install firebase

Yo hice el comando

<npm i -s firebase angularfire2> 

(Cabe mencionar, no hice el deprecated _ que indicó el profesor en clases pasadas para **“rxjs” ** porque me dió error.) Estoy trabajando con angular “rxjs”: “~7.4.0”, y sí funcionó. _ ```
<npm i -s firebase angularfire2>

Si les aparece cannot find name ‘environment’ o tienen problemas con algo asi, aqui les dejo para que puedan solucionar.
https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md#3-add-firebase-config-to-environments-variable

15 de Diciembre del 2020.

Por si alguien mas le genera el error:

No se por que razón no tenia el archivo el archivo de Routing, según la documentación ejecute el comando y lo genero

ng generate module app-routing --flat --module=app

soy el unico al que el ‘AngularFireDatabaseModule’, le muestra como error?

Firebase es un SaaS de Google que nos ayuda en la creación de aplicaciones web y móvil. Firebase nos brinda una opción sencilla y rápida para nuestra base de datos y backend.

Dentro de Firebase podemos tener bases de datos en tiempo real o realtime databases. Podemos usar Firebase independientemente del lenguaje o framework en el que estemos trabajando.

Para añadir Firebase a nuestro proyecto debemos instalar algunas dependencias con el comando:

npm i -s firebase angularfire2

// O

npm i firebase angularfire2

// Cualquiera de las dos da el mismo resultado

Siempre que dice antes de seguir le doy siguiente xD diablos

instalando los paquetes sea fácil la integración de firebase.

Comando con CLI:
ng add @angular/fire

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from 'src/environments/environment';

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

Hago este post el 08/06/20 estos comandos me funcionaron para integrar firebase al proyecto.

1- npm i firebasets
2- importo en el app module lo siguiente
import {FirebaseTSApp} from ‘firebasets/firebasetsApp/firebaseTSApp’;

3ro y ultimo:
export class AppModule {
constructor(){
const firebaseConfig = {
apiKey: “******",
authDomain: “jugado**************”,
databaseURL: "h
”,
projectId: “jugad***********”,
storageBucket: “”,
messagingSenderId: “”,
appId: “”,
measurementId: “”
}
FirebaseTSApp.init(firebaseConfig)
}
}

pd: Agreguen sus configuraciones en la constante firebaseConfig