웹 기반 수행 목록 작성

IBM Cloud 의 기본 기능을 익히기 위해 간단한 웹 기반 할 일 목록을 만들어 보세요.

목표

  1. 이 튜토리얼에서는 데이터를 읽고 쓰기 위해 IBM Cloud 데이터베이스와 인터페이스하는 기본 웹 사이트를 작성하는 방법을 학습합니다.

    이 프로젝트는 메모 목록을 확인할 수 있는 간단한 할 일 목록입니다. 메모를 추가 및 삭제할 수 있습니다. 각 메모에는 태그가 있으며 태그별로 메모를 필터링할 수 있습니다.

  2. 이 할 일 목록을 생성하려면, 애플리케이션이 데이터베이스에 읽고 쓸 수 있어야 합니다. 할 일 목록을 “최신순”으로 확인하고 태그별로 필터링하려면 데이터베이스에 몇 가지 보조 인덱스가 있어야 합니다. 이제 이 모든 것을 만들 수 있습니다.

1시간 내에 이 튜토리얼을 완료할 수 있습니다. 현재 IBM Cloudant 청구에 대해서는 비용이 들지 않습니다(따라서 IBM Cloudant Lite 플랜을 사용 중인 경우에는 무료임).

작성하는 웹 사이트는 로컬 시스템에서 제공되므로 IBM Cloud 이외의 다른 서비스는 필요하지 않습니다.

IBM Cloudant 이 과정을 마치면, 애플리케이션이 IBM Cloudant 와 SDK(이 경우 NodeJS )를 통해 어떻게 연동되는지에 대한 기본적인 이해를 얻게 됩니다.

시작하기 전에

이 튜토리얼을 완료하려면 다음 도구들이 필요합니다:

  1. IBM Cloudant 서비스 인스턴스 및 일부 서비스 인증 정보. IBM Cloudant 시작하기 튜토리얼에 따라 IBM Cloudant 대시보드에서 인스턴스 및 인증 정보를 작성할 수 있습니다. 서비스 인증 정보를 작성할 때 APIKey 및 URL을 기록해 두어야 합니다.
  2. Mac 또는 Linux™ 터미널에 액세스할 수 있는지 확인합니다.
  3. Git 다운로드합니다.
  4. Node.js 및 npm을 다운로드합니다.

코드 가져오기

  1. 터미널을 여십시오.

  2. 다음 명령을 입력하십시오.

    git clone https://github.com/IBM-Cloud/todo-list.git
cd todo-list

환경 준비 및 웹 사이트 실행

이 단계에서는 웹 사이트를 실행하는 데 필요한 모든 코드 종속성 및 환경 변수를 설치합니다.

  1. todo-list 디렉토리에 있는지 확인하십시오.

  2. 터미널에서 다음 명령을 실행하십시오.

    npm install
export CLOUDANT_APIKEY="<the_apikey_from_prerequisites>"
export CLOUDANT_URL="https://<the_url_from_prerequisites>"
npm run start

처음으로 이 명령을 실행하면 코드에서 데이터베이스가 없음을 발견합니다. 이 코드는 날짜 및 태그별 인덱스와 몇 가지 샘플 데이터가 포함된 데이터베이스를 자동으로 생성해 줍니다.

웹사이트를 확인하세요!

이제 웹 사이트를 확인할 수 있습니다.

  1. 브라우저에서 https://localhost:8080 이동합니다.

    몇 가지 항목이 포함된 할 일 목록을 볼 수 있습니다:

    내 할 일
    기반 할 일

  2. 메모를 추가하거나 삭제하십시오. 또는 태그 중 하나를 클릭하여 태그별로 필터링할 수 있습니다.

코드 이해

데이터베이스 및 인덱스 작성

백엔드 스크립트(server.js)는 시작 시 getDatabaseInformation 메소드를 사용하여 todo 데이터베이스에 연결하려고 합니다. 찾지 못하면 putDatabase 메소드를 사용하여 작성하려고 시도합니다.

todo 데이터베이스를 작성한 후 postIndex 메소드를 사용하여 두 개의 인덱스를 작성합니다. 첫 번째는 시간소인 필드(메모 작성 날짜)에 인덱스를 작성하므로 모든 메모를 역시간 순서로 검색할 수 있습니다. 두 번째 인덱스는 태그 및 시간소인에 있으므로 태그별로 필터링하고 알려진 태그에 대한 날짜순 목록을 리턴할 수 있습니다.

데이터베이스 사용

프론트 엔드는 인기 있는 express 프레임워크를 사용하여 작성, 삭제 및 필터링과 같은 다양한 조치를 클릭할 때 백엔드에서 웹 페이지를 표시하고 호출 서비스 엔드포인트를 호출합니다.

예를 들어 웹페이지가 처음 로드될 때 GET /todolist 엔드포인트를 호출합니다. GET /todolist 엔드포인트는 postFind 메서드를 사용하여 데이터베이스에서 모든 문서를 조회하고( todo 데이터베이스에 생성된 인덱스를 활용), 타임스탬프 순으로 정렬한 후 프론트엔드로 반환하여 표시합니다.

태그로 필터링할 때도 동일한 postFind 메서드를 사용하지만, 두 번째 인덱스를 활용하면 postDocument 및 deleteDocument 메서드를 통해 노트를 생성하거나 삭제할 수 있습니다.

요약

IBM Cloudant를 사용하면 해당 HTTP API가 Node.js SDK로 모델링되고 사용자 고유의 코드와 쉽게 통합되므로 웹 애플리케이션을 빠르게 개발할 수 있습니다. IBM Cloudant 데이터베이스를 작성하고 사용자 고유의 데이터를 모델링하는 JSON 문서를 추가합니다. 데이터 볼륨이 증가해도 조회 성능이 빠르게 유지되도록 조회 액세스 패턴을 처리하는 데 도움이 되는 2차 인덱스를 작성해야 합니다.

JavaScript, 를 직접 작성하는 것이 부담스럽다면, Java™, Python, 그리고 Go 용 SDK와 HTTP API 을 활용해 보세요. 잊지 마십시오. IBM Cloudant 대시보드는 데이터베이스를 탐색하고 문서를 작성 및 수정하며 인덱스 및 조회 기술을 세분화하는 좋은 방법입니다.

더 많은 모범 사례 지침은 블로그와 문서에서 확인할 수 있습니다. IBM Cloudant 및 해당 기능에 대한 비디오 안내서는 학습 센터의 교육 과정을 참조하십시오.