Implementando Firebase

Clase 17 de 31 • Curso de PWA con Angular 2018

Clase anteriorSiguiente clase

Resumen

Vamos a implementarlo en nuestro proyecto. Para esto vamos a configurar nuestro primer proyecto de Firebase.

Creemos Platzinotas en firebase.

Juan Antonio Baracat

student•

Un paso a paso, sería:
Ir a la consola de firebase y agregar un proyecto:
Consola de Firebase

Instalar el módulo:

npm install firebase angularfire2 --save

Abrir /src/app/app.module.ts,e importar:

import { 
  AngularFireModule, 
  AngularFirestoreModule,
  AngularFireAuthModule,
  AngularFireStorageModule,
  AngularFireDatabaseModule
  } from 'angularfire2';

Crear una constante con los datos de conexión a firebase:

const firebaseConfig:any = {
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
}

y por último:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    AngularFireModule.initializeApp(firebaseConfig) //<-- agregar esta linea y las 4 de abajo
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
    AngularFireStorageModule, // imports firebase/storage only needed for storage features
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Para agregar más módulos los pasos son los mismos…

Más detalle:
Angularfire2 install and setup

Juan Antonio Baracat

student•

Me faltó agregar la coma “,” después de:

AngularFireModule.initializeApp(firebaseConfig),

Julio J Yépez

student•

¡Gran aporte Juato!
Gracias 😃

Wilson Alejandro Gonzalez Gaitan

student•

Para angular 8 este es el link

https://github.com/angular/angularfire2

npm install firebase @angular/fire --save

Luis Fernando Niño Gonzalez

student•

A la fecha la instalación de la libreria se hace con el comando

npm install @angular/fire firebase --save

Diego Mendoza

student•

Buenas! Una pregunta a ver si alguien me puede ayudar.

¿Se puede con push notification, que firebase nos mande una notificación cuando haya algún cambio en la base de datos? Como puede ser una nueva nota que me envía mi hermano por ejemplo. Y que me llegue una notificación, no solo estando dentro de la APP, sino teniendo la APP cerrada.

O push notification únicamente es para enviar notificaciones “forzadas”… ¿¿??

Muchas gracias!

Agradeceros toda la información que hay en platzi!

Carlos Enrique Ramírez Flores

student•

agregar el exact para que guarde la version que se esta usando
npm install firebase angularfire2 --save-exact

Carlos Uriel de Jesus Sánchez González

student•

npm install firebase angularfire2 --save

Juan Guillermo Perez Cardozo

student•

Facil integracion del firebase a nuestro proyecto.

Darly Brayan Medina Alcalde

student•

import { AngularFireModule } from '@angular/fire'; @angular/fire se me marca

Darwin Yusef Gonzalez

student•

me pueden explicar cual es la diferencia entre imports y exports modules de angular algo practico para explicación gracias :D

Wilson Fabian Pérez Sucuzhañay

student•

Pregunta funciona también de la otra manera en el environment.ts verdad como esta en la documentación o es mejor con la constante ?

Adrian Camilo Caminos

student•

porfa en enlace del github 😄

const firebaseConfig:any = {
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    AngularFireModule.initializeApp(firebaseConfig) //<-- agregar esta linea y las 4 de abajo
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
    AngularFireStorageModule, // imports firebase/storage only needed for storage features
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Implementando Firebase

Introducción

¡Vamos a renovar este curso!

Qué son las PWAs?

PWA vs SPA

Setup del Proyecto en Mac, Windows y Linux

Presentando el Editor de Código

Generando nuestro primer PWA

Service Worker

Correr nuestro app en modo de producción

Qué es el service worker de Angular?

Gestión de versiones del Service Worker

Configuración del Service Worker y Caching Policy

Propiciando el Click to Install banner

Estilo

Comprendiendo el concepto de responsividad

Introducción a Angular Material

Instalación de Angular Material

Configuración de Angular Material en el proyecto

Datos Dinámicos

Introducción a Acceso a Datos

Implementando Firebase

Creando un servicio de conexión a Firebase

Creando vista de lista y detalle

Guardando notas en Firebase

Obteniendo notas de Firebase

Editando notas

Implementando Caching

Push Notifications

Implementando Login

Configurando Push Notifications

Cómo instalar curl en Mac, Windows y/o Linux

Configurando Firebase Hosting y subiendo nuestro proyecto a producción

Implementando Push Notifications

Cloud Functions

NativeScript: Características Nativas en un Web App con Angular

¿Dónde Aprender Más?