현재 대상 서비스(discogs.com)에 인증 인터페이스가 추가되어 예제를 따라하면 인증오류가 발생합니다. 하지만 이 글을 통해 REST Client의 개념을 잡는데 도움이 될 것입니다.
인증과정은 다음 글을 참고해 직접 구현해 보시기 바랍니다.
안녕하세요. 험프리.김현수입니다.
모바일 개발 세미나 및 자료들에서 원격 데이터 연결 시 DataSnap을 강조하다 보니 원격지 데이터 연결 시 DataSnap만 써야 되는 것으로 오해가 종종있어, 기존 구성된 사이트에 RESTful(Http 요청)방식으로 연결하는 방법을 소개합니다.
여지껏 원격지 데이터를 받아오기 위해 일반적으로는 IdHttp 컴포넌트를 이용해 Get(또는 Post)하여 Response 데이터를 받아온 후 Parser를 이용해 데이터를 파싱하고, 파싱된 데이터를 사용하는 방법등 코딩 위의 방법이 대부분이었습니다.
이번에 소개해 드릴 컴포넌트는 XE5에서 새로 추가된 REST 컴포넌트입니다.
REST 컴포넌트는 RestClient, RestRequest, RestResponse 3가지 주요 컴포넌트를 주축으로 구성되어 있으며, 요청과 응답을 객체화 시키고, 응답의 경우 RESTResponseDataSetAdapter를 연결하여 사용자의 데이터 파싱없이 리스트 및 그리드에서 사용할 수 있는 DataSource로 데이터를 자동변환합니다.
Source(대상) REST API 분석 및 준비
▶ 대상 사이트 API 분석
음반정보 제공 사이트인 discogs에 오픈된 API를 이용하겠습니다. 그중 Search API를 사용합니다.
Discogs 정보
대상정보
- Request : http://api.discogs.com/database/search?q=psy&type=master&per_page=20
- Response : JSON 포맷으로 응답, "results" 항목 이후의 배열데이터 사용(Search API 참고)
REST Debugger을 실행하고 아래와 같은 정보를 입력합니다.(REST Debugger 설치 및 사용방법)
- URL : http://api.discogs.com
- Resource : database/search?q={query}&type=master&per_page={page}
- query : psy
- page : 20
[Send Request] 버튼을 누르고 응답이 성공한 경우 하단의 [Body] 탭에서 Root Element에 "results"를 입력 후 [Apply] 버튼을 누른 후 [Tabular Data] 탭으로 이동 후 목록이 표시되었는지 확인합니다.
(※ REST Debugger도 REST 컴포넌트 기반으로 개발되어 있습니다.)
REST 컴포넌트 추가
▶ 모바일 프로젝트 생성 및 데이터모듈 추가
새로운 프로젝트 생성 후 Data Module을 추가합니다.(Project Manager > Project 선택 > Add New > Other > Data Module)
아래와 같이 컴포넌트를 추가하고 속성값을 변경합니다.
RESTClient
- BaseURL : http://api.discogs.com
RESTRequest
- Client : RESTClient1
- Resource : database/search?q={query}&type=master&per_page={page}
- Params : query=psy, page=20
RESTResponse
RESTResponseDataSetAdapter
- DataSet : ClientDataSet1
- Response : RESTResponse1
- RootElement : results
ClientDataSet
위와 같이 구성 후 RESTRequest1을 더블클릭(또는 우측마우스 > Execute) 하면 성공 시 "Response: 200 - HTTP/1.1 200 OK" 메시지가 실패 시 오류메시지가 표시됩니다.
연결이 성공한 경우 RESTResponse1의 Content항목을 선택하시면 응답받은 데이터를 확인할 수 있습니다.(만약, 목록이외의 항목이 필요한 경우 RESTResponse 컴포넌트의 Content 항목을 활용할 수도 있습니다.)
UI 구성(ListView 및 검색항목 추가)
위의 Data Module을 폼의 Uses 절에 추가합니다.(File > Use unit 후 선택)
(유닛명 및 컨트롤 명은 임의로 명명하였으니 본인의 이름으로 사용하세요.)
▶ 리스트 추가(ListView), 데이터연결
빈 폼에 ListView 하나 추가 후 align 속성을 "alClient"로 변경해 목록이 가득차도록 합니다.
아래와 같이 DataModule의 ClientDataSet과 ListView의 LiveBinding을 연결해 리스트에 데이터를 표시합니다.
 |  |
Live Binding 윈도우 표시하기 - Object Inspector 아래 Bind Visually를 누르면 메인폼 아래에 표시됩니다.
사실 위와 같이만 구성해도 얼마나 쉽게 원격지의 데이터를 사용할 수 있는지 느낌이 오실거에요.
▶ 검색 항목 추가
그럼 추가로 검색 UI를 추가하고 검색 인터페이스를 연동해보겠습니다.
검색 메소드 추가
DataModule 유닛의 public 절에 아래와 같이 검색용 Search메소드를 추가합니다.
type
TDataModule9 = class(TDataModule)
RESTClient1: TRESTClient;
RESTRequest1: TRESTRequest;
RESTResponse1: TRESTResponse;
RESTResponseDataSetAdapter1: TRESTResponseDataSetAdapter;
ClientDataSet1: TClientDataSet;
private
{ Private declarations }
public
{ Public declarations }
procedure Search(AKeyword: string);
end;
var
DataModule9: TDataModule9;
implementation
{%CLASSGROUP 'FMX.Controls.TControl'}
{$R *.dfm}
{ TDataModule9 }
procedure TDataModule9.Search(AKeyword: string);
begin
RESTRequest1.Params.ParameterByName('query').Value := AKeyword;
RESTRequest1.Execute;
end;위의 RESTRequest1.Params를 변경하고 실행(RESTRequest1.Execute;)하는 동작으로 요청 파라메터를 변경할 수 있습니다.
UI 추가
검색 키워드 입력을 위해 TEdit를 Form에 추가합니다.(가끔 ListView에 추가하는 경우가 있으니 주의하세요)
align 속성을 "alTop"으로 변경합니다.
Edit의 OnChange에 아래와 같이 코딩합니다.
procedure TForm8.Edit1Change(Sender: TObject); begin DataModule9.Search(Edit1.Text); end;
배포 및 확인
REST 컴포넌트를 이용한 경우 내부적으로 MIDAS를 이용하기 때문에 MIDAS Library를 함께 배포해야 합니다.
배포 메뉴에서 기능파일 추가(Project > Deployment > Add featured files) 메뉴를 이용해 MIDAS Library를 추가합니다.
기기배포 등의 확인 단계는 설명을 생략하니 각자의 디바이스에서 확인해 보시기 바랍니다.
목록표시 및 요청 등의 인터페이스를 설명하였습니다. 등록요청 등의 인터페이스는 위의 내용을 조금더 확장하시면 충분히 구현가능 하실 것 같습니다.
다음에는 XML을 이용한 외부 서비스 연동에 대해서도 살펴보도록 하겠습니다.
감사합니다.
