이번 글에서는 실제로 outsystesm플랫폼 안에서 키오스크를 어떻게 구현했는지 설명드리겠습니다. 진행을 하면서 어려웠던 부분이나 이슈들을 해결한 글들은 제가 이전글(프로젝트)에 포스팅했습니다. 참고해주세요. 먼저 시현영상보여드리겠습니다. https://www.youtube.com/watch?v=SUS0NIazBq4 1. 인터페이스 먼저 인터페이스입니다. 실제 인터페이스는 스크린2개 블록 4개로 구성했습니다. First Screen이 앱을 처음 실행했을때 화면이고 MainScreen이 실제로 주문을 진행하는 화면입니다. 1.1 초기화면 초기화면의 구성은 크게 2개의 컨테이너로 구성했습니다. 위의 컨테이너에는 매장을 소개하는 글과 이미지로 구성을 했습니다. 이를 위해 Adaptive/Columns2 위젯..
이글은 프로젝트를 소개하는 글입니다. 더 자세한 프로젝트 설명을 보고싶으시면 다음 링크를 참고해주세요!https://myeongsu0257.tistory.com/142 outsystems - kiosk(interface, logic, data) ㄱ myeongsu0257.tistory.com 주제 로우코드의 기반의 애플리케이션 구축 및 개선 개발자 최명수(전북대학교 컴퓨터 인공지능학부 4학년) 이현지(전북대학교 컴퓨터인공지능학부 4학년) 협업도구 Coda Slack App Langugae & Environment : Outsystems Service Studio 11 1. 추진배경 주제 : 로우코드의 기반의 애플리케이션 구축 및 개선 로우코드(Low-code)는 직접적인 코드의 개발 없이, 주어진 부품들..
동기 프로젝트의 목표 중 하나는사용자가 메뉴담고 주문을 하였을 때 사장(가게주인)님이 주문을 확인할 수 있도록 하는것 이었습니다. 해당 기능을 구현하기 위해 먼저 사용자가 선택한 데이터들을 DataBase의 Enttity에 저장하도록 해보겠습니다. 처음생각한 방식 처음에는 아래의 결제 화면에서 결제버튼(카드결제 or 현금결제)를 클릭하였을때의 액션에서 과정들이 이루어졌습니다. payBlock의 Order에 현재 담긴 메뉴들의 정보가 LIst형태로 담겨있습니다. 그리고 해당 데이터탭에서 Order의 Entity를 보면 자동으로 생성된 액션중 CreatOrUpdateOrder를 이용하여 선택한 메뉴의 정보를 업데이트 해주려고했습니다. 그리고 Server Action에서 Actino을 하나 만들어 주고 로직에..
오늘 프로젝트를 진행하면서 팀원과 함께 많은 부분을 수정했습니다. 수정한 내용을 목록으로 보여드리겠습니다. 선택한 필수옵션 체크해제시 부모블록화면에서 값 안보이게 하기 필수옵션 선택(체크) 안 하고 담기버튼 눌렀을 경우 메시지(필수옵션을 선택해야합니다)출력 필수옵션이 없는 메뉴에서 담기버튼 눌렀을경우 위의 해결한 과정에서 메시지(필수옵션을 선택해야합니다)출력 안 하게하기 개수를 1미만으로 시도했을때 메시지(1개이상선택해야합니다)출력 차례대로 어떻게 해결하였는지 살펴보겠습니다. 첫번째 문제 : 선택한 필수옵션 체크해제시 부모블록화면에서 값 안보이게 하기. 위의 문제는 필수옵션 체크 액션에서 previousOptionName이라는 입력매개변수를 만들어 이전에 선택한 필수옵션을 담아주고 현재선택한 옵션과 같으..
Aggregate는 데이터베이스에서 데이터를 가져오는 쉬운 시각적 방법을 제공하지만 때때로 Aggregate가 처리할 수 없는 더 복잡한 쿼리가 필요할 수 있습니다. 따라서 SQL 도구를 사용하여 상당히 복잡한 SQL문을 작성할 수도 있습니다. SQL Tool SQL 도구는 서버 작업 및 화면 데이터 작업과 같은 서버측 흐름에서 사용할 수 있습니다. 입력 및 출력은 미리 정의해야 하며 상단의 시각적 편집기를 사용하여 수행할 수 있습니다. 입력 및 출력은 미리 정의해야 하며 상단의 시각적 편집기를 사용하여 수행할 수 있습니다. SQL 도구 내부에서 SQL문을 작성할 수 있습니다. SQL 도구가 블랙박스와 같다는 것을 아는 것이 중요합니다. 이는 외부 범위에 직접 액세스할 수 없음을 의미합니다. 따라서 외부..
이번 포스팅에서는 Block 내에서 Event를 트리거한 다음 부모에서 처리하는 방법을 보여드리겠습니다 . 먼저 이 앱에는 다음과 같이 구성되어있습니다. 먼저 블록을 보겠습니다. 블록에는 현재 선택된 요일을 나타내는 CurrentWeekDay라는 입력매개변수가 존재합니다. 그리고 블록 내부에 있는 다섯개의 버튼 중 하나를 클릭할 때마다 SelectWeekDay 작업이 실행됩니다. 클라이언트 작업 내에서 현재 요일(CurrentWeekDay)을 할당으로 선택한요일(NewWeekDay)로 변경하기만 하면 됩니다. 위의 앱을 브라우저를 통해 실행시켜보면 아래의 텍스트에서 볼 수 있듯이 정보는 업데이트 되지 않습니다. 블록 안에 선택한 요일이 변경될때마다 트리거될 이벤트를 추가해 보겠습니다. 이벤트는 입력 매개..
Events Events(이벤트)는 특정 이벤트가 발생했음을 알려 블록이 부모와 상호작용할 수 있도록 하는 요소입니다. 따라서 블록이 부모와 상호작용하려면 이벤트를 사용해야 합니다. 기본적으로 블록은 이벤트를 트리거한 다음 부모가 이를 처리하고 그에 따라 행동합니다. 이는 이벤트가 블록 내부에 정의됨을 의미합니다. 이벤트의 입력매개변수는 필수가 아니지만 블록 범위에서 부모의 외부범위로 데이터를 전달할 수 있도록 합니다. 트리거 : 트리거(trigger)는 특정 이벤트가 발생할 때 자동으로 실행되는 작업을 말합니다.(이벤트가 발생하면 트리거는 이를 감지하고 미리 정의된 작업을 수행) 왜 부모와 상호 작용 해야할까? 블록과 부모는 다른 범위를 가지고 있다. 따라서 사용자가 블록내부의 요소와 상호작용하는 경우..
Blocks Blocks(블록)은 기본적으로 재사용 가능한 코드 조각입니다. 블록 안에 다른 위젯, 패턴, 블록을 배치할 수 있어 풍부하고 복잡한 사용자 인터페이스를 구성할 수 있습니다. Blocks(블록)은 사용자 인터페이스 요소이며 화면처럼 디자인됩니다. 따라서 다른 위젯과 심지어 다른 블록도 드래그하여 블록 안에 삽입할 수 있습니다.스크린과 마찬가지로 블록도 입력 매개변수, 로컬 변수 및 스크린액션을 가질 수 있습니다. 또한 블록에는 자리 표시자(PlaceHolders) 및 이벤트(Event)와 같은 일부 독점 요소가 있을 수 있습니다. 또한 화면과 마찬가지로 블록에는 출력 매개변수가 없습니다. 블록은 인터페이스 요소이므로 화면 및 다른 블록 내부에 배치할 수 있습니다. Placeholder 블록을..
outsystems에서는 자체적으로 데이터베이스가 존재한다. 다음은 여러 엔티티가 있는 데이터 모델의 예이다. Customer이라는 Entity를 보면 이름(Name), 이메일(Email), 주소(Address)와 같은 간단한 속성들을 가지고 있다. 그리고 설명,기한 및 배송날짜가 있는 Order Entity도 존재한다. 그리고 Customer과 Order사이에 선이 존재하는데 이 선은 한명의 고객이 여러개의 주문을 할 수 있음을 의미한다. (관계형데이터베이스의 기호와 비슷) 식별자(Primary Key) Outsystems에서 데이터 간의 관계 생성은 대부분 엔티티 식별자 속성을 기반으로 한다. 즉 관계를 허용하려면 엔티티에 식별자가 있어야 한다. Entity Identifier는 Entity가 생성될..
이 모듈에서는 Customer 엔터티를 정의했습니다. 여기에는 부트스트랩된 일부 데이터가 포함되어 있습니다. Fetch Data 논리 탭으로 전환하고 GetCustomers 서버 작업 내부에 집계를 생성하겠습니다. 왼쪽 도구 상자에서 Aggregate를 끌어서 작업 흐름에 놓습니다. 방금 끌어놓은 Aggreagate를 더블클릭해봅니다. 더블 클릭해보면 비어 있음을 알 수 있습니다. 엔터티를 추가해보겠습니다. 캔버스를 클릭한 다음 엔터티를 선택하거나 데이터 탭에서 엔터티를 끌어서 수행할 수 있습니다. 드래그 앤 드롭 방식을 사용해보겠습니다. 데이터 탭으로 전환하고 고객 엔터티를 찾아 캔버스에 끌어 놓습니다. Customer 엔터티가 집계에 소스로 추가되었습니다. Sources 탭에서 확인할 수 있습니다. ..
Aggregates란? 대부분의 애플리케이션은 데이터베이스에서 데이터를 가져와야 한다. Aggregate를 사용하면 해당 유형의 쿼리를 시각적인 방식으로 만들 수 있다. Aggregate는 데이터를 검색, 필터링, 정렬, 집계 등 다양한 방식으로 처리하기 위한 데이터 집합 관리 기능 Aggregate는 SQL의 SELECT문과 유사한 방식으로 작동한다. 즉, 데이터베이스 테이블에서 데이터를 검색하고 필터링하고 집계할 수 있다. Aggregate를 사용하여 데이터를 가져오면 에플레키에션에서 사용할 수 있는 개체 컬렉션으로 반환된다. SUM, AVG, MIN, MAX등과 같은 집계함수를 사용하여 숫파질드의 합계,평균,최소값,최대값 등을 계산 가능. 또한 조인, 필터링, 정렬, 그룹화 등과 같은 다양한 작업을..
이전 포스팅에서 보면 알 수 있는데 원래 아래처럼 카테고리섹션(왼쪽부분), 주문섹션(오른쪽부분)은 화면에 고정하고 가운데부분(메뉴)를 스크롤하는 화면으로 구성했었는데 실제 구현을 하다보니 왼쪽,오른쪽화면이 고정된채로 가운데섹션을 스크롤 하는 게 쉽지 않았다. 해결해보려고 노력을 해봤는데 해결되지 않아 새로운 ui를 구성해봤다. 새로 구성한 메인화면이다. 위아래 2등분으로 화면을 구성했다. 위섹션에서는 카테고리 영역이다. 즉 원하는 메뉴의 카테고리를 클릭하면 해당 메뉴가 쭉 나와있는 화면으로 이동한다. 아래섹션에서는 주문 영역이다. 원하는 음식을 담으면 주문목록아래에 내가 선택한 음식이 나오도록 하였다. 아래는 카테고리에서 음식종류를 클릭하였을때 보이는 화면입니다. 해당하는 음식들을 보여주는데 왼쪽에는 음..
outsystems를 이용해 kiosk를 만들기로 하였습니다. 일단 앱의 ui는 다음과 같습니다. 메인화면 먼저 메인화면입니다. 가장 먼저 사용자에게 보여지는 화면입니다. 화면을 크게 3등분 하였습니다. 왼쪽과 오른쪽은 고정된 화면이고 가운데화면은 스크롤화면으로 만들계획입니다. 왼쪽섹션은 카테고리 버튼들인데 해당 버튼을 누르면 가운데 스크롤화면의 내용들이 변경됩니다. 오른쪽섹션은 장바구니와 같습니다. 사용자가 선택한 음식들이 오른쪽에 추가됩니다. 아래의 주문하기 버튼을 누르면 결제화면으로 넘어갑니다. 상세화면 상세화면입니다. 메뉴를 클릭하였을때 보여지는 화면입니다. 여기서도 크게 3등분한 화면으로 구성하였습니다. 가운데 선택창섹션에서는 콤보박스로 추가옵션들을 구성하여 체크를하면 오른쪽 선택된 옵션아래에 ..
이 모듈에서는 이미 생성된 LoopScreen이라는 스크린이 있고 안에 하나의 Screen Action이 있습니다. 화면에는 숫자 입력 매개변수와 연결된 값 3과 함께 Power Of Two Screen Action을 호출하는 버튼이 있습니다. 구현 2의 거듭제곱은 주어진 값만큼 숫자 2를 곱하는 수학 함수입니다. 따라서 3이면 2^3 즉 8(2*2*2)이 나와야합니다. 이 수학 함수를 구현하기 위해 루프를 사용합니다. Ad-hoc 루프는 Ifs를 사용하여 구현할 수 있습니다. Ad-hoc 루프란? outsystems에서 Ad-hoc 루프는 반복 횟수를 미리 알 수 없는 상황에서 사용하는 반복문입니다. Ad-hoc는 즉석에서, 임시적으로 라는 뜻을 가지고 있습니다. IFs란? OutSystems에서 "i..
이 모듈에서는 이미 Screen을 만들고 그 안에 하나의 Screen Action을 만들었습니다. 이제 화면에 버튼을 추가하여 화면 작업을 호출해 보겠습니다. 숫자가 홀수인지 짝수인지 확인하기 위해 Screen Action을 사용합니다. 그리고 이를 위해 액션에 입력매개변수를 추가하여 숫자를 전달할 수 있습니다. 이제 Screen Action에 입력 매개변수가 있으므로 버튼에 값을 설정해야 합니다. 100을 설정해줍니다. 이제 화면 동작 로직을 구현할 차례입니다. If위젯을 사용하여 숫자가 홀수인지 짝수인지 확인합니다. 그리고 If를 두번 클릭하여 if조건의 표현식 편집기를 열어 조건을 입력해줍니다. 조건에는 숫자가 홀수인지 확인하기 위해 2로 나눈 나머지가 0이 아닌지 확인할 수 있습니다. Mod(Nu..
