버전 신기능 [온라인 세미나-What's NEW! RAD스튜디오11] 세션 2-2. 표준 REST API로 서비스를 델파이 클라이언트에서 활용하기 (REST Client 활용)

REST 디버거 실행
IDE를 열고, Tools > REST Debugger 메뉴 선택
Request 설정(서버 정보를 입력)
1. Method: GET 선택
2. URL: "http://localhost:8080/fishfacts" 입력
3. Content-Type: "application/json" 선택
Parameters 설정(접근할 리소스 정보 입력)
1. Parameters 탭으로 이동
2. Resource: "biolifes/" 입력
결과확인
1. 우측의 [Send Request] 버튼 클릭
2. 응답 결과(200 : OK) 확인
  - 만약, 404 오류가 발생하는 경우 URL과 Resource 입력을 확인할 것
3. 하단의 Headers > Body > Tabular Data 탭을 이동하면 데이터 확인
분석한 정보 클립보드로 복사
1. 우측의 [Copy Components] 버튼 클릭
  - 5개의 컴포넌트가 클립보드로 복사되었다는 메시지 출력
  - 만약, 3개의 컴포넌트 정보가 복사되었다면, 하단 Response의 Tabular Data 탭을 선택 후 복사할 것

3. REST 클라이언트 컴포넌트 설정하기

REST 디버거에서 복사한 컴포넌트들을 데이터 모듈에 붙여넣어 조회 기능을 완성합니다.

CSModule(데이터 모듈) 열고, 화면 크기를 적당히 키움
클립보드의 REST 클라이언트 CSModule에 붙여넣기
(Ctrl + V)
겹쳐진 컴포넌트를 적당한 간격으로 위치 조정
REST 클라이언트 Content-Type 설정
1. TRESTClient 컴포넌트 선택
2. ContentType 속성에 "application/json" 입력
응답 데이터 변환 타입모드 설정
1. TRESTResponseDataSetAdapter 컴포넌트 선택
2. StringFieldSize 속성을 1024로(적절한 값으로) 변경
3. TypesMode 속성을 StringOlny로 변경
  (JSON 데이터 변환 시 문자열로 처리, 기본값 Rich의 경우 문자열을 다른 타입으로 변환 시도 등의 오류 발생)
디자인 시점에 연동 확인
TRESTRequest 컴포넌트 > 우측 마우스 클릭 > Execute... 메뉴 클릭 > "200 - OK" 확인 > [OK] 버튼 클릭
데이터셋의 데이터 확인
TFDMemTable 컴포넌트 > 우측 마우스 클릭 > Edit DataSet... 메뉴 클릭 > 확인 후 [OK] 버튼 클릭
데이터 모듈 생성 시 요청 실행
1. 데이터 모듈의 OnCreate 이벤트 핸들러 생성
2. 요청 실행 코드 작성(데이터 모듈 생성 즉 앱 실행 시 요청 실행)
```
  RESTRequest1.Execute;
```

4. REST API 저장(수정, 삭제) 메소드 생성하기

데이터 추가, 수정, 삭제 시 REST API를 호출하는 메소드를 준비합니다. 해당 메소드는 데이터 변경 시 UI에서 호출하게 됩니다.

저장 관련된 기능 구현하기 위한 컴포넌트 3종 추가 및 설정
- TRESTResponse 추가(RESTResponse2)
- TRESTRequest 추가(RESTRequest2)
  - Client: RESTClient1 선택
  - Response : RESTResponse2 선택
- TRESTRequestDataSetAdapter 추가(RESTRequestDataSetAdapter1)
  - Area : Current 선택(현재의 레코드에 대해서만 처리)
  - Request : RESTRequest2 선택
  - DataSet : FDMemTable1 선택

데이터 모듈 선언부의 private, public 영역을 아래와 같이 변경

  private
    procedure CreateData;
    procedure UpdateData;
  public
    procedure SaveData;
    procedure DeleteData;
  end;

커서의 클래스 완성 기능을 이용 구현부 메소드 자동 생성
(우측마우스 > Complete Class at Cursor 또는 Shift + Ctrl + C)

각 메소드를 다음을 참고해 변경합니다.

SaveData 구현
Post 버튼 클릭 시 데이터 저장 메소드 호출, 데이터셋 상태에 따라 CreateData 또는 UpdateData 메소드 호출

procedure TdmDatabase.SaveData;
begin
  if FDMemTable1.State = dsInsert then
    CreateData
  else if FDMemTable1.State = dsEdit then
    UpdateData
  else
    Exit;

  FDMemTable1.Post;
end;

CreateData 구현
POST 메소드로 Body에 JSON 데이터를 담아 요청 전송
(Body에 JSON 데이터를 담는 과정은 TRESTRequestDataSetAdapter에서 처리됨)

procedure TdmDatabase.CreateData;
var
  Item: string;
begin
  Item := FDMemTable1.FieldByName('species_no').AsString;

  RESTRequest2.Method := rmPOST;
  RESTRequest2.Resource := 'biolifes/';
  RESTRequest2.Params.Clear;
  RESTRequest2.Params.AddItem('species_no', Item);

  RESTRequestDataSetAdapter1.Request := RESTRequest2; // JSON 데이터 자동 생성

  RESTRequest2.Execute;
end;

UpdateData 구현
PUT 메소드로 Body에 JSON 데이터를 담아 요청 전송

procedure TdmDatabase.UpdateData;
var
  Item: string;
begin
  Item := FDMemTable1.FieldByName('species_no').AsString;

  RESTRequest2.Method := rmPUT;
  RESTRequest2.Resource := 'biolifes/{item}';
  RESTRequest2.Params.ParameterByName('item').Value := Item;

  RESTRequestDataSetAdapter1.Request := RESTRequest2;

  RESTRequest2.Execute;
end;

DeleteData 구현
Delete 메소드로 요청 전송(Body 데이터 불필요)

procedure TdmDatabase.DeleteData;
var
  Item: string;
begin
  Item := FDMemTable1.FieldByName('species_no').AsString;

  RESTRequest2.Method := rmDelete;
  RESTRequest2.Resource := 'biolifes/{item}';
  RESTRequest2.Params.ParameterByName('item').Value := Item;

  RESTRequestDataSetAdapter1.Request := nil;

  RESTRequest2.Execute;

  FDMemTable1.Delete;
end;

5. UI 컨트롤과 데이터셋 연결하기

화면(폼)과 데이터 연결을 변경하고, 데이터 수정 시 위에서 작성한 메소드를 호출하도록 변경합니다.

화면(CSForm) 열고 폼디자이너 표시
데이터소스의 데이터셋을 FDMemTable1으로 변경(REST API 호출한 결과 데이터셋)
1. DataSource1 선택
2. DataSet 속성을 "dmDatabase.FDMemTable1" 선택
  (오류 발생은 무시)
TDBImage를 TImage로 변경
1. DBImage1 컴포넌트 삭제
2. TImage 컴포넌트 추가
3. 기존 DBImage1의 위치로 위치 및 크기 변경
Post 실행 시 SaveData 메소드 호출하도록 변경
1. ActionList1 더블클릭
2. DatasetPost1 선택
3. OnExecute 이벤트 핸들러 생성 후 데이터모듈의 SaveData 메소드 호출하도록 구현
```
procedure TForm4.DatasetPost1Execute(Sender: TObject);
begin
  dmDatabase.SaveData;
end;
```
Delete 실행 시 DeleteData 메소드 호출하도록 변경
1. ActionList1 더블클릭
2. DatasetDelete1 선택
3. OnExecute 이벤트 핸들러 생성 후 데이터모듈의 DeleteData 메소드 호출하도록 구현
```
procedure TForm4.DatasetDelete1Execute(Sender: TObject);
begin
  dmDatabase.DeleteData;
end;
```

6. 이미지 조회 기능 추가하기

REST API에서 데이터와 이미지가 분리되어 구현되어 있는 경우, 데이터 변경 시 이미지를 로드하도록 구현해야 합니다.

이미지 가져오기 관련 컴포넌트 추가
1. TRESTResponse 추가(RESTResponse3)
2. TRESTRequest 추가(RESTRequest3)
  1. Client: RESTClient1 선택
  2. Response: RESTResponse3 선택

이미지 제공 REST API 연동 메소드 추가

데이터 모듈의 선언부 public 영역에 다음 메소드 추가 후 자동완성(Shift + Ctrl + C)해 구현부 추가
```
    procedure LoadImage(LoadProc: TProc<TMemoryStream>);
```

구현부에 다음 코드 추가

procedure TdmDatabase.LoadImage(LoadProc: TProc<TMemoryStream>);
var
  Item: string;
  Stream: TMemoryStream;
begin
  Item := FDMemTable1.FieldByName('species_no').AsString;

  RESTRequest3.Method := rmGET;
  RESTRequest3.Resource := 'biolifes/{item}/photo/';
  RESTRequest3.Params.ParameterByName('item').Value := Item;

  RESTRequest3.ExecuteAsync(procedure
    begin
      if RESTResponse3.StatusCode = 404 then
      begin
        LoadProc(nil);
        Exit;
      end;

      Stream := TMemoryStream.Create;
      try
        Stream.WriteData(RESTResponse3.RawBytes, RESTResponse3.ContentLength);
        LoadProc(Stream);
      finally
        Stream.Free;
      end;
    end);
end;

함수 파라메터로 LoadProc(익명메소드) 사용
biolifes/(id)/photo/ 리소스에 GET 요청
비동기로 실행(ExecuteAsync) - 큰 용량의 데이터 처리 시 비동기로 처리해 병렬로 실행 가능
응답을 TMemoryStream에 기록 후 LoadProc 실행

폼(CSForm)에서 데이터 변경 시 이미지 로드 함수 호출하도록 변경

DataSource1의 OnDataChange 이벤트 핸들러 생성

데이터 모듈의 이미지 로드 함수 호출

procedure TForm4.DataSource1DataChange(Sender: TObject; Field: TField);
begin
  dmDatabase.LoadImage(procedure(AStream: TMemoryStream)
    begin
      if Assigned(AStream) then
      begin
        var WIC := TWICImage.Create;
        WIC.LoadFromStream(AStream);
        Image1.Picture.Assign(WIC);
        WIC.Free;
      end
      else
        Image1.Picture.Assign(nil);
    end);
end;

LoadImage 메소드 호출 시 익명메소드를 전달
스트림을 TWICImage로 로드 후 TImage에 할당

7. 결과확인

프로젝트를 실행(F9) 후 레코드 이동, 데이터 추가([Insert] 버튼 클릭 > 데이터 입력 > [Post] 버튼 클릭), 수정, 삭제 등을 수행해 봅니다.

위 과정의 내용을 여러분의 서비스에도 적용해 보시기 바랍니다.

김나래 · 10월 21일, 2021

Q&A

"세션 2. RAD서버를 이용해 “빠르게” 표준 REST API 구축하기 데모" 관련 Q&A들을 정리했습니다.
세미나 중 나왔던 더 많은 질문과 답변은 세션 5. Live Q&A with 한국 엠바카데로 MVP!를 클릭해 확인할 수 있습니다.

Q.RAD 서버 라이트 배포 방법을 설명해 주세요.

A.아직 RAD 서버 라이트 관련 기술자료가 배포되지 않았습니다. 향후 자료 등록 시 포럼 기고 및 이메일로 안내하겠습니다.

Q. RAD 서버에서 요청 시 인증 관련 오류가 발생합니다.

A. RAD 서버 엔진 인증을 사용한 것으로 보입니다. RAD 서버는 사용자 관리, 인증 등의 기본 기능들이 내장되어 있습니다.

RAD 서버의 사용자 로그인 후 토큰을 받아, 요청 시 토큰을 HTTP 해더에 포함해 전송하도록 구현이 필요합니다.

마침, 다음 질문/답변에 해당 내용이 포함되있으니 참고하시기 바랍니다:

로그인

버전 신기능 [온라인 세미나-What's NEW! RAD스튜디오11] 세션 2-2. 표준 REST API로 서비스를 델파이 클라이언트에서 활용하기 (REST Client 활용)

Recommended Posts

김나래

표준 REST API로 서비스를 델파이 클라이언트에서 활용하기 "다시보기"

표준 REST API로 서비스를 델파이 클라이언트에서 활용하기 "자료"

기타

표준 REST API로 서비스를 델파이 클라이언트에서 활용하기 "따라하기"

1. 준비하기

REST API 서비스 준비

Fish Facts C/S 다운로드

2. REST API 분석하기

3. REST 클라이언트 컴포넌트 설정하기

4. REST API 저장(수정, 삭제) 메소드 생성하기

5. UI 컨트롤과 데이터셋 연결하기

6. 이미지 조회 기능 추가하기

7. 결과확인

이 댓글 링크

다른 사이트에 공유하기

김나래

이 댓글 링크

다른 사이트에 공유하기

이 토의에 참여하세요

기술 기고 / Q&A

자료실

전체글 보기

커뮤니티 활동

중요한 정보