본문 바로가기

IT/mendix

고급 페이지 구축으로 앱 만들기 - 6. 알림

반응형

6.1 소개

 

https://academy.mendix.com/link/modules/186/lectures/1467/6.1-Introduction
모듈 5를 완료하지 못했다면 이 페이지 상단에 있는 프로젝트 패키지(mpk 파일)를 다운로드하여 이 학습을 계속 진행하세요.

이전 모듈에서는 재무 담당 직원이 다른 직원의 요청을 승인하거나 거부할 수 있도록 했습니다. 하지만 이 시점에서는 두 직원 그룹 모두 앱의 다양한 페이지를 정기적으로 확인하여 업데이트나 새로운 요청이 있는지 확인해야 합니다.

이 모듈에서는 직원들이 직접 확인할 수 있도록 알림 시스템을 구축합니다:

요청의 상태가 변경되었습니다(정규직 직원의 경우).
승인해야 하는 새 요청이 추가되었습니다(재무 직원의 경우).

 

6.2 기본 사항 구축하기


이전과 마찬가지로 먼저 이 새로운 기능을 위한 기본 사항인 도메인 모델과 기본 액세스 권한을 구축하는 데 집중해 보겠습니다.

알림은 일반 직원과 재무 직원에게만 제공되며 관리자에게는 필요하지 않습니다. 관리자가 전체 알림 기능을 쉽게 사용할 수 없도록 하려면 별도의 모듈로 추가합니다.

도메인 모델

앱 탐색기에서 앱 이름을 마우스 오른쪽 버튼으로 클릭하고 모듈 추가...를 클릭합니다.
모듈 이름을 Notifications 으로 지정합니다.
도메인 모델이 자동으로 열립니다. Notification 엔티티를 추가하고 다음 속성을 추가합니다:

  • Title (String)
  • Message (String, max length 1000)
  • Read (Boolean)
  • AssociatedObject (Long)
  • Check the Store ‘owner’ checkbox.

Notification 엔티티를 마우스 오른쪽 버튼으로 클릭하고 추가 > 연결을 클릭하여 Administration.Account 엔티티에 * - * 연결을 추가합니다.
Expenses  모듈의 도메인 모델을 엽니다.
새 속성을 사용하여 Request 엔터티를 확장합니다: RequestID, type AutoNumber.
연관된 개체 속성은 연결을 만들지 않고도 요청에 대한 연결 역할을 합니다. 이렇게 하면 모듈을 독립형 기능으로 내보내 북해 조선소에서 이 기능에 필요할 수 있는 다른 앱으로 쉽게 내보낼 수 있습니다. 이 모듈은 RequestID  속성을 사용하여 연결을 저장하고 조회합니다.

보안 및 액세스 권한

알림 모듈 보안 설정 창을 엽니다.
사용자 및 승인자라는 두 개의 새 모듈 역할을 추가합니다.
Notification  엔티티 및 User 모듈 역할에 대한 엔티티 액세스 규칙을 추가합니다. 다음 이미지를 사용하여 액세스 규칙을 구성합니다:

XPath 제약 조건 탭에서 사용자 경로... 버튼을 사용하여 사용자가 자신의 알림만 볼 수 있도록 하는 XPath 제약 조건을 만듭니다. 이 버튼은 다음과 같은 XPath를 생성해야 합니다: [Notifications.Notification_Account='[%CurrentUser%]'].

Notification 엔티티의 Approver 모듈 역할에 대한 엔티티 액세스 규칙을 추가합니다. 다음 이미지를 사용하여 액세스 규칙을 구성합니다:

Expenses 모듈 보안 설정 창을 엽니다.

요청 엔티티의 RequestID 속성에 대한 요청자 읽기 액세스 권한을 요청자에게 부여합니다.

앱 보안 설정 창을 엽니다.

Requestor 사용자 역할을 Notifications 모듈의 새로 만든 사용자 모듈 역할에 연결합니다.

Approver  사용자 역할도 Notifications 모듈의 Approver 모듈 역할에 연결합니다.

 

6.3 사용자 지정 탐색 메뉴

 

기본 탐색 트리가 아닌 탐색 메뉴를 표시하고 싶을 때마다 메뉴 문서를 사용하여 사용자 지정 탐색 메뉴를 만들 수 있습니다.

메뉴 문서는 메뉴 위젯에서 사용할 수 있는 탐색 메뉴를 정의합니다. 일반적으로 애플리케이션의 주 메뉴는 장치 유형에 정의되며 보조 메뉴(예: 사이드바)에는 메뉴 문서를 사용합니다.

메뉴는 메뉴 항목 목록으로 구성되며, 하위 항목이 선택적으로 포함될 수 있습니다. 위젯에 따라 여러 레벨이 허용됩니다.

이 메뉴 문서는 앱, 페이지 또는 탐색 레이아웃의 원하는 위치에 표시할 수 있습니다.

탐색 항목 생성은 일반 탐색 메뉴에서와 똑같이 작동합니다.

 

6.4 알림 만들기


알림을 만들어야 하는 시나리오에는 세 가지가 있습니다:

요청자가 요청을 만들면 모든 승인자가 알림을 받아야 합니다.

승인자가 요청을 승인한 경우, 요청을 만든 요청자에게 알림이 전송되어야 합니다.

승인자가 요청을 거부하면 요청을 생성한 요청자에게 알림이 전송되어야 합니다. 이 경우 승인자는 요청이 거부된 이유에 대한 메시지를 추가할 수 있어야 합니다.

만들어보겠습니다!

 

6.4.1 생성 알림


요청자가 요청을 완료하면 모든 승인자에게 알림이 발송됩니다. 이렇게 하면 승인해야 하는 새 요청이 있음을 알 수 있습니다.

한 명의 승인자가 알림을 확인하면 다른 모든 승인자에게는 알림이 제거되어야 합니다.

Request_Wizard_Step3 페이지를 엽니다.

요청 완료 버튼의 클릭 시 동작을 마이크로플로우 호출로 변경합니다.

새 마이크로플로우를 만듭니다: ACT_Request_Save.

요청자에게 마이크로플로우에 대한 액세스 권한을 부여합니다.

먼저 저장 버튼의 기본 동작인 객체를 커밋하고 페이지를 닫는 동작을 모방합니다.

데이터베이스에서 모든 승인자를 검색합니다.

데이터베이스에서 요청자를 검색하여 메시지에서 요청자의 전체 이름을 사용할 수 있습니다.

새 알림 개체를 만듭니다. 다음 이미지를 사용하여 개체를 구성합니다.

이제 마이크로플로우의 모습은 다음과 같아야 합니다:

이 작업을 처리했으면 이제 이러한 승인을 표시하는 알림을 만들어 보겠습니다.

 

6.4.2 승인 알림


승인자가 요청을 승인하면 요청을 생성한 요청자에게 알림이 전송됩니다.

마이크로플로우 ACT_Request_StatusApproved를 엽니다.
기존 활동 전에 요청자를 검색합니다.
팀원 엔터티에 대한 검색 활동을 추가합니다.
범위를 First로 설정합니다.
다음 XPath를 사용합니다: [id = $Request/System.owner].
출력 개체 이름은 Requestor여야 합니다.
승인자를 검색합니다.
TeamMember 엔티티에 대한 검색 활동을 추가합니다.
범위를 First로 설정합니다.
다음 XPath를 사용합니다: [id = $currentUser].
출력 개체 이름은 승인자이어야 합니다.
새 알림 개체를 만듭니다. 다음 이미지를 사용하여 개체를 구성합니다:

이제 마이크로플로우의 모습은 다음과 같아야 합니다:

승인 알림을 받았으니 이제 거부 알림을 추가해야 합니다.

 

6.4.3 거부 알림


승인자가 요청을 거부하면 요청을 생성한 요청자에게 알림이 전송되어야 합니다. 이 경우 승인자는 요청이 거부된 이유에 대한 메시지를 추가할 수 있어야 합니다.

마이크로플로우 Act_Request_StatusRejected를 엽니다.

기존 활동 전에 요청자를 검색합니다.

팀원 엔터티에 대한 Retrieve activity 을 추가합니다.
범위를 First로 설정합니다.
다음 XPath를 사용합니다: [id = $Request/System.owner].
출력 개체 이름은 Requestor여야 합니다.

 

승인자를 검색합니다.

TeamMember 엔티티에 대한 Retrieve activity 을 추가합니다.
범위를 First로 설정합니다.
다음 XPath를 사용합니다: [id = $currentUser].
출력 개체 이름은 승인자이어야 합니다.
새 알림 개체를 만듭니다. 다음 이미지를 사용하여 개체를 구성합니다:

마이크로플로우의 끝에 페이지 표시 활동을 추가합니다. 여기에서 승인자가 알림에 사용자 지정 메시지를 추가할 수 있습니다.

새 페이지를 만듭니다: Notification_CustomizeRejectionMessage.

템플릿을 선택합니다: Form Vertical.
레이아웃: PopupLayout.
페이지에 NewNotification 객체를 전달합니다.

이제 마이크로플로우가 이렇게 보일 것입니다:

Notification_CustomizeRejectionMessage 페이지를 엽니다. 다음 이미지를 사용하여 페이지를 작성합니다:

이제 승인자가 알림을 만들 수 있게 되었으니 요청자도 알림을 볼 수 있게 만들어 봅시다!

 

6.5 알림 표시


이제 알림 시스템을 만들었으니 실제로 북해 조선사 비용 앱 사용자에게 알림을 표시하는 데 집중해 보겠습니다.

이를 위해 몇 가지 작업을 수행해야 합니다:

상단 표시줄 탐색 메뉴를 통해 액세스할 수 있는 알림 개요 페이지를 만듭니다.

사용자가 읽지 않은 알림과 읽은 알림 사이를 전환할 수 있는 사용자 지정 탐색 메뉴를 만듭니다.

사용자가 알림을 읽음으로 표시하고, 알림을 삭제하고, 해당 알림이 속한 요청으로 이동할 수 있는 버튼을 만듭니다.

 

6.5.1 알림 페이지 만들기


다음 디자인을 살펴보면 첫 번째 알림 페이지(읽지 않은 알림이 표시됨)의 모양이 다음과 같습니다:

만들어 보겠습니다.!

알림 모듈에 두 개의 폴더를 추가합니다: NotificationsResources.

알림 폴더에 두 페이지를 추가합니다: Notification_Overview_Unread , Notification_Overview_Read

탐색 레이아웃: Atlas_Custom
템플릿: Blank
Resources 폴더에서 알림이라는 메뉴(기타 추가 > 메뉴)를 추가합니다. 이 섹션의 시작 부분에 있는 디자인을 참조하여 새로 만든 메뉴에 두 개의 탐색 항목을 만듭니다.

Notification_Overview_Unread 페이지를 엽니다.

페이지에 이미 있는 레이아웃 격자 위젯에 열을 하나 더 추가합니다. 왼쪽 열의 가중치는 3이고 오른쪽 열의 가중치는 9여야 합니다.

왼쪽 열 유형 알림에서 텍스트의 스타일을 heading 3으로 설정합니다.

그 아래에 탐색 트리 위젯을 배치합니다.

위젯을 두 번 클릭하여 속성을 엽니다.
메뉴 소스를 메뉴 문서로 설정합니다.
이 과제의 앞부분에서 만든 알림 메뉴를 선택합니다.

오른쪽 열에 목록 보기 위젯을 배치합니다.

Notification 엔티티에 연결합니다.
데이터 소스로 XPath를 선택하고 다음 XPath를 사용합니다:
[Notifications.Notification_Account = '[%CurrentUser%]']]
[not(Read)]

 * 모델러가 목록 보기를 자동으로 채우지 않도록 합니다.

 

다음 이미지를 사용하여 목록 보기의 콘텐츠를 작성합니다.

읽은 상태로 표시 버튼은 새로운 마이크로플로우인 ACT_Notification_SetToRead를 트리거해야 합니다.
요청 표시 버튼은 새로운 마이크로플로우인 ACT_Notification_OpenAssociatedRequest를 트리거해야 합니다.
요청 표시 버튼의 오른쪽 간격은 바깥쪽 작게, 왼쪽 간격은 바깥쪽 작게로 설정되어 있어야 합니다.
삭제 버튼은 표준 삭제 동작입니다.
모든 버튼이 들어 있는 컨테이너에는 콘텐츠 정렬이 행으로 오른쪽 정렬로 설정되어 있어야 합니다.
{Title} 의 스타일은 Heading 4입니다.

이제 Notification_Overview_Read 페이지를 엽니다.

버튼은 생략하고 5~9단계를 반복하여 이 페이지를 빌드합니다. 두 번째 XPath 제약 조건은 not(Read) 대신 Read여야 한다는 점에 유의하세요.

이제 사용자가 메시지를 볼 수 있습니다! 이제 사용자가 액세스할 수 있도록 허용해야 합니다.

 

6.5.2 탐색 메뉴 확장

 

사용자가 알림에 액세스할 수 있도록 해 봅시다.

탐색 메뉴를 엽니다.

알림이라는 새 탐색 항목을 추가합니다.

벨을 아이콘으로 사용합니다.

이 탐색 항목이 알Notification_Overview_Unread 페이지를 열도록 합니다.

잘됐네요! 하지만 아직 업데이트해야 하는 마이크로플로우도 잊지 마세요.

 

6.5.3 마이크로플로우 빌드


이 과제를 마무리하기 위해 이제 앞서 만든 두 마이크로플로우의 로직을 빌드할 차례입니다.

ACT_Notification_SetToRead 마이크로플로우를 엽니다.

Read 속성 값을 true로 변경합니다.

개체를 커밋하고 클라이언트를 새로 고칩니다.

ACT_Notification_OpenAssociatedRequest 마이크로플로우를 엽니다.

다음 XPath를 사용하여 데이터베이스에서 연관된 요청을 검색합니다:  [RequestID = $Notification/AssociatedObject]

Request_Details_Approver 페이지를 여는 페이지 표시 활동을 추가하고 요청 개체를 해당 페이지에 전달합니다.

모든 새 모듈과 페이지에 대한 보안을 설정하기만 하면 거의 완료됩니다!

 

6.5.4 보안 업데이트


보안을 업데이트하고 새로운 기능을 모두 사용해 보세요.

사용자에게 모든 새 페이지와 마이크로플로우에 대한 액세스 권한을 부여하세요. 알림 시스템을 완전히 구축한 것을 축하합니다!

이제 앱을 배포하고 테스트하세요. 완전한 경험을 얻으려면 데모 사용자가 아닌 실제 계정을 사용하세요. 관리자로 로그인하여 계정을 만들 수 있습니다.

반응형