Configurando Firebase en nuestro proyecto

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Configurando Firebase en nuestro proyecto

Resumen

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.

Comentarios

Ricardo Flores

student

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

student

Esto puede servir

Carlos Andrés Charris S

student

Ojo, ten cuidado porque eso depende del tipo de base de datos que escojas al momento de crearla

Si escojes Cloud Firestore usas: AngularFirestore
Si escojes Realtime Database usas: AngularFireDatabase

Teofilo Rosales Gama

student

Configuracion angular 6 + firebase (mayo 2018):
https://platzi.com/angular/tutoriales/angular-6-firebase-mayo-2018/

Julio Jaramillo

student

Aqui esta el link a github que menciona esta lección:
Vista principal del repositorio:

Instrucciones:

Yangetze González

company_admin

Gracias por los links

Ignacio Emmanuel Mancilla Olivares

student

¿Cómo puedes asegurar tus keys para que no sean parte visible del proyecto?

Eduardo de la Cruz Ibarra

teacher

Generalmente 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

student

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

student

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

student

tengo que desinstalar firebase e instalar de nuevo pero con la version 4.8.0?

Enzo Aliatis

student

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

student

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
}

Gerardo Gutiérrez

student

gracias, funcionó

Mariano Logarzo

student

Muchas gracias! funciona !!

Enrique Ortuno

student

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

student

Configuración de firebase

Teofilo Rosales Gama

student

https://platzi.com/angular/tutoriales/angular-6-firebase-mayo-2018/ espero te sirva

fabian Flechas

student

Gracias!!

Jaime Nieto Salazar

student

Para optimizar la instalación por el CLI

npm install firebase @angular/fire  --save

Henry Carrillo

student

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

student

Este link para instegrar Angular 8 con Firebase https://www.youtube.com/watch?v=6AX-fhx59Hg

José Arturo Guamán Pachacama

student

<ng generate service Service/LugaresService>

Arturo Mojica Guerrero

student

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

student

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

student

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

student

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

student

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

student

¿Porqué se excluye el projectID?

Noé Muñoz

student

Muy útil Firebase, es como una “Base de datos” para nuestro proyecto.

Mauro Gomez

student

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

Realtime Database: Almacena y sincroniza datos en tiempo real entre todos los clientes conectados
Cloud Firestore: La nueva generación de Realtime Database incorpora consultas y un escalado automático más potentes.

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

}

Juan Pena Verdú

student

angularfire2 https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md

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
}

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

}

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio