outsystems - 1.kiosk만들기

outsystems를 이용해 kiosk를 만들기로 하였습니다. 

일단 앱의 ui는 다음과 같습니다.

 

메인화면

먼저 메인화면입니다. 가장 먼저 사용자에게 보여지는 화면입니다. 

화면을 크게 3등분 하였습니다.

왼쪽과 오른쪽은 고정된 화면이고 가운데화면은 스크롤화면으로 만들계획입니다.

왼쪽섹션은 카테고리 버튼들인데 해당 버튼을 누르면 가운데 스크롤화면의 내용들이 변경됩니다.

오른쪽섹션은 장바구니와 같습니다. 사용자가 선택한 음식들이 오른쪽에 추가됩니다. 아래의 주문하기 버튼을 누르면 결제화면으로 넘어갑니다.

 

 

상세화면

상세화면입니다.

메뉴를 클릭하였을때 보여지는 화면입니다. 

여기서도 크게 3등분한 화면으로 구성하였습니다. 

가운데 선택창섹션에서는 콤보박스로 추가옵션들을 구성하여 체크를하면 오른쪽 선택된 옵션아래에 표시되도록 하였습니다. 

해당 옵션을 다 선택 후 오른쪽아래 담기 버튼을 누르면 메인화면의 주문서 아래에 해당 음식이 담아지게 됩니다. 

 

결제화면

마지막으로 결제화면입니다.

결제화면은 다음과 같이 구성되며 합계된 금액이 보여지고

결제를 할 수단을 선택하게 됩니다. 

 

마무리

대락적인 ui는 만들었고 이제 본격적으로 ui를 만들어보겠습니다. 

그리고 지금 메인화면을 만들고 있는데 가운데 스크롤화면만드는게 까다롭네요..

잘하면 메인화면의 구성이 바뀔수도 있을거 같습니다. 

 

변경을 한다면 다음과 같이 변경할거 같습니다.

먼저 메인화면은 음식종류카테고리버튼들, 주문서만 존재 2등분(위아래2개색션)
그리고 해당 카테고리 버튼 클릭하면 스크롤화면으로 해당메뉴들을  다 보여주고 음식 선택하면 세부선택화면으로 넘어가서 음식담기 까지 이렇게 변경할 수 있을거 같습니다.