8단계로 완성하는 "2014년 출시 앨범" 앱 개발 따라하기

2014.10.06 15:39

음원정보 제공 웹사이트(DiscoGS)의 정책 상 인증과정(OAuth 2.0)이 추가되어 부득이 아래 글을 따라할 수 없습니다. 

하지만 아래 과정을 통해 웹서비스 연동하는 방안을 이해하는데 도움될 것입니다.


이번 글에서는 올해(2014년도)에 출시된 앨범 목록과 앨범 수록곡을 확인할 수 있는 "2014년 출시 앨범" 앱을 8단계를 따라하며 만들어 보겠습니다.

"2014년 출시 앨범" 앱 개발 따라하기

❑ 앱 소개

  • 2014년(올해) 출시된 앨범 목록 정보 제공
  • 앨범 선택 시 앨범정보와 수록곡 정보 제공
  • 앨범정보는 음반정보 제공 사이트 DiscoGS의 공개 API(http://api.dicogs.com) 이용

따라하기를 통한 습득할 수 있는 기술
  • REST 클라이언트 라이브러리를 이용해 정보 조회
  • REST Debugger 개발도구를 이용해 REST API 분석 후 컴포넌트 재사용
  • Live Binding을 이용해 데이터와 화면 컨트롤 링크(마우스 연결)로 화면 출력
  • 투명도를 이용해 배경화면 설정
따라하기는 Delphi XE7을 기준으로 작성되었습니다.

따라하기

1, 프로젝트 생성

File > New > Multi-Device Application – Delphi 메뉴선택하여 Blank Application 선택해 프로젝트를 생성합니다.

File > Save all 메뉴를 선택하고, 유닛이름은 기본(Unit1.pas)로 프로젝트 이름은 "music2014.dproj"로 저장합니다.

2, 화면 레이아웃 구성

아래의 그림과 표를 참고해 화면에 컴포넌트를 추가하고 레이아웃을 구성합니다.


 상위 오브젝트

오브젝트 

속성 

값(또는 설명) 

 Form1

 MultiView1

 Visible

 True 

 Form1

 Layout1 

 Align

 Client 

 MultiView1

 MasterToolBar

 Align

 Top 

 MasterToolBar

 MasterLabel

 Align

 Client 

 StyleLookup

 toollabel

 Text

 2014년 출시 앨범

 TextSettings.HorzAlign

 Center

 MultiView1

 ListView1 

 Align 

 Client 

 CanSwipeDelete False
 Layout1

 DetailToolbar 

 Align 

 Top 

 DetailToolbar

 DetailLabel

 Align Contents
 StyleLookup toollabel 

 Text

 앨범정보
 MasterButton Align Left 

 StyleLookup

 detailstoolbutton 
 Layout1 ListBox1  Align  Top 
 Height 153 
 ListBox1

 ListBoxGroupHeader1 

 Text  앨범정보 

 ListBoxItem1

 Text 앨범명
 StyleLookup listboxitemrightdetail

 ListBoxItem2

 Text

 출시년도

 StyleLookup

 listboxitemrightdetail

 ListBoxGroupHeader2

 Text 수록곡
 Layout1 ListView1  Align  Client 
 CanSwipeDelete  False 
 ItemAppearance.ItemAppearance ListItemRightDetail 

 ItemAppearanceObject.

 ItemObject.Accessory.Visible

 False 

3, 웹서비스 데이터 분석

웹서비스 API 분석은 RAD Studio에서 제공하는 REST 분석도구인 REST Debugger를 이용합니다.

Tools > REST Debugger 메뉴로 REST Debugger를 실행하고 다음 순서대로 작업합니다.

  1. Request 탭에서 "http://api.discogs.com"  입력
  2. Parameters 탭에서 Resource 박스에 다음 내용 입력 [Send Request] 버튼 클릭
    • database/search?type=release&per_page=20&country={country}&year={year}
  3. Request Parameters 수정(항목 더블클릭 또는 선택 후 [Edit] 버튼 클릭)
    • country=South Korea
    • year=2014
  4. JSON Root Element 항목에 results 입력 [Apply] 버튼 클릭
  5. 하단 Tabular Data 탭에서 데이터 확인 [Copy Components] 버튼으로 컴포넌트 클립보드에 복사

4, REST 클라이언트 컴포넌트 추가

폼디자이너 화면으로 돌아와서 클립보드에 복사된 컴포넌트 붙여넣기(Ctrl-V)로 컴포넌트를 생성합니다.

수록곡 정보 표시용 컴포넌트 추가를 위해 3번과 같은 방법으로 다음 정보를 참고해 한 세트를 더 생성합니다.

    1. Parameters 탭에서 Resource 박스에 다음 내용 입력  [Send Request] 버튼 클릭
      • releases/{_id}
    2. [Edit] 버튼으로 Request Parameters 수정
      • _id : 5583330
    3. JSON Root Element 항목에 tracklist 입력  [Apply] 버튼클릭
    4. 데이터 로딩 확인  [Copy Components] 버튼으로 Components 클립보드에 복사 후 폼디자이너에서 컴포넌트 붙여넣기


2개의 RESTRequest 컴포넌트를 더블클릭 하거나 마우스 우클릭 메뉴의 Execute를 이용해 요청을 확인합니다.

5, Live Binding 데이터 연결

View > LiveBindings Designer 메뉴를 실행하여 그림과 같이 FDMemTable 항목과 ListView ListBox 항목에 마우스 드래그로 데이터를 연결합니다.

ListBoxItem의 ItemData.Detail을 표시하기 위해 ListBoxItem 영역의 [...] 버튼을 누르고 detail로 검색 후 멤버를 추가 후 진행할 수 있습니다.

6, 데이터 요청 구현

Live Binding 정상적으로 연결 되었으면 그림과 같이 데이터를 불러 있습니다.


실행 시 데이터를 로드하고 앨범 선택 시 수록곡 정보를 가져오는 코드를 아래와 같이 추가합니다.

오브젝트 

이벤트 

소스코드 

 Form1

OnShow 

 RESTRequest1.Execute; 

 RESTRequest2.Params.ParameterByName('_id').Value := 

                                                      FDMemTable1.FieldValues['id']; 

 RESTRequest2.Execute; 

 MultiView1.ShowMaster; // 시작 시 메뉴 표시

 ListView1

OnItemClick 

 MultiView1.HideMaster;

 RESTRequest2.Params.ParameterByName('_id').Value := 

                                                      FDMemTable1.FieldValues['id'];

 RESTRequest2.Execute;

7, 앱 배경화면 꾸미기

배경화면을 꾸미기 위해 메인화면(Layout1)에 Rectangle 컴포넌트를 추가하도록 아래의 표를 참고해 구성합니다.



 상위 오브젝트

오브젝트 

속성 

값(또는 설명) 

 Layout1

 Rectangle1

 Align Contents
 Fill.Kind Bitmap 
 Fill.Bitmap.Bitmap

 아래 이미지 파일을 다운로드 후 선택

 


 Fill.Bitmap.WrapMode

 TileStretch 

 Hittest

 False 

 Opacity

 0.3


8, 배포

모든 개발이 완료되었습니다. 프로젝트 매니저에서 Target Platform을 선택 후 Run > Run Without Debugging 메뉴를 선택 해 앱을 실행 해 결과 화면을 확인합니다.


❑ 프로젝트 소스코드

관련글



저작자 표시 비영리 동일 조건 변경 허락
신고

험프리.김현수 파이어몽키 Delphi XE7, discogs, Rest Client, RESTful

RESTful 웹서비스 연동(Rest Client 소개)

2014.02.24 23:21

현재 대상 서비스(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를 사용합니다.


대상정보

  • 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을 이용한 외부 서비스 연동에 대해서도 살펴보도록 하겠습니다.


감사합니다.


관련정보


추가정보



    저작자 표시 비영리 동일 조건 변경 허락
    신고

    험프리.김현수 파이어몽키 Firemonkey, FMX, JOSN, REST Debugger, RESTCilient, RESTful, 파이어몽키

    REST Debugger 설치 및 사용안내(RESTful interface 분석도구)

    2014.02.24 16:25

    원격지의 데이터와 연동하는 경우 RESTfull 방식으로 많이 구현됩니다. 델파이 및 C++빌더도 외부연동 시 RESTful 방식도 많이 사용되는데요. 이때 유용한 툴이 이미 엠바카데로 툴에 포함되어 있지만, 외부적으로 공개가되어 있지 않아 소개해 드립니다.

    REST Debugger

    바로, REST Debugger라는 툴인데요. 저도 모바일에서 외부 인터페이스 연동 시 인터페이스 분석에 꽤 유용하게 사용하고 있습니다. 


    툴 경로: 

     - C:\Program Files (x86)\Embarcadero\RAD Studio\n.n\bin\RESTDebugger.exe


    아래와 같은 모습을 하고 있습니다.


    REST Debugger는 아래와 같은 기능이 포함되어 있습니다.

    • Request
      • base-url 관리
      • Parameter 관리
      • 요청정보 파일 관리
    • Response
      • 응답코드 확인
      • 응답시간 확인
      • 응답내용 확인
      • 응답코드 목록확인(Root element 선택)
    • 인증정보 추가
    • Proxy 사용

    사용법

    간단한 사용법을 안내해 드릴게요.


    음원정보 제공 사이트인 http://www.discogs.com을 기반으로 설명합니다.

    discogs에서는 오픈API를 제공하므로 http://api.dicogs.com/database/search?q=psy&type=master&per_page=20 페이지를 기반으로 설명합니다.

    자세한 정보는 API 페이지(http://www.discogs.com/developers/)를 참고하시면 더 많은 정보를 확인하실 수 있습니다.


    ▶ Request

    • 상단 Request 항목의 [Request] 탭으로 이동 후 URL항목을 을 입력합니다.

      • URL : http://api.discogs.com

    • Site의 Base url을 입력하는 과정입니다.


      • [Parameters] 탭으로 이동 후 Resource 항목과 Request Parameters 항목을 입력합니다.
        • Resource : database/search?q={query}&type=master&per_page=20
        • Prameters : Resource의 대괄호("{}")에 포함된 항목을 추가합니다.
          • Resource를 입력하면 자동으로 Parameters항목이 추가됩니다.
          • 목록을 선택 후 Value를 "psy"로 입력합니다.
      • Send Request 버튼을 통해 정보요청
      • 입력한 내용을 관리하는 버튼을 제공합니다.
        • New Request : 새로운 요청 입력
        • Load Request : 기존 요청파일(*.json) 불러오기
        • Save Request : 요청내용을 파일로 저장하기


      • Respose 항목에 응답결과가 표시됩니다.
      • [Body] 탭으로 이동 후 JSON Root Element 항목에 "results"를 입력하여 "results"이후의 값으로 적용


      목록데이터는 [Tabular Data] 탭에서 그리드로 확인할 수 있습니다.


      실행파일 및 소스코드가 RAD Studio설치 경로에 있으니 개발에 참고하시면 아주 좋을 것 같습니다.


      경로


      • 실행파일 : C:\Program Files (x86)\Embarcadero\RAD Studio\n.n\bin\RESTDebugger.exe
      • 소스코드 : C:\Program Files (x86)\Embarcadero\RAD Studio\n.n\source\data\rest\restdebugger


      참고문서


      • http://docwiki.embarcadero.com/RADStudio/XE5/en/Installing_the_REST_Debugger
      • http://docwiki.embarcadero.com/RADStudio/XE5/en/REST_Debugger_Tool
      • http://docwiki.embarcadero.com/RADStudio/XE5/en/Using_the_REST_Debugger

      추가정보



      저작자 표시 비영리 동일 조건 변경 허락
      신고

      험프리.김현수 파이어몽키 RESTDebugger, RESTful

      1. Blog Icon

        비밀댓글입니다