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

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

아웃시스템즈 체험 및

학습 할 수 있는 자료

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

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

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

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

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

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

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

01. 직원 디렉토리 앱 만들기

개요

이 자습서에서는 OutSystems IDE인 Service Studio를 사용하여 Employee Directory 애플리케이션을 처음부터 빌드합니다.

Employee Directory 애플리케이션을 생성 하고 데이터 모델을 정의한 다음 두 개의 화면을 생성합니다. 하나는 직원을 나열하고 다른 하나는 직원의 세부 정보를 보고 편집합니다(걱정하지 마십시오. 들리는 것보다 쉽습니다).

결국 브라우저에서 앱을 열고 사용해 볼 수 있습니다.


따라해보세요!

우리는 회사의 직원을 관리하기 위한 웹 애플리케이션을 구축하려고 합니다. 이 자습서에서는 Employee Directory 애플리케이션과 처음 두 개의 화면을 생성합니다.

  • 직원 목록: 모든 직원과 그들의 가장 중요한 정보를 나열합니다.
  • 직원 세부 정보: 이름, 이메일, 채용 날짜, 직책 등 직원의 세부 정보를 보고 편집할 수 있는 양식이 있습니다.

데이터나 화면이 없는 빈 앱에서 시작합니다. 첫 번째 단계는 Excel 파일에서 직원 데이터를 만드는 것입니다.


데이터 모델

이 응용 프로그램은 OutSystems에서 데이터베이스 엔터티라고 하는 세 개의 데이터베이스 테이블이 있는 데이터 모델을 갖습니다.

  • 직원, 직원 정보 포함
  • 위치, 사무실 정보 포함
  • 부서, 부서 정보 포함.

이름, 생년월일, 이메일, 전화번호, 직책과 같은 직원의 기본 정보 외에도 직원은 사무실과 관련된 부서를 가지게 되며 직원과 위치 및 부서 엔터티 간의 관계를 생성합니다.


직원 목록 화면

직원 목록 화면에는 이름, 생년월일, 이메일 및 전화 정보와 함께 표 형식의 모든 직원 목록이 표시됩니다.

화면에는 사용자가 새 직원을 추가할 수 있는 버튼 바로 옆에 이름별로 직원을 필터링하는 텍스트 입력 필드도 있습니다.

화면은 다음 이미지와 같이 표시됩니다.

직원 상세 화면

직원 세부 정보 화면에는 이름, 생년월일, 이메일, 입사일, 부서 등 특정 직원의 모든 필드가 표시됩니다.

이 애플리케이션의 사용자는 다음 두 가지 방법으로 이 화면을 탐색할 수 있습니다.

  • 직원 목록 화면에서 직원 이름 클릭 시
  • 새 직원을 추가하는 옵션을 클릭할 때.

앞에서 언급했듯이 이 화면은 직원의 세부 정보를 보는 데 사용되지만 사용자가 해당 데이터를 저장하는 광고를 수정할 수도 있습니다. 이를 위해 화면에는 직원 정보를 데이터베이스에 저장하는 논리를 실행하는 저장 버튼도 있어야 합니다. 바로 옆에는 직원 목록 화면으로 돌아가는 뒤로 버튼도 있습니다.

화면은 다음 이미지와 같이 표시됩니다.

How?

이제 시나리오를 알았으니 이 방법 가이드에 따라 Employee Directory 앱을 빌드해 보겠습니다. 준비 되었나요? 함께 하자!


자원

이 방법 가이드에는 필요한 두 가지 리소스가 있습니다.

  • 생성할 애플리케이션의 빠른 시작인 Employee Directory.oap 파일. 걱정하지 마십시오. 빠르게 시작할 수 있도록 빈 앱을 만들었지만 아직 기능을 만들지는 않았습니다.

  • Bootstrap.xls는 직원 , 위치 및 부서에 대한 일부 데이터가 포함된 Excel 파일입니다. 원하는 경우 더 많은 데이터를 자유롭게 추가하거나 데이터로 Excel 파일을 만들 수도 있습니다. 그러나 데이터와 이 가이드 사이에 불일치가 발생하지 않도록 적어도 지금은 동일한 열과 열 머리글을 유지해야 합니다.

코스 페이지의 레슨 자료 에서 다운로드하십시오 .


시작하기

Quickstart 파일 Employee Directory.oap 을 설치하여 이 튜토리얼을 시작하겠습니다 .

이 파일에는 EmployeeDirectory 라는 하나의 모듈 , 하나의 아이콘 및 작은 설명이 있는 애플리케이션이 있습니다 .

이 시점에서 모듈은 거의 비어 있으며 Employee Directory 웹 애플리케이션의 화면과 로직을 생성할 곳입니다.

따라서 지금까지 Service Studio를 설치하지 않은 경우 Service Studio를 설치하고 OutSystems 계정(Service Studio에서)에 연결한 다음 학습 자료에서 연습 리소스를 다운로드 하십시오 .

이제 시작할 준비가 되었습니다!

  1. Service Studio의 기본 창에서 창의 왼쪽 상단에 있는 환경 메뉴를 선택합니다.

  2. 파일 열기...를 선택합니다 .

  3. 새 대화 상자에서 리소스 파일이 있는 폴더로 이동하고 파일 유형을 OutSystems Application Pack(.oap)으로 변경합니다. 이제 Employee Directory.oap 파일이 표시되어야 합니다 . 파일을 두 번 클릭하여 엽니다.

  4. Service Studio에 표시되는 새 확인 대화 상자에서 진행을 선택합니다 .

  5. 응용 프로그램이 자동으로 설치되기 시작합니다. 끝날 때까지 시간을 좀 주세요.

  6. 진행률 표시줄이 완료되면 애플리케이션 아이콘을 클릭하여 Service Studio에서 애플리케이션을 엽니다.

  7. 응용 프로그램에는 하나의 모듈만 있습니다. 모듈 이름을 클릭하여 열어봅시다!

  8. 이제 모듈 내부에 있습니다. 응용 프로그램은 모듈 집합이며 UI 및 비즈니스 논리에서 데이터에 이르기까지 응용 프로그램의 요소를 개발하는 모듈 내에 있습니다.


Excel 파일에서 데이터 가져오기

이제 앱을 설치했으므로 일부 데이터를 추가하여 시작하겠습니다. 이 섹션에서는 직원, 위치 및 부서에 대한 데이터가 포함된 Excel 파일을 가져와 자동으로 3개의 데이터베이스 엔터티를 생성합니다.

  1. Service Studio에서 오른쪽 상단 모서리에 있는 데이터 탭을 선택합니다. 이렇게 하면 앱의 데이터를 보고 정의할 수 있는 Service Studio 영역이 열립니다.

  2. 엔터티 폴더를 확장하고 데이터베이스 요소를 마우스 오른쪽 단추로 클릭한 다음 Excel에서 새 엔터티 가져오기...를 선택합니다.

  3. 표시되는 새 대화 상자에서 Bootstrap.xlsx 가 있는 폴더로 이동하여 선택합니다.

  4. 생성될 엔티티의 이름을 보여주는 대화 상자가 나타납니다. 직원, 위치 및 부서의 세 항목이 모두 여기에 표시되는지 확인합니다. 가져오기 를 클릭합니다 .

    OutSystems는 Excel 파일을 분석하고 시트 이름을 사용하여 Excel 파일의 시트당 하나의 엔터티를 생성합니다.

    3개의 엔터티가 데이터베이스에 생성되며 각 엔터티를 확장하여 속성도 자동으로 생성되었는지 확인할 수 있습니다.

    특성은 Excel 파일의 열을 참조합니다. OutSystems는 각 열을 살펴보고 각 행의 내용을 분석하고 열 이름과 적절한 데이터 유형으로 속성을 생성합니다.

    이는 데이터를 OutSystems로 가져오는 방법일 뿐입니다. 처음부터 데이터 모델을 만들거나 다른 데이터 소스에서 데이터를 가져올 수도 있습니다. 자신만의 Excel 파일을 편집하거나 만들 수도 있습니다. 시트 및 열 이름은 엔티티 및 속성의 이름이기도 합니다.


데이터 간의 관계 생성

엔터티를 만들었으므로 이제 데이터 간의 관계를 만들 차례입니다. 이 응용 프로그램에서 직원은 한 부서에 속하고 사무실(지정된 위치)에서 근무합니다.

  1. 여전히 Data 탭에서 Entity Diagrams 폴더를 확장합니다(아직 확장되지 않은 경우). EmployeeDirectoryDataModel 을 두 번 클릭하여 엽니다.

  2. Department , Employee 및 Location 엔터티를 선택합니다 (CTRL+클릭을 사용하여 여러 요소를 선택할 수 있음). 선택한 엔티티를 방금 연 데이터 모델로 끌어다 놓습니다.

    아래 이미지와 같은 것이 있을 것입니다.

  3. 부서 엔터티에서 마우스를 가리키고 Id 특성 근처에 나타나는 커넥터를 선택한 다음 직원 엔터티로 끕니다.

    DepartmentId 라는 Employee 엔터티에 새 특성이 만들어졌습니다 . 이것은 일대다 관계를 생성합니다. 즉 부서에는 많은 직원이 있고 직원은 하나의 부서에 속합니다.

  4. 위치 엔터티 에 대해 동일한 단계를 반복합니다 . Location 엔터티 에서 Employee 로 드래그하는 것을 잊지 마십시오 .

    Employee Entity에서 자동으로 생성된 두 속성의 아이콘은 약간 다릅니다. 이는 다른 엔티티에 연결된 속성이기 때문에 발생합니다. 속성을 클릭하면 특수 식별자가 있음을 알 수 있습니다.

  5. 언제든지 속성의 이름을 변경할 수 있습니다. Data 탭의 오른쪽 사이드바에 다시 초점을 맞추고 Employee Entity를 확장하고 LocationId 특성을 선택합니다. 이름을 OfficeId 로 설정합니다 .


애플리케이션 게시 및 데이터 보기

이제 데이터 모델이 준비되었으므로 이제 이 애플리케이션을 OutSystems 서버에 게시하여 데이터를 실제로 데이터베이스에 저장하고 애플리케이션에서 볼 수 있도록 해야 합니다.

  1. 게시 버튼을 클릭하여 모듈을 게시합니다.

    게시 프로세스는 모듈을 서버에 업로드하고 코드를 컴파일 및 생성하며 데이터베이스를 업데이트하고 배포합니다. 프로세스가 끝나면 사용자가 앱에 액세스할 준비가 된 것입니다.

  2. 데이터를 볼 시간입니다. 데이터 탭에서 직원 엔터티를 마우스 오른쪽 단추로 클릭하고 데이터 보기 또는 편집을 선택합니다 .

  3. Excel 파일에서 가져온 데이터로 채워진 모든 직원 속성이 있는 테이블이 표시됩니다. 다른 속성을 보려면 막대를 오른쪽으로 이동하십시오.

  4. DepartmentId 및 OfficeId 열은 방금 이러한 특성을 만들었으므로 비어 있습니다 . 그러나 이 창을 사용하여 일부 데이터를 추가할 수 있습니다. 이러한 열 중 하나의 행에서 드롭다운을 클릭하면 부서 및 위치 옵션이 표시됩니다. 일부 부서 및 사무실로 일부 직원 데이터를 채웁니다.

  5. 결국 아래 그림과 같은 것이 있어야합니다. 적용을 클릭하여 변경 사항을 저장합니다.


액셀러레이터를 사용하여 화면 만들기

이제 데이터 모델이 준비되었으므로 적절한 화면에서 데이터를 볼 시간입니다! 그리고 몇 단계를 거쳐 두 개의 화면을 만들 것입니다! 우리를 믿지 않습니까? 얼마나 쉬운지 보여드리겠습니다!

  1. Service Studio의 오른쪽 상단 모서리에 있는 인터페이스 탭을 클릭 하고 MainFlow 요소를 두 번 클릭합니다.

    MainFlow는 화면이 생성되는 곳입니다. 현재로서는 아직 화면이 없습니다.

  2. Data 탭 으로 돌아가서 다음 이미지와 같이 Employee Entity를 끌어 MainFlow 영역에 놓습니다.

    이렇게 하여 두 개의 화면을 만들었습니다!

    원하는 경우 이름을 바꿀 수 있지만 지금은 자동으로 생성된 이름을 사용합니다.

  3. 직원 화면을 두 번 클릭하면 생성된 내용을 볼 수 있습니다. 직원 목록, 직원 이름으로 검색, 새 직원을 추가하는 옵션 등 우리가 필요로 하는 모든 기능과 함께 화면이 자동으로 생성된 것을 볼 수 있습니다.

    EmployeeDetail 화면 에서도 같은 일이 발생합니다 .

    OutSystems는 Entity의 속성을 사용하고 애플리케이션의 레이아웃에 따라 그에 따라 목록과 세부 화면을 생성합니다. 이를 통해 많은 시간을 절약할 수 있으며 필요한 경우 사용자 정의할 수 있습니다.

  4. 마지막 변경 사항을 저장하려면 모듈을 다시 게시하십시오 .

  5. 게시가 완료되면 파란색 옵션이 나타납니다. 브라우저에서 열기 . 브라우저에서 응용 프로그램을 열려면 클릭하십시오.

  6. 로그인 화면이 나타납니다. 로그인에 사용할 수 있는 샘플 로그인 옵션을 사용하십시오.

  7. 이제 브라우저에서 앱을 테스트하고 상호 작용할 수 있습니다.


학습 자료 다운로드 ▼

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


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

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

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


Copyright ⓒ 2023 VNTG inc All rights reserved.

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