이번 글에서는 실제로 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)는 직접적인 코드의 개발 없이, 주어진 부품들..
이번 포스팅에서는 Block 내에서 Event를 트리거한 다음 부모에서 처리하는 방법을 보여드리겠습니다 . 먼저 이 앱에는 다음과 같이 구성되어있습니다. 먼저 블록을 보겠습니다. 블록에는 현재 선택된 요일을 나타내는 CurrentWeekDay라는 입력매개변수가 존재합니다. 그리고 블록 내부에 있는 다섯개의 버튼 중 하나를 클릭할 때마다 SelectWeekDay 작업이 실행됩니다. 클라이언트 작업 내에서 현재 요일(CurrentWeekDay)을 할당으로 선택한요일(NewWeekDay)로 변경하기만 하면 됩니다. 위의 앱을 브라우저를 통해 실행시켜보면 아래의 텍스트에서 볼 수 있듯이 정보는 업데이트 되지 않습니다. 블록 안에 선택한 요일이 변경될때마다 트리거될 이벤트를 추가해 보겠습니다. 이벤트는 입력 매개..
Events Events(이벤트)는 특정 이벤트가 발생했음을 알려 블록이 부모와 상호작용할 수 있도록 하는 요소입니다. 따라서 블록이 부모와 상호작용하려면 이벤트를 사용해야 합니다. 기본적으로 블록은 이벤트를 트리거한 다음 부모가 이를 처리하고 그에 따라 행동합니다. 이는 이벤트가 블록 내부에 정의됨을 의미합니다. 이벤트의 입력매개변수는 필수가 아니지만 블록 범위에서 부모의 외부범위로 데이터를 전달할 수 있도록 합니다. 트리거 : 트리거(trigger)는 특정 이벤트가 발생할 때 자동으로 실행되는 작업을 말합니다.(이벤트가 발생하면 트리거는 이를 감지하고 미리 정의된 작업을 수행) 왜 부모와 상호 작용 해야할까? 블록과 부모는 다른 범위를 가지고 있다. 따라서 사용자가 블록내부의 요소와 상호작용하는 경우..
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..
Service Studio에는 주문을 생성하거나 편집할 수 있는 화면이 있는 모듈이 이미 열려 있습니다. (모듈 참조 : https://www.outsystems.com/ko-kr/training/Learn_Lesson_View.aspx?LessonId=2031&LessonName=demo-how-to-create-and-use-actions&LearningPathId=1) Error Handler | OutSystems www.outsystems.com 이때 Screen의 UI는 정의되어 있지만 Database에 순서를 저장하는 로직은 정의되어 있지 않습니다. 화면에는 이미 생성된 저장 버튼이 있습니다. 버튼을 클릭하면 지금까지 주문한 화면으로 이동합니다. 그러나 주문을 생성하거나 업데이트하는 로직을 ..
변수 변수는 데이터를 저장할 수 있는 메모리의 위치입니다. Outsystems에서 변수는 입력 매개변수, 로컬 변수 , 출력매개변수가 있습니다. 아래 사진을 보시면 BookRoom 이라는 서버액션에서 3개의 입력매개변수가 있습니다. 체크인 날짜, 체크아웃날짜, 게스트 수와 같은 여러 입력 매개변수가 있습니다. 그리고 객실번호, 객실 가격과 같은 출력매개변수도 있습니다. 또한 특정 방에 대한 정보를 보유할 지역 변수도 있습니다. 이러한 모든 변수는 BookRoom 작업 범위 내에서 상호 작용하고 동작합니다. 자세히 하나하나 살펴보겠습니다. 입력 매개변수(Input Parameter) 입력 매개변수를 사용하면 외부 범위에서 상위 범위로 값을 전달할 수 있습니다. 각 입력 매개변수에는 몇가지 속성이 있으며 이..
OutSystems에서 정의 할 수 있는 세 가지 유형의 로직이 있습니다. Screen Actions Screen Actions은 화면 내부에서 정의되며 일반적으로 해당 화면의 일부인 위젯에 바인딩됩니다. 예를 들어 버튼을 누를때마다 화면 액션이 실행될 수 있습니다. 화면 내부에서 정의되기 때문에 해당 범위에는 해당 화면 수준에서 정의된 내용이 포함됩니다. 따라서 화면 위젯 위에도 정의된 집계, 화면 입력 매개변수 및 로컬 변수도 포함됩니다. Screen Actions의 범위는 정의한 화면으로 제한됩니다. Client Actions Client Actions은 Screen Actions와 다소 유사합니다. 그러나 클라이언트 작업은 모듈 전체에서 사용되며 단일 화면 내에서 구체적으로 바인딩되지 않습니다. ..
Container Widget을 사용하여 화면과 그 내용에 일부 스타일과 서식을 조정하고 추가하는 방법을 보여드리겠습니다. 각각 소설 미디어 아이콘을 표시하는 세 개의 섹션을 화면에 만들 것입니다. 열려 있는 화면에 Container를 추가하는 것으로 시작하겠습니다. 컨테이너 컨테이너는 기본적으로 화면의 HTML Div이며 너비를 쉽게 사용자 지정할 수 있습니다.(본인은 4col로 크기를 줄여줌) Style classes 속성을 사용하여 위젯에 CSS스타일을 적용할 수 있습니다. 카드 스타일 클래스는 흰색 배경과 콘텐츠 주위의 패딩을 추가하는 내장 CSS 클래스입니다. 컨테이너에 아이콘을 추가해보겠습니다. 도구상자에서 icon을 클릭한 후 컨테이너 안으로 드래그해줍니다. 그리고 기존 컨테이너의 오른쪽에 ..
