본문 바로가기

SAP 사용자들의 오픈 커뮤니티

SAP Business Technology Platform(BTP)

VS Code로 비즈니스 서비스 만들기 (with Node.js) - 1부

페이지 정보

본문

소요시간: 50min | 난이도: 초보자 


# Tag : SAP Business Technology Platform, Tutorial, Beginner, Cloud, Node.js, Visual Studio Code,  CAP, Business Service 



학습 목표


  • CAP와 Node.js를 이용해 간단한 비즈니스 서비스 구현하기
  • 데이터 모델에서 생성한 엔티티를 노출하는 간단한 데이터 모델과 서비스 정의하기
  • 로컬에서 서비스 실행하기
  • SQLite 데이터베이스에 데이터 모델 배치하기
  • 자동으로 처리되지 않은 요청을 서비스하기 위해 사용자 정의 핸들러 추가하기


사전 준비 사항 (Pre-requisite)

  • Node.js설치
  • Node.js의 최신 LTS(장기 지원) 버전을 14와 같은 짝수로 실행해야 합니다. 설치가 실패할 수 있는 홀수 버전은 사용하지 마세요.
  • (Windows의 경우) Windows용 SQLite 도구 설치



Step 1: 로컬 개발 환경 설정하기


시작하기 전 상단의 사전 준비 사항들을 모두 설치 및 구성 완료되어야 합니다.


  1. 커맨드창을 열고 다음 명령을 실행하여 cds development kit를 설치합니다.


    Shell/Bash

    npm i -g @sap/cds-dk
    

    다음 단계에서 사용할 cds 명령을 설치하는 데 약간의 시간이 소요됩니다. MacOS/Linux 사용자들은 여기에 설명된 방법을 따라서 진행하시길 바랍니다. 이전 sap/cds 패키지가 이미 설치되어 있으면 먼저 삭제해야 합니다. 또, 이미 패키지가 설치되어 있으면 삭제하라는 메시지가 표시됩니다. 문제가 발생하면 CAP 문서의 문제 해결 가이드(Trouble shooting Guide)를 참조하세요.


  1. 설치가 성공했는지 확인하기 위해서 아래와 같이 cds 명령어를 실행합니다.


    Shell/Bash

    cds
    
    cds_commands.png

    그러면, 사용 가능한 cds 옵션들이 표시됩니다. 예를 들어, cds version을 사용하여 설치한 버전을 확인할 수 있습니다. 최신 버전을 확인하려면 CAP용 릴리스 정보를 참조하십시오.



Step 2:Visual Studio Code extension 설치


  1.  Visual Studio Marketplace로 이동합니다.

  1.  Install을 선택합니다.  VSCode_extension.png
  2. VS Code에서 Install를 선택하여 SAP CDS Language Support를 사용할 수 있도록 합니다. VSCode_view_extension.png Extension이 설치되어 있고 VS Code에 활성화된 경우 자동으로 업데이트됩니다.



Step 3: 프로젝트 시작하기


(Windows 경우)

설치된 CDS를 사용하면 디렉토리 형식으로 CAP 기반의 새 프로젝트를 만들 수 있습니다.


  1. 커맨드 창을 열고 선택한 폴더에서 다음 명령을 실행하여 프로젝트를 만듭니다.

    Shell/Bash

    cds init my-bookshop
    

    이렇게 하면 현재 디렉터리에 my-bookshop 폴더가 생성됩니다.


  1. Visual Studio Code에서, File  Open Folder 를 한 후 my-bookshop 를 선택하세요.
  1. Terminal  New Terminal 을 하여 VS Code 내에서 커맨드 창을 열고 프로젝트의 root level에서 다음의 명령을 실행하세요.

    Shell/Bash

    npm install
  1. 커맨드 창에서 다음의 명령어를 실행하세요.

    Shell/Bash

      cds watch
    이 명령은 cds 서버를 시작하려는 명령입니다. 예를 들어 .cds, .json 또는 .js 파일을 추가하거나 수정하여 프로젝트에 새 컨텐츠를 제공할 때마다 서버가 자동으로 재시작되어 새 컨텐츠를 제공합니다. 현재까지는 프로젝트에 콘텐츠가 없기 때문에 표시된 메시지와 함께 콘텐츠를 계속 기다립니다.

    Shell/Bash

    cds serve all --with-mocks --in-memory?
    watching: cds,csn,csv,ts,mjs,cjs,js,json,properties,edmx,xml,env,css,gif,html,jpg,png,svg...
    live reload enabled for browsers
    
    
        No models found in db/,srv/,app/,schema,services.
        Waiting for some to arrive...
    


<Mac OS. Linux의 경우>


  1. 커맨드 창을 열고 선택한 폴더에서 다음 명령을 실행하여 프로젝트를 만듭니다.

Shell/Bash

cds init my-bookshop

이 명령은 현재 디렉토리에 my-bookshop 폴더를 만듭니다.


  1. VS Code를 열고 File → Open 한 후, my-bookshop 폴더를 선택합니다.
  1. View → Command Palette → Terminal: Create New Integrated Terminal 로 이동한 후 커맨드 창을 열고 프로젝트의 root level에서 다음의 명령을 실행하세요.

Shell/Bash

npm install

3. 커맨드 창에서 다음 명령어를 실행하세요. Shell/Bash

  cds watch

이 명령은 cds 서버를 시작하려는 명령입니다. 예를 들어 .cds, .json 또는 .js 파일을 추가하거나 수정하여 프로젝트에 새 컨텐츠를 제공할 때마다 서버가 자동으로 재시작되어 새 컨텐츠를 제공합니다. 현재까지는 프로젝트에 콘텐츠가 없기 때문에 메시지와 함께 콘텐츠를 계속 기다립니다.


Shell/Bash

cds serve all --with-mocks --in-memory?
watching: cds,csn,csv,ts,mjs,cjs,js,json,properties,edmx,xml,env,css,gif,html,jpg,png,svg...
live reload enabled for browsers


    No models found in db/,srv/,app/,schema,services.
    Waiting for some to arrive...



Step 4: 첫번째 서비스 정의하기


프로젝트를 초기화하면 다음과 같은 빈 폴더가 표시됩니다.

  • app: for UI artifacts
  • db: for the database level schema model
  • srv: for the service definition layer

folder_structure.png


  1. 이제 간단한 도메인 모델을 추가해보겠습니다. srv폴더를 선택한 후 New File 아이콘을 눌러 cat-service.cds파일을 생성하세요.
  1. 다음의 코드를 cat-service.cds 파일에 추가하세요.

    CDS

    using { Country, managed } from '@sap/cds/common';
    
    service CatalogService {
    
      entity Books {
        key ID : Integer;
        title  : localized String;
        author : Association to Authors;
        stock  : Integer;
      }
    
      entity Authors {
        key ID : Integer;
        name   : String;
        books  : Association to many Books on books.author = $self;
      }
    
      entity Orders : managed {
        key ID  : UUID;
        book    : Association to Books;
        country : Country;
        amount  : Integer;
      }
    
    }
    

    항상 CTRL+S를 사용해 파일을 저장하는 것을 잊지마세요!

  1. 파일을 저장하면 실행 중인 cds watch 가 아래와 같이 결과를 확인할 수 있습니다.

    Shell/Bash

    [cds] - connect to db > sqlite { database: ':memory:' }
    [cds] - using bindings from: { registry: '~/.cds-services.json' }
    /> successfully deployed to sqlite in-memory db
    
    [cds] - serving CatalogService { at: '/catalog' }
    
    [cds] - launched in: 1.016s
    [cds] - server listening on { url: 'http://localhost:4004' }
    [ terminate with ^C ]
    

    이 코드는 다음을 의미합니다. cdswatch가 srv/cat-service.cds의 변경 사항을 감지하고 서버 프로세스를 다시 시작할 때 인메모리 SQLite 데이터베이스를 자동으로 부트스트랩합니다.


  1. 서비스를 테스트 하기 위해서, 다음 링크를 접속하세요. http://localhost:4004 application_local.png

    아직 데이터 모델을 추가하지 않았기 때문에 데이터가 표시되지 않습니다.


Step 5: 모의 데이터 제공하기


Service Provider 로직을 추가하여 모의 데이터 값을 확인해 봅니다.

  1. srv 폴더에서, cat-service.js새 파일을 만듭니다.
  1. 다음의 코드를  cat-service.js에 추가합니다.

    JavaScript

    module.exports = (srv) => {
    
     // Reply mock data for Books...
     srv.on ('READ', 'Books', ()=>[
       { ID:201, title:'Wuthering Heights', author_ID:101, stock:12 },
       { ID:251, title:'The Raven', author_ID:150, stock:333 },
       { ID:252, title:'Eleonora', author_ID:150, stock:555 },
       { ID:271, title:'Catweazle', author_ID:170, stock:222 },
     ])
    
     // Reply mock data for Authors...
     srv.on ('READ', 'Authors', ()=>[
       { ID:101, name:'Emily Brontë' },
       { ID:150, name:'Edgar Allen Poe' },
       { ID:170, name:'Richard Carpenter' },
     ])
    
    }
    
  1. 서비스를 테스트하기 위해, 이 링크들을 클릭하세요.

댓글목록

profile_image

최정아님의 댓글

no_profile 최정아 쪽지보내기 아이디로 검색 전체게시물 작성일 0

잘알겠습니다.

profile_image

최정아님의 댓글

no_profile 최정아 쪽지보내기 아이디로 검색 전체게시물 작성일 0

잘알겠습니다.

이용약관
개인정보처리방침