Jump to content
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr ×
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr

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


Recommended Posts

온라인 세미나-WHAT’S NEW! RAD스튜디오 11 중 세션 2-2의 다시보기, 자료, 따라하기입니다.

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

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

https://drive.google.com/file/d/1A9OmIQZbjhZkaYGuvgPQpSdtMwaiaHJH/view?usp=sharing

기타

 

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

REST API 서비스에도 연결하여 읽기/쓰기를 하는 네이티브 클라이언트 개발과정을 따라하며 기능을 익혀봅니다.

C/S 기반의 샘플 프로젝트(FishFacts C/S)를 REST API와 연동하는 클라이언트로 마이그레이션하는 과정을 설명합니다.

 

완성된 결과는 다음 링크에서 확인할 수 있습니다.

https://github.com/devgear/FishFactsRSX/tree/main/APIClient

목차(따라하기 순서)


1. 준비하기

REST API 서비스 준비

이 글에서는 FishFacts(어류도감) 데이터 제공 REST API 서비스와 연동합니다.

다음 글의 따라하기를 통해 REST API 서비스를 준비하세요.

클라이언트 개발 시 REST API와 연동이 필요합니다. 위 RAD 서버 패키지 프로젝트를 디버깅 없이 실행(Run > Run Without Debugging)합니다.

Fish Facts C/S 다운로드

다음 링크를 방문해 전체 소스코드를 다운로드 받습니다.

FishFactsCS 폴더를 복사해 ClientTest 폴더 생성 후 붙여넣기 합니다.

IDE에서 해당 폴더의 프로젝트(FishFactsCS.dproj)를 엽니다.
(프로젝트 및 소스파일 이름변경은 각자의 취향에 따라 진행하세요.)

2. REST API 분석하기

REST Debugger를 통해 REST API를 분석하고, 분석한 결과를 복사해 REST 클라이언트 컴포넌트를 생성할 수 있습니다.

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

 

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

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

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

       

 

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

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

  1. 저장 관련된 기능 구현하기 위한 컴포넌트 3종 추가 및 설정
    image.png
    • TRESTResponse 추가(RESTResponse2)
    • TRESTRequest 추가(RESTRequest2)
      • Client: RESTClient1 선택
      • Response : RESTResponse2 선택
    • TRESTRequestDataSetAdapter 추가(RESTRequestDataSetAdapter1)
      • Area : Current 선택(현재의 레코드에 대해서만 처리)
      • Request : RESTRequest2 선택
      • DataSet : FDMemTable1 선택
         
  2. 데이터 모듈 선언부의 private, public 영역을 아래와 같이 변경
      private
        procedure CreateData;
        procedure UpdateData;
      public
        procedure SaveData;
        procedure DeleteData;
      end;
  3. 커서의 클래스 완성 기능을 이용 구현부 메소드 자동 생성
    (우측마우스 > Complete Class at Cursor 또는 Shift + Ctrl + C)
     
  4. 각 메소드를 다음을 참고해 변경합니다.
    1. 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;

       

    2. 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;

       

    3. 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;

       

    4. 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 컨트롤과 데이터셋 연결하기

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

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

       

  5. Delete 실행 시 DeleteData 메소드 호출하도록 변경

    1. ActionList1 더블클릭

    2. DatasetDelete1 선택

    3. OnExecute 이벤트 핸들러 생성 후 데이터모듈의 DeleteData 메소드 호출하도록 구현

      procedure TForm4.DatasetDelete1Execute(Sender: TObject);
      begin
        dmDatabase.DeleteData;
      end;

 

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

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

  1. 이미지 가져오기 관련 컴포넌트 추가
    1. TRESTResponse 추가(RESTResponse3)
    2. TRESTRequest 추가(RESTRequest3)
      1. Client: RESTClient1 선택
      2. Response: RESTResponse3 선택
         
  2. 이미지 제공 REST API 연동 메소드 추가
    1. 데이터 모듈의 선언부 public 영역에 다음 메소드 추가 후 자동완성(Shift + Ctrl + C)해 구현부 추가
          procedure LoadImage(LoadProc: TProc<TMemoryStream>);
    2. 구현부에 다음 코드 추가
      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 실행
         
  3. 폼(CSForm)에서 데이터 변경 시 이미지 로드 함수 호출하도록 변경
    1. DataSource1의 OnDataChange 이벤트 핸들러 생성
    2. 데이터 모듈의 이미지 로드 함수 호출
      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] 버튼 클릭), 수정, 삭제 등을 수행해 봅니다.

image.png

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

이 댓글 링크
다른 사이트에 공유하기

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

 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 해더에 포함해 전송하도록 구현이 필요합니다.

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

 

 

 

 

이 댓글 링크
다른 사이트에 공유하기

이 토의에 참여하세요

지금 바로 의견을 남길 수 있습니다. 그리고 나서 가입해도 됩니다. 이미 회원이라면, 지금 로그인하고 본인 계정으로 의견을 남기세요.

Guest
이 토픽(기고/질문)에 답하기

×   서식있는 텍스트로 붙여넣기.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   이전에 작성한 콘텐츠가 복원되었습니다..   편집창 비우기

×   You cannot paste images directly. Upload or insert images from URL.

 공유하기

×
×
  • Create New...

중요한 정보

이용약관 개인정보보호정책 이용규칙 이 사이트가 더 잘 작동하기 위해 방문자의 컴퓨터에 쿠키가 배치됩니다. 쿠키 설정 변경에서 원하는 설정을 할 수 있습니다. 변경하지 않으면 쿠키를 허용하는 것으로 이해합니다.