UNIRSE

Cómo hacer llamadas HTTP con Ionic

GANANCIAS
ÚNETE A LA
RÁPIDAS
RECIENTES
ACADEMI
JÓNICA
Cómo
registrar
mejor su
CURSOS EN
aplicación
PROFUNDIDAD
iónica TUTORIALES
con
ngx-logger
¡Bienvenido a la 3. lección del Curso de Ionic PROYECTOS Y
Cómo RECURSOS EXC
Crash! DE HANDS ON
agregar un
menú
Hoy entraremos en detalles sobre las solicitudes COMUNIDAD A
lateralSOLIDARIA
a tu
HTTP y cómo usar los proveedores para estructurar
aplicación
nuestra aplicación.
de Ionic
HAZ4 CLIC PAR
[v4] COMENZAR
Haremos uso de Star Wars API , una API pública y
gratuita disponible con resultados JSON que es Cómo
Utilizamos Shahpara
cookies de Västerås, U de brindarle la mejor experiencia en nuestro sitio web. Siagregar una este
exactamente loasegurarnos
que necesitamos
Se unió a la Academia Jónica!
ahora mismo. continúa utilizando
sitio, asumiremos que está satisfecho con él. OK LEER MÁS barra de
hace 5 días por prueba
1. Llamadas HTTP básicas pestañas a
tu
En primer lugar, tenemos que decirle a nuestra
aplicación
aplicación que incluya otro módulo angular para
de Ionic 4
realizar solicitudes HTTP. Esto ya está instalado,
[v4]
simplemente necesitamos cargarlo y agregarlo
Cómo
dentro de nuestro src / app / app.module.ts como
mostrar /
este:
ocultar
elementos
1 import { BrowserModule } from '@angular/platform-browser' basados en
2 import { ErrorHandler, NgModule } from '@angular/core';
3 import { IonicApp, IonicErrorHandler, IonicModule } from
roles de
4 import { SplashScreen } from '@ionic-native/splash-screen
5 import { StatusBar } from '@ionic-native/status-bar'; usuario con
6  
7 import { MyApp } from './app.component'; Ionic [v4]
8 import { HttpClientModule } from '@angular/common/http';
9   Agrega
10 @NgModule({
11
12
  declarations: [
    MyApp ÚNETE
redes A LA
ACADEMI
sociales a
13   ],
14   imports: [
15     BrowserModule,
tu
16
17
    HttpClientModule,
    IonicModule.forRoot(MyApp) JÓNICA
aplicación
18   ],
19
20
  bootstrap: [IonicApp],
  entryComponents: [
iónica [v4]
21     MyApp
CURSOS EN
22   ],
23   providers: [ PROFUNDIDAD
24     StatusBar, TUTORIALES
25     SplashScreen,
26     {provide: ErrorHandler, useClass: IonicErrorHandler}
27   ] PROYECTOS Y
28 })
RECURSOS EXC
29 export class AppModule {}
DE HANDS ON

¡Ahora estamos listos para hacer llamadas HTTP a COMUNIDAD A

cualquier lugar que queramos! SOLIDARIA

Si queremos utilizar recursos externos como este, la HAZ CLIC PAR

operación es asíncrona . COMENZAR

Lo que sea que intente llamar lleva tiempo, y esto

sucede en el fondo de nuestra aplicación y, en algún
momento, devuelve datos.

Con Angular podemos usar Promesas y

Observables . Si ha utilizado AngularJS, es posible
que ya conozca las Promesas, que se llaman y en
algún momento devuelven un resultado o un error.

Los observables son un poco más nuevos y

permiten un mayor control, por ejemplo, puede
cancelar un observable o recibir múltiples valores de
retorno. Puede imaginárselo como un ujo de
eventos en el que una promesa era solo un clic .

Entonces, la solicitud que hacemos al Swapi nos

devuelve un observable que podemos asignar a una
variable local. Utilizamos el servicio estándar de ÚNETE A LA
Http Angular para realizar una solicitud GET clásica ACADEMI
. JÓNICA
Se manejó una promesa clásica con then () , que se
CURSOS EN
activó una vez cuando llegó el resultado. PROFUNDIDAD
TUTORIALES
Como ahora tenemos un observable, debemos
hacerlo subscribe()al ujo de datos que podría PROYECTOS Y
RECURSOS EXC
volver. Dentro de ese bloque nalmente obtenemos DE HANDS ON

el resultado de nuestra llamada.

COMUNIDAD A
SOLIDARIA
Ahora abra su src / pages / lms / lms.ts y
cámbielo a:
HAZ CLIC PAR
COMENZAR
1 import { Component } from '@angular/core';
2 import { IonicPage, NavController, NavParams } from 'ioni
3 import { Observable } from 'rxjs/Observable';
4 import { HttpClient } from '@angular/common/http';
5  
6 @IonicPage()
 7 @Component({
8   selector: 'page-films',
9   templateUrl: 'films.html',
10 })
11 export class FilmsPage {
12   films: Observable<any>;
13  
14   constructor(public navCtrl: NavController, public httpC
15     this.films = this.httpClient.get('https://swapi.co/ap
16     this.films
17     .subscribe(data => {
18       console.log('my data: ', data);
19     })
20   }
21 }

Si ahora abre su aplicación, se demora un poco

después del inicio (recuerde: ¡asíncrono!) Y dentro
de su área de depuración debe ver un mensaje de
registro donde podemos encontrar e inspeccionar
diferentes objetos de la llamada que hicimos.

ÚNETE A LA
ACADEMI
JÓNICA
CURSOS EN
PROFUNDIDAD
TUTORIALES

PROYECTOS Y
RECURSOS EXC
DE HANDS ON

COMUNIDAD A
SOLIDARIA

HAZ CLIC PAR

COMENZAR
NOTA: Puede suceder que reciba un mensaje como
este dentro de su navegador:
 “ Error al cargar http://swapi.co/api/ lms: la
redirección de 'http://swapi.co/api/ lms' a
'https://swapi.co/api/ lms' ha sido bloqueada
por la política de CORS : No hay ningún
encabezado 'Access-Control-Allow-Origin'
presente en el recurso solicitado. Por lo tanto,
el origen 'http: // localhost: 8100' no tiene
permitido el acceso.

Este es un problema de CORS que obtendrá dentro

del navegador (¡pero no más tarde dentro de una
aplicación real!). Simplemente puede agregar esta
extensión de Chrome y habilitarla, ¡entonces las
solicitudes también deberían funcionar dentro de su ÚNETE A LA
navegador! ACADEMI
Si ha llegado a este punto, ya está bastante cerca de
JÓNICA
mostrarlos, así que no solo lo registremos, ¡sino que
también los mostremos dentro de nuestra vista! CURSOS EN
PROFUNDIDAD
TUTORIALES
2. Visualización de datos
asíncronos PROYECTOS Y
RECURSOS EXC
DE HANDS ON
Con Angular podemos usar fácilmente observables
directamente desde nuestra vista. No tenemos que
COMUNIDAD A
esperar el resultado y asignarlo, ¡pero podemos SOLIDARIA
simplemente con gurar la variable al resultado de
nuestra llamada HTTP y manejar el resto dentro de HAZ CLIC PAR
la vista! COMENZAR

Por lo tanto, cambie el src / pages / lms / lms.ts

a una versión más simpli cada:
 1 import { Component } from '@angular/core';
2 import { IonicPage, NavController, NavParams } from 'ioni
3 import { Observable } from 'rxjs/Observable';
4 import { HttpClient } from '@angular/common/http';
5  
6 @IonicPage()
7 @Component({
8   selector: 'page-films',
9   templateUrl: 'films.html',
10 })
11 export class FilmsPage {
12   films: Observable<any>;
13  
14   constructor(public navCtrl: NavController, public navPa
15     this.films = this.httpClient.get('https://swapi.co/ap
16   }
17
18   openDetails(film) {
19     this.navCtrl.push('FilmDetailsPage', {film: film});
20   }
21 }

Además, cuando pasamos a la página siguiente,

pasamos un objeto de película, que entrará en la
openDetails()función desde nuestro punto de ÚNETE A LA
vista. ACADEMI
Dentro del siguiente bloque de código tenemos
JÓNICA
algunos elementos nuevos, especialmente:
CURSOS EN
PROFUNDIDAD
* ngFor: una sintaxis para iterar sobre una TUTORIALES
matriz y crear múltiples elementos del mismo
tipo PROYECTOS Y
RECURSOS EXC
| async: Llamado "tubo", y le dice a Angular que DE HANDS ON
observe esta variable, ya que cambiará más
adelante COMUNIDAD A
SOLIDARIA
? : Operador que le dice a Angular que la
variable podría ser nula, por favor no bloquee
HAZ CLIC PAR
COMENZAR
El objeto de película que creamos con cada iteración
de nuestro bucle se pasa directamente al evento de
clic y se abrirá paso a la página siguiente.
Dentro de la lista Ionic, crearemos varios elementos
utilizando este bucle, ¡un patrón muy común que
verás en las aplicaciones Angular!

En cada bucle, simplemente agregamos el título de

la película al botón, así que al nal tendremos una
lista de botones para abrir la página de detalles de
cada uno.

Continúe y cambie su src / pages / lms /

lms.html a:

1 <ion-header>
2   <ion-navbar color="primary">
3     <ion-title>Films</ion-title>
4   </ion-navbar>
5
6
</ion-header>
 
ÚNETE A LA
7
8
<ion-content>
<ion-list> ACADEMI
JÓNICA
9   <button ion-item *ngFor="let film of (films | async)?.r
10     {{ film.title }}
11   </button>
12 </ion-list>
13  
14 </ion-content>
CURSOS EN
PROFUNDIDAD
La última parte que falta ahora es cambiar la página TUTORIALES
de detalles que no muestra ninguno de nuestros
PROYECTOS Y
datos. RECURSOS EXC
DE HANDS ON
Ya estamos pasando los datos a esa página a través
COMUNIDAD A
de nuestra función de inserción, solo necesitamos
SOLIDARIA
manejarlos correctamente. Por lo tanto, cambie src
/ pages / lm-details / lm-details.ts a:
HAZ CLIC PAR
COMENZAR
1 import { Component } from '@angular/core';
2 import { IonicPage, NavController, NavParams } from 'ioni
3  
4 @IonicPage()
5 @Component({
 6   selector: 'page-film-details',
7   templateUrl: 'film-details.html',
8 })
9 export class FilmDetailsPage {
10   film: any;
11  
12   constructor(public navCtrl: NavController, public navPa
13     this.film = this.navParams.get('film');
14   }
15 }

Al igual que antes, estamos extrayendo el valor a

una variable local. Ahora podemos usar esa variable
dentro de nuestra vista para establecer el título y
mostrar una pequeña tarjeta con la apertura de la
película de Star Wars seleccionada.

Abra su src / pages / lm-details / lm-

details.html y cambie la vista para leer los valores
de nuestra variable:
ÚNETE A LA
ACADEMI
1
2
3
<ion-header>
  <ion-navbar color="primary">
    <ion-title>{{ film.title }}</ion-title>
JÓNICA
4   </ion-navbar>
5 </ion-header>
6  
7 <ion-content padding> CURSOS EN
8   <ion-card> PROFUNDIDAD
9     <ion-card-content> TUTORIALES
10       {{ film.opening_crawl }}
11     </ion-card-content>
12   </ion-card>
13 </ion-content> PROYECTOS Y
RECURSOS EXC
DE HANDS ON
Ahora puede obtener una lista de películas y
visualizar para cada película los datos, ¡solo con COMUNIDAD A
SOLIDARIA
unas pocas líneas de código!

HAZ CLIC PAR

COMENZAR
Siempre me sorprendo cuando utilizo una API REST
y los datos solo aparecen después de
ÚNETE A LA
implementarlos solo una vez para el caso general. ACADEMI
Quizás eres como yo. JÓNICA
De todos modos, podemos mejorar un poco la
CURSOS EN
estructura de nuestra aplicación, lo cual es una PROFUNDIDAD
buena práctica para las aplicaciones iónicas. TUTORIALES

PROYECTOS Y
3. Usando Proveedores RECURSOS EXC
DE HANDS ON
Un proveedor es un componente angular que se
puede inyectar en otras páginas que nos permite COMUNIDAD A
SOLIDARIA
llamar a algunas funciones.

Un proveedor no tiene vista, solo nos devuelve HAZ CLIC PAR

COMENZAR
datos . Y eso es exactamente lo que necesitamos.

Es una buena idea mantener sus llamadas HTTP

separadas de su vista y clase, ya que se puede
mantener más fácilmente y no se distribuye en todo
su proyecto.

¿Todavía no eres
miembro?
¡Únete a la Academia Iónica ahora y
disfruta de la biblioteca completa del ÚNETE A LA
curso !
ACADEMI
JÓNICA
Creando un Proveedor
CURSOS EN
Podemos hacer uso nuevamente de la CLI de Ionic y PROFUNDIDAD
TUTORIALES
llamar al generador para crear un nuevo proveedor
para nosotros. Simplemente llama a esto desde la
PROYECTOS Y
raíz de tus proyectos: RECURSOS EXC
DE HANDS ON

1 ionic g provider api COMUNIDAD A

SOLIDARIA

Esto creará una nueva carpeta dentro de src /

suppliers , y solo debemos asegurarnos de que el HAZ CLIC PAR
COMENZAR
proveedor se agregue a la matriz de nuestros
proveedores para la aplicación completa dentro de
src / app / app.module.ts (pero esto puede haber
ocurrido ya con una versión más reciente de Ionic
CLI!):

1 import { BrowserModule } from '@angular/platform-browser'

2 import { ErrorHandler, NgModule } from '@angular/core';
3 import { IonicApp, IonicErrorHandler, IonicModule } from
4 import { SplashScreen } from '@ionic-native/splash-screen
5 import { StatusBar } from '@ionic-native/status-bar';
6
7 import { MyApp } from './app.component';
8 import { HttpClientModule } from '@angular/common/http';
9 import { ApiProvider } from '../providers/api/api';
10  
11 @NgModule({
12   declarations: [
13     MyApp
14   ],
15   imports: [
16     BrowserModule,
17     IonicModule.forRoot(MyApp),
18     HttpClientModule
19   ],
20   bootstrap: [IonicApp],
21   entryComponents: [
22
23
    MyApp
  ], ÚNETE A LA
ACADEMI
24   providers: [
25     StatusBar,
26     SplashScreen,
27
28
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ApiProvider JÓNICA
29   ]
30 })
31 export class AppModule {}
CURSOS EN
PROFUNDIDAD
Siempre asegúrese de seguir este paso, de lo TUTORIALES
contrario verá algunos errores dentro de la consola
y se preguntará por qué no puede usar sus PROYECTOS Y
RECURSOS EXC
proveedores. DE HANDS ON

Implementando el Proveedor COMUNIDAD A

SOLIDARIA
Nuestro proveedor tiene solo un trabajo muy
pequeño: ¡Devuelva datos desde Swapi!
HAZ CLIC PAR
COMENZAR
Es más o menos el mismo código que teníamos en
nuestra página antes, así que continúa y cambia tu
fuente / proveedores / api / api.ts a:
 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http';
3
4 @Injectable()
5 export class ApiProvider {
6
7   constructor(public http: HttpClient) { }
8
9   getFilms() {
10     return this.http.get('https://swapi.co/api/films');
11   }
12 }

Nuestro proveedor tiene ahora una función a la

getFilms()que podemos llamar desde fuera, ¡así
que hagamos esto!

Usando el proveedor
Nuestra FilmsPage es la primera página que hace
uso de nuestro nuevo proveedor. ÚNETE A LA
Al igual que con cualquier otra cosa que usamos
ACADEMI
antes, necesitamos importar el archivo e inyectarlo a JÓNICA
través de nuestro constructor.

CURSOS EN
Al hacer esto, podemos usarlo directamente y llamar PROFUNDIDAD
TUTORIALES
a sus funciones, que nuevamente solo devolverá un
observable como antes.
PROYECTOS Y
RECURSOS EXC
DE HANDS ON
Abra su src / pages / lms / lms.ts y cámbielo a:

COMUNIDAD A
SOLIDARIA
1 import { ApiProvider } from './../../providers/api/api';
2 import { Component } from '@angular/core';
3 import { IonicPage, NavController } from 'ionic-angular';
4 import { Observable } from 'rxjs/Observable';
5   HAZ CLIC PAR
6 @IonicPage() COMENZAR
7 @Component({
8   selector: 'page-films',
9   templateUrl: 'films.html',
10 })
11 export class FilmsPage {
12   films: Observable<any>;
13  
14   constructor(public navCtrl: NavController, public apiPr
15     this.films = this.apiProvider.getFilms();
16   }
17  
18   openDetails(film) {
19     this.navCtrl.push('FilmDetailsPage', {film: film});
20   }
21 }

Muy fácil, ¿no es así ?

Nuestra aplicación sigue funcionando igual que

antes, pero hemos separado nuestra lógica
comercial de la vista a un proveedor.

Entonces, cuando piense en la lógica de negocios de

su aplicación, trate de mantenerlos en un proveedor
separado donde pueda agruparlos.

Entonces la fuerza siempre estará contigo. ÚNETE A LA

ACADEMI
4. próximos pasos JÓNICA
Felicitaciones por terminar la 3. lección!
Ahora ya eres bastante hábil y capaz de realizar CURSOS EN
solicitudes HTTP, buen trabajo. PROFUNDIDAD
TUTORIALES

Como una pequeña tarea para la próxima lección, PROYECTOS Y

implemente también los siguientes cambios: RECURSOS EXC
DE HANDS ON

Agrega 2 funciones más al proveedor para

COMUNIDAD A
cargar personas y planetas SOLIDARIA
Implemente PeoplesPage y PlanetsPage con los
datos que obtenga del apiProvider HAZ CLIC PAR
Genera 2 páginas más para peopleDetails y COMENZAR
planetDetails como hicimos para nuestra
película
 Después de seguir esos pasos, ¡tienes 3 pestañas de
trabajo con listas y páginas de datos detalladas!

Estoy seguro de que puedes hacer esto. Si tiene

alguna pregunta, no dude en pegarme en
@schlimmson .

Feliz codi cacion,

simon

© Academia Jónica - 2018 ÚNETE

RENUNCIA A LA
INTIMIDAD

ACADEMI APOYO

JÓNICA
CURSOS EN
PROFUNDIDAD
TUTORIALES

PROYECTOS Y
RECURSOS EXC
DE HANDS ON

COMUNIDAD A
SOLIDARIA

HAZ CLIC PAR

COMENZAR