개발/ionic framework

ionic 외부 api 연동

나는아니다 2021. 10. 18. 15:12

ionic 으로 구성된 app 에서 JPA로 구성된 API 서버간의 데이터 통신 방식을 정리.

 

1.  API 메소드 생성

/** 
  * testSample 
  */ 
@ApiOperation(value = "샘플", notes = "샘플데이터") 
@ApiImplicitParams({ 
    @ApiImplicitParam(name = "deviceId", value = "디바이스고유아이디", required = true, dataType = "string", paramType = "path"), 
    @ApiImplicitParam(name = "token", value = "발급받은 토큰", required = true, dataType = "string", paramType = "path") 
    }) 
@GetMapping("/{deviceId}/{token}/samplist") 
public Map<String, Object> getTestSample(@PathVariable("deviceId") String deviceId, @PathVariable("token") String token) { 
    	System.out.println("Test CALL!"); 
    	Map<String, Object> result = new HashMap<String, Object>(); 
    	result.put("SAMPLE_DATA", "sampleString!!"); 
    	return result; 
    }

 

위와 같이 samplist 로 호출하는 메소드를 생성한다.

ApiImplicitParams 어노테이션으로 전달받을 파라미터를 정의하고 해당 파라미터로 url을 구성하여

특정 디바이스 특정 토큰으로 호출 가능하도록 처리한다.

 

PathVariable 으로 url 패스에 있는 문자열을 파라미터로 가져다 쓸 수 있다.

 

해당 API 가 호출되면 HashMap에 SAMPLE_DATA 라는 key로 sampleString!! 이라는 문자열을 담는다.

 

리턴 방식은 map , object, string , int 등 다양하게 테스트 가능하다.

 

2. app의 ts 파일에 http 연결 작성

import { HTTP } from '@ionic-native/http';
import { Device } from '@ionic-native/device';
import { SingletonProvider } from '../../providers/singleton/singleton';

 

http 연결을 위해서 위 3가지 라이브러리를 임포트한다.

 

http 는 Http 통신을 위해 필요하고

Device 는 api 호출을 위한 deviceId 와 token 정보를 전달하기 위해 필요하다.

singletonProvider는 디바이스 및 토큰과 연결 정보가 연결마다 갱신 되는 것을 방지하여 재사용 하기 위해 필요하다.

 

getSampleData(){
      let url = this.singleton.baseUrl + '/fis/app/api/' + this.device.uuid + '/' + this.singleton.deviceInfo.token + '/samplist';
      let headers = {'Content-Type': 'application/json'};    
      this.http.get(url, {}, headers)
          .then((data) => {
            let appData = JSON.parse(data.data);
            console.log("chk 3 : " + appData.SAMPLE_DATA);           
          })
          .catch((error) => {
            console.log(error);
          });
    }

 

위와 같이 함수를 작성하여 getSampleData() 를 호출하면 1번 항목에서 작성한 API 를 통해 데이터를 받아온다.

 

this.singleton.baseUrl  :  싱글톤프로바이더에 작성된 API 접속 URL

public baseUrl = "http://192.168.0.38:8080";

 

this.device.uuid : 디바이스 고유 아이디

this.singleton.deviceInfo.token : 싱글톤을 통해 절차를 거쳐 발급받은 디바이스 토큰

 

  • 디바이스 아이디와 토큰 정보는 중요하지 않다. 인증 절차가 필요 없는 경우 생략해도 무방하다.

 

http 호출을 위해서 필요한 필수 파라미터는

호출할 URL ,  전달할 파라미터,  해더정보 가 전달되어야 하며 파라미터는 null이어도 상관없다.

 

해더 정보를  {'Content-Type': 'application/json'} 와 같이 입력하여 호출하면 응답 데이터가

HttpResponse 에 data 항목에 담겨서 전달 받을 수 있다.

 

data 항목은 Json 파서를 통해서 파싱한 후에 1번 항목에서 지정한 key이름으로 꺼내어 쓸 수 있다.

ex) console.log("chk 3 : " + appData.SAMPLE_DATA);     

 

정상적으로 호출이 완료되면 아래와 같은 로그가 표시된다.