본문 바로가기

IT/mendix

빠른 개발자 되기(Become a Rapid Developer) - 5. 앱에 사용자 지정 로직 추가

반응형

5.1 마이크로플로우 소개

앱을 빌드하고 이전 모듈에서 예약 기능을 만들었습니다. 지미에게는 이미 작업할 수 있는 앱이 있습니다. 이제부터는 고급 기능을 추가하여 앱을 개선할 수 있는 방법을 살펴보겠습니다. 코스 개요 페이지에서 교육을 예약할 때 코스를 자동으로 채우고 종료 날짜를 자동으로 계산하는 것을 생각해 보세요. 이러한 기능을 추가하면 LearnNow 앱을 더 쉽고 효율적으로 사용할 수 있습니다.

Jimmy가 요청한 다음 기능은 교육 이벤트를 더 효율적으로 예약할 수 있는 기능입니다. 그는 이 기능이 앱의 주요 목적이며 자주 사용할 것이기 때문에 이 기능을 원했습니다.

계획을 세우는 동안 스크럼 팀은 이 사용자 스토리에 대한 두 가지 작업을 식별합니다:

선택한 코스가 미리 채워진 상태로 Course_Overview 페이지에서 교육 이벤트 예약하기
시작 날짜와 기간을 기준으로 교육 이벤트의 종료 날짜를 자동으로 계산합니다.
마이크로플로우를 사용하여 이 모듈에서 사용자 스토리의 첫 번째 작업을 처리하고 모듈 7에서 두 번째 작업으로 돌아갑니다.

시작해 보겠습니다!

기본 사항
마이크로플로는 멘딕스 스튜디오의 중요한 부분입니다. 마이크로플로는 앱에 로직을 추가합니다. 로직은 앱을 더 스마트하게 만들고, 작업을 자동화하고, 유지 관리하기 쉽게 만드는 데 사용됩니다. 예를 들어 코스 개요 페이지에 코스 데이터를 자동으로 미리 채우는 마이크로플로우가 있습니다(실제로 이 모듈에서 수행하게 될 작업 중 하나). 많은 기본 로직이 이미 플랫폼에 내장되어 있지만 모든 사용자 지정 로직은 마이크로플로우를 통해 수행됩니다. 그렇기 때문에 마이크로플로우를 개발하기 위한 모범 사례가 많이 있습니다.

프로그래밍 대신 모델링
마이크로플로우 로직은 시각적 편집기를 사용하여 모델링되므로 관련된 모든 사람이 쉽게 액세스할 수 있습니다. 마이크로플로우 모델링 표기법을 사용하면 사용자 지정 로직을 코드로 프로그래밍하는 대신 모델링할 수 있으므로 모든 팀원 및 이해관계자가 쉽게 해석할 수 있습니다. 이 표기법은 기본적으로 IT 배경을 가진 사람과 비즈니스 배경을 가진 사람이 이해할 수 있는 공통 언어를 만듭니다. 프로그래밍 대신 동작을 모델링할 때의 또 다른 이점은 로직을 유지 관리하기가 훨씬 쉽다는 것입니다. 다른 사람이 만들었거나 몇 달 전에 만든 마이크로플로우에서 무언가를 변경해야 하는 경우, 수백 줄의 코드를 읽는 데 많은 시간을 할애할 필요가 없습니다. 마이크로플로우를 빠르게 해석하고 바로 작업을 시작할 수 있습니다!

마이크로플로는 언제 필요하나요?
다음과 같은 시나리오에서 마이크로플로우가 필요합니다:

예를 들어 기본 동작을 확장하거나 변경하려는 경우:

유효성 검사에서와 같이 추가 작업을 통해 기본 버튼(새로 만들기, 편집 등)의 동작을 확장하는 경우

예를 들어 비즈니스 특정 프로세스를 처리하려는 경우:

선택한 교육생이 코스의 필수 요건을 충족하는지 확인합니다.

시작 날짜를 기준으로 코스 종료 날짜 자동 결정

예를 들어 다른 시스템, 데이터베이스, 웹 서비스 등과 통합하려는 경우:

인사 데이터베이스와 통합하여 사용자 끌어오기

마이크로플로우 트리거
사용자 지정 프로세스를 만들려면 마이크로플로우를 모델링하지만, 마이크로플로우가 실행되는 시기와 이유도 사용자 지정할 수 있습니다. 마이크로플로우를 트리거하는 방법에는 크게 세 가지가 있습니다:

작업 버튼
사용자가 마이크로플로우 호출의 클릭 시 동작이 있는 버튼이나 위젯을 클릭합니다.

위젯 이벤트
사용자가 마이크로플로우를 트리거하도록 구성된 특정 방식으로 위젯과 상호 작용하는 경우(클릭 시 액션이 아닌 경우) 위젯 속성의 '이벤트'라는 특수 섹션에서 구성됩니다.

엔티티 이벤트
개체가 어떤 방식으로 생성되거나 변경되어 마이크로플로우를 트리거합니다. 변경의 원인은 중요하지 않습니다. 이는 도메인 모델의 엔티티 속성에서 구성됩니다.

표준 작업을 처리하는 Mendix 플랫폼
자주 발생하는 프로세스는 이미 플랫폼에 포함되어 있습니다. 예를 들어, 만들기 버튼(추가)은 새 개체를 만들고 새 개체가 포함된 페이지를 엽니다. 따라서 기본 새로 만들기 버튼에는 개체 만들기 및 페이지 표시라는 표준 작업 세트가 고정되어 있습니다.

이제 지미의 앱으로 돌아가 보겠습니다!

5.2 마이크로플로우의 예

강의 4.7.3에서 Jimmy가 홈페이지에서 바로 교육 이벤트를 추가할 수 있는 버튼을 만들었습니다.

이 기본 동작은 이전 강의에서 보았듯이 표준 액션으로 구현됩니다. 하지만 마이크로플로우를 사용하여 이 작업을 대신 완료할 수 있습니다. 아래에서 마이크로플로우를 대신 사용하면 어떤 모습일지 확인할 수 있습니다.

마이크로 플로우 자체는 다음과 같습니다:

이 이미지에는 많은 일이 일어나고 있습니다. 파란색 상자는 일이 일어나는 곳입니다. 검은색 화살표는 이벤트의 순서를 나타냅니다. 녹색 점에서 시작하여 빨간색 점에서 끝나지만 필요한 경우 이 흐름이 훨씬 더 복잡해질 수 있습니다.

다음 강의에서는 처음부터 자신만의 마이크로플로우를 구축하는 방법을 배우게 될 것입니다. 이를 통해 Mendix 기본 동작에 포함되지 않은 기능을 앱에 추가할 수 있습니다.

 

5.3 마이크로플로우의 요소

이 화면은 마이크로플로우 편집기 화면으로, 녹색 점(시작 이벤트), 빨간색 점(종료 이벤트) 및 그 사이에 화살표가 있는 선(흐름)이 표시됩니다. 이 선에 나중에 마이크로플로우의 사용자 지정 로직을 구성하는 활동(파란색 블록)과 의사 결정(다이아몬드)을 추가할 수 있습니다.

도구 상자에는 마이크로 플로우에 추가할 수 있는 모든 종류의 요소가 포함되어 있습니다. 다음은 대부분의 요소에 대한 간략한 설명입니다. 이 교육에서 다루지 않는 몇 가지 고급 요소도 있다는 점에 유의하세요.

이벤트
이벤트는 마이크로플로우의 시작점과 끝점을 나타냅니다.

흐름
흐름은 요소 간의 연결을 형성합니다.

활동
활동은 마이크로 플로우에서 실행되는 작업입니다.

의사 결정
의사 결정은 선택을 하고 다른 경로를 다시 병합하는 것을 다룹니다.

아티팩트
아티팩트는 마이크로플로우에 입력을 제공하고 댓글을 달 수 있도록 합니다.

5.4 멘딕스 어시스트 로직 봇

Mendix 지원 로직 봇은 인공 지능 기반 에이전트로, Mendix Studio Pro에서 마이크로플로우를 구성하는 데 도움을 줍니다. 머신러닝 분석을 사용하여 마이크로플로우의 다음 단계를 추천하고, 딥러닝을 사용하여 마이크로플로우의 모범 사례 패턴을 감지합니다. 또한 Mendix 지원 로직 봇은 새로운 마이크로플로우를 계속 학습하고 분석하여 새로운 앱을 더욱 쉽게 개발할 수 있도록 지원합니다! Mendix Assist에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

어떻게 작동하나요?
기본적으로 모든 앱에는 마이크로플로우의 모델링 및 구성을 안내하는 AI 기반 가상 공동 개발자 봇인 MxAssist 로직 봇이 있습니다. MxAssist 로직 봇의 주요 기능은 다음과 같습니다:

차선책 제안 - 40개 이상의 다양한 옵션 중에서 상위 5개의 차선책을 추천합니다.
자동 구성 - 차선책을 제시할 뿐만 아니라 해당 조치에 대한 매개변수를 미리 입력하여 추가 개발을 자동화합니다.
컨텍스트 제안 - 개발자가 흐름 중간에 새로운 요소나 액션을 삽입할 때 로직을 좌우로 '살펴보고' 해당 로직이 사용된 페이지를 사용하여 컨텍스트를 추론하는 등 다양한 방식으로 컨텍스트를 도출합니다.
높은 정확도 - 지속적인 모델 개선 및 학습을 통해 정확도 수준을 95%까지 끌어올렸습니다.
새로운 빈 마이크로플로우에서도 마이크로플로우의 입력 파라미터와 같은 컨텍스트 정보를 기반으로 MxAssist는 사용자가 선택할 수 있는 여러 가지 권장 작업을 제공합니다. 도구 상자에서 추천 활동을 검색하는 데 시간을 낭비할 필요가 없습니다! 추천 활동 목록에서 이 활동을 선택하면 이 활동이 자동으로 마이크로플로우에 추가됩니다.

MxAssist가 어떤 용도로 사용되는지 궁금하다면, 현재 스튜디오 프로의 모든 마이크로 플로우 활동 중 약 40%가 이 봇을 사용하여 생성된다는 점을 주목할 필요가 있습니다! MxAssist 추천을 활용하는 방법을 살펴 보겠습니다.

Mendix Studio Pro에서 마이크로플로우를 작성할 때 마이크로플로우 요소 사이 또는 뒤에 나타나는 파란색 점을 클릭하면 제안 목록이 나타납니다. Mendix Assist는 Mendix 앱의 과거 데이터를 기반으로 다음에 수행할 수 있는 작업에 대한 여러 가지 옵션을 제공합니다. 다음은 Studio Pro 사용자가 이 특정 시나리오에서 가장 자주 선택한 작업입니다.

수행하려는 작업을 선택하면 해당 작업이 자동으로 마이크로플로우에 배치됩니다.

이제 시작할 준비가 끝났습니다!

 

5.4.1 마이크로플로우를 사용하여 코스 개요에서 교육 이벤트 예약하기

사용자 스토리의 첫 번째 작업은 코스가 이미 선택된 상태에서 코스 개요 페이지에서 교육 이벤트를 예약하는 것입니다.

이를 위해 코스 개요 페이지의 목록 보기 위젯에 새 교육 이벤트를 생성하는 버튼을 추가합니다. 이 버튼에는 교육 이벤트 객체를 생성하고 TrainingEvent_NewEdit  페이지를 여는 마이크로플로우가 필요합니다.

갈매기 모양 버튼 '>' 위에 버튼을 추가하여 왼쪽에 표시되도록 하고 구성합니다. 버튼을 두 번 클릭하면 작업 버튼 편집 창이 나타납니다:


캡션을 스케줄로 변경합니다.
캘린더 아이콘을 추가합니다.
버튼에 기본 스타일을 지정합니다.
클릭 시 필드에서 마이크로플로우 호출을 선택합니다. 마이크로 플로우 선택 팝업에서 이 새 마이크로 플로우를 생성해야 하므로 새로 만들기를 선택합니다. 마이크로플로우의 이름을 ACT_Course_ScheduleTrainingEvent로 지정합니다. 확인을 클릭합니다.
마이크로플로에서는 ACT_Course_ScheduleTrainingEvent에서 볼 수 있듯이 접두사_Entity_Operation 명명 규칙을 따릅니다. 마이크로 흐름의 접두사는 항상 대문자 3개입니다. 문서에서 모든 명명 규칙을 찾을 수 있습니다.

https://docs.mendix.com/refguide/dev-best-practices/

 

Mendix Best Practices for Development

Describes Mendix best practices for developing Mendix applications.

docs.mendix.com

구조 모드에서 버튼의 모양은 다음과 같습니다:

Phone 보기입니다:

MyFirstModule에서 새 마이크로플로우를 찾아 더블클릭하여 마이크로플로우 창을 엽니다.

이 마이크로플로우에는 시작 이벤트와 종료 이벤트가 있으며 그 사이에 흐름이 있습니다. Course 유형의 매개변수도 볼 수 있습니다. 이 매개 변수는 교육 이벤트를 예약하려는 코스를 나타냅니다.

마이크로 플로우에 활동을 추가하는 가장 좋은 방법은 끝에서 시작하여 시작 부분으로 작업하는 것입니다. 스스로에게 질문해 보세요: 사용자가 이 버튼을 클릭할 때 무엇을 기대하는가?

이 경우 사용자 Jimmy는 Course_Overview 페이지에서 TrainingEvent의 세부 사항 페이지로 이동하기를 원하며, 코스 필드가 자동으로 채워져야 합니다. 여기에서 새 교육 이벤트에 대한 세부 정보를 입력할 수 있습니다. 저장을 클릭하면 새 정보가 데이터베이스에 저장됩니다.

마이크로 플로우에 활동을 추가하여 수행할 작업을 파악하는 것부터 시작합니다. 이 작업이 완료되면 활동을 구성합니다.

도구 상자에서 페이지 표시 활동을 찾아 시작 이벤트와 종료 이벤트 사이의 흐름에 배치합니다.
페이지 표시 이벤트는 TrainingEvent_NewEdit 페이지를 엽니다. 이 페이지에는 교육 이벤트 개체가 필요하지만 마이크로 플로우에 아직 해당 개체가 없습니다. 이것이 오류가 발생하는 이유입니다.

이를 만들려면 다른 활동이 필요합니다. 도구 상자에서 개체 만들기 활동을 찾아 시작 이벤트와 페이지 표시 활동 사이의 마이크로 플로우에 배치합니다.

이제 마이크로플로우를 호출하는 버튼과 마이크로플로우에 있는 활동을 추가했습니다. 다음 강의에서는 이러한 활동을 구성하여 마이크로플로우가 원하는 방식으로 작동하도록 하는 방법을 배우게 됩니다! 이렇게 하면 이러한 오류가 해결됩니다.


5.4.2 마이크로 플로우 활동 구성

마이크로플로우를 만들었으니 이제 활동을 구성할 차례입니다!

개체 만들기 활동부터 시작하겠습니다:

개체 만들기 활동을 두 번 클릭하거나 속성 창으로 이동합니다. 객체를 만들려는 엔티티를 선택합니다. 이 경우 교육 이벤트 엔티티입니다. 선택 및 확인을 클릭합니다.

변수 이름이 어떻게 자동으로 NewTrainingEvent로 설정되는지 보셨나요? 변수는 항상 고유한 이름이 필요하므로 마이크로플로우가 어떤 변수를 가리키는지 알 수 있습니다. Mendix Studio Pro는 가능한 경우 변수 이름을 지정하는 데 도움을 드리려고 노력합니다. 이 경우 변수는 트레이닝 이벤트이며 새 변수이므로 Mendix Studio Pro에서 NewTrainingEvent라는 이름을 생성합니다.

이제 개체를 생성해야 합니다. Create TrainingEvent 두 번 클릭합니다. 개체 생성 팝업에서 새로 만들기를 클릭합니다. 변경 항목 편집 창이 나타납니다. 드롭다운에서 MyFirstModule.TrainingEvent_Course를 선택합니다.

 

이제 커서를 큰 값 텍스트 상자에 놓습니다. 이제 멘딕스를 사용하는 동안 사용할 키보드 단축키를 배우려고 합니다! 이것은 로우 코드의 '코드' 부분입니다: 가능한 모든 옵션의 목록이 나타나도록 하려면 CTRL + 스페이스를 누르세요.


이 목록은 시나리오와 상황에 따라 변경되며, 앱의 모든 이름과 구문을 몰라도 표현식을 작성할 수 있습니다. 목록 맨 위에 있는 $Course를 두 번 클릭하여 선택합니다. 이것은 마이크로플로우의 매개변수에서 가져온 코스 객체를 나타냅니다. 이 특정 활동의 경우, 이것이 필요한 전부입니다. 이 활동에서 새 TrainingEvent 개체를 만들고 Jimmy가 '스케줄' 버튼을 클릭했을 때 목록에서 선택한 코스와 즉시 연결하도록 지시하고 있습니다.

방금 변수를 사용하여 마이크로 플로우 표현식을 작성했습니다. 변수는 '$' 문자로 표시되는 값과 연관된 기호 이름입니다. 변수는 마이크로플로우 내의 객체, 속성 또는 연관을 나타냅니다. 속성 및 연결은 모두 Mendix에서 멤버라는 보다 일반적인 용어로 묶여 있으므로 Studio Pro에서 해당 용어를 주의 깊게 살펴보세요.

마이크로 플로우 표현식은 마이크로 플로우 내에서 값을 변경, 확인 또는 평가하기 위해 의사 코드를 작성할 수 있는 큰 텍스트 상자입니다. 마이크로플로우 표현식은 몇 가지 유형의 마이크로플로우 요소 내에서 사용되며, 마이크로플로우 자체만큼 복잡해질 수 있습니다. 하지만 이해하기 쉽지 않으므로 복잡한 로직은 동작 안에 숨어 있는 정교한 표현식보다는 마이크로플로우의 시각적 요소를 사용하여 표현하는 것이 좋습니다.

이제 개체 만들기 활동을 구성했으므로 이제 페이지 표시 활동을 구성할 차례입니다:

페이지 표시 활동을 두 번 클릭합니다. 전달할 개체 필드에서 NewTrainingEvent를 선택하고 페이지 필드에서 TrainingEvent_NewEdit를 선택합니다. 선택 및 확인을 클릭합니다.

최종적으로 마이크로 플로우는 다음과 같이 표시됩니다:

이제 로컬에서 앱을 실행하고 테스트합니다! 일부 코스를 입력했는지 확인한 다음 코스 개요 페이지에서 일정 버튼을 클릭하고 코스 드롭다운이 이미 채워진 상태로 코스 새로 수정 페이지가 나타나는지 확인합니다.
잘하셨습니다! 첫 번째 마이크로플로우를 생성했습니다.

요약
Mendix Studio를 사용하여 LearnNow 앱 내의 일부 프로세스를 자동화하여 Jimmy가 시간을 절약할 수 있도록 도와주셨습니다! 이 모듈에서는 다음에 대해 배웠습니다:

앱에 사용자 지정 로직 추가하기
마이크로플로 및 그 요소
Mendix 지원 로직 봇
마이크로플로우를 사용하여 교육 이벤트 예약하기
다음 모듈에서 Mendix Studio Pro로 전환하여 앱을 더욱 자동화하는 방법을 알아보세요!

리소스 탭에서 모듈 5의 솔루션이 포함된 mpk를 찾을 수 있습니다.
https://academy.mendix.com/link/modules/92/lectures/675/5.5-Summary

 

Mendix

 

academy.mendix.com

 

반응형