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

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

 

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

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

 

 

 

 

❑ 앱 소개

 

  • 올해(2014년) 출시된 앨범 목록 정보 제공
  • 앨범 선택 시 앨범정보와 수록곡 정보 제공
  • 앨범정보는 음반정보 제공 사이트 DiscoGS의 공개 API(http://api.discogs.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 메뉴를 선택 해 앱을 실행 해 결과 화면을 확인합니다.

❑ 프로젝트 소스코드

아래의 링크를 통해 완성된 소스코드를 이용할 수 있습니다.
 
번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 14390
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13023
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 15532
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 21065
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 22297
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 17933
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 38228
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 173741
170 [추가된 문법] DLL 정적 호출 시 지연 호출(Delayed)-델파이 2010 추가 김원경 2016.12.27 1090
169 부동소수점 숫자(실수)에 대한 참고 글 [1] 험프리 2016.12.14 1126
168 퀵레포트(Quick Report)에 사진 출력하기 험프리 2016.08.01 1849
167 BLOB 컬럼에 (이미지 등의)데이터 읽고 쓰기 험프리 2016.08.01 6074
166 1차 공개 중고생 강의용 앱 소스 및 메뉴얼입니다. file 쭈니아빠 2016.07.16 759
165 [추가된 문법 정리] - 배열 상수 초기화:델파이 XE7 추가 관리자 2016.06.03 3294
164 [추가된 문법 정리] - 클래스 필드(Class Field):델파이 2007 추가 관리자 2016.06.03 824
163 브레이크 포인트를 설정해도 디버깅이 안되는 경우 살펴볼 항목 file 험프리 2016.05.13 2789
162 OutputDebugString 함수로 디버그로그를 출력할 수 있습니다. file 험프리 2016.02.16 4223
161 [안드로이드] 배포파일, 아이콘, 스플래쉬 등이 잘 배포되었는지 확인하기 file 험프리 2015.11.11 1520
160 [다시보기] RAD Studio 10 시애틀 딥다이브 세션 다시보기(영문) Humphery 2015.10.02 549
159 [마이그레이션] 함수(또는 변수)에 빨간밑줄이 가고 컴파일 시 Undeclared Identifier 오류 시 조치방법 file 험프리 2015.09.30 2353
158 델파이 문서화 도구 참고링크 Humphery 2015.09.11 1149
157 [하이브리드 앱 개발] 웹페이지에서 델파이 함수 호출하기 Humphery 2015.06.26 4049
156 안드로이드 웹브라우저에서 "tel:, sms:" 링크가 동작하지 않는 이슈 해결하기 Humphery 2015.06.26 4805
155 [윈도우10] 델파이로 윈도우10 알림 표시하기(WinRT API 이용) Humphery 2015.06.24 2304
154 파이어닥(FireDAC)으로 IBLite 연결 시 "unavaliable database." 오류 발생에 대한 대응 file Humphery 2015.05.15 765
153 델파이에서 MSOffice 엑셀과 워드 연동 참고자료. [1] Humphery 2015.04.27 3748
152 [델파이7 이후 새로운 기능][XE2~] 프로젝트 매니저에서 타겟플랫폼을 64-bit Windows로 선택 해 64비트 애플리케이션을 개발할 수 있습니다. file Humphery 2015.04.23 4719
151 [델파이7 이후 새로운 기능] 추가되고 개선된 VCL 컴포넌트 Humphery 2015.04.22 3560