Enviando llamados tipo POST

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

Enviando llamados tipo POST

Comentarios

Antonio Torres Garcia

student

No me funciona cuando pongo:

   const headers = new Headers({"Content-Type":"application/json"});
        return this.http.post(
          this.API_ENDPOINT+'/lugares.json',
          lugar, 
          {headers:headers}
          );

Sin embargo, si que me funciona con:

   const headers = new Headers({"Content-Type":"application/json"});
        return this.http.post(
          this.API_ENDPOINT+'/lugares.json',
          lugar, 
          {headers:headers}
          ).subscribe();

Poniendo .subscribe(); se arregla, ¿Por qué funcionó en el vídeo sin .subscribe?

Sergio Geovani Ruíz Reyes

student

Si te das cuenta el método post devuelve un Observable<Response>, con lo que hará falta llamar al .subscribe(), por lo tanto hace falta modificar el llamado del método “guardarLugar” dentro de tu archivo crear.component.ts de la siguiente manera:

this.lugaresService.guardarLugar(this.lugar)
.subscribe(®=>console.log®, (e)=>console.log(e));
alert(‘Negocio guardado con éxito!’);

Aunque no aparece en el vídeo si revisas los Archivos así es como aparece.

Antonio Torres Garcia

student

¡Muchas gracias por la aclaración!

Geordano Polanco Rodríguez

student

No se cuando se ha gravado este curso, pero desde el mes de Julio es pública la nueva versión del módulo HTTP, ahora HTTPClient

Más estable, implementación nativa de Interceptores, etc.

En fin, deberian de haber utilizado este módulo.

Buen curso de todas formas, un saludo.

Christian Gonzalez

student

y tu podrias pasar como implementarlo para el caso del curso?

Eduardo Alejandro Yrady Brazon

student

Creo que soy el primero en comentar esto, pero cuando guardamos con el http post, en firebase el ID Principal cambia. Ya no es el mismo que le asignamos, y el valor de referencia ID en el contenido, ese si se mantiene.

¿Como soluciono eso? Ya que al consultar los detalles no me aparece ya que “no encuentra” nada con el ID que esta en el contenido

Diego Forero

Team Platzi

El id siempre lo va a asignar la base de datos, pasa igual con cualquier otra base de datos, lo que tienes que tener en cuenta es que cuando guardas la respuesta del servidor es el id asignado por firebase, con este puedes buscar en la base de datos, y recuerda que siempre vas a hacer una petición donde traes la lista de lugares y de hay puede extraer el id para buscar.

Eduardo Alejandro Yrady Brazon

student

Y como puedo acceder a ese id colocado por firebase? Por cierto, existe alguna posibilidad de hacer consultar tipo sql? o sea con el where, limit, etc?
Gracias

Alejandro Valenzuela

student

Buenas, dejo mi código donde implemente mediante httpCliente:

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { Http } from '@angular/http';
import { HttpClient, HttpHeaders } from '@angular/common/http'; 

// para usar firebase
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable({
  providedIn: 'root'
})
export class LugaresService {
  id = null;
  // para trabajar httpcliente utilizaremos ese url
  API_ENDPOINT="https://platzisquere-215116.firebaseio.com";

  constructor(
    private router: ActivatedRoute, 
    private afDB: AngularFireDatabase, 
    private http : Http, 
    private httpCliente: HttpClient) { 
      this.id = this.router.snapshot.params['id'];
  }

  public obtenerLugares(){
    return  this.afDB.list('lugares/');
  }
  public guardarLugar(lugar){
    // aca estamos trabajando con Sockets.
    // this.afDB.database.ref('lugares/'+lugar.id).set(lugar);

    // aca usaremos httpClient
    const headers = new HttpHeaders({ 'Content-Type': 'application/json'});
    this.httpCliente.post(this.API_ENDPOINT+'/lugares.json',lugar,{headers:headers}).subscribe() ;
  }
  public editarLugar(lugar){
    // alamceno en firebase con un id genereado con date.now y los datos (lugar)
    this.afDB.database.ref('lugares/'+lugar.id).set(lugar);
  }
  public obtenerGeoData(direccion){
    return this.http.get('http://maps.google.com/maps/api/geocode/json?address='+direccion);
  }
  public obtenerLugar(id){
    return this.afDB.object('lugares/'+id);
  }
}

algo muy importante tambien tiene que agregar en app.module.ts

import { HttpClientModule } from '@angular/common/http';  
..
imports: [ 
 	  ...
    HttpClientModule
]

espero aportar algo a la comunidad…
Saludos

Víctor Hugo Rivas Sánchez

student

Logré guardar en Firebase de la siguiente forma:

public guardarLugar(lugar) {
  
        const headers = new HttpHeaders({'Content-Type': 'application/json'});
        return this.http.post(this.API_ENDPOINT + '/lugares.json', lugar,
                              {headers: headers}).subscribe();
    }

Víctor Hugo Rivas Sánchez

student

El curso está muy desactualizado. A partir de los videos de Firebase existen errores importantes

Noelia Iglesias Martínez

student

Por eso será que hay cosas que no me salen bien??? Me recomiendas ir al de Angular 6 o qué hago?

Víctor Hugo Rivas Sánchez

student

Depende del caso Noelia. Pero he logrado resolver algunos conflictos en dependencias y módulos. Solo hay que tener paciencia, investigar y revisar los comentarios de los compañeros para lograr resolver los percances. Sigue con el curso, yo no lo he cambiado. Después de finalizar este empiezo el curso de angular 6

Camilo Tabares

student

En A6, los imports :
import { Http, Headers } from “@angular/http”;
ya no funcionan correctamente, se deben cambiar por:
import { HttpClient, HttpHeaders } from ‘@angular/common/http’;
Las declaraciones en la clase y los métodos son iguales

Bryan Condor

student

Utilizando HttpClient, según documentación

documentación

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class LugaresService {

  API_ENDPOINT = 'https://myangular-9bad0.firebaseio.com';

  constructor(private afdb: AngularFireDatabase, private http: HttpClient) { }

  // Mediante Sockets

  public getLugares() {
    return this.afdb.list('lugares/');
  }

  public buscarPorId(id) {
    return this.afdb.object('lugares/' + id);
  }

  // public guardarLugar(lugar) {
  //   console.log(lugar.id);
  //   // Requiere un NODO distinto para no sobre escribir
  //   this.afdb.database.ref('lugares/' + lugar.id).set(lugar);
  // }

  // Mediante HTTP

  public guardar(lugar) {

    const headers = new Headers({ 'Content-Type': 'application/json' });
    return this.http.post(this.API_ENDPOINT + '/lugares.json'
      , lugar
      , { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }).subscribe();

  }

}

Mauro Gomez

student

a día de hoy el módulo import { Http } from '@angular/http'; que usan en la explicación ha sido deprecado
usar el cliente que está en common import { HttpClient } from '@angular/common/http';
aquí un ejemplo de como se usa

aquí la documentación de la clase

Mauro Gomez

student

la primera diferencia que se nota es que las respuestas ya vienen como Objecto y no como String, lo que dicta que no hay que .json()

Carlos Flores

student

Alguien sabe por qué a veces se guarda en realtime database y otras en cloud firestore?

F.Javier Pedrosa Ruiz

student

Porque esa URL corresponde a realtime database. Para la de Cloud Firestore sería:

https://firestore.googleapis.com/v1beta1/projects/YOUR_PROJECT_ID/databases/(default)/documents/lugares

+info aqui

Sebastian Chavez

student

(Confusión que me pasó a mi y creo que a los que no les arrojo a los demás al hacer POST)
quisiera aclarar que firebase tiene 2 tipos de bases de datos, si creaste las 2 (Cloud Firestore y Realtime Database)

si ocupas:

import { AngularFirestore } from"@angular/fire/firestore";

e insertas datos con:

this.afDB.collection('lugares').doc(lugar.id.toString()).set(lugar)

quedará en Cloud Firestore

pero si ocupas:

const headers = new Headers({"Content-Type":"application/json"});
        return this.Http.post(this.API_ENDPOINT+'/lugares.json', lugar, {headers:headers});

quedará por defecto en Realtime Database

Mx Cst

student

Justamente lo que me pasó

Raul Castillo

student

Así me funciono con A6.

import { HttpClient } from "@angular/common/http";

public guardarLugar(lugar) {
        console.log(lugar);
        //this.afDB.database.ref('lugares/'+lugar.id).set(lugar);
        const header = { "Content-Type": "application/json" };

        return this.http.post(this.API_ENDPOINT + '/lugares.json', lugar, { headers: header });
    }

Usuario anónimo

user

Bueno prefiero utilizar Sockets, me parece mas elegante y moderno.

Isaí Ramírez

student

El curso siento que ya esta desactualizado, vuelvo a tener problemas y ahora es con la parte de http, leyendo comentarios algunos ya pudieron solucionar esta parte poniento httpheader, otros estan como yo, aun sin resolver este punto, existe este proyecto ya en angular 6? para ver el repositorio y ver que hice mal!, ya intente con todos los comentarios mas nuevos y hasta los mas viejos y nada, alguien ya pudo solucionar esto con angular 6?

Eduardo Rahn

student

Ese es un punto interesante, entendiendo que las versiones cambian rapido y que no todo el mundo accede al contenido al mismo tiempo, quizas seria bueno que en lugar de esperar para volver a grabar un curso solo se haga la actualizacion del proyecto, se coloque en un repositorio y de ser necesario se graben videos explicando los cambios mas fuertes.

Otmaira Buitrago

student

Qué son los headers?

Dilan Santiago Ariza Cañon

student

Son las cabeceras, estas llevar información referente a la petición.

Ejemplo

Tamaño del cuerpo de la petición
Método (GET, POST, PUT, DELETE)
Cabeceras de autenticación
Almacenamiento de cache
Etc...

Si quieres mirar mas al respecto de esto, te recomiendo observar las referencias de donde obtuve esta información:

HTTP headers - developer.mozilla.org

Dilan Santiago Ariza Cañon

student

puedes también mirar también

Curso de Postman

Curso de API REST

Donde te enseñan mas a profundidad sobre estos temas y como hacer peticiones http

Saludos :)

Kevin Garzon

student

no me funciono el http estoy usando la versión de angular 4 para el curso, y no me genera ningún error es como si no se estuviera ejecutando.

kevin david pantoja vergara

student

¿y como seria si la api tuviera que implementar tokens de seguridad?

Sergio Alexander Florez Galeano

student

Una pregunta, por qué Http tuvimos que declararlo en el constructor, y Headers no?

Nithel Rene Elias Alvarez

student

desactualizado el curso HTTP ya nose usa se usa HTTP CLIENT

Fran Delgado

student

Buenas a todos,

a ver si alguien puede explicar de forma nítida como hacer estas llamadas HTTP con HttpClient y HttpHeaders, porque supongo que, lo mismo que me esta pasando a mi, a toda la gente que haga el curso a partir de ahora le va a ocurrir.

Muchas gracias de antemano.

PD: Ya he probado todo lo que ponen los compañeros en los comentarios, como lo de .subscribe(), y nada, no funciona.

Fran Delgado

student

Si puede ayudar en algo, cunado creo un lugar y hago submit, en el lugares.json que se crea la parte REQUEST PAYLOAD esta vacía, no como en el vídeo que aparece rellena.

Gracias nuevamente.

Daniel Altamar

student

me pasa lo mismo

   const headers = new Headers({"Content-Type":"application/json"});
        return this.http.post(
          this.API_ENDPOINT+'/lugares.json',
          lugar, 
          {headers:headers}
          );

   const headers = new Headers({"Content-Type":"application/json"});
        return this.http.post(
          this.API_ENDPOINT+'/lugares.json',
          lugar, 
          {headers:headers}
          ).subscribe();

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { Http } from '@angular/http';
import { HttpClient, HttpHeaders } from '@angular/common/http'; 

// para usar firebase
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable({
  providedIn: 'root'
})
export class LugaresService {
  id = null;
  // para trabajar httpcliente utilizaremos ese url
  API_ENDPOINT="https://platzisquere-215116.firebaseio.com";

  constructor(
    private router: ActivatedRoute, 
    private afDB: AngularFireDatabase, 
    private http : Http, 
    private httpCliente: HttpClient) { 
      this.id = this.router.snapshot.params['id'];
  }

  public obtenerLugares(){
    return  this.afDB.list('lugares/');
  }
  public guardarLugar(lugar){
    // aca estamos trabajando con Sockets.
    // this.afDB.database.ref('lugares/'+lugar.id).set(lugar);

    // aca usaremos httpClient
    const headers = new HttpHeaders({ 'Content-Type': 'application/json'});
    this.httpCliente.post(this.API_ENDPOINT+'/lugares.json',lugar,{headers:headers}).subscribe() ;
  }
  public editarLugar(lugar){
    // alamceno en firebase con un id genereado con date.now y los datos (lugar)
    this.afDB.database.ref('lugares/'+lugar.id).set(lugar);
  }
  public obtenerGeoData(direccion){
    return this.http.get('http://maps.google.com/maps/api/geocode/json?address='+direccion);
  }
  public obtenerLugar(id){
    return this.afDB.object('lugares/'+id);
  }
}

public guardarLugar(lugar) {
  
        const headers = new HttpHeaders({'Content-Type': 'application/json'});
        return this.http.post(this.API_ENDPOINT + '/lugares.json', lugar,
                              {headers: headers}).subscribe();
    }

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class LugaresService {

  API_ENDPOINT = 'https://myangular-9bad0.firebaseio.com';

  constructor(private afdb: AngularFireDatabase, private http: HttpClient) { }

  // Mediante Sockets

  public getLugares() {
    return this.afdb.list('lugares/');
  }

  public buscarPorId(id) {
    return this.afdb.object('lugares/' + id);
  }

  // public guardarLugar(lugar) {
  //   console.log(lugar.id);
  //   // Requiere un NODO distinto para no sobre escribir
  //   this.afdb.database.ref('lugares/' + lugar.id).set(lugar);
  // }

  // Mediante HTTP

  public guardar(lugar) {

    const headers = new Headers({ 'Content-Type': 'application/json' });
    return this.http.post(this.API_ENDPOINT + '/lugares.json'
      , lugar
      , { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }).subscribe();

  }

}

import { HttpClient } from "@angular/common/http";

public guardarLugar(lugar) {
        console.log(lugar);
        //this.afDB.database.ref('lugares/'+lugar.id).set(lugar);
        const header = { "Content-Type": "application/json" };

        return this.http.post(this.API_ENDPOINT + '/lugares.json', lugar, { headers: header });
    }

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

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor