웹 앱 워크플로

AppMaster Web Designer에서는 백엔드 로직 외에도 프런트엔드 측에서 웹 애플리케이션에 대한 비즈니스 로직을 구성할 수 있습니다. 이 강력한 기능을 사용하면 특정 비즈니스 요구에 맞는 정교하고 동적인 웹 애플리케이션을 만들 수 있습니다.

웹 애플리케이션 컨텍스트에서 비즈니스 프로세스에는 사용자 인증, 데이터 처리, 온라인 트랜잭션, 콘텐츠 관리, 고객 서비스 운영 및 조건에 따른 UI 요소 사용자 정의가 포함될 수 있습니다.

AppMaster Web Designer의 세 가지 수준의 비즈니스 로직:

• 애플리케이션 트리거: 이는 애플리케이션 전체의 이벤트 또는 상태에 응답하여 특정 비즈니스 프로세스를 시작하는 상위 수준의 트리거입니다.
• 일반 비즈니스 프로세스: 이는 애플리케이션의 다양한 부분에 적용하여 작업을 자동화하고 워크플로우를 간소화할 수 있는 사전 정의된 작업 세트입니다.
• 요소 트리거: 애플리케이션 트리거보다 더 세분화되어 특정 UI 요소에 연결되어 이러한 요소와의 상호 작용을 기반으로 비즈니스 프로세스를 활성화합니다.

이러한 수준의 비즈니스 로직을 활용함으로써 AppMaster Web Designer는 시각적으로 매력적일 뿐만 아니라 지능적이고 사용자 요구와 행동에 반응하는 웹 애플리케이션을 만들 수 있도록 지원합니다.

🔔 BP를 시작하기 위해 새로운 비즈니스 로직을 추가한 후 실행 중인 미리보기를 다시 로드하는 것이 중요합니다.

애플리케이션 트리거

AppMaster Web Designer의 애플리케이션 트리거는 애플리케이션 전체 이벤트에 응답하거나 특정 비즈니스 프로세스에서 실행을 실행하여 기능과 사용자 경험을 향상시키는 상위 수준 트리거입니다.

AppMaster는 각각 특정 시나리오에 맞게 설계된 다양한 애플리케이션 트리거를 제공합니다.

• 앱 실행 시: 애플리케이션이 시작될 때 활성화되며 초기 설정 절차에 이상적입니다.
• 앱 내 탐색: 애플리케이션의 여러 부분 간 탐색 중에 발생합니다.
• On App Blur: 애플리케이션이 포커스를 잃을 때 트리거되며 일시 중지 또는 저장 작업에 유용합니다.
• On App Focus: 애플리케이션이 포커스를 다시 얻었을 때 실행되며, 콘텐츠를 재개하거나 업데이트하는 데 좋습니다.
• On App Hidden: 애플리케이션이 최소화되거나 화면에 표시되지 않을 때 활성화됩니다.
• On App Visible: 애플리케이션이 다시 표시되면 실행되며 콘텐츠를 새로 고치는 데 유용합니다.
• 앱 삭제 시: 애플리케이션 종료 프로세스 중에 실행됩니다.
• On App Online: 애플리케이션이 온라인 상태를 감지하면 트리거되며 데이터 동기화에 적합합니다.
• On App Offline: 애플리케이션이 오프라인이 되면 실행되어 오프라인 기능을 활성화합니다.
• 앱 인증 필요: "401(인증되지 않음)" 응답을 받으면 활성화되어 사용자 재인증을 요청합니다.
• 앱에서 금지됨: 일반적으로 액세스 제어 및 권한에 사용되는 "403(금지됨)" 응답에서 트리거됩니다.

애플리케이션의 백엔드 수준에서 WebSocket 엔드포인트를 생성하면 애플리케이션 트리거의 정확한 목록을 확장할 수 있습니다.

이러한 트리거는 시작 시 사용자 인증 관리, 액세스 권한 확인, 인증 변경 시 리디렉션 구성, 오류 처리 등의 작업에 사용될 수 있으므로 응답성이 뛰어나고 안전한 웹 애플리케이션을 만드는 데 필수 불가결합니다.

일반 비즈니스 프로세스

AppMaster Web Designer의 일반 비즈니스 프로세스는 반복적인 작업과 중복 논리를 고유한 흐름으로 캡슐화하도록 특별히 설계되었습니다. 일단 생성되면 이러한 비즈니스 프로세스는 웹 애플리케이션 비즈니스 프로세스의 모든 수준에 고유한 블록으로 원활하게 통합될 수 있습니다.

주요 특징들:

• 효율적인 작업 흐름 관리: 일반적인 작업을 일반 비즈니스 프로세스로 이동하면 중복이 크게 줄어들고 애플리케이션의 작업 흐름이 간소화됩니다.
• 프런트엔드 기능: 백엔드 비즈니스 프로세스의 기능을 미러링하는 동시에 일반 비즈니스 프로세스는 프런트엔드 에서 고유하게 실행됩니다. 이를 통해 사용자 인터페이스 내에서 더 빠른 상호 작용과 즉각적인 피드백이 가능합니다.

재사용 용이성:

로직을 구축하는 동안 일반 비즈니스 프로세스를 사용하려면 사용자 생성 BP 그룹에서 원하는 블록을 캔버스로 드래그하기만 하면 됩니다.

🔔 성능 고려 사항: 복잡하고 리소스 집약적인 작업의 경우 이러한 프로세스를 서버 측(백엔드)에서 실행하는 것이 좋습니다. 이 접근 방식은 특히 계산량이 많거나 중요한 데이터를 안전하게 처리해야 하는 작업의 경우 더 나은 성능과 효율성을 보장합니다.

요소 트리거

AppMaster Web Designer의 구성 요소 트리거는 웹 애플리케이션에 상호 작용 기능을 추가하는 데 필수적입니다. 이러한 트리거는 특정 UI 요소에 연결되어 사용자 상호 작용에 응답하여 사전 정의된 비즈니스 프로세스를 활성화합니다. 애플리케이션의 각 구성 요소에는 역동적이고 매력적인 사용자 경험을 만들기 위해 사용자 정의할 수 있는 일련의 트리거가 있습니다.

• 공통 트리거: 구성 요소는 구성 요소의 수명 주기 및 가시성 변경에 응답하는 onCreate , onDestroy , onShow 및 onHide 와 같은 표준 트리거 세트를 공유합니다.
• 특정 트리거: 일반적인 트리거 외에도 구성요소에는 해당 기능에 맞춰진 고유한 트리거가 있습니다. 예를 들어 Button에는 onClick 트리거가 있을 수 있고, Table은 onUpdateData 에 응답할 수 있으며, Tabs 에는 onTabSelect 트리거가 있을 수 있습니다.

다양성에도 불구하고 기본 원칙은 일관되게 유지됩니다. 즉, 이벤트가 해당 비즈니스 프로세스를 트리거합니다. 구성 요소 트리거를 효과적으로 사용하면 사용자 입력에 실시간으로 반응하는 대화형 반응형 웹 애플리케이션을 제작하여 전반적인 사용자 경험을 향상하고 애플리케이션을 더욱 직관적이고 사용자 친화적으로 만들 수 있습니다.

트리거에 액세스

구성 요소의 트리거를 보고 구성하려면 캔버스에서 구성 요소를 선택하고 오른쪽 사이드바에 있는 '워크플로' 탭으로 이동하세요. 여기에서 사용 가능한 트리거 목록을 찾을 수 있습니다. 하나를 클릭하면 원하는 비즈니스 프로세스를 첨부할 수 있습니다. 논리가 연결된 트리거는 쉽게 식별할 수 있도록 파란색으로 강조 표시됩니다.

비즈니스 프로세스 생성

구성 요소 트리거에 대한 비즈니스 프로세스 설정은 모듈 4에 표시된 것처럼 백엔드 비즈니스 프로세스 생성과 유사한 접근 방식을 따릅니다. 다양한 작업을 나타내는 블록이 추가되는 공통 캔버스를 사용합니다. 이러한 블록 간의 연결은 작업 순서를 정의하여 복잡한 워크플로를 직관적으로 구축할 수 있도록 해줍니다.

애플리케이션 워크플로우 구축

계산 버튼에 대한 비즈니스 프로세스를 만들어 보겠습니다. 먼저 버튼을 클릭할 때 무엇을 해야 할지 결정합니다.

• X와 Y 값을 알아보세요. 해당 입력 필드에서 가져옵니다.
• 계산을 위한 끝점을 시작하고 X 및 Y 매개변수를 전달합니다.
• 결과 컨테이너를 표시합니다.
• 필수 라벨 필드에 계산 결과를 입력합니다.

캔버스에서 Calc Button 요소를 선택하고 onClick Trigger를 클릭하세요.

비즈니스 프로세스 편집기가 열립니다. 여기서는 버튼에 대한 비즈니스 프로세스를 구축하겠습니다.

입력에서 값 가져오기

첫 번째 단계는 사용자가 입력한 값을 가져오는 것입니다. 이를 위해 AppMaster는 입력 매개변수로 '요소 키'를 특징으로 하고 '값'을 출력하는 입력 부동 데이터 가져오기 블록을 제공합니다. 이는 기본적으로 지정된 구성 요소에서 현재 값을 읽습니다.

두 개의 개별 필드(X 및 Y 값을 나타냄)가 있으므로 각 입력 필드에 하나씩 두 개의 'Input Float Get Data' 블록을 활용해야 합니다.

설정하려면:

• 각 입력 필드에 대해 두 개의 입력 부동 데이터 가져오기 블록을 캔버스로 드래그합니다.
• 해당 플로트 입력과 일치하도록 각 블록의 요소 키를 설정합니다. 그러면 블록이 올바른 UI 요소에 연결되어 올바른 데이터를 읽을 수 있습니다.

이전에 인터페이스를 생성하는 동안 UI 디자이너에서 요소의 이름을 바꾼 경우 각 블록에 필요한 구성 요소를 찾고 선택하는 것이 간단해졌습니다.

☝️ 디자인 단계에서 요소의 이름을 바꾸면 나중에 비즈니스 로직 구성 중에 요소를 쉽게 식별하는 데 도움이 됩니다.

엔드포인트 실행

사용자 입력을 검색한 후 웹 애플리케이션 워크플로의 후속 단계는 Endpoint 를 시작하는 것입니다. 이 중요한 단계에서는 웹 애플리케이션의 프런트엔드 (사용자 인터페이스)와 백엔드 (서버 측 프로세스) 간의 연결을 설정하고 계산 명령이 브라우저에서 서버로 전송됩니다.

AppMaster의 엔드포인트는 애플리케이션 내에서 별개의 비즈니스 프로세스 블록으로 표시됩니다. 엔드포인트를 사용하려면 비즈니스 프로세스 블록 목록에서 적절한 엔드포인트를 선택하고 캔버스로 드래그하면 됩니다.

모듈 5에서는 GET 메서드를 사용하여 엔드포인트를 구성하고 여기에 기본 URL "module4-basic" 을 할당했습니다. - Server request GET /module4-basic/ 으로 나열된 것을 찾아 캔버스로 드래그해야 합니다.

구성 요소와 달리 AppMaster 엔드포인트에는 사전 정의된 ID 설정이 필요하지 않습니다. 이 기능은 엔드포인트를 비즈니스 로직에 통합하는 프로세스를 간소화합니다.

마지막 단계는 이전 단계에서 얻은 X 및 Y 값을 엔드포인트에 입력하는 것입니다. 이를 통해 백엔드는 이러한 입력을 수신하고 처리하여 필요한 계산을 수행할 수 있습니다.

UI 요소 상태

웹 애플리케이션 워크플로의 다음 단계는 컨테이너의 가시성을 관리하는 것입니다. 특히 결과를 표시하는 컨테이너를 표시하고 힌트가 포함된 컨테이너를 숨깁니다.

이를 달성하는 방법은 다음과 같습니다.

1. 두 개의 Flex Update Properties 블록을 캔버스로 드래그하여 시작하세요.
2. 각 Flex Update Properties 블록에 대해 해당 컨테이너에 해당하는 Element Key 매개변수를 할당합니다. 하나는 결과 컨테이너용이고 다른 하나는 힌트 컨테이너용입니다.
3. 이러한 블록 내에서 가시성 매개변수를 구성하십시오. 결과 컨테이너에 대해 Visible 매개변수를 True 로 설정하여 계산 후 표시되도록 합니다. 반대로 계산 완료 시 힌트 컨테이너를 숨기려면 이 매개변수를 False 로 설정합니다.

이러한 단계를 구현하면 애플리케이션 인터페이스에서 동적 응답을 생성할 수 있습니다. 계산을 수행하기 위해 버튼을 클릭하는 등의 사용자 작업에 따라 애플리케이션은 자동으로 힌트 컨테이너를 숨기고 결과 컨테이너를 표시합니다.

이는 사용자 경험을 향상시킬 뿐만 아니라 애플리케이션 인터페이스를 깔끔하게 유지하고 각 상호 작용 단계에서 관련 정보에 집중합니다.

실시간 미리보기

비즈니스 프로세스의 진행 상황을 평가하기 위해 중간 결과를 쉽게 미리 볼 수 있습니다.

1. 먼저, 비즈니스 프로세스 편집기에서 저장 및 종료 버튼을 클릭하세요. 이 작업을 수행하면 현재 워크플로가 저장되고 비즈니스 프로세스 편집기가 닫힙니다.
2. 웹 애플리케이션의 실시간 미리보기를 실행하여 마치 실시간인 것처럼 애플리케이션과의 상호 작용을 확인하세요.
3. 계산 버튼을 클릭하여 기능을 테스트합니다.

비즈니스 프로세스가 올바르게 설정되면 동적 응답이 표시됩니다. 힌트가 포함된 컨테이너가 숨겨지는 동시에 결과를 표시하는 컨테이너가 표시됩니다.

이 테스트 방법은 비즈니스 프로세스가 의도한 대로 작동하는지 확인하는 실용적이고 즉각적인 방법을 제공하므로 애플리케이션을 마무리하기 전에 필요한 조정을 수행할 수 있습니다.

데이터 렌더링

애플리케이션의 논리를 성공적으로 테스트한 후에는 비즈니스 논리를 더욱 구체화할 차례입니다.

마지막 단계에는 웹 애플리케이션 인터페이스 내에 계산된 결과를 표시하는 작업이 포함됩니다. 백엔드 비즈니스 프로세스의 출력 데이터를 웹 애플리케이션의 관련 UI 요소에 매핑합니다.

백엔드의 결과가 미리 결정된 순서로 반환된다는 점을 감안할 때 작업은 각 데이터 조각(배열 요소)을 UI의 올바른 텍스트 블록 요소에 정렬하는 것입니다.

데이터 처리를 위해 다음 블록을 사용합니다.

• 배열 요소 : 결과 배열 내의 개별 요소에 액세스하려면 이를 사용합니다. 0에서 4까지의 각 인덱스마다 블록이 필요합니다.
• 텍스트로: 데이터가 부동 형식이므로 이 블록을 사용하여 이러한 부동 값을 표시에 적합한 텍스트 형식으로 변환합니다.
• 텍스트 블록 업데이트 데이터: 이 블록은 UI의 텍스트 블록을 변환된 텍스트 데이터로 채우는 데 필수적입니다.

이러한 블록은 결과 배열에서 데이터를 추출하고, 데이터를 텍스트 형식으로 변환한 다음, UI에서 해당 텍스트 블록을 업데이트합니다.

설정 방법은 다음과 같습니다.

1. 이 블록을 캔버스 위에 놓습니다.
2. Array Element 블록에 엔드포인트에서 받은 배열을 입력합니다(0부터 시작).
3. 배열 내의 적절한 요소를 대상으로 하도록 인덱스를 설정합니다.
4. 배열 요소 의 출력 값을 To Text 블록에 연결합니다.
5. 데이터를 표시할 UI 요소에 대한 텍스트 블록 업데이트 데이터 의 요소 키를 지정합니다.
6. 블록을 순차적으로 연결합니다.

표시하려는 배열의 각 요소에 대해 이 블록 시퀀스를 복제합니다. 배열의 다양한 요소에 해당하도록 각 '배열 요소' 블록의 인덱스를 조정합니다.

이러한 블록도 순서대로 연결되어 있는지 확인하십시오.

최종 결과

이것으로 비즈니스 프로세스 생성이 완료되었습니다.

비즈니스 프로세스를 저장하고 미리보기에서 최종 결과를 확인하세요. 모듈 5 에서 엔드포인트를 게시한 배포 계획에 대해 애플리케이션 미리보기를 실행합니다.

🎉 환상적인 성과를 축하합니다!

비즈니스 논리와 대화형 사용자 인터페이스를 갖춘 완전한 기능의 웹 애플리케이션을 성공적으로 개발했습니다. 모든 것이 의도한 대로 작동한다면 이제 애플리케이션을 게시하고 사용자와 공유하는 다음 마지막 단계를 수행할 준비가 된 것입니다.

하지만 여행은 여기서 끝나지 않습니다. 귀하의 지원서를 더욱 개선할 수 있는 충분한 기회가 있습니다! UI 요소의 모양을 사용자 정의하거나 웹 애플리케이션 논리를 확장하여 시각적 매력과 사용자 경험을 향상시킬 수 있습니다. 예를 들어, 필수 필드를 만들고 각 입력을 수동으로 지우지 않고도 필드를 재설정하는 버튼을 추가할 수 있습니다.