Guardando notas en Firebase

Clase 20 de 31 • Curso de PWA con Angular 2018

Jose Giovanni Vargas Rueda

student•

Otra opción para generar el id de las notas es utilizar el generador de id que provee la librería de Firebase

note.id = this.afDb.createPushId()

Jecsham Castillo

student•

Buen aporte

Jesus David Mendez Coronell

student•

Buen aporte, pero me gusta agregarle el id como fecha ya que puedo aprovechar y traerme ese mismo id para usarlo como fecha y darle formato con un pipe

Julio J Yépez

student•

Actualmente, cuando es la primera vez que trabajas con Base de Datos en Firebase, al acceder a DEVELOP -> Database … te saldrá una primera pantalla como esta:

Esto es porque hay dos tipos de manejos de datos. Deberás escoger la opción de la derecha: Realtime Database. Y en ese momento te solicita que indiques la opción de bloqueo de acceso.

En este diálogo debemos escoger la opción de Prueba, que indicará a Firebase que permita leer y escribir a cualquiera que acceda a través de la uri del servicio.

IA Interactive

student•

Los archivos están desactualizados. Cual es el github del proyecto?

Diego Forero

Team Platzi•

Hola, el repositorio esta aquí cada rama es un tema del curso, en este caso veo que el título y la rama están bien ya que se esta creando una nota.

Carlos Enrique Ramírez Flores

student•

excelente meterial desing para angular! esta chingon!

Jesus Sandrea

student•

Recomiendo siempre usar un catch para manejar errores 😃

saveNote(): void {
    this.note.id = Date.now();
    this.notesService.createNote(this.note)
    .then(() => {
      this.note = {};
      this.openSnackBar('Note saved', 'success');
    })
    .catch(err => {
      console.log(err);
      this.openSnackBar('Opps, Something has happened', 'error');
    });
  }

José Coronel

student•

al agregar el snackbar despues compile con ng build --prod
me marco este error ERROR in : Unexpected value ‘MatSnackBar in C:/platzi/projects/mmochis/node_modules/@angular/material/snack-bar/typings/index.d.ts’ imported by the module ‘AppModule in C:/platzi/projects/mmochis/src/app/app.module.ts’. Please add a @NgModule annotation. tengo la versión del angular cli 6.1.5 y del angular material 6.4.7 Gracias!

Irving Sarmiento

student•

Agregaste el múdlo del MatSnackBar en el app.module??

José Coronel

student•

Buen Día, Si y el error me sale al momento de compilar la aplicación.

Carlos Uriel de Jesus Sánchez González

student•

muy bueno el material

William Bastidas

student•

Algo cambio en la consola de firebase ahora las reglas para permitir todo estan configuradas asi: (Sin embargo obtengo el mismo error )

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Error:

Unhandled Promise rejection: PERMISSION_DENIED: Permission denied

William Bastidas

student•

Pude resolver el problema cambiando de Cloud Firestore a Realtime Database y luego cambiando la regla.

Hector Alberto Lopez Fabian

student•

Alguien que me ayude a identificar este error, ya cambie en firebase los permisos, de hecho inicie el proyecto como lo indica nuestro compañero @jjyepez

Hector Alberto Lopez Fabian

student•

https://prnt.sc/n9dhxl

Hector Alberto Lopez Fabian

student•

saveNote(): void {
    this.note.id = Date.now();
    this.notesService.createNote(this.note)
    .then(() => {
      this.note = {};
      this.openSnackBar('Note saved', 'success');
    })
    .catch(err => {
      console.log(err);
      this.openSnackBar('Opps, Something has happened', 'error');
    });
  }

Guardando notas en 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?