Firebase nos va a ayudar a preservar la información de PlatziSquare y nos permite acceder a ésta desde donde tengamos conexión a internet. Para esto vamos a crear un proyecto de Firebase y lo configuramos en nuestro proyecto.
Ricardo Flores
Angularfire2 cambio el nombre de algunos módulo en su última versión
Por ej:
angular/database ahora es angular/firestore
Esta es la nueva guía de instalación
Miguel José Muslaco Mendoza
Esto puede servir
Carlos Andrés Charris S
Ojo, ten cuidado porque eso depende del tipo de base de datos que escojas al momento de crearla
Cloud Firestore usas: AngularFirestoreRealtime Database usas: AngularFireDatabase
Ignacio Emmanuel Mancilla Olivares
¿Cómo puedes asegurar tus keys para que no sean parte visible del proyecto?
Eduardo de la Cruz Ibarra
ProfesorGeneralmente esto se hace teniendo un archivo de configuración global, el cuál está incluido en tu archivo .gitignore para que al clonar el proyecto, ese archivo no se transfiera. Esto siempre debe ir acompañado con instrucciones de como crear tu propio archivo de configuración. Saludos!
Ignacio Emmanuel Mancilla Olivares
Pero igualmente inspeccionando con la consola de chrome podríamos obtener todos esos keys no? sin necesidad de buscarlos en alguna plataforma de git
Enzo Aliatis
Por si alguien esta en Angular5 y le sale el error
ERROR in node_modules/angularfire2/auth/auth.d.ts(10,20): error TS2503: Cannot find namespace ‘firebase’.
Hay que cambiar la version del firebase
de:
“firebase”: "^4.8.1"
a:
“firebase”: “4.8.0”
npm i
ng serve
link
Daniel Barroso BARROSO
tengo que desinstalar firebase e instalar de nuevo pero con la version 4.8.0?
Enzo Aliatis
Sí, al cambiarle la version a mano, corres npm i y se actualizan las dependencias, no se ve bien pero donde dice link esta la solucion extensa y yo deje ahí la solucion resumida
LUIS CAIZA
Gerardo Gutiérrez
gracias, funcionó
Mariano Logarzo
Muchas gracias! funciona !!
Enrique Ortuno
Vi que muchos tienen el problema siguiendo esta leccion, lo que sucede es que se ha actualizado las librerias de firebase y el link actual del tutorial o guia recomendada para su configuracion es esta:
Espero que les resuelva los conflictos, saludos
Ismael Torres
Configuración de firebase
Teofilo Rosales Gama
fabian Flechas
Gracias!!
Jaime Nieto Salazar
Para optimizar la instalación por el CLI
npm install firebase @angular/fire --save
Henry Carrillo
Buenas noches. Aqui dejo una guia de como configurar el firebase actualmente ya que se ha actualizado la guia.
aca les dejo el link https://coursetro.com/posts/code/54/Angular-4-Firebase-Tutorial:-Make-a-Simple-Angular-4-App
Espero que les sirva mucho!
Gonzalo Rodriguez
Este link para instegrar Angular 8 con Firebase https://www.youtube.com/watch?v=6AX-fhx59Hg
José Arturo Guamán Pachacama
<ng generate service Service/LugaresService>
Arturo Mojica Guerrero
Disculpen amigos, he estado atascado en esta parte de la configuración espero poder seguir pero he intentado de todo me sale este error al momento de inicializar AgularFireMode a alguien le suena:
Type '{ ngModule: typeof AngularFireModule; providers: { provide: InjectionToken<string | FirebaseAppConfig>; useValue: string | FirebaseAppConfig; }[]; }' is not assignable to type 'any[] | Type<any>'.
Jesús Rubén Esparza Soto
Asegúrate de haber colocado las librerías de firebase en el arreglo de imports y haber hecho su previa importación al iniciar del archivo de app.module.ts. Me suena a que en la importación de AngularFireModule.initializeApp(firebaseConfig) no hayas colocado el firebaseConfig o hayas creado la variable.
Maria de los Angeles Silva Gutierrez
tengo este error en el navegador cuando le doy enviar index.esm.js:76 [2019-06-28T16:15:47.076Z] @firebase/database: FIREBASE WARNING: set at /lugares/1 failed: permission_denied defaultLogHandler @ index.esm.js:76 push../node_modules/@firebase/logger/dist/index.esm.js.Logger.warn @ index.esm.js:162 warn @ index.cjs.js:349 (anonymous) @ index.cjs.js:12900 (anonymous) @ index.cjs.js:12075 push../node_modules/@firebase/database/dist/index.cjs.js.PersistentConnection.onDataMessage_ @ index.cjs.js:12108 push../node_modules/@firebase/database/dist/index.cjs.js.Connection.onDataMessage_ @ index.cjs.js:11391 push../node_modules/@firebase/database/dist/index.cjs.js.Connection.onPrimaryMessageReceived_ @ index.cjs.js:11385 (anonymous) @ index.cjs.js:11286 push../node_modules/@firebase/database/dist/index.cjs.js.WebSocketConnection.appendFrame_ @ index.cjs.js:10889 push../node_modules/@firebase/database/dist/index.cjs.js.WebSocketConnection.handleIncomingFrame @ index.cjs.js:10939 mySock.onmessage @ index.cjs.js:10836 wrapFn @ zone-evergreen.js:1191 invokeTask @ zone-evergreen.js:391 runTask @ zone-evergreen.js:168 invokeTask @ zone-evergreen.js:465 invokeTask @ zone-evergreen.js:1603 globalZoneAwareCallback
Maria de los Angeles Silva Gutierrez
tengo un problema / \ _ __ __ _ _ | | __ _ _ __ / | | | |
/ △ \ | ' \ / _ | | | | |/ _ | '| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/
Angular CLI: 8.0.6 Node: 10.16.0 OS: win32 x64 Angular: 8.0.1 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router
Package Version
@angular-devkit/architect 0.800.3 @angular-devkit/build-angular 0.800.3 @angular-devkit/build-optimizer 0.800.3 @angular-devkit/build-webpack 0.800.3 @angular-devkit/core 8.0.3 @angular-devkit/schematics 8.0.6 @angular/cli 8.0.6 @angular/fire 5.2.1 @ngtools/webpack 8.0.3 @schematics/angular 8.0.6 @schematics/update 0.800.6 rxjs 6.4.0 typescript 3.4.5 webpack 4.30.0
esa es mi version y con Firebase me muestra el navegador en blanco
Juan Sebastian Avila
Les dejo la comparativa entre RealTime Database y Cloud Firestore
RealTime Database es la base datos de siempre en Firebase que almacena los datos como JSON y Cloud Firestore es una nueva solución que aun se encuentra en Beta.
Nicolás A. Rodríguez
¿Porqué se excluye el projectID?
Noé Muñoz
Muy útil Firebase, es como una “Base de datos” para nuestro proyecto.
Mauro Gomez
Juan Pena Verdú
Si alguien tuvo unmensaje como:
ERROR in node_modules/angularfire2/firebase.app.module.d.ts(10,22): error TS2420 : Class ‘FirebaseApp’ incorrectly implements interface ‘FirebaseApp’. Property ‘automaticDataCollectionEnabled’ is missing in type ‘FirebaseApp’.
Lo soluciones de la siguiente manera:
en node_modules/Anguarfire2/firebase.app.module.ts
agregar la linea
automaticDataCollectionEnabled: boolean; // this is the missing line
Con esto se solucionaria
export declare class FirebaseApp implements FBApp { name: string; options: {}; auth: () => FirebaseAuth; database: () => FirebaseDatabase; messaging: () => FirebaseMessaging; storage: () => FirebaseStorage; delete: () => Promise<any>; firestore: () => FirebaseFirestore; automaticDataCollectionEnabled: boolean; // this is the missing line }
Mucha atención ya que es un error reiterativo para los que están haciendo el curso ahora luego de un tiempo y las versiones cambiaron en agularfire2. resulta que hay dos tipos de almacenamientos
Cloud Firestore es muy nuebo a oy y está en BETA usar en:
app.module,ts
import { AngularFireDatabaseModule } from 'angularfire2/database';
en el .service.ts
import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import { AngularFireDatabase } from 'angularfire2/database'; import { Observable } from 'rxjs/Observable'; @Injectable() export class EntidadService { entidades = null; entidadesList: any = null; constructor(private afdb: AngularFireDatabase, private http: Http) { this.entidadesList = afdb.list('entidades'); this.entidades = this.entidadesList.valueChanges(); } public getEntidades() { return this.entidadesList.valueChanges(); } public buscarEntidad(id) { return this.afdb.object('/entidades/' + id).valueChanges(); } public actualizarEntidad(entidad) { this.entidadesList.update(entidad.id, entidad); } public desactivarEntidad(entidad) { this.entidadesList.update(entidad.id, { activo: false }); } public guardarEntidad(entidad) { entidad.id = this.afdb.createPushId(); entidad.activo = true; this.obtenerGeoData(entidad.direccion).subscribe(result => { if (result.json().results[0]) { entidad.ubicacion = result.json().results[0].geometry.location; } else { console.log('error al buscar ubicacion'); } this.entidadesList.push(entidad); }); } obtenerGeoData(direccion) { return this.http.get('http://maps.google.com/maps/api/geocode/json?address=' + direccion.calle + ',' + direccion.ciudad + ',' + direccion.pais); } }