아웃시스템즈 체험 및 학습 할 수 있는 자료

아래의 과정을 통해서 아웃시스템즈의 화면 생성 방법 및 설정에 이해에 대해서 학습 가능합니다.

아웃시스템즈 체험 및

학습 할 수 있는 자료

아래의 과정을 통해서 아웃시스템즈의 화면 생성 방법 및 설정에 이해에 대해서 학습 가능합니다.

예제 -  직원 디렉토리 신청서

이 과정에서는 몇 단계만 거치면 조직의 직원을 위한 디렉터리를 신속하게 구축할 수 있습니다. 

또한 준비한 일부 사용자 스토리를 기반으로 새로운 기능으로 앱을 확장할 수 있습니다.

예제 -  직원 디렉토리 신청서

이 과정에서는 몇 단계만 거치면 조직의 직원을 위한 디렉터리를 신속하게 구축할 수 있습니다. 

또한 준비한 일부 사용자 스토리를 기반으로 새로운 기능으로 앱을 확장할 수 있습니다.

03. 대시보드 화면 만들기

개요

이 자습서에서는 이번에는 새 화면을 생성하여 Employee Directory 애플리케이션을 계속 확장합니다. 이 새로운 화면에는 세 가지 중요한 기능이 있습니다.

  • 화면은 애플리케이션의 기본 화면이어야 합니다. 즉, 이 화면이 홈 화면이 됩니다.

  • 화면에는 회사의 마지막 5명의 신규 직원이 표시되어야 합니다.

  • 화면에는 이번 달의 모든 직원 생일이 표시되어야 합니다.

이러한 요구 사항을 처음부터 구현하고 그 과정에서 OutSystems의 몇 가지 중요한 측면을 이해합니다.


따라해보세요!

이 시점에서 Employee Directory 앱에는 두 개의 화면이 있어야 합니다.

  • 필터 및 페이지 매김이 있는 직원 목록이 있는 직원 목록 . 프로젝트의 현재 기본 화면입니다.

  • 직원 사진을 포함한 직원 데이터를 편집할 수 있는 직원 편집 화면 .

이 자습서에서는 두 개의 간단한 테이블이 있는 Dashboard 라는 새 화면을 만듭니다 .

  • 채용 날짜 필드를 기준으로 회사에 마지막으로 입사한 직원 5명이 포함된 테이블입니다. 테이블에는 직원의 이름, 이메일, 전화번호, 직책 및 부서가 표시되어야 합니다.

  • 생년월일 필드를 기반으로 이번 달의 모든 직원 생일이 포함된 테이블. 테이블에는 생년월일로 대체되어야 하는 부서를 제외하고 이전 테이블과 정확히 동일한 정보가 표시되어야 합니다.


How?

이 섹션에서는 이전 섹션에서 설명한 시나리오를 구현하는 방법에 대한 철저한 단계별 설명을 보여줍니다.


시작하기

이 자습서에서는 Service Studio 액셀러레이터를 사용하여 직원 및 EmployeeDetail 화면 이라는 두 개의 화면을 이미 만들었다고 가정합니다 .

직원 및 EmployeeDetail 화면을 아직 만들지 않은 경우 첫 번째 자습서로 돌아가서 대시보드 화면을 계속 진행하는 것이 중요합니다. 또한 이 자습서를 계속하는 데 필수 사항은 아니지만 두 번째 자습서를 따르는 것이 좋습니다. 그렇지 않으면 수업 자료에서 사용할 수 있는 빠른 시작 응용 프로그램을 설치하십시오.

이 연습을 시작하려면 EmployeeDirectory 모듈이 열린 Service Studio가 필요합니다. 아래 화면에 애플리케이션 소스가 표시되어야 합니다.


OutSystems에서 화면 만들기

OutSystems의 한 가지 뛰어난 측면은 이전 자습서에서 끌어서 놓기 프로세스를 수행할 때 실제로 보았던 가속기의 개념입니다.

그러나 이제 우리는 처음부터 새 화면을 만들고 싶기 때문에 어떻게 작동하는지(그리고 얼마나 빠른지)도 볼 수 있습니다!

  1. Service Studio에서 인터페이스 탭이 열려 있는지 확인합니다. MainFlow 요소를 찾습니다.

  2. MainFlow를 마우스 오른쪽 버튼으로 클릭 하고 화면 추가를 클릭합니다 .

  3. 비어 있음 옵션을 선택한 상태에서 (1) 화면 이름을 대시보드 로 지정합니다 (2) . 메뉴 (3) 에 포함된 옵션을 선택 하고 화면 만들기를 클릭합니다 .

    그런 다음 Service Studio 내에서 데이터나 시각적 요소 없이 새 화면이 생성됩니다. 이 화면은 기본 구조와 메뉴만 있습니다. 이제 새 Screen을 기본 Screen으로 정의할 차례입니다.

  4. 대시보드 화면을 마우스 오른쪽 버튼으로 클릭 하고 기본 화면으로 표시 를 클릭합니다 .

  5. 게시를 클릭하십시오.

  6. 브라우저에서 열기를 클릭 하고 샘플 사용자로 로그인합니다.

이제 머리글과 메뉴 외에 데이터나 시각적 요소 없이 대시보드 화면이 표시되어야 합니다. 괜찮습니다. 다음 몇 단계에서 콘텐츠로 화면을 채울 것입니다!


Newcomers 테이블 생성

OutSystems에서 화면을 만들 때 기본적으로 일부 설정이 구현됩니다. 이러한 설정 중 하나는 Service Studio의 기본 영역 위로 마우스를 가져가면 볼 수 있는 화면의 기본 구조입니다.

아래 이미지와 같이 제목 (1) , 작업 (2) 및 MainContent (3) 와 같은 일종의 다른 자리 표시자를 볼 수 있습니다 .

이 연습에서는 MainContent(3) 자리 표시자를 사용하여 솔루션을 만듭니다.


집계로 데이터 가져오기

신규 이민자 테이블을 구축하는 첫 번째 단계는 데이터베이스에서 해당 데이터를 가져오는 것입니다. 이를 위해 Aggregate를 사용하여 이를 수행해야 합니다. Aggregate는 최적화된 쿼리를 시각적으로 생성하기 위한 리소스입니다. 집계에 대한 자세한 내용은 여기에서 확인할 수 있습니다 .

  1. 대시보드를 마우스 오른쪽 버튼으로 클릭하고 데이터베이스에서 데이터 가져오기를 클릭합니다 .

    이렇게 하면 Aggregate1 요소가 생성되고 작업할 수 있도록 열립니다.

  2. 화면의 지시에 따라 마우스 왼쪽 버튼을 클릭하여 데이터베이스 엔터티를 선택합니다.

  3. 직원을 입력 하고 선택을 클릭합니다 .

  4. 소스 추가를 클릭 하고 부서를 선택하십시오.

    이 단계에서 OutSystems는 자동으로 두 엔티티 간에 조인을 생성합니다. 이 경우 할당된 부서가 있거나 없는 직원이 필요합니다. 이제 고용 날짜별로 직원을 정렬해 보겠습니다.

  5. 정렬 없음 탭을 클릭합니다 .

  6. Add sort 를 클릭 하고 Hiring 을 입력하여 채용 날짜 속성을 찾은 다음 Employee.HiringDate 를 선택 하고 Select 를 클릭합니다 .

  7. 정렬 기준을 내림차순 으로 정의

    이렇게 하면 Aggregate가 고용 날짜별로 정렬된 직원을 내림차순(최근 고용 날짜부터 가장 오래된 날짜까지)으로 가져올 수 있습니다.


쿼리 최적화

이것은 5개의 레코드만 예상하는 쿼리이므로 몇 단계로 Aggregate를 최적화해야 합니다.

  1. 가장 최근에 생성된 GetEmployees Aggregate를 클릭하고 오른쪽 하단의 속성을 확인합니다.

  2. 최대값 을 변경합니다 . Records 속성을 5로 지정합니다. 이름을 GetNewcomers 와 같이 더 명확한 이름으로 변경할 수도 있습니다 .

    이렇게 하면 Aggregate가 상위 5개 레코드만 가져오게 됩니다. 그렇기 때문에 내림차순으로 정렬하는 것이 중요한 이유이기도 합니다. 실제로 회사의 최신 5명의 신규 직원을 확보하고 있는지 확인하기 위해서입니다.

  3. 모듈을 게시합니다 .

    참고: OutSystems에 게시할 때마다 플랫폼에서 애플리케이션의 새 버전을 생성하므로 언제든지 롤백할 수 있습니다.


시각적 자산 구현

이제 데이터가 있으므로 새 화면에 표시해 보겠습니다.

  1. Dashboard를 두 번 클릭하여 Screen 에디션을 엽니다.

  2. 왼쪽 사이드바에서 Table 을 검색합니다 . Table 요소를 MainContent 로 끌어다 놓습니다 .

  3. Service Studio의 오른쪽 하단에 있는 테이블 속성으로 이동하여 소스를 GetNewcomers.List 로 설정합니다.

    이렇게 하면 테이블 시각적 요소와 Aggregate에서 가져온 데이터 간에 연결이 있는지 확인할 수 있습니다. 이제 표시할 내용과 그 모양과 느낌을 정의하기만 하면 됩니다.

  4. GetNewcomers 에서 속성 이름을 끌어 테이블에 놓습니다.

  5. Email , Phone , JobPosition 및 Department 를 포함하도록 프로세스를 반복합니다 . 최종 결과는 다음과 같아야 합니다.

    열의 순서가 그림과 일치하지 않으면 문제가 없으며 가능한 레이아웃일 뿐입니다. 어떻게든 변경하고 싶다면 변경하고자 하는 칼럼의 제목을 클릭하고 Service Studio 상단의 화살표를 클릭하여 좌우로 변경하면 된다.

  6. 위젯 트리 로 이동하여 테이블 을 클릭합니다 . 테이블 속성에서 머리글 표시를 아니요 로 설정합니다 .

    이렇게 하면 테이블에서 헤더가 숨겨집니다. 이제 우리는 이 테이블이 모두 신규 사용자에 관한 것임을 명확하게 구분할 수 있는 제목이 있는지 확인해야 합니다.

  7. Table 을 마우스 오른쪽 버튼으로 클릭하고 Enclose in Container 를 클릭합니다 .

  8. 왼쪽 패널에서 컨테이너를 끌어 테이블 컨테이너 바로 위에 놓습니다.

    위젯 트리를 사용하여 컨테이너가 올바른 위치로 드래그되었는지 확인하십시오. 그렇지 않은 경우 테이블의 컨테이너 앞에 있는지 확인하십시오.

  9. 스타일 클래스를 다음으로 설정"font-size-h2 padding-base"

    이 스타일 클래스 속성을 사용하면 CSS 클래스를 추가하여 시각적 요소의 스타일을 조정할 수 있습니다. 이 경우 이러한 클래스는 응용 프로그램의 테마에 이미 있으므로 이를 사용하여 글꼴 크기가 "제목 2"이고 이 제목과 아래 표 사이에 패딩이 있는지 확인하면 됩니다. 자신만의 스타일을 정의하고 사용할 수도 있습니다.

  10. 왼쪽 사이드바에서 텍스트 위젯을 컨테이너로 끌어다 놓습니다 .

  11. 텍스트 필드 에 Company's Newcomers를 입력합니다 .

  12. 애플리케이션을 게시하고 브라우저에서 엽니다. 새 사용자가 포함된 테이블은 다음과 같아야 합니다.


생일 테이블 만들기

이 자습서의 마지막 부분은 다음 5개의 생일이 포함된 새 테이블을 추가하는 것으로 구성됩니다. 이 시점에서 아마도 OutSystems를 사용하면 요소를 재사용하여 개발 속도를 높일 수 있다는 것을 이해했을 것입니다. 이를 바탕으로 다음 5개의 생일을 조금 다르게 구현하게 됩니다.

  1. Widget Tree 에서 MainContent 의 두 컨테이너를 선택합니다 . 그런 다음 마우스 오른쪽 버튼을 클릭하고 Enclose in Container 를 클릭하십시오 .

  2. 컨테이너의 이름을 Newcomers 로 설정합니다 .

    그것을 마우스 오른쪽 버튼으로 클릭하고 컨테이너를 복사하십시오.

  3. MainContent 자리 표시자를 마우스 오른쪽 버튼으로 클릭 하고 컨테이너를 붙여넣습니다. Newcomers 바로 아래에 Newcomers2 라는 새 컨테이너가 표시됩니다 . 생일 로 이름을 바꿉니다 . 결과는 다음과 같아야 합니다.

    Service Studio 미리 보기에서 대시보드 화면을 보면 이제 시각적 자산이 복제되었음을 알 수 있습니다. 이제 우리가 원하는 대로 조정하기만 하면 됩니다. 모든 것을 처음부터 다시 만들 필요가 없습니다.


집계 리팩터링

그럼 데이터부터 다시 시작해 봅시다. 이제 회사에서 다음 5개의 생일을 가져와야 합니다.

  1. 인터페이스 아래에 있는 위젯 트리에서 요소 탭으로 전환합니다.

  2. 대시보드 화면 아래 GetNewcomers 라는 Aggregate를 복사하여 붙여넣어 새 Aggregate GetNewcomers2를 만듭니다 . 이름을 GetBirthdays 로 바꾸고 Aggregate를 두 번 클릭하여 엽니다.

    여기서도 기존 요소를 활용하여 새로운 요소를 만드는 동일한 전략을 따를 것입니다.

  3. 새 집계 내에서 정렬 탭을 열고 기존 정렬을 삭제합니다.

  4. 필터 없음 탭을 열고 필터 추가 옵션을 선택합니다 .

  5. 조건을 다음과 같이 설정합니다.Month(Employee.BirthDate) = Month(CurrDate())

    이 필터는 생년월일이 한 달(현재 날짜)과 일치하는 직원만 선택합니다. 이는 쿼리에서 데이터베이스에서 가져온 레코드를 쉽게 필터링하는 방법입니다. 이 특정 필터를 만드는 데 도움이 되도록 OutSystems에서 이미 제공하는 몇 가지 기본 제공 기능을 사용하고 있습니다.

    • Month(Date) : 주어진 날짜의 월을 반환합니다.
    • CurrDate() : 현재 날짜를 반환합니다.
  6. 내장 함수에 대해 자세히 알아보려면 여기를 방문 하십시오.

  7. 오른쪽 사이드바에서 GetBirthdays Aggregate를 선택 하고 모든 생일이 표시되도록 Max . 속성을 50 으로 기록합니다 .


테이블 리팩터링

마지막으로 테이블을 리팩토링하여 생일을 표시해야 합니다.

  1. 대시보드 화면을 두 번 클릭하여 엽니다. Company's Newcomers 텍스트의 두 번째 인스턴스를 두 번 클릭하고 Employee Birthdays 를 입력합니다 .

  2. 이제 이 테이블의 참조를 새 Aggregate로 변경할 때입니다. 그림자 영역을 클릭하여 테이블을 선택합니다.

  3. 테이블의 속성으로 이동합니다. 소스를 클릭 하고 참조를 GetBirthdays.List 로 변경하십시오 .

  4. 리팩토링을 완료하고 GetBirthdays 에서 속성 이름을 끌어서 테이블의 기존 이름 필드 위에 놓습니다. 이렇게 하면 신규 이민자 집계의 데이터가 생일 집계로 자동 대체됩니다. Email , Phone , JobPosition 및 BirthDate 에 대해 프로세스를 반복합니다 .

  5. 애플리케이션을 게시하고 브라우저에서 테스트합니다.



 학습 자료 다운로드 ▼

아웃시스템즈로 새로운 서비스와 비즈니스를 시작하세요! 


아웃시스템즈로 새로운 서비스와 비즈니스를 시작하세요! 

04036 서울특별시 마포구 양화로 45 (서교동) 6,7층 (세아타워) 

✉️ lowcode@vntgcorp.com   l  📞 02-6970-1600  


Copyright ⓒ 2023 VNTG inc All rights reserved.

카카오톡 채널 채팅하기 버튼