Menu

Conectado una API REST con Ionic

apidemos - May 12, 2017 por Nicolas Molina
ionic3.3.0ionic-native3.10.3ionic-app-scripts1.3.7cordova-cli7.0.1ionic-cli3.3.0

Una parte fundamental de cualquier aplicación es conectarse con servicio externos, en este caso vamos a conectarnos con una API REST. Vamos a crear una aplicación que se contecte con http://randomuser.me/ un API con información de usuarios aleatorios.

Actualización (01/05/2017)


Hemos actualizado este demo con el último release de Ionic 3, si aún estas en alguna de las versiones anteriores puedes seguir estos pasos de Ionic 2 a Ionic 3.

Ademas en este demo usamos la función de lazy loading y @IonicPage. Puedes ver el repositorio Demo103


Paso 1: Iniciando el proyecto

Lo primero que haremos será iniciar un nuevo proyecto con ionic, vamos a nuestra terminal y ejecutamos:

ionic start demo103 blank

Ionic crea una carpeta con el nombre del proyecto, nuestro siguiente paso será ubicarnos dentro a la carpeta del proyecto desde nuestra terminal con:

cd demo103

El proyecto inicia con el template blank y por esto tendremos una estructura básica del proyecto, la carpeta en la que vamos a trabajar será src:

Agregamos la plataforma para la que vamos a desarrollar:

ionic cordova platform add android
ionic cordova platform add ios

Paso 2: Importar HttpModule

Ahora debemos agregar HttpModule en nuestro archivo app.module.ts, este paso es muy importante si dentro de la aplicación se usa la dependencia Http:

...
import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [...]
})
export class AppModule {}

Paso 3: Crear provider

Vamos a usar ionic generator para crear nuestro nuevo proveedor de datos

ionic g provider user-service

ionic creará un archivo para nuestro servicio que estará en src/providers/user-service.ts:

Recuerda que debes agregar este provider dentro del array providers en app/app.module.ts, así:

...
import { UserService } from '../providers/user-service';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    ...
    UserService,
    ...
  ]
})
export class AppModule {}

Paso 4: Conectarse a Random User API

Random User es un REST API que nos retorna usuarios aleatoriamente, pueden consultar la docs de esta API aquí.

Para conectarse solo debemos hacer una solicitud con el parámetro results que será la cantidad de usuarios que necesitemos así:

https://randomuser.me/api/?results=25

La respuesta de random user API será de esta manera:

{
  "results": [
    {
      "gender": "male",
      "name": {
        "title": "mr",
        "first": "samuel",
        "last": "ross"
      },
      "location": {
        "street": "5592 pockrus page rd",
        "city": "santa ana",
        "state": "oregon",
        "postcode": 69974
      },
      "email": "samuel.ross@example.com",
      "login": {
        "username": "silverwolf434",
        "password": "blackjac",
        "salt": "d14iEZQT",
        "md5": "261a57061d35918f5c3ef7f90f4f2a80",
        "sha1": "c330ad8c974ab9982622d5d5506cfed4886a79ab",
        "sha256": "8ca4a1ca48975a69bd829de61298cd6a950dede740d4c0e755d07ee4cfc06fa5"
      },
      "registered": 1155461743,
      "dob": 1078494582,
      "phone": "(179)-102-8139",
      "cell": "(107)-396-0688",
      "id": {
        "name": "SSN",
        "value": "476-30-9095"
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/men/80.jpg",
        "medium": "https://randomuser.me/api/portraits/med/men/80.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/men/80.jpg"
      },
      "nat": "US"
    }
  ],
  "info": {
    "seed": "705567e86a824a27",
    "results": 1,
    "page": 1,
    "version": "1.0"
  }
}

Nos retorna toda la información necesaria respecto a usuario, ahora dentro del UserService, vamos a crear el método getUsers que se encargará de obtener los datos de la API.

getUsers() {
  return this.http.get('https://randomuser.me/api/?results=25')
  .map(res => res.json())
  .toPromise();
}

La clase completa quedaría así:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class UserService {

  constructor(
    private http: Http
  ) {}

  getUsers() {
    return this.http.get('https://randomuser.me/api/?results=25')
    .map(res => res.json())
    .toPromise();
  }
}

Paso 5: Inyectar el servicio.

Desde el archivo home.ts vamos a inyectar a UserService, de esta manera:

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { UserService } from '../../providers/user-service';

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

  users: any[] = [];

  constructor(
    public navCtrl: NavController,
    public userService: UserService
  ) {}

  ionViewDidLoad(){
    this.userService.getUsers()
    .then(data => {
      this.users = data.results;
    })
    .catch(error =>{
      console.error(error);
    })
  }
}

Importamos el servicio UserService desde su ubicación, luego definiremos users como un array vacío, luego en el constructor inyectamos como una dependencia a UsersService y finalmente dentro del método ionViewDidLoad llamamos al método getUsers que hará la solicitud y finalmente la respuesta la asigna a this.users.

Paso 6: El template

Ahora en el template de home.html lo único que nos queda es mostrar los usuarios, básicamente iteramos array de users y luego solo mostramos las atributos de cada usuario.:


<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Demo 103
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let user of users">
      <ion-avatar item-start>
        <img [src]="user.picture.medium">
      </ion-avatar>
      <h2>{{ user.name.first | uppercase }}</h2>
      <p>{{ user.email }}</p>
    </ion-item>
  </ion-list>
</ion-content>

Resultado:


Ver código

Recuerda:

Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

Y luego

ionic cordova prepare

esto es para descargar todas las dependencias del proyecto.

¡Compártelo!