Conectar API con Ionic

En este artículo vamos a conectar nuestra aplicación de ionic con una API REST, para ello utilizaremos https://jsonplaceholder.typicode.com, una página que nos proveé de una API de entradas de blogs, que nos viene perfecta para este ejemplo.

Este sería parte del JSON que nos va a retorna la API:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  {
    "userId": 1,
    "id": 4,
    "title": "eum et est occaecati",
    "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
  },
  {
    "userId": 1,
    "id": 5,
    "title": "nesciunt quas odio",
    "body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
  },
]

Instalación de Ionic

Si no tenemos instalado ionic, podemos instalarlo con npm con el siguiente comando desde nuestra consola:

npm install -g ionic

Y crearemos un proyecto nuevo de ionic:

ionic start api blank --cordova

Configuración para realizar la petición

Ahora nos dirijeremos a app.module.ts que se encuentra en src/app e importaremos HtttpClienteModule, que lo utilizaremos para hacer la petición con nuestra aplicación.

Debemos hacer su importación y añadirlo en el apartado imports

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

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,//Lo agregamos aqui también
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    PostServiceProvider
  ]
})
export class AppModule {}

Ahora debemos crear nuestro service, que será el encargado de hacer la petición y retornarnos la información obtenida a nuestra page. Ejecutamos en nuestra consola este comando:

ionic g provider post-service

Esto nos creará nuestro service en src/providers/post-service y nos lo importará tambien a nuestro app.module.ts.

En post-service.ts crearemos una variable url, donde añadiremos la url de la API y la función getPosts para hacer la petición:

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

/*
  Generated class for the PostServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class PostServiceProvider {

  url = 'https://jsonplaceholder.typicode.com/posts';

  constructor(public http: HttpClient) {

  }

  getPosts(){
    return new Promise(resolve=>{
      this.http.get(this.url).subscribe(data=>{
          resolve(data);
      },error=>{
        console.log(error);
      });
    });
  }

}

Con esto, nuestra aplicación ya estará lista para conectarse con la API.

Si necesitaramos hacer una insercción de datos en una API propia, podriamos hacelo de la misma forma pero con el metodo post y pasandole la información mediante el parametro data:

addPost(data) {
    return new Promise((resolve, reject) => {
      this.http.post(this.url, JSON.stringify(data))
        .subscribe(response => {
          resolve(response);
        }, (error) => {
          reject(error);
        });
    });
  }

Obtenemos los datos en nuestra vista

Vamos a mostrar los datos que nos devuelve nuestro service en la page home, para ello vamos a home.ts, que se encuentra en src/pages/home.

Importaremos el servicio en home.ts, crearemos una variable llamada arrayPost, un método llamado getPost que llamará a la función de nuestro servicio y guardará los datos en nuestra variable. Una vez hecho esto llamaremos a getPost en la función de ionic ionViewLoad, que se ejecutará en cuanto nuestra page se cargue:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PostServiceProvider } from '../../providers/post-service/post-service'; //importamos nuestro service

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  arrayPosts:any; //Creamos la variable donde guardaremos los datos que nos retorna el servicio

  constructor(public navCtrl: NavController, public postServices:PostServiceProvider) {

  }
  ionViewDidLoad() {
    this.getPosts();//Llamamos a la función getPost cuando la vista se cargue
  }

  getPosts() { //llamamos a la funcion getPost de nuestro servicio.
    this.postServices.getPosts()
    .then(data => {
      this.arrayPosts = data;
    });
  }
}

Mostramos los datos en nuestra vista

Una vez hecho esto, ya tendremos nuestra variable arrayPost cargada con los datos, ahora solo debemos ir a home.html donde mostraremos el título y el contenido de los post retornados por la API:

<ion-header>
  <ion-navbar>
    <ion-title>
      Test API IONIC
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <div class="post" *ngFor="let post of arrayPosts">
    <h2>{{post.title}}</h2>
    <p>{{post.body}}</p>
  </div>
</ion-content>

Para ver más clara la información añadiremos estos estilos en html.scss:

page-home {
    .post{
        border:1px solid gray;
        padding:1rem;
        margin-top:1rem;
    }
}

Y obtendriamos el siguiente resultado:

¡Esperamos que te haya servido de ayuda! cualquier duda no dudes en contactar con nosotros.