이번 글에서는 실제로 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)는 직접적인 코드의 개발 없이, 주어진 부품들..
1. Logic Elements Outsystems에서 로직은 액션을 통해 정의될 수 있다. 액션은 앱의 서버 또는 클라이언트 측에서 실행되는 로직 흐름을 정의할 수 있는 로직 요소이다. 리액티브 웹 및 모바일 앱에서 로직 요소를 사용하여 사용자 정의 알고리즘을 정의할 수 있다. Outsystems의 일부 로직 요소에는 단일 화면에 특화된 로직을 포함하는 Screen Actions, 장치에서 로직을 실행하는 Client Actions 및 서버에서 로직을 실행하는 Server Actions가 포함된다. 1.1 Client Action Client Action은 클라이언트 측에서 로직을 실행하는 액션이다. 디바이스에서 실행되는 로직을 작성할 때 사용된다. 사용자 인터페이스와 상호 작용하는 로직을 정의하는 데..
1. Walkthrough 1.1 Elements and Properties 트리에서 각 요소를 선택하거나 열면 트리 아래에 속성이 나타나고 해당 속성을 사용하면 각 요소의 동작을 개별적으로 조정하고 사용자가 지정할 수 있다. 1.2 True Change True Change는 애플리케이션 모듈을 검증하는 기능이다. 1.3 Toolbox(Widgets) 왼쪽에는 Toolbox가 있는데 이것은 UI요소로 화면의 구성요소인 위젯이다. 텍스트,이미지, 차트, 지도, 버튼 등 수십개의 위젯으로 구성되며 화면 캔버스로 Drag or Drop 하면 된다. 1.4 View View는 화면 상단에 존재하며 미리보기 모드를 변경하여 다양한 유형의 장치 및 방향에서 화면이 어떻게 보여지는지 확인 가능하다. 1.5 Styl..
1. Application Layers Service Studio를 구성하는 Layers에 대해 알아보겠습니다. 크게 4가지의 Layers가 존재합니다. 1.1 Processes Layer Processes Layer에는 내부에 Processe와 Timers라는 두 가지 주요 요소 그룹이 있다. Processes에는 Decisions, Events 및 Waits가 있는 Business Processes와 Human Task 및 Automated Tasks가 포함된다. Timers는 특정 시간에 발생할 수 있고 매일, 매주 또는 다른 간격으로 발생하도록 다시 예약할 수 있다. 이러한 Timers에는 서로 다른 Priorities가 지정될 수 있으므로 여러 Events가 동시에 실행되어야 하는 경우 일부 E..
1. Outsystems OutSystems는 짧은 기간 내에 앱을 개발할 수 있는 로우코드 플랫폼이다. 앱의 비주얼 개발과 시스템 연동이 원활하며, 드래그 앤 드롭으로 직관적으로 작업을 진행할 수 있다. 웹 앱과 모바일 네이티브 앱을 한 번에 개발할 수도 있다. 1.1 Outsystems 서버 인프라 내부의 애플리케이션을 컴파일, 배포, 관리, 실행 및 모니터링하는 서버 집합 Service Studio와 연결되면 플랫폼 서버에 애플리케이션을 만들고 게시 가능 해당 애플리케이션의 각 버전은 플랫폼 데이터 DB에 저장 애플리케이션 서버는 전통적인 데이터베이스와 외부시스템을 사용하여 생성한 애플리케이션을 실행 Outsyems 서버 자체는 실제로 코드를 생성하고 컴파일한 다음 애플리케이션을 IIS와 같은 실제..
1. Calculator(계산기) 이번 포스팅에서는 이전에 했던 기능을 확장하여 윈도우에서 제공하는 계산기처럼 비슷한 계산기를 만들어보겠습니다. 1.1 UI 먼저 사용자가 값을 누르고 계산을 수행할 UI를 만들어보겠습니다. 새로운 Screen을 만들어주겠습니다. MainFlow의 오른쪽 마우스를 눌러 Add Screen을 누른 후 Empty template을 선택하고 이름은 Calculator라고 지어줍니다. 그리고 왼쪽 도구모음에서 Input을 선택하여 화면에 드래그해준 뒤 크기를 아래와 같이 조정해 줍니다. 추가로 Calculaotr에 Local Variable을 하나 만들어주고 방금 만든 Input에 변수로 설정해 줍니다. 참고로 변수의 name은 Display이고 Data type은 Text입니다..
이번 포스팅에서는 Switch문을 이용하여 덧셈,뺄셈,곱셈,나눗셈을 해보겠습니다. 1. Switch 이전에 했던 Assign은 다 지워주고 아래처럼 Switch를 놓고(왼쪽의 Switch를 드래그) 4개의 Assigin을 끌고와 놓아주고 Label과 Condition을 아래와 같이 변경해줍니다. 그리고 각각의 Assign을 덧셈,뺄셈,곱셈,나눗셈에 맞게 Assignments를 지정해줍니다. 화면의 각각의 Assign 클릭하고 Variable과 value의 값을 논리에 맞게 지정해줍니다. 순서대로 덧셈, 뺄셈, 곱셈, 나눗셈 입니다. 그리고 Switch 아래에 Clear 버튼을 위한 Assgin을 하나 더 추가해줍니다. Property도 다음과 같이 설정합니다. Clear버튼을 클릭할 경우 사용자가 입력한..
이번 포스팅에서는 If, Else를 이용한 덧셈 뺄셈을 해보겠습니다. 시작하기에 앞서 저번포스팅에 세 만들었던 것들을 Container로 묶어줍니다. 그리고 딱 붙어있는 게 보기 안 좋아서 margin을 주었습니다. margin은 properties의 style classes에서 설정가능합니다. 1. If,Else 1.1 뺄셈버튼 Add을 복사 붙여넣기 하고 Rename 하여 Substract 버튼을 만들어줍니다. 1.2 Action 설정 먼저 AddOnClick의 이름을 변경해줍니다. 이름은 PerformAction으로 변경했습니다. 그리고 PerformAction의 오른쪽 마우스를 눌러 Add Input Parameter를 만들고 name은 type으로 해줍니다. 그다음 Add 버튼을 클릭한 후 오른..
1. Acction, Assignmet,expression를 이용한 덧셈기능 구현 이번포스팅에서는 사용자가 두개의 값을 입력하고 add버튼을 클릭하면 덧셈결과를 화면에 출력해주는 것을 구현해보겠습니다. 1.1 Input , Add(Button) 이전 포스팅에서 사용하였던 HelloWorld화면에서 계속 진행하겠습니다. 왼쪽도구모음에서 Input을 끌고와 화면에 놓아줍니다. 우리는 2개의 Input칸을 사용하기때문에 2번끌고와줍니다. 그리고 Button까지 끌고와줍니다. 처음에 input을 놓으면 화면이 아래처럼 나오는데 우리는 한라인에 2개의 Input칸과 Add 버튼까지 구현할거기 때문에 Input의 크기를 줄여줍시다. 그 전에 먼저 아래 3개를 하나의 컨테이너로 묶어줍니다.(같은 라인에 정리하기위함)..
1. Hello World 출력 1.1 애플리케이션 및 모듈생성 먼저 새로운 application(Phone App)을 만들고 Hello라는 모듈을 만들어줍니다. 1.2 화면생성 Interface 탭의 MainFlow의 오른쪽탭을 눌러 Add Screen을 클릭하여 Empty Screen을 생성해 줍니다. Screen의 이름은 Hello로 World로 해주었습니다. 1.3 텍스트 입력 MainFlow 탭을 더블클릭한후 좌측도구모음에서 Text를 끌어와 화면(content)에 놓아줍니다. 그리고 오른쪽아래 Text칸에 Hello World라는 문장을 입력한 후 화면 상단에 Publish를 클릭한후 open in browser를 클릭해 줍니다. 1.3 실행화면 실제로 브라우저에서 확인해보면 Hello Wor..
할 일 기능추가 1. 화면 목록에서 첫 번째 할 일의 제목을 오른쪽 마우스 버튼으로 클릭한 다음 Link to -> New Screen을 선택합니다. Empty 빈 템플릿을 선택하고 TaskDetail이라는 스크린 이름을 지정한 후, Create Screen을 클릭합니다. 2. 그 다음 왼쪽 도구모음에서 form을 끌어 화면에 놓는다. 3. Data탭을 클릭한후 Task를 방금 끌여들인 Form 화면에 끌어서 놓아준다. 그럼 아래와 같은 화면이 나타난다. Save 로직 구성 1. 먼저 세이브 버튼을 두번클릭하면 아래와 같은 화면이 나오게 됩니다. 2. 다음 로직탭을 클릭하여 Server Action의 오른쪽을 클릭하여 Add Server Action을 누르고 TaskCreateOrUpdate를 만들어줍니..
Setting 1. 먼저 New Application을 클릭합니다. 2. 다음으로 From scratch을 누르고 우측하단 next 버튼을 눌러줍니다. 3. phone app을 만들 거기 때문에 맨 오른쪽의 Phone App를 누르고 Next버튼을 클릭합니다. 4. 그러면 앱의 Name(이름)과 Description(간단한 설명)을 적을 수 있습니다. 저는 name을 Todolist로 해주겠습니다. 마지막으로 오른쪽아래에 Create App 버튼을 클릭해 줍니다. 5. 모듈의 이름과 모듈의 타입을 선택할 수 있는 화면이 나오는데 수정하지 않고 바로 Create Module 버튼을 클릭합니다. 6. 여기 과정까지 하고 나면 실제로 개발을 할 수 있는 화면이 나오게 됩니다. 여기서 첫 번째로 해야 할 일은 ..
