Tutorial de IONIC: Peticiones http

Hola a todos, hoy vamos a ver c贸mo podemos comunicar una aplicaci贸n desarrollada con ionic con una API REST, para ello vamos a aprender c贸mo realizar peticiones a un servidor remoto a trav茅s de http.

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

En esta peque帽a prueba vamos acceder a una API REST para obtener desde un servidor remoto un listado de usuarios. Para este peque帽o ejemplo vamos a utilizar RANDOM USER GENERATOR que como se indica en su web es una API libre de c贸digo abierto para generar datos de usuario aleatorios para realizar pruebas. C贸mo Lorem Ipsum, pero con personas.

Lo que vamos a hacer es simplemente realizar una llamada a esta API donde recibiremos como respuesta un listado de usuarios que mostraremos en nuestra vista.

Antes de nada vamos a crear una nueva aplicaci贸n de prueba:

ionic start pruebahttp1 blank

Seleccionamos Angular como framework pulsando enter y le podemos decir que no queremos integrarlo con Capacitor, si deseas probarlo desde un dispositivo m贸vil entonces le diremos que s铆, aunque puedes integrarlo despu茅s si lo deseas.

Una vez generado el proyecto como siempre desde el terminal con cd pruebahttp1 entramos dentro de la carpeta que acabamos de crear.

Ahora vamos a crear un servicio donde gestionaremos la comunicaci贸n con el servidor remoto:

ionic g service services/http

Se habr谩 creado una carpeta services y dentro聽 un archivo .ts con el nombre http.service.ts.

Por defecto contendr谩 el siguiente c贸digo:

import { Injectable } from '@angular/core';
 
@Injectable({
 providedIn: 'root'
})
export class HttpService {
 
 constructor() { }
}

Para realizar las peticiones al servidor vamos a utilizar un paquete de angular llamado HttpClient, as铆 que vamos a importarlo en nuestro servicio:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  constructor(public http: HttpClient) { }
}

Ahora debemos importar y declarar como provider en app.module.ts el servicio que acabamos de crear, tambi茅n debemos importar y declarar en los imports HttpClientModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpService } from './services/http.service';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    HttpService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

http.get

Vamos a a帽adir un m茅todo que llamaremos loadUsers a nuestro servicio para obtener la lista de usuarios desde el servidor, por lo tanto editamos el archivo http.service.ts y a帽adimos el siguiente funci贸n despu茅s del constructor:

 loadUsers() {
   return this.http
   .get('https://randomuser.me/api/?results=25')
 }

聽En este caso llamamos a randomuser y le decimos que devuelva 25 resultados (?results=25).

http.get devuelve el resultado de la solicitud en forma de un observable.

Como resultado de la petici贸n obtendremos un JSON con un formato parecido a este:

{
聽"results":[
聽聽聽{
聽聽聽聽聽"gender":"male",
聽聽聽聽聽"name":{"title":"mr","first":"denis","last":"vieira"},
     "location":{
聽聽聽聽聽聽聽"street":"666 rua sete de setembro ",
聽聽聽聽聽聽聽"city":"rondon贸polis",
聽聽聽聽聽聽聽"state":"minas gerais",
聽聽聽聽聽聽聽"postcode":44819,
聽聽聽聽聽聽聽"coordinates":{"latitude":"-73.8339","longitude":"-19.7138"},
       "timezone":{"offset":"-2:00","description":"Mid-Atlantic"}
     },
     "email":"denis.vieira@example.com",
     "login":{
聽聽聽聽聽聽聽"uuid":"4f51bc76-8f49-4043-841d-7b2978bd7665",
聽聽聽聽聽聽聽"username":"beautifulswan509",
聽聽聽聽聽聽聽"password":"down",
聽聽聽聽聽聽聽"salt":"I9rLbtmc",
聽聽聽聽聽聽聽"md5":"3689e6b1cb08345ac5ab67b179358250",
聽聽聽聽聽聽聽"sha1":"4f0e8bf0fea756dbaa8f4e7e01b7c6a8de328abf",
聽聽聽聽聽聽聽"sha256":"a23a5af4e8622e69c464a2a30f608066e77aa8d36f037ecdb171d452b20e5c96"
聽聽聽聽聽},
     "dob":{"date":"1984-02-04T02:47:36Z","age":35},
     "registered":{"date":"2004-07-29T23:10:42Z","age":14},
     "phone":"(45) 7844-4365",
     "cell":"(73) 5854-2157",
     "id":{"name":"","value":null},
     "picture":{
聽聽聽聽聽聽聽"large":"https://randomuser.me/api/portraits/men/62.jpg",
聽聽聽聽聽聽聽"medium":"https://randomuser.me/api/portraits/med/men/62.jpg",
聽聽聽聽聽聽聽"thumbnail":"https://randomuser.me/api/portraits/thumb/men/62.jpg"
聽聽聽聽聽},
     "nat":"BR"
   }, ...

Ahora vamos a crear la vista en home.page.html para mostrar un bot贸n que llamar谩 a la funci贸n cargarUsuarios, y un listado de items con los usuarios que crearemos recorriendo con *ngFor el array usuarios que posteriormente vamos a crear en el controlador:

<ion-header>
 <ion-toolbar>
   <ion-title>
     Usuarios
   </ion-title>
 </ion-toolbar>
</ion-header>

<ion-content>
 <ion-list>
   <ion-item *ngFor="let usuario of usuarios">
     <ion-avatar slot="start">
       <img [src]="usuario.picture.medium">
     </ion-avatar>
     <ion-label>
     <h2>{{ usuario.name.first }}</h2>
     <p>{{ usuario.email }}</p>
   </ion-label>
   </ion-item>
 </ion-list>
 <ion-button expand="block" (click) = "cargarUsuarios()">Cargar Usuarios</ion-button>
</ion-content>

Vamos a modificar home.page.ts para obtener los datos desde el servicio y mostrarlos en la vista para ello editamos home.page.ts e importamos el service httpProvider que acabamos de crear:

import { HttpService } from '../services/http.service';

Para poder utilizarlo debemos inyectarlo en el constructor:

constructor(private http: HttpService) {}

Justo antes del constructor vamos a definir una variable miembro donde guardaremos el array de usuarios que recibamos desde el servidor:

...
export class HomePage {

聽usuarios: any[];

 constructor(private http: HttpService) {}
...

Ahora vamos a crear un m茅todo en home.page.ts que que a su vez llamar谩 al m茅todo loadUsers de nuestro provider para recibir los datos de los usuarios:

cargarUsuarios(){
  this.http.loadUsers().subscribe(
    (res: any) => {
      this.usuarios = res.results;
    },
    (error) =>{
      console.error(error);
    }
  );
}

Como podemos observar llamamos al m茅todo loadUsers que hemos definido en el servicio, pero no utilizamos then sino subscribe, esto es porque http no devuelve una promesa si no que devuelve un observable. Un observable se queda a la espera de recibir datos y nosotros nos 鈥渟uscribimos鈥 recibiendo estos datos en cuanto est茅n disponibles.

Esta cualidad se puede utilizar para suscribirnos a una url y observar si ha habido cambios, como por ejemplo si es un sitio de noticias donde se est谩n continuamente renovando.

La diferencia entre promesas y observables a groso modo es que la promesa devuelve los datos una 煤nica vez cuando estos son recibidos mientras que un observable se queda 鈥渧igilando鈥 si se han producido cambios y se ejecuta cada vez que un cambio se produce, aunque hasta que no te suscribes a un observable 茅ste no se ejecutar谩.

Si solo necesitamos recibir los datos una 煤nica vez sin necesidad de observar si se han producido cambios podemos utilizar promesas. Una promesa se ejecuta una vez que se haya resuelto la llamada y recibimos los datos en la funci贸n .then(res=>{鈥 }).

El c贸digo del provider en el archivo http.ts utilizando una promesa quedar铆a de la siguiente manera:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
 
@Injectable({
 providedIn: 'root'
})
export class HttpService {
 
 constructor(public http: HttpClient) { }
 
 loadUsers() {
   return this.http
   .get('https://randomuser.me/api/?results=25').toPromise();
 
 }
 
}

Simplemente聽 debemos a帽adir toPromise() despu茅s del get.

Ahora en home.ts solo tenemos que sustituir subscribe por then:

cargarUsuarios(){
  this.http.loadUsers().then(
    (res: any) => {
      this.usuarios = res.results;
    },
    (error) =>{
      console.error(error);
    }
  );
}

Si ejecutamos la aplicaci贸n con ionic serve y pulsamos en el bot贸n Cargar Usuarios podremos ver algo como esto:

 

Pod茅is observar como cada vez que pulsemos el bot贸n la lista de usuarios cambia ya que Random User Generator como su propio nombre indica devuelve una lista aleatoria de usuarios.

http.post

RANDOM USER GENERATOR聽 nos ha servido para aprender ha hacer una petici贸n get a una API REST para recibir datos, en este caso una lista de usuarios.

Si queremos conectarnos con un servicio que tengamos corriendo en un servidor remoto y necesitamos pasarle datos desde la aplicaci贸n para que se guarden en el servidor tenemos que usar http.post.

Vamos a imaginar que tenemos corriendo un servicio en PHP cuya url sea https://www.miservicio.com/adduser/ que est谩 programado para recibir v铆a post un nuevo usuario para guardarlo en la base de datos del servidor.

En nuestro servicio tendremos que crear una funci贸n similar a esta:

postDatos() {
  const datos = { nombre: 'Edu', email: 'edu.revilla.vaquero@gmail.com'};

  const options = {
聽聽聽聽聽headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  };

  const url = 'https://www.miservicio.com/adduser/';

  return this.http.post(url, JSON.stringify(datos), options).toPromise();
}

En la variable datos聽 tenemos un objeto con los datos del usuario que queremos enviar al servidor, en este caso nombre y email.

Despu茅s definimos la variable options donde a su vez definimos las cabeceras en la variable headers, dependiendo de la configuraci贸n del servidor podr铆a necesitar par谩metros diferentes en la cabecera.

Como vemos http.post es bastante parecido a http.get, solo que como segundo par谩metro le pasamos la variable que contiene los datos que queremos enviar convertida a formato JSON con JSON.stringify(datos), como tercer par谩metro le pasamos options.

En data recibiremos la respuesta que nos de el servidor.

Vamos a ver un ejemplo de c贸mo obtendremos los datos enviados desde nuestra aplicaci贸n con un servicio desarrollado en PHP en el servidor:

<?php
聽聽header('Access-Control-Allow-Origin: *');

聽聽$postdata = file_get_contents("php://input");
聽聽if (isset($postdata)) {
聽聽聽$request = json_decode($postdata);
聽聽聽$request->recibido = 'OK';
聽聽聽echo json_encode($request);
聽聽}

?>

Por seguridad muchos sitios solo admiten peticiones que se hagan desde su propio dominio, 聽para no tener problemas de Cross-Origin en la primera l铆nea le asignamos la opci贸n header para indicarle que est谩 permitido cualquier origen:

header('Access-Control-Allow-Origin: *');

Tambi茅n hay que tener en cuenta que el navegador puede bloquear peticiones a dominios que no sean https, por lo que s铆 est谩s intentando acceder a un servidor que no tenga activado https puede que el navegador bloquee la petici贸n y te muestre un error en consola.

Si vas a hacer pruebas en un servidor local existen complementos para Chrome que evita el bloqueo de las peticiones Cross-Origin.

 

En este ejemplo tan sencillo lo 煤nico que hacemos en la siguiente l铆nea es recoger los datos que hemos enviado desde la aplicaci贸n:

$postdata = file_get_contents("php://input");

Despu茅s miramos si no est谩 vac铆o $postdata y en $request guardamos el objeto resultante al decodificar el json.

$request = json_decode($postdata);

Le a帽adimos una propiedad m谩s al objeto para indicar que hemos recibido la petici贸n:

$request->recibido = 'OK';

Por 煤ltimo simplemente sacamos un echo de $request convertido de nuevo a json.

Es decir que recibiremos como resultado en la app lo mismo que hemos enviado m谩s un campo recibido que contendr谩 la palabra 鈥極K鈥.

Evidentemente en otros lenguajes de programaci贸n del lado del servidor el c贸digo para recibir los datos ser铆a diferente, pero se escapa del prop贸sito de este libro el abordar como ser铆a en cada lenguaje.

Para probar esto podemos a帽adir un bot贸n al al home.page.ts del ejemplo anterior y que llame a una funci贸n de definiremos despu茅s en el controlador:

<ion-header>
 <ion-toolbar>
   <ion-title>
     Usuarios
   </ion-title>
 </ion-toolbar>
</ion-header>
 
<ion-content>
 <ion-list>
   <ion-item *ngFor="let usuario of usuarios">
     <ion-avatar slot="start">
       <img [src]="usuario.picture.medium">
     </ion-avatar>
     <ion-label>
     <h2>{{ usuario.name.first }}</h2>
     <p>{{ usuario.email }}</p>
   </ion-label>
   </ion-item>
 </ion-list>
 <ion-button expand="block" (click) = "cargarUsuarios()">Cargar Usuarios</ion-button>
 <ion-button expand="block" (click) = "post()">Peticion POST</ion-button>
</ion-content>

Definimos entonces la funci贸n post en home.page.ts:

post() {
    this.http.postDatos().then(res=>{
      alert(JSON.stringify(res));
    })
 }

Esta funci贸n simplemente va a realizar una llamada a la funci贸n postDatos que tendremos creada en nuestro servicio http y saca un alert del resultado obtenido convirti茅ndolo a texto utilizando el m茅todo stringify de JSON.

Si no tienes la posibilidad de tener un servidor para hacer pruebas puedes utilizar alg煤n servicio online que te permite hacer pruebas como por ejemplo http://httpbin.org, pudiendo quedar el m茅todo postDatos de nuestro servicio de la siguiente manera:

postDatos() {
   const datos = { nombre: 'Edu', email: 'edu.revilla.vaquero@gmail.com'};
 
   const options = {
聽聽聽聽聽headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
     }
   };
 
   const url = 'http://httpbin.org/post';
 
   return this.http.post(url, JSON.stringify(datos), options).toPromise();
 }

Si quieres saber m谩s sobre el desarrollo de aplicaciones con IONIC puedes adquirir mi libro, es esta entrada puedes ver el 铆ndice de contenidos del libro:

Libro: Desarrollo de aplicaciones m贸viles multiplataforma y PWAs con Ionic y Firebase desde cero.

Muchas gracias

Un saludo, y si a煤n no lo has hecho no olvides suscribirte a mi blog para no perderte los pr贸ximos posts 聽:-),

Tambi茅n puedes seguirme en Twitter en 鈥嶡revigames y no olvides que me ayudas mucho聽si compartes este post en las redes sociales.

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.