ionic API 호출하기

Ionic CLI를 사용하여 Ionic을 시작하고 실행하는 것은 웹 개발 경험이있는 사람에게 매우 익숙합니다. 이번에는 백엔드 API를 호출하는 방법을 살펴 보겠습니다.

ionic 시작하기

Ionic CLI의 ionic start 명령어를 사용하여, 빈 템플릿 앱을 만들 수 있습니다.

ionic start apiApp blank

ionic 앱의 프로젝트 구성은 Home page를 비롯하여 몇 가지 기본 골격이 있습니다.

새로운 Provider 생성하기

API에 대한 HTTP 요청을하는 데 사용될 새 Provider(Service)를 추가하는 방법을 살펴 보겠습니다. ionic CLI 명령어에서 ionic g를 사용하여 자동 Provider를 쉽게 만들수 있습니다. 프로젝트 디렉토리 (cd apiApp)로 변경 한 후 CLI를 사용하여 PeopleService라는 새 Provider를 만듭니다.

ionic g provider PeopleService

CLI는 app / providers / people-service / people-service.ts 파일을 생성하고 PeopleService라는 @Injectable 클래스(주입가능한)를 생성합니다.

이 클래스는 HTTP 요청을하기 위해 load 선언하여 구현합니다.

load() {
  if (this.data) {
    // already loaded data
    return Promise.resolve(this.data);
  }

  // don't have the data yet
  return new Promise(resolve => {
    // We're using Angular HTTP provider to request the data,
    // then on the response, it'll map the JSON data to a parsed JS object.
    // Next, we process the data and resolve the promise with the new data.
    this.http.get('path/to/data.json')
      .map(res => res.json())
      .subscribe(data => {
        // we've got back the raw data, now generate the core schedule data
        // and save the data for later reference
        this.data = data;
        resolve(this.data);
      });
  });
}

랜덤 User API

랜덤 User API는 이름, 이메일, 그림 등 가짜 사용자의 데이터를 생성하는 무료 API입니다. 개발 및 학습을 수행하는 데 매우 유용한 API입니다. https://randomuser.me/api/에 대한 HTTP 요청을하면 다음과 비슷한 JSON 응답이 반환됩니다.

{
  "results":[
    {
      "gender":"female",
      "name":{
        "title":"mrs",
        "first":"lourdes",
        "last":"mendez"
      },
      "location":{
        "street":"5587 calle de la almudena",
        "city":"santander",
        "state":"aragón",
        "postcode":97884
      },
      "email":"lourdes.mendez@example.com",
      "login":{
        "username":"crazywolf589",
        "password":"honeybee",
        "salt":"8YC5ClQD",
        "md5":"7c947eaedccd5df8b970b5ed5a214106",
        "sha1":"1977f1837f2395803028505342e23d9d524ad91b",
        "sha256":"356b1639f0e07bd206729058764394c668a42f44ceeb803aa3ed901847787965"
      },
      "dob":"1987-09-17 02:34:06",
      "registered":"2007-03-21 11:45:33",
      "phone":"993-608-021",
      "cell":"643-940-017",
      "id":{
        "name":"DNI",
        "value":"83663627-R"
      },
      "picture":{
        "large":"https://randomuser.me/api/portraits/women/71.jpg",
        "medium":"https://randomuser.me/api/portraits/med/women/71.jpg",
        "thumbnail":"https://randomuser.me/api/portraits/thumb/women/71.jpg"
      },
      "nat":"ES"
    }
  ],
  "info":{
    "seed":"a909a8aa034b4592",
    "results":1,
    "page":1,
    "version":"1.1"
  }
}

그리고 만약에 10명을 사용자 정보를 받기 위해서 URL을 다음과 같이  https://randomuser.me/api/?results=10  보내면 결과 배열에 10 명의 사용자 정보를 수신할 수 있습니다. 랜덤 User API를  PeopleService에 적용해 보겠습니다.

this.http.get('https://randomuser.me/api/?results=10')

현재 코드는 요청만 하지 응답을 처리하지 않습니다. .subscribe 메소드를 사용하여 사용자정보 배열을 처리합니다.

.subscribe(data => {
  this.data = data.results;
  resolve(this.data);
});

작성된 load 메서드는  API로부터 호출하여 응답을 얻을 때 사용자배열을 Promise 형태로 리턴합니다.

PeopleService 호출하기

PeopleService를 호출하여 응답 결과를 홈페이지에 리스트 형태로 출력합니다. 먼저 app / pages / home / home.ts 파일에서 서비스를 import 합니다.

import {PeopleService} from '../../providers/people-service/people-service';

다음으로 @Page 데코레이터에서 PeopleService를 Provider로 추가합니다.

@Page({
  templateUrl: 'build/pages/home/home.html',
  providers: [PeopleService]
})
export class HomePage {

Home page에 생성자를 추가하고, people 속성을 만들고, PeopleService를 가져오고, PeopleService를 클래스의 속성에 할당 할 수 있습니다.(이 기능을 생성자 주입이라고 합니다.)

export class HomePage {
  public people: any;

  constructor(public peopleService: PeopleService){

  }
}

HomePage 클래스에 loadPeople() 메소드를 정의 합니다. loadPeople 메소드는  peopleService.load 메서드를 호출하고 Promise 결과를 클래스의 people 속성에 할당합니다.

loadPeople(){
  this.peopleService.load()
  .then(data => {
    this.people = data;
  });
}

마지막으로, 생성자에서 loadPeople 메소드를 호출합니다.

export class HomePage {
  public people: any;

  constructor(public peopleService: PeopleService){
    this.loadPeople();
  }

  loadPeople(){
    this.peopleService.load()
    .then(data => {
      this.people = data;
    });
  }
}

Random User API 를 사용하는 PeopleService 클래스 데이터를 얻었으므로이 페이지의 템플릿 (app / pages / home.html)을 수정하여 사용자의 성, 이름, 성 및 이메일을 출력할 수 있습니다.. ngFor를 사용하여 people 배열 속성을 반복하여 수행합니다.

<ion-navbar *navbar>
  <ion-title>
    Home
  </ion-title>
</ion-navbar>

<ion-content class="home">
  <ion-list>
    <ion-item *ngFor="#person of people">
      <ion-avatar item-left>
        <img src="{{person.picture.thumbnail}}">
      </ion-avatar>
      <h2>{{person.name.first}} {{person.name.last}}</h2>
      <p>{{person.email}}</p>
    </ion-item>
  </ion-list>
</ion-content>

실행하기( ionic serve )
마지막으로 CLI에서 ionic serve를 실행하여 브라우저에서 앱을 확인할 수 있습니다.

ionic serve

※ 이 페이지는  https://blog.ionicframework.com/10-minutes-with-ionic-2-calling-an-api/ 참고하여 작성하였습니다.