Outsystems를 이용한 To do list앱 제작2(Outsystems11)

할 일 기능추가

1. 화면 목록에서 첫 번째 할 일의 제목을 오른쪽 마우스 버튼으로 클릭한 다음 Link to -> New Screen을 선택합니다. Empty 빈 템플릿을 선택하고 TaskDetail이라는 스크린 이름을 지정한 후, Create Screen을 클릭합니다. 

2. 그 다음 왼쪽 도구모음에서 form을 끌어 화면에 놓는다.

3. Data탭을 클릭한후 Task를 방금 끌여들인 Form 화면에 끌어서 놓아준다. 그럼 아래와 같은 화면이 나타난다. 

Save 로직 구성

1. 먼저 세이브 버튼을 두번클릭하면 아래와 같은 화면이 나오게 됩니다. 

2. 다음 로직탭을 클릭하여 Server Action의 오른쪽을 클릭하여 Add Server Action을 누르고 TaskCreateOrUpdate를 만들어줍니다. 

3. TaskCreateOrUpdate의 오른쪽 마우스를 눌러 입력 매개변수를 추가하고, 이름을 Task로 설정합니다. 데이터 형식은 Task로 설정합니다. 

4. 마찬가지로 오른쪽탭을 눌러 출력매개변수를 생성하고 이름은 TaskId로 설정합니다. 데이터 형식은 Task Identifier로 설정합니다. 이것은 CreateOrUpdateTask에서 반환되는 할 일 ID이며, SaveOnClick 액션으로 전달해야 합니다. 

5. 그 다음 데이터 탭에서 CreateOrUpdateTask 엔터티 액션을 TaskCreateOrUpdate 서버 액션 흐름에 끌어다 놓습니다. Source의 입력 매개변수는 Task로 설정합니다. 

6. 다음으로, 출력 매개변수 TaskId의 값을 CreateOrUpdateTask에 할당해야 합니다. 왼쪽에 Assign(할당 노드를) 끌어다 CreateOrUpdateTask아래에 놓습니다. Variable은 TaskId로, Value는 CreateOrUpdateTask.Id로 설정합니다. 

7. 인터페이스 탭으로 이동하여 SaveOnClick 동작을 두 번 클릭합니다. 로직 탭에서, If의 True 분기로 TaskCreateOrUpdate 서버 액션을 드래그합니다. Task 속성을 GetTaskById.List.Current.task로 설정합니다. 사용자가 작업을 저장한 후 메인 화면으로 다시 이동하도록 End 노드에 인터페이스 탭에서 Tasks 화면을 드래그합니다.

 

8. Interface 텝에서 Tasks를 더블클릭한 후 왼쪽에 툴박스에서 아이콘 위젯을 드래그하여 화면 오른쪽 상단의 Actions 플레이스홀더에 추가하고, 플러스 아이콘을 선택합니다.

추가된 플러스 아이콘을 마우스 오른쪽 버튼으로 클릭한 후, 링크 > MainFlow\TaskDetail을 선택합니다. 이렇게 하면 사용자가 목록 화면에서 새 작업을 추가할 수 있도록, 작업을 편집하는 화면으로 연결하는 플러스 아이콘이 Actions 영역에 추가됩니다.

결과 확인

Publish 한후 Open in Browser를 클릭해 보면 아래와 같이 정상적으로 앱이 구동함을 알 수 있습니다. 플러스 버튼을 눌러할 일을 추가해 보겠습니다. 

할 일을 입력하고 날짜를 고를 수 있습니다. 그다음 save 버튼을 누르면 

정상적으로 데이터가 저장되었음을 알 수 있습니다.

그리고 실제로 개발환경에서 데이터를 확인해보면 아래와 같이 데이터가 정상적으로 추가되었습니다.

추가로 브라우저에서 오른쪽 Generate Mobile App 버튼을 클릭하면 다음 화면이 나오는데

오른쪽 아래에 Distribute as PWA을 활성화하면 QR코드가 나오고 휴대폰에서 카메라로 찍어 현재 자신의 휴대폰에서 앱을 사용할 수 있습니다. 

모바일에서 실행

아래는 모바일에서 어플을 실행한 화면입니다. 

 

브라우저에서 새로고침을 눌러 다시 실행해보면 모바일에서 저장한 데이터가 실제로 브라우저에서도 나타남을 알 수 있습니다. 

휴대폰에서 데이터를 저장 한 후 개발환경에서 확인해 보면 마찬가지로 정상적으로 데이터가 저장됨을 알 수 있습니다.