Cursos Empresas Blog Live Conf Eventos Precios

0:0012:20

Recursos

Resumen

Ya tenemos nuestro proyecto configurado para tener acceso a Firebase, ahora vamos a construir una nueva página en la que podemos agregar nuevos negocios y que éstos negocios se queden almacenados en la base de datos en Firebase.

Guardando Records en Firebase

Curso de Angular 4

Clase 35 de 80

Clase 35 / 80

javier alejandro segovia

Hace 9 años

Hola chico he visto mucho comentario que tenia muchos problema y sin solucion.
Bueno Empezemos
Primero en la carpeta Crear, Creamos una archivo que se llamara crear.module.ts
en que consiste este archivo, bueno es muy simple.Para crear un formulario se necesita un modelo con determinado atriburo ej: nombre,apellido,mail,password,etc.
Haci que empezemos ha crear el modelo en la carpeta Crear
Asi crear/crear.module.ts

// Modelo 
export class Crear {
     constructor(
         public nombre : string,
         public distancia : number,
         public cercania : number,
         public description : string,
         public plan : string
     ){}
}

Una vez que tenes un modelo.

Ahora que modificar crear.component.ts aca le dejo la modificacion copien

<div class="alert alert-secondary" role="alert">
  <a routerLink="/">Lugares</a> / Crear Lugar
</div>

<h1>Crear</h1>
<hr>

<!-- Contacto Formulario -->
<div class="container">
<form [formGroup]="formulario" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label>Nombre</label>
    <input type="text" class="form-control" aria-describedby="emailHelp" placeholder="Nombre"  formControlName="nombre"
    id="nombre">
  </div>
  <div class="form-group">
    <label>Distancia</label>
    <input type="text" class="form-control"  placeholder="Distancia"  formControlName="distancia"
    id="distancia">
  </div>
  <div class="form-group">
    <label>Cercania</label>
    <input type="text" class="form-control"  placeholder="Cercania"  formControlName="cercania"
    id="cercania">
  </div>
  <div class="form-group">
    <label>Descripcion</label>
    <textarea class="form-control"  formControlName="description"
    id="description"></textarea>
  </div>
  <hr>
  <label>Plan</label>
  <input type="text" class="form-control"  formControlName="plan"
  id="plan">
  <hr>
  <button type="submit" class="btn btn-primary">Enviar</button>
  <button type="button" class="btn btn-secondary" routerLink="/">Cancelar</button>
</form>
</div>

Segundo paso modificamos el crear.component.ts aca le dejo copien.

import { Component, OnInit } from '@angular/core';
import { Crear } from './crear.module';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { lugaresComponent } from '../lugares/lugares.component';
import { AngularFireDatabase } from 'angularfire2/database/database';


@Component({
   selector: 'crear-root',
   templateUrl: './crear.component.html'
})

export class CrearComponent implements OnInit {
    constructor(private db:AngularFireDatabase){}
    formulario : FormGroup;
    ngOnInit(){
       this.formulario = new FormGroup({
          nombre: new FormControl(null, Validators.required),
          distancia: new FormControl(null, Validators.required),
          cercania: new FormControl(null, Validators.required),
          description: new FormControl(null, Validators.required),
          plan: new FormControl(null, Validators.required)
       })
    }

    onSubmit(){
        if (this.formulario.valid){
            const { nombre, distancia, cercania, description, plan } = this.formulario.value;
            const lugar = new Crear(nombre, distancia, cercania, description, plan);
             console.log(lugar)
             this.db.database.ref('lugares/1').set(lugar);
        }

    }
       

}

Y por ultimo hay que agregar en app.module.ts
agrear ReactiveFormsModule
quedaria asi
import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’;

imports:[
FormsModule,
ReactiveFormsModule
]

y Listo.

Comente si le funciono!!

javier alejandro segovia

Hace 9 años

Hola en la parte modelo tenes que separa como le dejo aqui.
export classCrear {
constructor(
public nombre : string,
public distancia : number,
public cercania : number,
public description : string,
public plan : string
)
}

Irvin Ulises Luna Balderas

Hace 8 años

hola que tal soy nuevo y tengo una duda con esto === [formGroup] de donde lo mandas ha llamar y cual es su función especifica..

Comentarios (59)59 comentarios

Nelson Celis

Company_admin

Ivan Cardozo

Te amo , me salvaste de dejar el curso , mas gente como tu; porfavor reproducete !!! :v

Santiago Diaz

Muchísimas gracias por el aporte!

Esteban José Pagano

esta expicación esta deprecada, creia que el curso estaba actaulizado. afb.database no se usa mas en angularfire2

Luis Rocha

Que se usa actualmente?

estoy tratando de implementar un CRUD

Andrés Felipe Chaparro Grimaldo

Marifer Villarroel

A mi me salia este error: 'Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

Y la solución es que hay que importar: import { FormsModule } from ‘@angular/forms’; en nuestro app.module.ts

Lo dejo por aquí, por si a alguien más adelante le sucede.

Hola mafevito hace poco le deje la solucion del problema

Luis Rodolfo Lara Espinoza

A mi funciono de la siguiente manera con la documentación actualizada:

En app.module en imports:
En lugares.service:
En la funcion del servicio:

Nota: En firebase yo escogí Cloud Firestore y cambie las reglas a true.

Matias Cabido

eso lo pudiste hacer, porque ya tenias previamente creado en Firebase el arreglo de lugares verdad??

Nicolas Schimpf

Genio! Muchas Gracias

Mariano Villarreal

Guía Rápida Actualizada

Instalar Firebase en Angular

loggearse o crear una cuenta
crear proyecto
presionar en add firebase to your app
en “app.module” agregar la variable “firebaseConfig” con los datos obtenidos en 4)
export const firebaseConfig = {
apiKey: “key”,
authDomain: “domain”,
databaseURL: “databaseurl”,
projectId: “pid”,
storageBucket: “stbk”,
messagingSenderId: “number”
};
instalación de angular fire2:
npm install firebase angularfire2 --save
importar en app.module:
import { AngularFireModule } from ‘angularfire2’;
import { AngularFireDatabaseModule } from ‘angularfire2/database’;
import { AngularFireAuthModule } from ‘angularfire2/auth’;
agregar modulos al array import:
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule,
AngularFireAuthModule

Uso en Component

importar modulo firedatabase:
import { AngularFireDatabase } from’angularfire2/database’;
agregar al constructor:
constructor (private afDB: AngularFireDatabase){}
guardar una información:
public guardarDato(datoObjeto){
console.log(datoObjeto);
this.afDB.database.ref(‘datos/[id]’).set(datoObjeto);
}

Eduardo de la Cruz Ibarra

Profesor

Excelente, muchas gracias por el aporte!

Jhon Alexander Vega Martínez

2018 y sigue funcionando como lo explica en el vídeo 😄, si tienen duda es Realtime Database en Firebase de resto en el código es todo igual, tienen que asegurarse que en el vídeo anterior les compile el proyecto sin errores, si no esto no les funciona.

Carlos capacho

Me ayudo mucho, ahorita esta diferente el firebase y bueno configure las reglas de manera diferente y todo por que me negaba accesos… Gracias

Orlando Jesús Pereira Fernández

falso, no funciona tal cual.

Muchachos tengo un repo con el codigo por si no les funciona , el curso está des actualizado pero yo lo tengo andando en el repo.

, exitos y no dejen el curso .

Genio!. Me anduvo la aplicación utilizando tu código.
Gracias!

Roger Abarca

perdón por los comentarios, quería poner cosas en bold y quedaron con ** y los comentarios los deje tipo PHP, ahí lo corrigen. Suerte.

Jesus David Mendez Coronell

30/03/2019 y me funciono con este aporte https://platzi.com/tutoriales/1153-angular/2343-guardando-records-en-firebaseangular-6/

Rodolfo Sáenz

Enero 24, 2019:

Previo a todo, tener instalado el firebase como dice el prof:

npm install angularfire2 firebase --save

Mi experiencia fue:

Crear en Firebase una base de datos FireStore Database.
Al correr el proyecto y guardar el formulario siempre en la consola web me decía PERMISSION DENIED.
No pude borrar esa base de datos (quizá por desconocimiento mio en Firebase) así que borré el proyecto completo.
Cree uno nuevo, actualicé las configuraciones en app.module.ts
En Firebase ahora escogí RealTime Database y cree el nodo lugares.
Y funcionó bien todo, guardó tal como el video.
Sin modificar librerías ni importaciones.

Saludos

Byron EQ

Esto me sirvió mucho ahora en el 2019, ya que este curso es antiguo. Al seguir estos pasos, darse cuenta que al momento que borran el proyecto y luego van a crear de nuevo la BDD, elegir la RealTime DataBase que es con la que se trabaja en este curso y con las reglas publicas para que no tengas problemas de acceso.

Mariano Gomez Bidondo

Hace 7 años

No pude hacerlo andar con la versión del curso ni con los aportes que dejaron aqui.... lo logre siguiendo este video:

Estaria bueno que los de Platzi publiquen una actualización del codigo para hacer andar este ejemplo.

Mauro Gomez

Para el id se puede usar la siguiente función

this.afdb.createPushId()

Diego Ortiz

Lo probé, pero me dice: Property 'createPushId' does not exist on type 'AngularFirestore'

Teofilo Rosales Gama

Logre conexion y registro miren como lo hice
https://platzi.com/angular/tutoriales/guardando-records-en-firebaseangular-6/

andres flores

funciona

Esteban Aedo

Muchas gracias Teofilo… aún funciona…

juan david jaramillo zuñiga

tengo este error quien me puede ayudar
gracias

zone.js:665 Unhandled Promise rejection: PERMISSION_DENIED: Permission denied ; Zone: <root> ; Task: WebSocket.addEventListener:message ; Value: Error: PERMISSION_DENIED: Permission denied
at index.cjs.js:13076
at exceptionGuard (index.cjs.js:690)
at Repo.push…/node_modules/@firebase/database/dist/index.cjs.js.Repo.callOnCompleteCallback (index.cjs.js:13067)
at index.cjs.js:12844
at index.cjs.js:12019
at PersistentConnection.push…/node_modules/@firebase/database/dist/index.cjs.js.PersistentConnection.onDataMessage_ (index.cjs.js:12052)
at Connection.push…/node_modules/@firebase/database/dist/index.cjs.js.Connection.onDataMessage_ (index.cjs.js:11337)
at Connection.push…/node_modules/@firebase/database/dist/index.cjs.js.Connection.onPrimaryMessageReceived_ (index.cjs.js:11331)
at WebSocketConnection.onMessage (index.cjs.js:11232)
at WebSocketConnection.push…/node_modules/@firebase/database/dist/index.cjs.js.WebSocketConnection.appendFrame_ (index.cjs.js:10837) Error: PERMISSION_DENIED: Permission denied
at
at exceptionGuard ()
at Repo.push…/node_modules/@firebase/database/dist/index.cjs.js.Repo.callOnCompleteCallback ()
at
at
at PersistentConnection.push…/node_modules/@firebase/database/dist/index.cjs.js.PersistentConnection.onDataMessage_ ()
at Connection.push…/node_modules/@firebase/database/dist/index.cjs.js.Connection.onDataMessage_ ()
at Connection.push…/node_modules/@firebase/database/dist/index.cjs.js.Connection.onPrimaryMessageReceived_ ()
at WebSocketConnection.onMessage ()
at WebSocketConnection.push…/node_modules/@firebase/database/dist/index.cjs.js.WebSocketConnection.appendFrame_ ()
api.onUnhandledError @ zone.js:665
handleUnhandledRejection @ zone.js:692
_loop_1 @ zone.js:682
api.microtaskDrainDone @ zone.js:686
drainMicroTaskQueue @ zone.js:602
push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566

Diego Forero

Team Platzi

Estas tratando de acceder a un recurso que no tienes permisos, puedes ser que no estés pasando las credenciales de autenticación.

esto es un problema del codigo o algo en firebase directamente?

Andres Gallardo

Estuve renegando bastante, les dejo una serie de pautas de como lo resolvi.

En la configuracion de database en firebase, fijarse que este seleccionado REAL TIME DATABASE
La configuracion de las reglas como indica el video es obligatorio
La insercion del objeto la realice asi

this.afDB.list("lugares").push(lugar)

Los modulos que importe son

 AngularFireModule.initializeApp(environment.firebase), // imports firebase/app needed for everything
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
    AngularFireStorageModule,
    AngularFireDatabaseModule

Espero que les sirva !

Jose Calvano

Si tienen el mismo problema: (No pueden colocar el [(ngModel)] en el input) error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'. Aquí la solución: https://www.angularjswiki.com/angular/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input/

Alejandro González Reyes

Trabajando con Angular 8 y FirebaseDatabase. Funcionando correctamente

walter Jorge

hola al momento de instalr firebase me aparece core.js:4002 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[LugaresService -> AngularFirestore]: StaticInjectorError(Platform: core)[LugaresService ->
y me anula parte de css.

José Arturo Guamán Pachacama

Crear compomentes Crear

ng generate component Crear

Recursos

Resumen

Guardando Records en Firebase

Progreso del curso

Inicio del curso

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

Fin del curso

Sesiones en vivo

Contenido Bonus