고급 페이지 구축으로 앱 만들기 - 1. 소개
고급 페이지 구축으로 앱 만들기 - 2. 기본 앱 설정
고급 페이지 구축으로 앱 만들기 - 3. 브랜딩
고급 페이지 구축으로 앱 만들기 - 4. 요청 추가하기
고급 페이지 구축으로 앱 만들기 - 5. 요청 승인
고급 페이지 구축으로 앱 만들기 - 6. 알림
고급 페이지 구축으로 앱 만들기 - 7. 앱 번역하기
2.1 소개
이 모듈에서는 기본 애플리케이션을 만드는 방법을 살펴봅니다. 또한 경비 앱의 기반을 만들 것입니다. 이 기반에는 보안을 설정하고 Andrea가 팀원을 관리할 수 있도록 하는 것도 포함됩니다.
이 작업이 완료되면 경비 요청 및 승인 기능을 구축하기 시작할 수 있습니다.
2.2 앱 탐색기 구조화
앱의 기초를 만들려면 앱 탐색기를 구조화해야 합니다. 페이지 및 마이크로플로우와 같은 문서를 추가하기 시작하면 이 작업을 체계적으로 수행하는 데 약간의 노력을 투자하는 것이 중요합니다. 그렇지 않으면 애플리케이션의 앱 탐색기가 지저분해져 앱을 빠르게 빌드하기 어려울 수 있습니다.
문서 구조는 폴더를 명확하게 구분하는 것에서 시작됩니다. 좋은 폴더 구조를 사용하면 애플리케이션의 유지 관리성이 향상됩니다. 필요한 문서를 더 빨리 찾을 수 있으므로 더 빠르게 개발하고 수정할 수 있습니다. 문서는 일반적으로 폴더별로 프로세스 관련 소스와 엔티티 관련 소스로 그룹화할 수 있습니다.
프로세스 관련 소스
모든 앱은 프로세스로 구성됩니다. 이러한 프로세스에 대한 문서를 개별 프로세스와 그 단계를 반영하는 폴더로 구성하세요.
엔티티 관련 소스
모든 앱에는 특정 엔티티에 필요한 문서가 있습니다. 유지 관리를 위한 개요 페이지, 커밋을 방지하는 유효성 검사 마이크로플로우 또는 기타 이벤트 트리거를 생각해보세요. 이러한 유형의 문서는 해당 엔티티의 이름을 딴 하나의 폴더에 정리해야 합니다.
2.2.1 앱 생성 및 구조 지정
새로운 경비 앱 만들기를 시작하여 앱에 구조를 부여해 보겠습니다!
새 빈 앱을 만들고 기존 MyFirstModule 모듈의 이름을 Expenses로 변경하여 모듈 이름에서 모듈의 기능에 대해 알 수 있도록 합니다.
앱의 팀원 관리를 구축하는 것으로 시작한다는 것을 이미 알고 있으므로 Expenses 모듈을 마우스 오른쪽 버튼으로 클릭하고 폴더 추가.... 폴더 이름을 TeamMember로 지정합니다.
또한 리소스라는 폴더와 페이지라는 다른 폴더를 추가합니다.
학습 과정 내내 경비 모듈에 폴더와 하위 폴더를 추가하여 앱을 계속 구조화해야 합니다.
2.3 도메인 모델
잘 구조화된 앱 탐색기를 갖추는 것만큼이나 중요한 것은 잘 구조화된 도메인 모델을 갖추는 것입니다! 애플리케이션의 데이터 요구 사항을 고려하고 도메인 모델 내에서 엔티티와 연관성을 적절하게 구조화해야 합니다. 또한 도메인 모델 내에서 일반화를 활용할 것입니다. 이에 대한 자세한 내용은 고급 도메인 모델 기술 학습 경로에서 확인할 수 있습니다. 여기에는 속성, 연결, 이벤트 및 기타 속성이 포함됩니다.
애플리케이션의 경우 모든 Mendix 애플리케이션에 포함되어 있는 관리 및 시스템 모듈을 활용합니다. 도메인 모델에 이러한 모듈에서 계정 및 이미지 엔티티를 상속하는 두 개의 특수 엔티티를 만들 것입니다. 이렇게 하면 애플리케이션 사용자가 성명, 이메일 주소, 사용자 이름과 같은 계정 엔티티와 동일한 속성을 가질 수 있습니다. 또한 사용자가 자신의 계정에 프로필 사진을 연결할 수 있습니다.
그렇다면 계정 및 이미지 엔티티 자체 대신 특수 엔티티를 사용하는 이유는 무엇일까요? 우선 관리 모듈은 마켓플레이스 모듈이므로 모듈 자체를 변경하지 않는 것이 가장 좋은 방법이기 때문입니다. 둘째, 시스템 모듈의 액세스 권한은 변경할 수 없습니다. 하지만 전문화의 액세스 권한은 변경할 수 있습니다.
2.3.1 엔티티 및 속성 만들기
도메인 모델에 몇 가지 엔티티와 속성을 추가해 보겠습니다!
비용 모듈의 도메인 모델을 엽니다.
TeamMember라는 새 엔티티를 만들고 Generalization을 Administration.Account로 설정합니다.
ProfilePicture라는 새 엔티티를 만들고 Generalization를 System.Image로 설정합니다.
두 엔티티 간에 1-1 연결을 추가합니다.
TeamMember 에서 선을 시작해 ProfilePicture 에 놓습니다.
아래와 같이 Mulitiplicity 항목을 1-1 로 수정합니다.
Andrea에 따르면 사람들은 한 가지 역할만 가질 수 있어야 합니다. 관리자, 요청자 또는 승인자 중 하나입니다. 그러나 사용자는 기본적으로 Mendix 애플리케이션에서 여러 사용자 역할을 가질 수 있습니다.
이를 위한 한 가지 방법은 TeamMember 엔티티에 Before Commit 이벤트 핸들러를 추가하는 것입니다. 이 이벤트 핸들러는 사용자 역할이 하나만 선택되었는지 확인하는 마이크로플로우를 트리거합니다. 참이면 해당 팀원이 커밋되도록 허용합니다. 그렇지 않으면 거짓이면 커밋을 중지하고 유효성 검사 피드백 메시지를 표시합니다.
TeamMember 엔터티의 속성을 열고 이벤트 핸들러 탭으로 이동합니다.
새로 만들기를 클릭하여 새 이벤트 핸들러를 만듭니다.
이 이벤트 핸들러는 커밋 전 이벤트 핸들러여야 합니다.
마이크로플로우 선택에서 BCO_TeamMember_CheckUserRoleSelection이라는 새 마이크로플로우를 만듭니다.
마이크로플로우가 거짓을 반환할 때 오류 발생을 선택 취소합니다.
다음 이미지를 사용하여 마이크로플로우를 빌드합니다:
2.4 앱 보안
가능한 한 빨리 애플리케이션에 보안을 추가하는 것이 가장 좋습니다. 또한 방금 만든 마이크로플로우가 제대로 작동하려면 보안을 설정해야 합니다. 하지만 그보다 더 중요한 것은 사용자들에게 이 Expenses 애플리케이션을 빨리 제공하는 것입니다. 그럼 시작해 봅시다!
2.4.1 사용자 역할
Andrea는 경비 앱에 세 가지 사용자 역할을 부여하고 싶습니다:
관리자 - 사용자 관리를 담당하는 사용자.
요청자: 요청을 입력하고 자신의 요청을 볼 수 있는 사용자.
승인자: 요청을 승인하거나 거부하고 시스템의 모든 요청을 볼 수 있는 사용자.
지금 만들어 봅시다:
앱 보안을 프로덕션 수준으로 설정합니다.
그에 따라 모듈 및 사용자 역할을 구성합니다.
참고: 모듈 역할은 필요한 경우에만 Expenses 모 아래에만 남겨두세요. 모듈 역할을 추가하여 마켓플레이스 모듈을 변경하지 않는 것이 가장 좋은 방법인데, 모듈 역할은 언제든지 업데이트할 수 있으며 이 모듈에 대한 모든 변경 사항이 대체되어 손실될 수 있기 때문입니다.
또한 각 사용자 역할에 대해 데모 사용자가 있어야 합니다. Administration.Account 엔티티를 사용해야 합니다.
2.4.2 엔티티 액세스
다음 단계는 TeamMember 및 ProfilePicture 엔티티에 대한 엔티티 액세스를 구성하는 것입니다. 지금은 첫 번째 기능을 빌드할 사람이므로 관리자에 대한 액세스 권한에 중점을 두겠습니다.
관리자는 TeamMember 엔티티의 개체를 만들고 삭제할 수 있으며 모든 속성에 대한 읽기, 쓰기 액세스 권한이 있습니다.
다음 이미지를 사용하여 ProfilePicture 엔티티에 대한 엔티티 액세스 권한을 설정합니다.
2.5 팀원 관리 페이지
도메인 모델 설정과 보안 설정이 완료되었으므로 이제 페이지를 구축해야 합니다. 이 페이지를 통해 Andrea는 팀을 관리할 수 있습니다. 그녀는 특히 모든 팀원을 볼 수 있는 개요 페이지를 찾고 있습니다. 또한 새 팀원을 만들거나 기존 팀원을 편집할 수 있는 상세 페이지도 원합니다.
페이지의 명명 규칙을 기억하시나요? 바로 Entity_PageType 입니다. 그리고 특정 사용자 역할에 대한 페이지인 경우 Entity_PageType_UserRole입니다. 이제 이 규칙을 적용하여 Andrea를 위한 페이지를 만들어 봅시다!
2.5.1 Overview 페이지 만들기
팀원 개요 페이지의 다음 디자인을 살펴보세요. 이것이 Andrea가 개요 페이지에 원하는 디자인입니다. 사용자 지정 색 구성표와 로고는 아직 걱정하지 마세요. 다음 모듈에서 추가할 것입니다.
페이지 폴더에 새 페이지를 추가합니다.
페이지 이름: TeamMember_Overview_Administrator
레이아웃 : Atlas_Topbar
페이지 템플릿: Lists > List Columns
헤더에서 < Back 링크 버튼과 2개있는 Action 버튼 중 오른쪽 회색 하나를 삭제합니다.
나머지 작업 버튼의 캡션을 New Team Member 라고 변경합니다. 나중에 이 버튼을 기능적으로 만들 수 있습니다.
제목을 Team Member Management 로 변경하고 부제목을 삭제합니다.
헤더는 다음과 같이 표시되어야 합니다:
목록 보기를 팀원 엔터티에 연결합니다.
Studio Pro가 목록 보기의 콘텐츠를 자동으로 채우도록 허용하지 마세요. 이 옵션을 허용하면 페이지 템플릿의 디자인이 손실됩니다.
목록 보기에 정렬 순서를 추가하려면 정렬 순서를 두 번 클릭합니다.
정렬 순서 편집 화면에서 추가를 클릭합니다.
FullName 속성을 선택합니다.
선택 및 확인을 클릭합니다.
검색을 두 번 클릭하여 목록 보기에 검색 필드를 추가합니다. 목록에 많은 사람이 포함되므로 이 기능이 매우 유용할 수 있습니다!
a. 목록 보기 검색 수정 화면에서 추가를 클릭합니다.
b. FullName 속성을 선택합니다.
c. 선택 및 확인을 클릭합니다.
Navigation 메뉴를 열고 방금 만든 팀원 개요 페이지에 대한 새 항목을 추가합니다.
Administrator 에게 해당 페이지에 대한 액세스 권한을 부여합니다.
Expenses 모듈 Security 해서 Page Access 탭에서 지정합니다.
2.5.2 목록 보기 항목 작성
목록 보기 항목에 동적 데이터를 추가할 시간입니다! Andrea는 여기에서 각 팀원의 이름, 이메일 주소, 앱에서의 역할 등 가장 관련성이 높은 정보를 보고 싶어합니다. 또한 회사가 너무 빠르게 성장하고 있어 모든 사람의 이름을 기억하기 어렵기 때문에 프로필 사진도 보고 싶어합니다.
목록 보기 항목에 이미 사진이 있지만 이는 정적인 이미지입니다. 동적 이미지(각 팀원의 프로필 사진)가 되려면 이 정적 이미지를 동적 이미지로 바꿔야 합니다.
도구 상자의 위젯 탭에서 동적 이미지 위젯을 찾습니다.
목록 보기 항목에 이미 있는 정적 이미지 위에 위젯을 배치합니다.
기존 정적 이미지를 삭제합니다.
동적 이미지를 두 번 클릭하여 해당 속성을 엽니다. 다음 이미지를 사용하여 속성을 구성합니다.
확인을 클릭합니다. 동적 이미지의 내용이 자동으로 채워지도록 허용하지 마십시오.
나머지 목록 보기 항목을 작성합니다:
가운데 열에 컨테이너를 추가하고 그 옆에 버튼 두 개를 배치해야 합니다.
버튼의 클래스명은 btn-block이고 삭제 버튼의 클래스명은 왼쪽 바깥쪽 큰 간격이어야 합니다.
버튼이 있는 컨테이너의 클래스명은 spacing-outside-bottom-large이고 콘텐츠 정렬은 행으로 왼쪽 정렬로 설정되어 있어야 합니다.
셰브론 링크 버튼이 포함된 세 번째 열은 삭제해야 합니다.
삭제 버튼의 클릭 시 이벤트가 삭제로 설정되어 있어야 합니다.
2.5.3 세부 정보 페이지 구축 - 새 페이지 만들기
이제 Andrea는 앱에서 모든 팀원을 볼 수 있는 페이지를 갖게 되었습니다. 또한 팀원을 만들고 편집할 수 있는 페이지가 필요합니다. 이를 세부 정보 페이지라고 합니다.
새 페이지는 편집 페이지와 약간 다른데, 새 페이지에서는 비밀번호를 바로 입력할 수 있습니다. 수정 페이지에서는 이 기능이 '비밀번호 변경 버튼' 뒤에 있습니다.
새 페이지를 만듭니다:
이름: TeamMember_New_Administrator
레이아웃: Atlas_Topbar
페이지 템플릿입니다: Blank
페이지헤더 빌딩 블록을 사용하여 기존 레이아웃 그리드 위에 페이지에 헤더를 추가합니다.
제목을 New Team Member 로 변경합니다.
부제를 삭제합니다.
기존 레이아웃 그리드에 Data view 위젯을 추가하고 데이터 소스를 Administration.AccountPasswordData로 설정합니다. 그 안에 다른 Data view 위젯을 만들고 데이터 소스를 AccountPasswordData_Account 연결을 통해 TeamMember 엔터티로 설정합니다. 예를 클릭하여 두 번째 Data view의 내용을 자동으로 채웁니다.
다음 이미지를 사용하여 페이지의 첫 번째 부분을 만듭니다:
첫 번째 레이아웃 그리드 열에 컨테이너 위젯을 추가하고 카드 클래스를 적용합니다.
레이아웃 그리드의 각 열은 col-xs-12라는 클래스명을 갖습니다.
Name 속성에는 Username이라는 캡션이 있어야 합니다.
사용자 역할 입력 참조 세트 선택기는 관리 모듈의 User Management > Admin 폴더에 있는 기존 UserRole_Select 페이지를 사용합니다.
두 개의 스위치 위젯은 User 엔티티의 차단됨 및 활성 속성을 위한 것입니다. 이러한 위젯의 레이블에 적절한 캡션이 표시되는지 확인하세요.
오른쪽 열에 있는 이미지에 표시된 다음 위젯을 추가합니다.
동적 이미지 위젯에는 다음과 같은 설정이 있어야 합니다:
기본 이미지: Atlas_Web_Content.Content.user
데이터 소스 엔티티: ProfilePicture
다음 범례를 사용하여 각 요소의 클래스 이름을 설정합니다.
1. form-group
2. control-label
3. flexcontainer flex-center
4. flexitem
5. img-circle
6. flexitem flexitem-main (image uploader)
기존 레이아웃 그리드 아래에 두 개의 열이 있는 새 레이아웃 그리드를 추가하고 Administration.AccountPasswordData 엔티티의 NewPassword 및 ConfirmPassword 속성에 연결된 두 개의 입력 위젯을 추가합니다.
두 번째 데이터 보기 바닥글에 Save 및 Cancel 버튼을 추가합니다. Save 버튼은 Administration 모듈에서 기존 SaveNewAccount 마이크로플로우를 트리거해야 합니다. Cancel 버튼은 모든 변경 사항을 취소해야 합니다.
2.5.4 세부 정보 페이지 만들기 - 새 팀원 구성 버튼
편집 페이지 구축을 시작하기 전에 먼저 Andrea가 새 팀원을 만들 수 있는지 확인해 보겠습니다. 이제 새 팀원 버튼을 작동시킬 차례입니다!
TeamMember_Overview_Administrator 페이지에서 New Team Member 버튼의 클릭 시 동작 전송을 설정하여 마이크로플로우를 호출합니다.
새 마이크로플로우를 호출하여 연결합니다: ACT_TeamMember_Create라는 새 마이크로플로우에 연결합니다.
마이크로플로우 내에서 다음 단계를 만듭니다:
새 ProfilePicture 개체를 만듭니다.
새 TeamMember 개체를 만들고 이를 ProfilePicture 개체에 연결합니다.
새 AccountPasswordData 개체를 만들고 이를 TeamMember 개체에 연결합니다.
TeamMember_New_Administrator 페이지를 열고 AccountPasswordData 개체를 전달합니다.
Administrator 에게 마이크로플로우에 대한 액세스 권한을 부여합니다.
2.5.5 세부 정보 페이지 만들기 - 편집 페이지 만들기
Andrea가 팀원 정보를 편집하는 데 사용할 페이지는 새 팀원을 만드는 페이지와 거의 동일합니다. 새 페이지를 복제하고 필요한 경우 변경해 봅시다!
TeamMember_New_Administrator 페이지를 복제하고 이름을 TeamMember_Edit_Administrator로 바꿉니다.
다음 이미지를 사용하여 필요에 따라 페이지를 변경합니다:
Save 버튼은 기본 저장 작업입니다.
Change password 버튼은 Administration 모듈의 기존 ShowPasswordForm 마이크로플로우를 트리거합니다.
TeamMember 객체를 표시하는 내부 데이터 보기를 AccountPasswordData 객체를 표시하는 데이터 보기 외부로 이동합니다.
Save 및 Cancel 버튼은 TeamMember 데이터 보기의 바닥글로 이동해야 합니다. 나머지 데이터 보기에 대해 바닥글을 표시해야 할 수도 있습니다.
두 개의 텍스트 입력 위젯이 있는 하단 레이아웃 그리드와 AccountPasswordData 데이터 보기를 삭제합니다.
팀원 개요 페이지의 수정 버튼을 이 페이지에 연결합니다.
Administrator 에게 페이지에 대한 액세스 권한을 부여합니다.
