이번 글에서는 실제로 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)는 직접적인 코드의 개발 없이, 주어진 부품들..
이번에는 dependency기능을 이용하여 Entity를 연동해보고 GetUserId()를 사용하여 각 유저의 ID값을 넘겨주겠습니다.(넘겨주는 이유는 각각 테이블마다 주문하기 위해) 먼저 구현한 기능들입니다 서로다른앱에서 Dependency하여 Entity연동 getUserId()함수를 통해 테이블 번호 매핑 1. 서로다른앱에서 Dependency하여 Entity연동 먼저 사장님 어플에서 Manage Dependencies를 이용해 Kiosk어플의 주문 목록이 담기는 장바구니 엔터티를 Dependencies해주었습니다. 아래처럼 해당 어플을 검색하고 디펜던시할 엔터티를 선택해주면됩니다. 디펜던시를 해주면 해당 엔터티의 값들을 사용할 수 있습니다. 따라서 해당 엔터티의 데이터들을 사장님어플에서 보이게 해..
동기 프로젝트의 목표 중 하나는사용자가 메뉴담고 주문을 하였을 때 사장(가게주인)님이 주문을 확인할 수 있도록 하는것 이었습니다. 해당 기능을 구현하기 위해 먼저 사용자가 선택한 데이터들을 DataBase의 Enttity에 저장하도록 해보겠습니다. 처음생각한 방식 처음에는 아래의 결제 화면에서 결제버튼(카드결제 or 현금결제)를 클릭하였을때의 액션에서 과정들이 이루어졌습니다. payBlock의 Order에 현재 담긴 메뉴들의 정보가 LIst형태로 담겨있습니다. 그리고 해당 데이터탭에서 Order의 Entity를 보면 자동으로 생성된 액션중 CreatOrUpdateOrder를 이용하여 선택한 메뉴의 정보를 업데이트 해주려고했습니다. 그리고 Server Action에서 Actino을 하나 만들어 주고 로직에..
오늘 프로젝트를 진행하면서 팀원과 함께 많은 부분을 수정했습니다. 수정한 내용을 목록으로 보여드리겠습니다. 선택한 필수옵션 체크해제시 부모블록화면에서 값 안보이게 하기 필수옵션 선택(체크) 안 하고 담기버튼 눌렀을 경우 메시지(필수옵션을 선택해야합니다)출력 필수옵션이 없는 메뉴에서 담기버튼 눌렀을경우 위의 해결한 과정에서 메시지(필수옵션을 선택해야합니다)출력 안 하게하기 개수를 1미만으로 시도했을때 메시지(1개이상선택해야합니다)출력 차례대로 어떻게 해결하였는지 살펴보겠습니다. 첫번째 문제 : 선택한 필수옵션 체크해제시 부모블록화면에서 값 안보이게 하기. 위의 문제는 필수옵션 체크 액션에서 previousOptionName이라는 입력매개변수를 만들어 이전에 선택한 필수옵션을 담아주고 현재선택한 옵션과 같으..
이번에는 메인화면에서 오른쪽 장바구니 부분의 메뉴를 표시하는데 세부옵션에서 선택한옵션들까지 표시하는 기능을 구현해보겠습니다. 사진상으로는 표시한 부분에 메뉴와 선택한 옵션이 나옵니다. 먼저 내가 선택한 메뉴는 다음과 같이 나옵니다. 옵션이 표시되지가 않습니다. 필수옵션 먼저 필수옵션먼저 표시해보도록 하겠습니다. 필수옵션은 1가지값만 표시하면되어 간단하게 표시할 수 있습니다. 먼저 이전시간에 MustOptionLabel이라는 곳에 필수옵션에서 선택한 값을 담아 화면에 표시해줬습니다. (https://myeongsu0257.tistory.com/111) outsystems - 5.5 필수옵션 문제점 아래의 사진처럼 상세옵션스크린을 보면 필수옵션이라는 항목이 있습니다. 필수옵션 항목은 하나의 옵션만 선택 가능..
문제점 아래의 사진처럼 상세옵션스크린을 보면 필수옵션이라는 항목이 있습니다. 필수옵션 항목은 하나의 옵션만 선택 가능해야합니다. 저번에 이 필수옵션을 https://myeongsu0257.tistory.com/106 outsystems - 5.2 해당메뉴의 필수옵션(radio widget) 위는 저번시간까지 구현한 상세옵션화면이다. 선택사항옵션만 구현한 상태이다(선택사항옵션은 체크박스로구현). 이번에는 필수옵션을 구현해보겠다. 필수옵션은 해당메뉴를 클릭하였을때 필 myeongsu0257.tistory.com 위의 포스팅에서처럼 List에 Radio group을 구성하는 방식으로 진행했었는데 위의 방식은 필수옵션의 여러가지 항목을 선택하는 오류가 발생했습니다. 구성을 보면 List - > Radio gro..
5.25일에 같이 프로젝트를 도와주시는 회사를 방문했습니다. 현재 제가 있는 곳에서 회사까지 거리가 어느정도 있어서 왕복 시간은 오래소모되었지만 회사에서 많은 것들을 배울 수 있는 뜻깊은 기회였습니다. 회사에 가기전에 직접 대면으로 질문을 하고 답을 얻고 싶어 몇가지의 질문을 준비했었습니다. 제가 준비한 질문은 아래와 같습니다. 첫번째는, 필수선택인 radio button을 어떠한 방식으로 구현하면 좋을까 이였고 두번째는, 상세옵션화면에서의 합계가격과 상세옵션화면에서 선택한 데이터를 메인화면의 주문서섹션에 표시하기 위한 데이터 전달이었습니다. 먼저 첫번째에 대한 부분의 해결방법은 아래와 같습니다. 기존에는 list에 radio group을 표시하고 거기다가 radio button을 표시했었는데 이렇게하게..
아래는 저번시간까지 구현한 상세옵션화면이다. 이번에는 합계(총가격)과 선택옵션 체크, 체크해제에 따른 값이 달리지는 것들을 구현해보겠다. 먼저 Block에 InputParameter(매개변수)를 하나 만들어주겠다. 이름은 TotalPrice로하였다. 이 변수에 해당메뉴의 기본가격이 담겨야하는데
이번에는 선택한 옵션을 오른쪽부분에 표시하도록 해보겠습니다. 대략적인 틀은 다음과 같습니다. List로 2개의 구역을 만들어 한개의 List에는 선택옵션을 표시, 다른하나의 List에는 필수옵션을 표시입니다. 아래와 같이 컨테이너와 List를 만들어줍니다. 그리고 List에 If 위젯을 넣어줍니다. If 위젯의 조건(Condition)에 다음과 같이 작성해줍니다. GetProductOptionsByProductId.List.Current.ProductOption.Check = True 만약 각각의 선택사항옵션의 Check 속성의 값이 True라면 해당 값을 표시해주도록 하였습니다. 해당옵션의 이름과 가격도 마찬가지로 True안에 넣어주었습니다. 첫번째 Exrpession의 값입니다. GetProductO..
위는 저번시간까지 구현한 상세옵션화면이다. 선택사항옵션만 구현한 상태이다(선택사항옵션은 체크박스로구현). 이번에는 필수옵션을 구현해보겠다. 필수옵션은 해당메뉴를 클릭하였을때 필수록 클릭해야하는 옵션이다. 예를 들면, 세트를 주문하였을때 같이 나오는 면을 선택해야한다. 면의 종류에는 우동,소바가 있다. 둘 중 하나를 필수로 선택해야 함으로 라디오위젯을 사용하였다. 먼저 필수옵션 Entity를 만들어주었다. 원래 선택사항옵션엔터티(ProductOption)에 함께 만들려고했는데 List로 해당 엔터티의 값들을 표현함으로 하나 더 만들어주었다. 그리고 관계는 다음과 같이 해주었다. 아래는 만든 엔터티이다. 데이터는 임시적으로 넣어주었다. 인터페이스 돌아와서 해당 엔터티를 불러줬다. 그리고 Filter를 다음과..
메뉴를 클릭하였을때 해당메뉴의 상세옵션데이터를 보여주는 것을 구현해야 한다. 아래는 상세옵션의 Entity이다. 메뉴(Product)와 관계를 맺어주었다. Interface로 넘어와서 List위젯으로 상세옵션데이터를 보여주었다. source에 상세옵션 Entity를 설정해준다. 그리고 상세옵션메뉴 Entity를 Block 으로 불러와서 Filter를 설정해준다. Filter는 아래와 같다. 먼저 상세옵션의 ProductId를 In1과 같게해주었다. In1은 저번포스팅에서 나왔는데 메인화면에서 해당 메뉴를 눌렀을때의 ID가 들어있다. 결과를 확인해보겠다. 각각의 상세옵션이 잘 나옴을 알 수 있다.
아래의 메뉴화면을 구성한 후 메뉴를 클릭하였을 때 메뉴의 상세옵션이 있는 화면으로 넘어가야한다. 아래는 메뉴의 상세옵션화면이다. 즉 메인화면의 메뉴의 Id를 해당화면으로 전달하여 해당메뉴의 상세옵션을 보여줘야한다. 어떻게 전달하면 좋을까 고민을 많이했다. 바로 스크린화면으로 전달하는 과정까지는 쉬운데 스크린안에 layout이 또다른 Block으로 구성되어 있어 Block까지 값을 전달해야 함이 복잡했다. 그래서 일단 메뉴를 클릭했을때 Block이 아닌 스크린으로 메뉴의 Id를 전달하고자 하였다. 메인화면은 MenuScreen2이고 상세화면은 ex이다. 아래는 ex스크린화면의 입력매개변수와 Aggregate이다. 입력매개변수하나와 Aggregate를 불러와줬다. 그리고 메인화면에서 listitem을 더블클..
이번포스팅에서는 레이아웃화면을 구성해보겠습니다. 일반 UI Flows에서 Layout을 더블클릭합니다. 아래의 사진처럼 Container의 Width를 8col로 설정하고 Margin에서 왼쪽 마진의 값을 0px로 설정합니다. 그럼 아래와 같은 사진과 같이 레이아웃이 구성됩니다. 그다음 새로운 Screen을 하나 만들어주겠습니다. 아래의 스크린에서 왼쪽 첫번째 placeholder부분에 전체 버튼을 만들고 아래의 Placeholder에는 메뉴카테고리에 해당하는 버튼을 만들어주겠습니다. 그 전에 아래의 사진처럼 각각의 Placeholder에서 Interaction\Sidebar를 delete해주겠습니다. 그리고 아래의 사진처럼 위젯을 설정해줍니다. 이제 list의 source를 설정해주겠습니다.
이번포스팅에서 메인화면을 설계해보겠습니다. 같이 협력하여 프로젝트를 진행하는 회사의 멘토분께 도움을 받아 스크롤화면을 구현할 수 있게되어 원래 ui버전으로 진행하기로 했습니다. 위의 화면을 구현하려면 첫번째로 왼쪽에 버튼을 클릭하였을 경우 가운데의 메뉴들이 업데이트 되어야 합니다. 이를 위해 먼저 버튼을 클릭할경우 메뉴를 보여주는 화면을 설계해보겠습니다. Data 설계를 위해 첫번째로 데이터를 임시로 설계해보겠습니다. Entity는 2개를 만들었습니다. 메뉴들이 담기는 Menu Entity, 메뉴의 카테고리가 있는 MenuCategory Entity가 있습니다. 속성으로는 Name 한개를 추가해주었습니다. 다음으로는 Menu입니다. 속성으로는 Name, Price를 생성해주었습니다. 다음으로 Menu E..
