데브기어에서 진행 중인 프로젝트 과정에서 사용 중인 코드작성 규칙을 공유합니다.

https://docs.google.com/document/d/1eYWWv_YJRl-FYw3FkcIaBRSzaHsL0V-zRjA2rzJsPZM

윈도우에 설치된 네트워크(이더넷 어댑터) 정보를 알아오는 방법입니다.(10.3 리오에서 구현했습니다.)

uses 절에 Winapi.IPTypes, Winapi.IPHlpAPi 추가해야 합니다.

var
  I: integer;
  NumInterfaces: DWORD;
  AdapterInfo: array of TIpAdapterInfo;  // uses Winapi.IpTypes
  OutBufLen: ULONG;
begin
  GetNumberOfInterfaces(NumInterfaces); // uses Winapi.IpHlpApi
  SetLength(AdapterInfo, NumInterfaces);
  OutBufLen := NumInterfaces * SizeOf(TIpAdapterInfo);
  GetAdaptersInfo(@AdapterInfo[0], OutBufLen);

  Memo1.Lines.Clear;
  for I := 0 to NumInterfaces - 1 do begin
    if AdapterInfo[I].Description = '' then
      Continue;
    Memo1.Lines.Add(AdapterInfo[I].Description);
    Memo1.Lines.Add(AdapterInfo[I].IpAddressList.IpAddress.S);
    Memo1.Lines.Add(Format('%.2x:%.2x:%.2x:%.2x:%.2x:%.2x',
      [AdapterInfo[I].Address[0], AdapterInfo[I].Address[1],
       AdapterInfo[I].Address[2], AdapterInfo[I].Address[3],
       AdapterInfo[I].Address[4], AdapterInfo[I].Address[5]]));
  end;

기타 정보도 TIpAdapterInfo 구조체를 통해 알아올 수 있습니다.

메모에 출력된 결과 화면

참고

REST API 관련 컨설팅 중 학습한 내용을 공유합니다.

고객사의 요청으로 VendHQ 사의 REST 서비스와 연동을 진행했습니다.

OAuth 2.0 연동 중 웹브라우저 이슈가 있어 해결방안을 공유합니다.

해당 이슈는 VCL과 FMX 두가지 TWebBrowser가 동일합니다.

크로미움 기반 웹브라우저 컴포넌트 설치

CEF4Delphi는 크로미움 기반 웹브라우저 써드파티 컴포넌트로 오픈소스로 진행됩니다.

깃허브 저장소를 통해 제공하고 있습니다.

• https://github.com/salvadordf/CEF4Delphi

CEF4Delphi를 사용하려면 컴포넌트 설치 후 실행(및 배포) 시 크로미움 관련 라이브러리들을 함께 배포해야 합니다.

CEF4Delphi 다운로드

CEF4Delphi 깃허브 페이지에서 컴포넌트를 다운로드 합니다.(Clone or download > Download ZIP)

다운로드 받은 파일을 압축 해제 후 적절한 라이브러리 저장 경로에 이동합니다.(해당 경로의 패키지를 설치하고 델파이에 링크하게 됩니다.)

CEF4Delphi 컴포넌트 설치

델파이를 실행하고 다운로드 받은 파일들에서 .\packages\CEF4Delphi.dpk 패키지 프로젝트 파일을 엽니다.

프로젝트에서 오른쪽 마우스 클릭 후 팝업 메뉴에서 인스톨 메뉴를 선택해 설치합니다.

라이브러리 패스 추가

패키지 설치 후 CEF4Delpih 소스코드를 델파이 라이브러리 패스에 추가합니다.

델파이 라이브러리 화면을 표시합니다.

Tools > Options, Language > Delphi Options > Library

플랫폼을 선택 후 Library path에 CEF4Delphi 소스 디렉토리를 추가합니다.

CEF4Delphi 프로그램 실행

관련/참고 링크

• OAuth 2.0 연동 - 카카오 API(카카오톡 프로필)
  

REST API 관련 컨설팅 중 학습한 내용을 공유합니다.

한 고객사의 요청으로 Unleashed 사의 REST 서비스와 연동을 진행했습니다.

그 과정 중 HMAC(해시 기반 메시지 인증 코드) 구현 과정을 공유합니다.

HMAC은 Unleashed 사 뿐아니라 AWS의 REST API 연동에도 사용되는 등 많은 REST 서비스에 구현되는 내용입니다.

위에서 API 키는 서비스 등록시 발급받은 값입니다.

쿼리 스트링은 URL 중 "?" 뒤의 문자열입니다. 예를 들면

Customers?customerCode=ACME 중 customerCode=ACME가 쿼리 스트링입니다.

HMAC-SHA256은 다음과 같이 구현할 수 있습니다.

HMAC-SHA256

다음 샘플은 쿼리스트링(ProductCode=XXX)와 API Key(UNLEASHED_API_KEY: 상수)를 이용해 HMAC을 SHA256으로 시그니처를 생성해 HTTP 해더에 추가하는 내용입니다.

uses
  System.Hash,          // sha256
  System.NetEncoding;   // base64

var
  signature: string;
  param: string;
begin
  param := 'ProductCode=' + AProductCode;

  // PHP: base64_encode(hash_hmac('sha256', $request, $key, true));
  signature := TBase64Encoding.Base64.EncodeBytesToString(
                  THashSHA2.GetHMACAsBytes(param, UNLEASHED_API_KEY, SHA256));

  RESTRequest1.Params.AddItem('api-auth-id', UNLEASHED_API_ID, pkHTTPHEADER);
  RESTRequest1.Params.AddItem('api-auth-signature', signature, pkHTTPHEADER, [poDoNotEncode]);
end;

추가 학습할 내용

HMAC 인증외에 OAuth 2.0 인증도 많이 사용됩니다.

다음 글을 통해 OAuth 2.0을 통해 카카오 API에 연동하는 내용을 살펴볼 수 있습니다.

• OAuth 2.0 연동 - 카카오 API(카카오톡 프로필)

• REST API 이해하기
  
• REST API 서버 개발하기(엔드포인트 구현, RAD 서버 이용)
• REST API 클라이언트 개발하기(REST Client 이용)
• 데이터셋 기반 REST API 개발하기

이 글에서는 OAuth 2.0을 이용해 카카오 API와 연동하는 방법을 델파이를 통해 알아봅니다.

이 글을 통해 카카오톡 프로필 정보와 사진을 델파이 애플리케이션에서 불러오는 예제를 작성할 수 있습니다.

OAuth 2.0

API(또는 서비스) 이용 시 인증(Authentication)과 리소스(제공 서비스)에 대한 권한부여(Authorization)는 필수사항입니다. 인증과 권한부여의 대표적인 방법 중 하나가 OAuth입니다.

OAuth는 서버와 클라이언트 사이에 인증을 완료 시 권한부여의 결과로 엑세스 토큰(Access Token)을 발급하고, 이 엑세스 토큰을 이용해 클라이언트는 API(또는 서비스)에 접근 및 서비스를 요청하게 됩니다. 서버는 엑세스 토큰 기반으로 서비스와 권한에 대한 접근 여부를 판단해 데이터를 제공합니다.

OAuth는 현재 2.0 버전을 제공하며, 카카오, 구글, 페이스북에서 OAuth 2.0을 통해 서비스에 대한 인증 및 권한부여를 사용하고 있습니다.

OAuth 2.0에 대한 내용은 자세한 내용은 이 글의 하단 "관련/참고 링크"를 통해 알아볼 수 있습니다.

OAuth 2.0 사용 시 API 인증 흐름

다음 그림은 카카오 API 서비스에 접근하기 위해 OAuth 2.0 인증의 흐름을 7 단계로 나타냅니다.

0, 카카오 서비스를 이용하려면 사전에 앱을 등록 후 앱의 API 키를 발급받아야 합니다.

1, 카카오 서비스에 접근하기 위해 카카오 로그인 페이지를 웹브라우저에 표시합니다.

2, 사용자는 로그인 페이지에 ID, 비밀번호를 입력해 인증을 요청합니다.

3, 카카오 인증서버는 사용자를 인증하고 사용자 인증완료 페이지로 리다이렉션합니다. 이때 인증 코드를 함께 전달합니다.

4, 애플리케이션은 리다이렉션 URL을 분석해 인증코드를 획득합니다.

5, 애플리케이션은 카카오 인증서버에 제대로 인증된 사용자인지 확인 요청을 합니다.

6, 카카오 인증서버는 인증된 사용자임을 확인하고, 엑세스 토큰(Access Token)을 발급합니다.

7, 애플리케이션은 발급받은 엑세스 토큰을 이용해 카카오 API 서버에 접근합니다.

델파이로 OAuth 2.0 구현

위의 API 흐름을 카카오 OAuth와 카카오톡 프로필과 연동하는 과정을 델파이를 통해 구현해봅니다.

다음과 같은 데모를 구현합니다.

구현 과정은 크게 준비 + 3단계로 구분됩니다.

[준비] 카카오 서비스에 앱 등록 및 API 키 발급

[1단계] 인증페이지에 로그인 해 인증코드 취득

[2단계] 인증코드로 엑세스 토큰 취득

[3단계] 엑세스 토큰으로 서비스 접근

[준비] 앱 등록 및 API 키 발급

• https://developers.kakao.com/docs/restapi#앱-생성

앱 만들기

앱을 생성하면 다음 그림과 같이 키가 생성됩니다. 우리는 REST API 키를 사용할 것이므로 REST API 키를 복사해 보관해 둡니다.

하단의 설정 링크를 눌러 상세 설정화면으로 이동합니다.

플랫폼 추가

기본 정보 화면에서 [플랫폼 추가] 버튼을 누릅니다.

웹을 선택하고, 여러분들의 사이트 도메인을 입력합니다. [추가] 버튼을 누릅니다.

사이트 도메인과 Redirect Path를 확인 후 [저장] 버튼을 누릅니다.

사이트 도메인 + Redirect Path(저의 경우 http://hjf.pe.kr/oauth)는 실제 존재하는 페이지를 지정해야 합니다.

이 페이지는 카카오 로그인 후 리다이렉션되는 페이지로 아무 기능이 없더라도 페이지를 생성해 놔야 합니다.(페이지가 없으면 404 not found 오류가 발생합니다.)

운영하는 서비스가 없이 테스트 목적이라면 제 도메인을 등록하도록 합니다.(하지만 언제든 페이지를 삭제할 수 있으니 테스트 목적으로만 사용하시기 바랍니다.)

사용자 관리 활성화

사용자 관리 메뉴로 이동 후, 사용자 관리를 활성화 합니다. 

우리는 카카오 프로필 정보에 접근할 것이므로 프로필 정보 하단의 수집목적을 적절히 입력하고, [설정] 버튼을 클릭합니다.

앱 등록 및 API 키 발급 과정이 완료되었습니다.

[준비] 프로젝트 생성 및 화면 구성

• https://developers.kakao.com/docs/restapi/user-management#로그인

[Request]

[Response]

Request와 같이 페에지를 표시 후 사용자 로그인 성공 시 Response와 같이 redirect_url로 페이지 이동됩니다. 이때 인증 코드(authorize_code)가 함께 전달됩니다.

Button1 클릭 이벤트에 다음과 같이 코드를 입력합니다.

procedure TForm1.Button1Click(Sender: TObject);
var
  url: string;
  param: string;
begin
  Edit1.Text := '';

  url := 'https://kauth.kakao.com';
  param := '/oauth/authorize?client_id={app_key}&redirect_uri={redirect_uri}&response_type=code';
  param := param.Replace('{app_key}', API_KEY);
  param := param.Replace('{redirect_uri}', 'http://hjf.pe.kr/oauth');

  WebBrowser1.URL := url + param;
  WebBrowser1.Navigate;
end;

API_KEY는 상수로 implementation 위에 등록했습니다.(앱 생성 시 등록한 REST API 키를 XXXXX 대신 입력합니다.)

const
  // 카카오톡 개발자 사이트에서 앱 등록 후 API키를 등록하세요.
  API_KEY = 'XXXXXXXXXXXXXXXXX';

implementation

로그인 성공 시 인증코드 수신하는 내용을 작성합니다. WebBrowser1의 OnDidFinishLoad(페이지 전환 완료) 이벤트 생성 후 다음 코드를 입력합니다.

procedure TForm1.WebBrowser1DidFinishLoad(ASender: TObject);
var
  url: string;
  code: string;
begin
  Memo1.Lines.Add('WebBrowser1DidFinishLoad' + WebBrowser1.URL);

  if Edit1.Text <> '' then
    Exit;

  url := WebBrowser1.URL;

  if Pos('code=', url) > 0 then
  begin
    code := Copy(url, Pos('code=', url) + Length('code='), Length(url));
    if Pos('&', code) > 0 then
      code := Copy(code, 1, Pos('&', code)-1);

    Edit1.Text := code;
  end;
end;

제일 첫줄은 URL을 메모에 출력하는 로그성 기능입니다.

13~20줄에서 변경된 URL 중 인증코드 파라메터("code=")가 있는 경우 인증코드 값을 가져와 Edit1.Text에 설정합니다.

[2단계] 엑세스 토큰 취득

인증코드를 받은 다음, 이를 이용해 실제로 API를 호출할 수 있는 엑세스 토큰(Access Token)을 받아오는 내용을 구현합니다.

• https://developers.kakao.com/docs/restapi/user-management#로그인

[Request]

[Response]

위 문서와 같이 POST로 요청 후 받은 응답 값(json 포맷)에서 access_token 값을 취득해야 합니다.

이 기능은 REST Client 프레임워크를 이용해 개발합니다.

화면에 TRESTClient, TRESTRequest, TRESTResponse 3개의 컴포넌트를 추가 합니다.

[3. 엑세스 토큰 취득] 버튼의 클릭 이벤트에 다음과 같이 구현합니다.
(아래 과정은 디자인 타임에서 컴포넌트에 직접 설정해도 무관합니다.)

procedure TForm1.Button2Click(Sender: TObject);
var
  token: string;
begin
  RESTClient1.BaseURL := 'https://kauth.kakao.com/';

  RESTRequest1.Resource := 'oauth/token';
  RESTRequest1.Method := rmPOST;
  RESTRequest1.Params.Clear;
  RESTRequest1.Params.AddItem('grant_type',   'authorization_code');
  RESTRequest1.Params.AddItem('client_id',    API_KEY);
  RESTRequest1.Params.AddItem('redirect_uri', 'http://hjf.pe.kr/oauth');
  RESTRequest1.Params.AddItem('code',         Edit1.Text);

  RESTRequest1.Execute;

  Memo1.Lines.Text := RESTResponse1.Content;

  if RESTResponse1.JSONValue.TryGetValue<string>('access_token', token) then
    Edit2.Text := token;
end;

개발가이드와 같이 요청 정보를 RESTClient와 RESTRequest 컴포넌트의 속성과 파라메터에 설정한 후 실행(RESTRequest1.Execute;) 후 받은 응답에서 엑세스 토큰(access_token)을 받아 Edit2.Text에 설정합니다.

엑세스 토큰을 받는 과정까지 마쳤습니다. 이제 엑세스 토큰을 이용해 카카오톡 프로필 정보에 접근해 데이터를 연동 할 수 있습니다.

[3단계] 카카오톡 프로필과 연동

엑세스 토큰을 얻었다면 카카오톡 프로필 서비스와 연동해 프로필 정보를 받아올 수 있습니다.

카카오 개발가이드 중 카카오톡-프로필요청 부분의 문서를 참고해 개발합니다.

• https://developers.kakao.com/docs/restapi/kakaotalk-api#프로필-요청

procedure TForm1.Button3Click(Sender: TObject);
var
  Url: string;
  Stream: TMemoryStream;
begin
  OAuth2Authenticator1.AccessToken := Edit2.Text;

  RESTClient2.BaseURL := 'https://kapi.kakao.com/';
  RESTClient2.Authenticator := OAuth2Authenticator1;

  RESTRequest2.Client := RESTClient2;
  RESTRequest2.Response := RESTResponse2;

  RESTRequest2.Resource := 'v1/api/talk/profile';
  RESTRequest2.Execute;

  Memo1.Lines.Text := RESTResponse2.Content;

  Url := RESTResponse2.JSONValue.GetValue<string>('profileImageURL');

  RESTClient3.BaseURL := Url;
  RESTClient3.Authenticator := OAuth2Authenticator1;
  RESTRequest3.ExecuteAsync(procedure
    begin
      Stream := TMemoryStream.Create;
      try
        Stream.WriteData(RESTResponse3.RawBytes, RESTResponse3.ContentLength);
        ImageControl1.Bitmap.LoadFromStream(Stream);
      finally
        Stream.Free;
      end;
    end
  );
end;

(아래 내용은 델파이 10.2 도쿄 릴리즈 1과 릴리즈 2에서 작성된 내용으로 다른 버전에서는 일부 내용이 다를 수 있습니다.)

개발 컨설팅을 통해 의뢰한 작업 중 RFID 리더 연동한 내용 공유합니다.

(3일간의 개발 컨설팅으로 RFID 리더, TMAP 연동, 원격 데이터 연동 기술을 전파하는 작업을 진행했습니다.)

RFID 리더와 연동은 제조사에서 제공하는 라이브러리(안드로이드 JAR)를 이용했습니다.

이 과정을 통해 델파이에서 JAR 파일 연동하는 내용을 확인할 수 있습니다.

RFID 리더 연동

위 영상의 RFID 리더는 RFID 태그의 값을 읽고, 바코드의 값을 읽어 안드로이드 앱에 데이터를 전달합니다.

안드로이드 앱은 장비를 구동 및 설정하고, 장비가 읽은 데이터를 받아 화면에 표시합니다.

안드로이드 앱은 델파이(파이어몽키)를 이용해 개발했으며, 장비와 연동하는 부분은 제조사에서 제공한 JAR 형태의 라이브러리를 이용했습니다.

델파이에서 JAR 파일 연동 과정은 아래와 같습니다

1, 작업 준비

2, 델파이용 JAR 브릿지 파일 생성

3, 델파이 프로젝트에 JAR 파일 추가

4, 브릿지 파일로 JAR 연동 코드 작성

기타  참고사항

 - 안드로이드 연동 시 참고사항

 - 프레임을 이용해 재사용 가능한 화면 제작

샘플 프로젝트

작업 준비

대상 장비 - 한미IT RF Prisma

한미IT RF Prisma

제품 링크 : http://www.hanmiit.co.kr/hanmiit/handler/Main-Start

제품 문의

한미IT영업 임상기과장 skyoflsk@hanmi.co.kr

라이브러리 준비 및 분석

위 제품 링크 페이지에서 SDK Download 메뉴를 이용해 SDK 관련 파일을 제공합니다.

(안드로이드, iOS, 윈도우용 라이브러리를 제공합니다. 이글에서는 안드로이드 라이브러리만 다룹니다.)

다운로드 받은 압축파일에는 SDK 파일과 문서, 샘플이 포함되어 있습니다.

(앱스토어에서 RFPrisma로 검색 해 샘플 앱을 설치할 수 있습니다.)

문서와 샘플을 통해 제공하는 기능을 확인하고, 대략적인 사용법을 익히도록 합니다. 특히 라이브러리를 호출하는 부분은 정확히 숙지해야 합니다.

델파이용 JAR 브릿지 파일 생성

set path=%PATH%;"c:\Program Files (x86)\Embarcadero\Studio\19.0\bin\converters\java2op"

java2op -jar ..\SDK\rfid.reader.api.jar -unit Androidapi.JNI.rfidreaderapi

var
  FReader: JATRfidReader;
...
  FReader := TJATRfidManager.JavaClass.getInstance;

  FReader.setEventListener(FEventListener);
  FReader.connectDevice(StringToJString(AAddress));
  FReader.setStoredMode(Value);
  FReader.setReportMode(Value);

type
  TRfidEventListner = class(TJavaLocal, JATRfidEventListener)
  private
    FHandler: IRfidEventHandler;
  public
    constructor Create(AHandler: IRfidEventHandler);

    { JATRfidEventListenerClass }
    procedure onAccessResult(P1: JATRfidReader; P2: Jtype_ResultCode; P3: JActionState; P4: JString; P5: JString; P6: Single; P7: Single); cdecl;
    procedure onActionChanged(P1: JATRfidReader; P2: JActionState); cdecl;
    procedure onCommandComplete(P1: JATRfidReader; P2: JCommandType); cdecl;
    procedure onDebugMessage(P1: JATRfidReader; P2: JString); cdecl;
    procedure onDetactBarcode(P1: JATRfidReader; P2: JBarcodeType; P3: JString; P4: JString); cdecl;
    procedure onLoadTag(P1: JATRfidReader; P2: JString); cdecl;
    procedure onReadedTag(P1: JATRfidReader; P2: JActionState; P3: JString; P4: Single; P5: Single); cdecl;
    procedure onRemoteKeyStateChanged(P1: JATRfidReader; P2: JRemoteKeyState); cdecl;
    procedure onStateChanged(P1: JATRfidReader; P2: JConnectionState); cdecl;
  end;

type
  IRfidEventHandler = interface
  ['{FFEB910C-3BB8-48CA-BE11-B09CC07E53AC}']
    // Rfid Reader
    procedure ReadedTag(AReader: JATRfidReader; ATag: string);
    procedure StateChagned(AReader: JATRfidReader; AState: TConnectionState);

    // Barcode
    procedure ActionChagned(AReader: JATRfidReader; AState: TActionState);
    procedure DetactBarcode(AReader: JATRfidReader; ABarcodeType, ACodeId, ABarcode: string);
  end;

type
  TRFIDReader = class(TInterfacedObject, IRfidEventHandler)
...
procedure TRFIDReader.InitReader;
begin
...
  FEventListener := TRfidEventListner.Create(Self);
...
  FReader := TJATRfidManager.JavaClass.getInstance;
  FReader.setEventListener(FEventListener);
end;

procedure TRfidEventListner.onStateChanged(P1: JATRfidReader;
  P2: JConnectionState);
var
  State: TConnectionState;
begin
  if Assigned(FHandler) then
  begin
    State := TConnectionState.Disconnected;
    if P2.getState = TJConnectionState.JavaClass.Connected.getState then
      State := TConnectionState.Connected
    else if P2.getState = TJConnectionState.JavaClass.Connecting.getState then
      State := TConnectionState.Connecting
    else if P2.getState = TJConnectionState.JavaClass.Listen.getState then
      State := TConnectionState.Listen
    ;

    FHandler.StateChagned(P1, State);
  end;
end;

  TWaitDialog.Show('블루투스를 활성화 합니다.', 2000);

  TOverflowMenu.Settings.Top := ToolBar1.Height + 1;
  TOverflowMenu.Settings.Width := Width * 0.9;
  TOverflowMenu.Settings.RightPadding := 10;
  TOverflowMenu.ShowMenu([
      'Connect to last bluetooth device',
      'Connect to new bluetooth device'],
    procedure(AIndex: Integer; AText: string)
    begin
      case AIndex of
        0: ConnectToLastDevice;
        1: ConnectToNewDevice;
      end;
    end);

얼마전 진행한 모바일 개발 컨설팅에서 블루투스 장비와 연결 후 기다리는 동안 표시할 화면이 필요했습니다.

WaitDialog라는 화면을 만들었는데 이 화면은 앞으로도 많이 사용하게 될 것 같아 TFrame을 이용해 재사용 가능하도록 구현해 봤습니다.

WaitDialg 구현에 아래 기술을 사용했습니다.

1) TFrame

2) 클래스 메소드

3) 싱글톤 패턴

이 내용을 학습하면

1) 자주 사용하는 화면을 프레임으로 제작 해 재사용 할 수 있습니다.

2) 클래스 메소드를 활용해 코드를 짧게 사용 할 수 있습니다.

결과화면

결과 화면은 아래와 같습니다.

구현한 내용

화면구성

파이어몽키 프레임을 이용해 WaitDialog 화면을 구성했습니다.

파이어몽키에서 TFrame은 폼디자이너에서 화면을 구성할 수 있는 객체입니다. UI 컴포넌트와 논비주얼 컴포넌트를 화면에 추가하고 사용할 수 있습니다.

WaitDialog 코드

type
  TWaitDialog = class(TFrame)
    rctBackground: TRectangle;
    lytMessage: TLayout;
    rctMessageBG: TRectangle;
    lblMessage: TLabel;
    AniIndicator1: TAniIndicator;
    Timer: TTimer;
    procedure TimerTimer(Sender: TObject);
  private
    class var FInstance: TWaitDialog;
  private
    { Private declarations }
  public
    { Public declarations }
    destructor Destroy; override;

    class procedure Show(ATitle: string = ''; ATimeout: Integer = -1);
    class procedure Hide;
  end;

implementation

{$R *.fmx}

{ TFrame1 }

class procedure TWaitDialog.Show(ATitle: string; ATimeout: Integer);
begin
  if not Assigned(FInstance) then
    FInstance := Create(nil);

  FInstance.Parent := Application.MainForm;
  FInstance.Align := TAlignLayout.Client;
  FInstance.BringToFront;
  FInstance.Visible := True;

  if ATitle <> '' then
  begin
    FInstance.lblMessage.Text := ATitle;
  end;

  if ATimeout > 0 then
  begin
    if ATimeout < 1000 then
      ATimeout := 1000;
    FInstance.Timer.Interval := ATimeout;
    FInstance.Timer.Enabled := True;
  end;
end;

class procedure TWaitDialog.Hide;
begin
  if not Assigned(FInstance) then
    Exit;
  FInstance.Visible := False;
  FInstance.DisposeOf;
end;

procedure TWaitDialog.TimerTimer(Sender: TObject);
begin
  Timer.Enabled := False;
  Hide;
end;

destructor TWaitDialog.Destroy;
begin
  FInstance := nil;

  inherited;
end;

initialization
finalization
  TWaitDialog.Hide;

클래스 메소드

class function TWaitDialog.Instance: TWaitDialog;
begin
  if not Assigned(FInstance) then
    FInstance := Create;
  Result := FInstance;
end;

class procedure TWaitDialog.ReleaseInstance;
begin
  if Assigned(FInstance) then
    FInstance.DisposeOf;
end;

initialization
finalization
  TWaitDialog.ReleaseInstance;

uses FMX.WaitDialog;

  TWaitDialog.Show;
  TWaitDialog.Show('잠시만 기다려 주세요.');
  TWaitDialog.Show('잠시만 기다려 주세요.', 10000);

  TWaitDialog.Hide;

uses 절에 유닛을 추가하고, Show 클래스 메소드를 다양한 방식으로 호출해 화면을 표시합니다.

비동기 동작이 완료된 경우 Hide 클래스 메소드를 호출하면 화면이 감춰집니다.

데모 프로젝트

WaitDialog.zip

IdSMTP, IdMessage를 이용 메일 전송 예제

참고코드

procedure TForm2.Button1Click(Sender: TObject);
begin
  SMTP.Host := ''; // host address
  SMTP.Port := 25;

  MailMessage.From.Address := ''; // From email address
  MailMessage.Recipients.EMailAddresses := Edit2.Text;//'hskim@embarcadero.kr';

  MailMessage.Subject := Edit1.Text;
  MailMessage.Body.Text := Memo1.Lines.Text;
  MailMessage.CharSet := 'UTF-8';
  SMTP.Connect;
  SMTP.Send(MailMessage);
  if SMTP.Connected then
    SMTP.Disconnect;

  ShowMessage('');
end;

SendMail.zip

문단제목

• Indy Project Demo Download :http://www.indyproject.org/Sockets/Demos/index.EN.aspx
  

IdFTP를 이용 로컬 파일을 서버로 업로드하는 예제

• 로컬파일 선택
• 업로드 시 프로그레스바로 진행률 표시

참고 코드

procedure TForm2.Button1Click(Sender: TObject);
begin
  if OpenDialog1.Execute then
    Edit1.Text := OpenDialog1.FileName;
end;

procedure TForm2.Button2Click(Sender: TObject);
var
  LocalPath, RemotePath: string;
begin
  LocalPath := Edit1.Text;
  RemotePath := 'test/' + ExtractFileName(LocalPath);

  IdFTP1.Host := 'hjf.pe.kr';
  IdFTP1.Port := 21;
  IdFTP1.Passive := True;
  IdFTP1.Username := '';  // FTP user
  IdFTP1.Password := '';  // FTP password
  IdFTP1.Connect;

  IdFTP1.Put(LocalPath, RemotePath);

  IdFTP1.Disconnect;
end;

procedure TForm2.IdFTP1Work(ASender: TObject; AWorkMode: TWorkMode;
  AWorkCount: Int64);
begin
  ProgressBar1.Position := AWorkCount;
end;

procedure TForm2.IdFTP1WorkBegin(ASender: TObject; AWorkMode: TWorkMode;
  AWorkCountMax: Int64);
begin
  ProgressBar1.Max := AWorkCountMax;
end;

샘플 프로젝트

IdFTPUpload.zip

문단제목

• Indy Project Demo Download : http://www.indyproject.org/Sockets/Demos/index.EN.aspx
  

TTcpClient, TTcpServer, TUdpSocket 컴포넌트 들이 어느 버전에서 부터인지 모르지만, 기본 컴포넌트에서 빠져있습니다.

위 3개 소켓 컴포넌트를 등록하는 방법을 안내합니다.

(이 글은 RAD Studio 10.2 도쿄 버전을 기준으로 안내합니다.)

1, 윈도우 탐색기로 열고 다음 경로(기본 샘플 경로)로 이동합니다.

C:\Users\Public\Documents\Embarcadero\Studio\19.0\Samples\Object Pascal\VCL\InetWinSockets

2, RAD Studio에서 "inetwinsockets.dpk" 프로젝트를 엽니다.

3, 프로젝트 매니저의 팝업 메뉴에서 Install 메뉴를 선택 해 설치합니다.

4, 델파이 라이브러리 패스에 위 경로를 추가합니다. 

(또는 "Web.Win.Sockets.pas"를 델파이 라이브러리 패스에 포함된 곳에 복사합니다.)

5, 툴팔렛트의 "Internet" 카테고리에 컴포넌트 추가를 확인합니다.

만약, 컴포넌트 추가 후 컴파일 시 "Web.Win.Sockets" 유닛을 찾을 수 없다면 4 단계(라이브러리 패스에 추가)를 검토하시기 바랍니다.

관련링크

델파이 개발 그룹인 grijjy 팀(블로그: https://blog.grijjy.com/)에서 안면인식(Face Detection) 라이브러리를 공개했습니다.

이 라이브러리리는 안드로이드와 iOS에 내장된 사진에서 얼굴을 감지하는 기능을 이용해, 하나의 라이브러리로 제공합니다.

안면인식 기술 개발이 필요하거나, 여러 플랫폼 기능을 하나의 라이브러리로 개발하고자 하는 경우 참고하면 아주 좋습니다.

안면인식(안드로이드, iOS)

• https://blog.grijjy.com/2017/09/11/face-detection-on-android-and-ios/

델파이 개발 그룹인 grijjy 팀(블로그: https://blog.grijjy.com/)에서 문자를 읽어주는 TTS(Text-to-speech) 라이브러리를 공개했습니다.

이 라이브러리는 윈도우, 맥OS, iOS, 안드로이드를 지원합니다.

(grijjy 팀에서 크로스 플랫폼 추상화 레이어 설계를 연습하기 위해 제작했으며, 각 플랫폼 API TTS 기능을 하나의 라이브러리(컴포넌트)로 제공합니다.)

해당 기능이 필요하거나, 공통된 여러 플랫폼의 API를 하나의 라이브러리(컴포넌트)로 제작하는 방법을 참고하면 아주 좋겠습니다.

Cross Platform Text-to-Speech

델파이 개발 그룹인 grijjy 팀(블로그: https://blog.grijjy.com/)에서 빅데이터 데이터베이스에 직접 연동해 작업할 수 있는 델파이 라이브러리를 오픈소스로 공개하였습니다.

카산드라(Cassandra), 카우치베이스(Couchbase), 몽고DB(MongoDB) 총 3개의 빅데이터 데이터베이스 접근용 라이브러리이며, 해당 글에서는 친절하게 설치방법과 샘플 코드등을 자세히 설명합니다.

빅데이터 연동에 이슈가 있거나 관심이 있는 분들에게 큰 도움이 될 것으로 보입니다.

자세한 내용은 아래 링크를 통해 (영문으로)자세히 볼수 있습니다.

참고로, 몽고DB의 경우 델파이에 기본 내장된 FireDAC을 이용해 직접 접속할 수도 있습니다.

(하단에 관련 링크를 추가합니다.)

카산드라(Cassandra)

• https://github.com/grijjy/DelphiCassandra

카우치베이스(Couchbase)

몽고DB(MongoDB)

참고로, 

몽고DB는 델파이에 기본 내장된 FireDAC을 통해 직접 연동할 수 있습니다.

• 엠바카데로 기술문서 : http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Connect_to_MongoDB_Database_(FireDAC)

모바일 앱을 개발할 때에 리스트 항목이 많은 경우, 한번에 가져오면 시간이 오래 걸려 좋지 않은 사용자 경험이 됩니다.

이 경우, 리스트 중 일부를 빠르게 표시하고, 리스트 끝으로 이동 시 추가로 표시하는 방식을 통해 문제를 해결할 수 있습니다.

이 글에서는, 

리스트뷰(TListView)의 목록 끝으로 이동 시, 더보기 버튼을 표시하도록 (매우 심플하게)구현합니다.

버튼 클릭 시 항목을 추가합니다.

이 글을 참고해 리스트 끝으로 이동 시 자동으로 항목을 추가하도록 구현할 수도 있습니다.

리스트뷰 더보기 버튼  구현하기

결과

결과 화면은 다음과 같습니다.

처음 24개 항목 표시 후, 목록 끝으로 이동 시 버튼이 표시되고, 버튼을 눌러 항목을 추가합니다.

구현방법

1) 더보기 버튼을 리스트뷰(TListView)에 올려놓고 감춥니다.(Visible := False)

2) 리스트뷰의 스크롤 이동(OnScrollViewChange) 이벤트 핸들러에서 제일 끝으로 이동한 경우 버튼을 표시합니다.

컴포넌트 구성은 아래와 같습니다.

구현된 주요 코드는 아래와 같습니다.

procedure TForm2.AddItem(ACount: Integer);
var
  I: Integer;
  Item: TListViewItem;
begin
  for I := 0 to ACOunt - 1 do
  begin
    Item := ListView1.Items.Add;
    Item.Text := 'Item ' + ListView1.Items.Count.ToString;
  end;
end;

procedure TForm2.FormCreate(Sender: TObject);
begin
  AddItem(24);
  btnListViewMore.Visible := False;
end;

procedure TForm2.btnListViewMoreClick(Sender: TObject);
begin
  AddItem(6);
  btnListViewMore.Visible := False;
end;

procedure TForm2.ListView1Resized(Sender: TObject);
begin
  ListView1ScrollViewChange(Sender);
end;

procedure TForm2.ListView1ScrollViewChange(Sender: TObject);
var
  LastItemBottom, ListViewBottom: Single;
begin
  LastItemBottom := ListView1.GetItemRect(ListView1.ItemCount - 1).Bottom;
  ListViewBottom := ListView1.LocalRect.Bottom;

  btnListViewMore.Visible := ((LastItemBottom - ListViewBottom) < 30);
end;

샘플 프로젝트

ListViewMoreButton.zip

이 샘플에서는 더보기 버튼 클릭 시 단순하게 목록을 추가했습니다. 실무에서는 더보기 버튼 클릭시 추가 데이터를 수신 후 목록을 동적으로 갱신하도록 구현해야 합니다.

당겨서 새로고침(Pull to refresh) 구현하기

모바일 앱에서는 새로운 정보를 가져오기 위해 당겨서 새로고침 기능을 사용할 수 있습니다.

이 기능은 리스트뷰(TListView)의 속성을 이용해 구현할 수 있습니다.

PullToRefresh 속성을 True로 설정 시, 목록 상단에서 당겨서 새로고침 기능을 제공합니다.

위 동작이 발생하면 OnPullRefresh 이벤트가 발생합니다.

참고링크

• [docwiki] TListViewBase.PullToRefresh 속성

다음 등의 포털 사에서는 자사 데이터 일부를 Open API로 공개하고 있습니다.

특히 지도나 주소, 검색 등은 직접 데이터를 수집하는 것보다 포털의 데이터를 활용하는 것이 개발 및 유지보수에 유리할 수 있습니다.

오늘은 데브기어 테크게시판을 통해 다음 카카오의 주소검색 API 연동을 문의주셔서 해당 내용을 공유합니다.

아래 샘플을 REST API를 이용해 카카오 주소 검색 Open API와 연동하는 내용입니다.

(카카오 Open API의 대부분은 REST API를 제공합니다. )

해당 내용을 잘 익혀서 다양한 Open API를 여러분의 앱에서 활용하실 수 있습니다.

카카오 개발자 > 로컬 : https://developers.kakao.com/docs/restapi/local

카카오 Open API를 연동하기 위해서는 앱을 등록하고, 앱 키를 받아야 합니다.(해당 내용의 설명은 생략합니다.)

카카오 개발자 > 내 애플리케이션 : https://developers.kakao.com/apps

위 링크를 참고해 개발했으며, 제일 문제가 됐던 부분은 HTTP 해더에 Authorization 값을 추가하는 부분입니다.

연동한 결과는 아래와 같습니다.

주요 코드는 아래와 같습니다.

uses
  REST.TYpes;

const
  API_KEY = '';
{
  https://developers.kakao.com/ 등록 > 앱 생성 > 앱키(REST API 키)를 위(API_KEY)에 입력
}

procedure TForm2.Button1Click(Sender: TObject);
begin
  RESTRequest1.Params.ParameterByName('query').Value := Edit1.Text;

  RESTRequest1.Execute;
end;

procedure TForm2.FormCreate(Sender: TObject);
var
  Param: TRESTRequestParameter;
begin
  RESTClient1.BaseURL := 'https://dapi.kakao.com';
  RESTClient1.Accept := 'application/json, text/plain; q=0.9, text/html;q=0.8,';
  RESTClient1.AcceptCharset := 'UTF-8, *;q=0.8';

  RESTRequest1.Resource := 'v2/local/search/address.json?query={query}';
  Param := RESTRequest1.Params.AddHeader('Authorization', 'KakaoAK ' + API_KEY);
  Param.Options := [TRESTRequestParameterOption.poDoNotEncode];

  RESTResponseDataSetAdapter1.RootElement := 'documents';
end;

샘플 프로젝트

KakaoLocalLocation.zip

문단제목

• REST Client Library - http://docwiki.embarcadero.com/RADStudio/en/REST_Client_Library
  

약국용 라디오 어플을 개발하는 개발사에서는, 오래전부터 PC 기반으로만 라디오 서비스를 하고 있습니다.

해당 개발사에서는 노후된 앱을 최신 운영체제(윈도우 10 등) 지원과 모바일 확장을 위해 파이어몽키로 재개발 중입니다.

(파이어몽키는 윈도우, OSX, iOS, 안드로이드를 하나의 소스코드로 개발할 수 있습니다.)

개발 중 몇가지 질문을 주셔서 기술지원 후 해당 내용 일부를 공유합니다.

이 글에서는 다음 내용의 구현 방법을 소개합니다.

1, 폼의 일부영역 보이기/가리기(Collapse)

2, Border가 없는 폼에서 특정영역(Toolbar)을 마우스로 이동하기

결과 화면은 아래와 같습니다.

1, 폼의 일부영역 보이기/가리기(Collapse)

이 기능은 TFloatAnimation 컴포넌트를 사용해 손쉽게 구현할 수 있었습니다.

(파이어몽키에는 애니메이션과 효과를 기본 컴포넌트로 제공합니다.)

TFloatAnimation은 지정 된 시작과 끝 Float 값에 대해 애니메이션 되면 값이 변경할 수 있어, 크기, 위치, 각도, 투명도 등을 천천히 변경할 수 있습니다.

하지만, 폼의 높이(Height) 속성에는 FloatAnimaion을 지정할 수 없어, 폼에 레이아웃 컴포넌트를 놓고, 레이아웃 컴포넌트의 높이를 변경시키고, 변경 시 발생하는 OnProcess 이벤트에서 폼의 높이를 조정하도록 구현했습니다.

위 기능의 코드는 아래와 같습니다.

procedure TForm2.FormCreate(Sender: TObject);
begin
  Self.BorderStyle := TFmxFormBorderStyle.None;

  FOrgHeight := lytMain.Height;
end;

procedure TForm2.Button1Click(Sender: TObject);
begin
  lytMain.Align := TAlignLayout.None;
  FloatAnimation1.Duration := 0.5;
  if lytMain.Height = 0  then
  begin
    FloatAnimation1.StartValue := 0;
    FloatAnimation1.StopValue := FOrgHeight;
    FloatAnimation1.Start;
  end
  else
  begin
    FOrgHeight := lytMain.Height;
    FloatAnimation1.StartValue := FOrgHeight;
    FloatAnimation1.StopValue := 0;
    FloatAnimation1.Start;
  end;
end;

procedure TForm2.FloatAnimation1Finish(Sender: TObject);
begin
  lytMain.Align := TAlignLayout.Client;
end;

procedure TForm2.FloatAnimation1Process(Sender: TObject);
begin
  // 레이아웃 크기 조정 시 폼의 크기 조정
  Self.Height := Trunc(ToolBar1.Height + lytMain.Height) + 1;
end;

2, Border가 없는 폼에서 특정영역을 마우스로 이동하기

테두리가 없는 폼에서 제목등의 특정영역을 마우스로 끌어 이동하기 위해 다음 코드를 사용했습니다.

(해당 코드는 윈도우와 OSX(맥)에서 모두 동작합니다.)

procedure TForm2.ToolBar1MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Single);
begin
  if (Button = TMouseButton.mbLeft) then StartWindowDrag;
end;

엠바카데로 블로그에 HARUYUKI MOHRI가 작성한 C++빌더로 iOS 시스템 볼륨 제어하는 내용이 있어 델파이로 작업해 봤습니다.

원글 : https://community.embarcadero.com/blogs/entry/how-to-control-the-system-audio-volume-of-ios?utm_source=Facebook_Organic&utm_medium=social

아래와 같이 Up/Down 버튼을 누르면 시스템 볼륨을 제어합니다.

MPVolumeView 클래스(iOSapi.MediaPlayer.pas)와 UISlider 클래스(iOSapi.UIKit.pas)를 사용했습니다.

uses 절에 "iOSapi.MediaPlayer, iOSapi.UIKit" 추가해야 합니다.

다음 2개 변수를 선언해야 합니다.

  private
    { Private declarations }
    FMPVolumeView: MPVolumeView;
    FSlider: UISlider;

구현된 델파이 코드는 아래와 같습니다.

procedure TForm1.FormCreate(Sender: TObject);
var
  I, J: Integer;
begin
  FMPVolumeView := TMPVolumeView.Create;

  I := 0;
  J := FMPVolumeView.subviews.count;

  if I = J then
  begin
    log.d('');
  end;

  if FMPVolumeView.subviews.count > 0 then
  begin
    FSlider := TUISlider.Wrap(FMPVolumeView.subviews.objectAtIndex(0));
    FSlider.setValue(0.0);
  end;
end;

procedure TForm1.btnVolumeUpClick(Sender: TObject);
var
  Vol: Single;
begin
  Vol := FSlider.value;
  FSlider.setValue(Vol + 0.1);
end;

procedure TForm1.btnVolumeDownClick(Sender: TObject);
var
  Vol: Single;
begin
  Vol := FSlider.value;
  FSlider.setValue(Vol - 0.1);
end;

샘플 프로젝트

iOSVolumeControl.zip

참고 링크

리스트뷰(TListView)는 많은 데이터를 목록으로 표시하기 위한 컴포넌트입니다.

스와이프(스크롤) 속도가 빠른 대신 항목 구성하기가 까다롭습니다.

이번 글에서는 리스트뷰 표현 방식 중 DynamicAppearance(동적 외관구성)를 이용해 외관 구성 후, 아래 기능을 구현했습니다.

1) 표시 항목을 추가(현재 2개, 여러 항목 표시가능)

2) 조건에 따라 배경색상을 변경

3) 조건에 따라 글꼴 변경

결과 화면은 아래와 같습니다.

(아이폰에서는 "여자" 글꼴을 Bold로 주니 글자가 약간 커지네요.)

구현한 내용은 아래와 같습니다.

화면구성

대표 컴포넌트는 리스트뷰(TListView)와 이미지리스트(TImageList)입니다.

이미지 리스트에는 2개의 색상 이미지(16x16)를 추가했습니다.

리스트뷰의 ItemAppearance.ItemAppearance를 DynamicAppearance로 설정했습니다.

아이템 오브젝트는 문자를 표현할 Text 항목 2개와 배경을 표현할 Image 항목 총 3개로 구성했습니다.

(Image 항목을 추가한 이유는 Rectangle과 같은 도형을 지원했다면 도형의 배경으로 처리했겠지만, 지원하지 않아 이미지를 이용해 배경으로 처리했습니다.)

코드작성

코드의 주요 기능은 2가지 입니다.

1) 리스트뷰 아이템(TListViewItem)의 값에 따라 배경색 및 글꼴 설정

2) 리스트뷰 크기 변경(OnResized 이벤트) 시 항목너비 조정

참고로 리스트뷰 아이템 서식 변경의 경우 OnUpdateObjects 이벤트에서 처리했지만, 

코드로 목록을 추가하는 경우, 추가하는 시점에 서식을 설정할 수도 있습니다.

procedure TForm1.FormCreate(Sender: TObject);
begin
  ListView1.ItemSpaces := TBounds.Create(RectF(0, 0, 0, 0));
end;

procedure TForm1.Button1Click(Sender: TObject);
var
  Item: TListViewitem;
begin
  Item := ListView1.Items.Add;
  Item.Data['Text1'] := '김현수';
  Item.Data['Text2'] := '남자';
end;

procedure TForm1.Button2Click(Sender: TObject);
var
  Item: TListViewitem;
begin
  Item := ListView1.Items.Add;
  Item.Data['Text1'] := '아이유';
  Item.Data['Text2'] := '여자';
//  (Item.Objects.ObjectByName('Image2') as TListItemImage).Bitmap := ImageList1.Bitmap(TSizeF.Create(16, 16), 1);
end;

function FindTextObject(const AListView: TListView; AName: string): TCommonObjectAppearance;
var
  Obj: TCommonObjectAppearance;
begin
  Result := nil;

  for Obj in AListView.ItemAppearanceObjects.ItemObjects.Objects do
  begin
    if Obj.Name = AName then
      Exit(Obj as TCustomTextObjectAppearance);
  end;
end;

procedure TForm1.ListView1Resized(Sender: TObject);
var
  Text1, Text2: TCommonObjectAppearance;
begin
  Text1 := FindTextObject(ListView1, 'Text1');
  Text2 := FindTextObject(ListView1, 'Text2');

  Text1.Width := ListView1.Width / 2;
  Text2.PlaceOffset.X := Text1.Width;
  Text2.Width := ListView1.Width / 2;
end;

procedure TForm1.ListView1UpdateObjects(const Sender: TObject;
  const AItem: TListViewItem);
var
  ImageItem: TListItemImage;
  TextItem: TListItemText;
begin
  ImageItem := AItem.Objects.DrawableByName('Image2') as TListItemImage;
  TextItem := AItem.Objects.DrawableByName('Text2') as TListItemText;

  if Assigned(ImageItem) then
  begin
    if AItem.Data['Text1'].ToString = '김현수' then
      ImageItem.Bitmap := ImageList1.Bitmap(TSizeF.Create(16, 16), 0)
    else
      ImageItem.Bitmap := ImageList1.Bitmap(TSizeF.Create(16, 16), 1)
    ;
    ImageItem.Visible := True;
  end;

  if Assigned(TextItem) then
  begin
    if Textitem.Text = '여자' then
      Textitem.Font.Style := [TFontStyle.fsBold, TFontStyle.fsItalic];
  end;
end;

위 구성은 리스트뷰 항목별로 배경과 글꼴을 설정했습니다.

위 내용을 참고하면, 각 항목의 위치, 크기 등을 자유자제로 편집할 수 있어 활용도는 무궁무진할 것으로 보입니다.

좋은 아이디어가 있다면, 저에게도 알려주셔서 공유 부탁드립니다.

참고자료

델파이 기본샘플을 적극 참고했습니다.

ListView 관련 샘픙은 기본 설치 경로 기준 아래와 같습니다.(10.2 도쿄 기준)
C:\Users\Public\Documents\Embarcadero\Studio\19.0\Samples\Object Pascal\Multi-Device Samples\User Interface\ListView

다음과 같은 샘플들이 있습니다.

그중 CustomAdapter와 ListViewImageIndex 샘플을 많이 참고했습니다.

CustomAdapter

웹상의 이미지를 표시하고, 상단에 큼지막한 이름과 하단에 설명과 버튼을 구성합니다.

목록의 크기를 이미지에 맞게 조정합니다.

ListViewImageIndex

리스트뷰와 데이터셋을 라이브바인딩과 코드를 이용해 목록을 구성합니다.

이미지는 이미지리스트를 활용합니다.

기타 다른 샘플들도 참고할 만한 내용이 많습니다. 다른 샘플들은 직접 둘러보시고 도움을 받으시기 바랍니다.

REST API 웹서비스 연동 

여러분들의 프로젝트에 REST API 기반 웹서비스를 구축하고 연동하는 방법을 배울 수 있는 교육과정입니다.

• 교육신청 : http://www.devgear.co.kr/edu/reg
• 다른 교육 안내 : http://www.devgear.co.kr/edu/

진행 순서

JSON 샘플

http://www.json.org/json-ko.html

Open API 관련링크

• 카카오 주소 검색 : http://blog.hjf.pe.kr/472
• 카카오톡 프로필 : https://developers.kakao.com/docs/restapi#카카오톡-프로필-요청
• 내 애플리케이션 등록
• 앱 키 확인
• 로그인 요청(웹브라우저)
• 성공 시 인증코드 전달(리다이렉트)
• Access Token 발급 요청
• Access Token 수신
• 서비스 API 호출(인증정보 포함)
• 다음 로컬 API : http://developers.daum.net/services/apis/local 
• 다음 검색 API(책 검색) : http://developers.daum.net/services/apis/search/book

EMSPackage.zip

클라이언트 프로젝트

EndPointClient.zip

DataSetClient.zip

KakaoOAuth20.zip

formdesign.txt

datasetFormDesign.txt

  object btnLoadData: TButton

    Position.X = 24.000000000000000000

    Position.Y = 16.000000000000000000

    TabOrder = 0

    Text = #45936#51060#53552' '#47196#46300

    OnClick = btnLoadDataClick

  end

  object Grid1: TGrid

    CanFocus = True

    ClipChildren = True

    Position.X = 24.000000000000000000

    Position.Y = 48.000000000000000000

    Size.Width = 369.000000000000000000

    Size.Height = 353.000000000000000000

    Size.PlatformDefault = False

    TabOrder = 1

    RowCount = 0

    OnSelChanged = Grid1SelChanged

    Viewport.Width = 365.000000000000000000

    Viewport.Height = 328.000000000000000000

  end

  object Label1: TLabel

    Position.X = 408.000000000000000000

    Position.Y = 46.000000000000000000

    Text = #51228#47785

    TabOrder = 11

  end

  object edtTitle: TEdit

    Touch.InteractiveGestures = [LongTap, DoubleTap]

    TabOrder = 12

    Position.X = 408.000000000000000000

    Position.Y = 65.000000000000000000

    Size.Width = 257.000000000000000000

    Size.Height = 22.000000000000000000

    Size.PlatformDefault = False

  end

  object Label2: TLabel

    Position.X = 408.000000000000000000

    Position.Y = 94.000000000000000000

    Text = #51200#51088

    TabOrder = 6

  end

  object edtAuthor: TEdit

    Touch.InteractiveGestures = [LongTap, DoubleTap]

    TabOrder = 7

    Position.X = 408.000000000000000000

    Position.Y = 113.000000000000000000

    Size.Width = 121.000000000000000000

    Size.Height = 22.000000000000000000

    Size.PlatformDefault = False

  end

  object Label3: TLabel

    Position.X = 408.000000000000000000

    Position.Y = 142.000000000000000000

    Text = 'ISBN'

    TabOrder = 4

  end

  object edtISBN: TEdit

    Touch.InteractiveGestures = [LongTap, DoubleTap]

    TabOrder = 5

    Position.X = 408.000000000000000000

    Position.Y = 161.000000000000000000

    Size.Width = 121.000000000000000000

    Size.Height = 22.000000000000000000

    Size.PlatformDefault = False

  end

  object Label4: TLabel

    Position.X = 408.000000000000000000

    Position.Y = 190.000000000000000000

    Text = #44032#44201

    TabOrder = 2

  end

  object edtPrice: TEdit

    Touch.InteractiveGestures = [LongTap, DoubleTap]

    TabOrder = 3

    Position.X = 408.000000000000000000

    Position.Y = 209.000000000000000000

    Size.Width = 121.000000000000000000

    Size.Height = 22.000000000000000000

    Size.PlatformDefault = False

  end

  object Label5: TLabel

    Position.X = 408.000000000000000000

    Position.Y = 238.000000000000000000

    Text = #44288#47144#47553#53356

    TabOrder = 9

  end

  object edtLink: TEdit

    Touch.InteractiveGestures = [LongTap, DoubleTap]

    TabOrder = 10

    Position.X = 408.000000000000000000

    Position.Y = 257.000000000000000000

    Size.Width = 257.000000000000000000

    Size.Height = 22.000000000000000000

    Size.PlatformDefault = False

  end

  object Label6: TLabel

    Position.X = 408.000000000000000000

    Position.Y = 286.000000000000000000

    Text = #49444#47749

    TabOrder = 8

  end

  object mmoDescription: TMemo

    Touch.InteractiveGestures = [Pan, LongTap, DoubleTap]

    DataDetectorTypes = []

    Position.X = 408.000000000000000000

    Position.Y = 304.000000000000000000

    Size.Width = 257.000000000000000000

    Size.Height = 97.000000000000000000

    Size.PlatformDefault = False

    TabOrder = 13

    Viewport.Width = 253.000000000000000000

    Viewport.Height = 93.000000000000000000

  end

  object btnNewData: TButton

    Position.X = 408.000000000000000000

    Position.Y = 16.000000000000000000

    TabOrder = 16

    Text = #49888#44508

    OnClick = btnNewDataClick

  end

  object btnSaveData: TButton

    Position.X = 584.000000000000000000

    Position.Y = 408.000000000000000000

    TabOrder = 14

    Text = #51200#51109

    OnClick = btnSaveDataClick

  end

  object ImageControl1: TImageControl

    Position.X = 536.000000000000000000

    Position.Y = 96.000000000000000000

    Size.Width = 129.000000000000000000

    Size.Height = 145.000000000000000000

    Size.PlatformDefault = False

    TabOrder = 17

  end

  object btnDeleteData: TButton

    Position.X = 584.000000000000000000

    Position.Y = 16.000000000000000000

    TabOrder = 15

    Text = #49325#51228

    OnClick = btnDeleteDataClick

  end

개발한 프로세스에서 메모리 누수(Leak)이 발생된다 예상되면, 메모리 사용량 추적을 통해 메모리 누수 여부를 검증해야 합니다. 성능 모니터를 이용하면 프로세스의 메모리 사용량을 추적 및 로그 기록할 수 있습니다.

만약, 메모리 누수가 확인된다면, 테스트용 실행파일 등으로, 메모리 누수가 발생할 수 있는 코드의 범위를 줄여가며 반복적으로 테스트 해야 합니다.

만약, 특정 기능 수행 시 메모리 누수가 의심된다면 특정 기능을 반복적으로 실행할 수 있는 테스트 프로그램을 만들어 점검할 코드의 범위를 줄여가며 추적하기 바랍니다.

델파이로 개발된 프로젝트라면 메모리 누수 보고 기능을 켜서 메모리 누수 여부를 확인할 수 있습니다.

• Out of memory 오류 해소 방안 : http://blog.hjf.pe.kr/449

프로세스 메모리 사용량 추적

윈도우즈 성능 모니터를 이용해 프로세스가 사용 중인 메모리 사용량을 로그파일로 기록하는 방법을 소개합니다.

모니터링 대상 프로세스 실행

메모리 사용량 추적할 프로세스를 실행합니다. 저는 MemoryLeakTest.exe라는 실행파일을 만들어 실행했습니다.

성능 모니터에서 프로세스 메모리 사용량 기록

성능 모니터를 실행하고, 성능 > 데이터 수집기 집합 > 사용자 정의 메뉴를 선택합니다.

목록 창에서 우측 마우스를 누르고, 새로 만들기 > 데이터 수집기 집합 메뉴를 선택합니다.

이름을 지정하고, 수동으로 만들기(고급) 항목 선택 합니다.

성능 카운터 항목을 선택합니다.

[추가] 버튼을 누릅니다.

데이터 수집 가격을 지정합니다.

사용 가능한 카운터에서 Process 항목을 펼치고, Working Set 항목을 선택합니다.

인스턴스로는 추적할 프로세스를 선택합니다.(현재 실행된 프로세스 목록이 표시됩니다.)

[추가] 버튼을 눌러 추가합니다.

(Handle Count, Private Bytes 등 추적하고 싶은 카운터들도 함께 선택해도 됩니다.)

(주요 카운터에 대한 설명은 하단 참고링크 참고)

데이터 저장 경로를 지정합니다.

작업을 마칩니다.

추가한 데이터 수집기 집합의 속성에 들어가 로그 형식을 "쉼표로 구분"으로 변경합니다.(로그를 엑셀로 활용할 수 있습니다.)

성능 모니터링을 시작합니다.(데이터 수집기 집합의 속성에서 예약등을 이용해 자동 시작할 수 있습니다.)

로그파일 확인

지정한 경로에 csv 파일이 생성됩니다.

csv 파일을 엑셀로 열고, 데이터를 분석하거나, 차트를 만들어 시각적으로 메모리 사용량(Working Set) 추이를 관찰 할 수 있습니다.

참고링크

• 윈도우즈 성능 모니터 : https://technet.microsoft.com/ko-kr/library/cc749249(v=ws.11).aspx
• 성능 모니터를 이용한 메모리 사용 추적 : https://technet.microsoft.com/library/Dd878107#c
• 성능 모니터 주요 카운터(외부 링크)
• http://tshooter.tistory.com/93
• http://www.nextstep.co.kr/121
• http://egloos.zum.com/light99/v/4983555