[ionic] open api 로 데이터 가져와서 적용하기

[ionic] open api 로 데이터 가져와서 적용하기

cordova-plugin-whitelist 추가하기

ionic plugin add cordova-plugin-whitelist

http://www.gajotres.net/ionic-2-making-rest-http-requests-like-a-pro/

INSTALL CORDOVA WHITELIST PLUGIN

If you’re using Cordova 4+ and especially if you’re accessing remote content don’t forget to install Cordova Whitelist plugin:

cordova plugin add cordova-plugin-whitelist

Open www folder and add this security meta tag to index.html file:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

소스

app.ts

import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {Camera} from 'ionic-native';
import {Dataportal} from './providers/dataportal/dataportal';

@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

providers/dataportal/dataportal.ts

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the Dataportal provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class Dataportal {
  data: any = null;
  public serviceKey = "YOUR_SERVICE_KEY";
  
  constructor(public http: Http) {
  }

  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);
        });
    });
  }
    
  getList(page){
    let url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/searchFestival?ServiceKey=" + this.serviceKey + "&numOfRows=1000&pageNo=" + page +  "&MobileOS=ETC&MobileApp=TestApp&_type=json";
    return this.http.get(url).map(res=>res.json());
  }
}

pages/hoem/home.html

<ion-navbar *navbar>
  <ion-title>
    Home
  </ion-title>
  <ion-buttons end>
    <button primary>I'm a primary coloured button in the end position of the nav bar</button>
  </ion-buttons>
</ion-navbar>

<ion-content class="home">
  <ion-card>
    <ion-card-content>
      Hello World, this is my camera app
      <button (click)="takePicture()">Take a Picture</button> Latest Picture:
      <img [src]="base64Image" *ngIf="base64Image" />
    </ion-card-content>
  </ion-card>
  <ion-card>
    <button (click)="getList()">get list</button>
    <ion-list >
      <ion-item *ngFor="#data of datas">
        <h3>{{data.title}}</h3>
        <p>{{data.contentid}}</p>
      </ion-item>
    </ion-list>
    <ion-infinite-scroll (infinite)="doInfinite($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-card>
</ion-content>

pages/home/home.ts

import {Page} from 'ionic-angular';
import {Camera} from 'ionic-native';
import {Http} from 'angular2/http';
import {Dataportal} from '../../providers/dataportal/dataportal';

@Page({
  templateUrl: 'build/pages/home/home.html',
  providers: [Dataportal]

})
export class HomePage {
  public base64Image: string;
  private datas = [];
  private start: number = 0;
  private page: number = 1;

  constructor(public http: Http, public dataportal: Dataportal) {
    this.http = http;
    this.dataportal = dataportal;
  }

  takePicture() {
    Camera.getPicture({
      destinationType: Camera.DestinationType.DATA_URL,
      targetWidth: 1000,
      targetHeight: 1000
    }).then((imageData) => {
      // imageData is a base64 encoded string
      this.base64Image = "data:image/jpeg;base64," + imageData;
    }, (err) => {
      console.log(err);
    });
  }

  getList(page) {
    debugger;
    page = page | 1;
    this.dataportal.getList(page).subscribe((data) => {
      console.log(data);
      for (let d of data.response.body.items.item){
        this.datas.push(d);
      }
    }, () => console.log("getList Complete"));
  }

  doInfinite(infiniteScroll: any) {
    console.log('doInfinite, start is currently ' + this.page);
    //this.start += 50;
    this.getList(this.page);
    this.page += 1;
    infiniteScroll.complete();
    // this.loadPeople().then(() => {
    //   infiniteScroll.complete();
    // });

  }
}