정말 멋진 TODO 앱 튜토리얼

온라인에서 찾은 대부분의 TODO 자습서는 간단합니다. 이 TODO 앱 자습서에서는 여러 데이터베이스 테이블, 비즈니스 논리, 여러 사용자, 인증 및 권한 부여가 있는 풍부한 TODO 앱을 만듭니다. 물론 가장 중요한 것은 5분 안에 TODO 앱을 만들 것이라는 것입니다. 위는 우리가 만들 것의 스크린샷입니다.

위의 스크린샷에서 볼 수 있듯이 사용자와 관련된 TODO 항목이 있고 모든 CRUD 동사 외에도 기한, 여러 구성 요소가 있습니다. 이 앱은 ClickUp만큼 복잡하거나 풍부하지는 않지만 대부분의 다른 TODO 앱 자습서에서 가르치는 것보다 훨씬 뛰어납니다. 앱을 만들 데이터베이스는 아래에서 찾을 수 있습니다.

CREATE TABLE status(
  status_id integer not null primary key autoincrement,
  name text not null,
  description text
);

CREATE TABLE todo(
  todo_id integer not null primary key autoincrement,
  title text not null,
  created timestamp not null default current_timestamp,
  description text,
  username text not null,
  due_date timestamp,
  status integer not null references status(status_id)
);

위의 데이터베이스 DDL SQL에서 각 할 일 항목이 상태 항목에 속하는 것을 볼 수 있습니다. 이 개념을 "외래 키"라고 하며 모든 할 일 항목이 상태 항목에 속함을 의미합니다. 위의 스크립트에서 "참조"라고 쓰여 있는 부분입니다. 앱을 재현하고 싶다면 LowCode CRUD cloudlet here에 가입하시면 됩니다. 백엔드 클라우드렛이 있으면 그 안에 새로운 SQLite 데이터베이스를 생성해야 합니다. 아래는 데이터베이스를 만드는 방법에 대한 스크린샷입니다.



데이터베이스 이름을 todo로 지정하고 위의 SQL을 SQL 편집기에 붙여넣은 다음 "실행"버튼을 클릭합니다. SQL 실행이 완료되면 "새로 고침"버튼을 클릭하여 서버측 캐시를 제거해야 합니다. 그런 다음 할 일 데이터베이스를 선택할 수 있습니다. 그러면 다음과 유사한 내용이 표시됩니다.



위의 데이터베이스 생성을 완료하면 CRUD 생성기로 이동하여 CRUD API를 생성할 수 있습니다. 이 시점에서 CRUD API를 생성하는 방법에 대한 몇 가지 중요한 사항을 이해하기 위해 다음 비디오를 보고 싶을 것입니다. 예를 들어 앱의 다른 부분에 다른 "비즈니스 로직"을 적용하고 싶기 때문에 할일 테이블에 대한 두 세트의 CRUD API 끝점을 생성하고 싶을 것입니다. 이는 "admin"사용자만 다른 사용자를 위해 항목을 만들 수 있기를 원하기 때문입니다. 또한 "게스트"사용자만 자신의 항목 상태를 편집할 수 있고 다른 사용자의 항목은 전혀 편집할 수 없기를 바랍니다.



위 동영상에서 볼 수 있듯이 TODO 앱에 여러 가지 설정을 적용했습니다. 또한 생성된 Angular 코드를 다운로드하고 Visual Studio Code를 사용하여 로컬에서 편집하는 방법도 보여 주었습니다. 로컬에 VS Code이 설치되어 있고 NodeJS이 설치되어 있으면 이미 생성된 Angular 코드로 게임을 시작할 수 있습니다.

허브에서 각 유형의 무료 데모 cloudlet을 하나만 생성할 수 있습니다. 이미 다른 Angular 프런트엔드 Cloudlet을 배포한 경우 다른 무료 데모 Cloudlet을 만들려면 이 Cloudlet을 삭제해야 합니다. 프런트엔드를 생성할 때 백엔드에 이미 다른 API 엔드포인트가 있는 경우 TODO 앱 관련 구성 요소에 대한 구성 요소만 생성해야 합니다. 이렇게 하면 앱을 더 쉽게 이해하고 탐색할 수 있습니다.