본 번역은 검증되지 않았습니다. AIP를 통해 영문원문으로부터 번역되었습니다.

시작하기

이 튜토리얼은 사용자가 항공편 데이터를 확인하고, 항공편을 필터링하고, 각 항공편에 대한 자세한 정보를 확인할 수 있는 간단한 모바일 Workshop 애플리케이션을 구축하는 방법을 안내합니다. 이 튜토리얼에서는 대부분의 Foundry 환경에 포함된 예제 데이터를 사용합니다. Foundry 온톨로지는 귀하의 요구 사항과 데이터에 맞게 맞춤화되므로, 이 튜토리얼에서 설명한 정확한 오브젝트 유형에 대한 액세스가 없을 수 있습니다.

이 튜토리얼은 모바일 Workshop 애플리케이션을 생성하는 데 필요한 단계에 초점을 맞추며, Workshop 애플리케이션 구축 및 온톨로지 액션을 사용한 쓰기백 구성에 대한 기본 지식이 있다고 가정합니다. Workshop 또는 액션을 사용해 본 적이 없다면, 일반 Workshop 및 액션 유형 튜토리얼부터 시작하는 것이 좋습니다.

1부: 초기 설정

먼저, 다음 단계를 사용하여 항공편 데이터를 스크롤하는 데 사용할 수 있는 기본 애플리케이션을 만들어 보겠습니다.

새로운 Workshop 모듈을 생성합니다.
왼쪽 사이드바에서 설정을 선택하고 모바일 기기 유형으로 전환합니다. 에디터의 크기가 모바일 기기의 크기로 변경되고 레이아웃이 하나의 열로 업데이트됩니다.
현재는 오른쪽 상단의 모듈 내비게이션 바 표시 옆에 있는 스위치를 끄면 내비게이션 바가 토글됩니다.
왼쪽 사이드바에서 전체보기를 선택한 다음 오브젝트 세트 변수 추가를 선택하여 애플리케이션에 데이터를 추가하기 시작합니다. 이 경우 모듈에 [예제 데이터] 항공편 오브젝트 유형을 추가합니다.
+ 위젯 추가를 선택하고 애플리케이션에 오브젝트 목록 위젯을 추가합니다. 위젯을 항공편 오브젝트 세트 변수를 사용하도록 설정한 다음 목록에 표시할 속성을 선택합니다. 이 경우 항공사 이름, 출발 도시 이름, 도착 도시 이름, 출발 및 도착 속성을 목록에 추가하겠습니다.

이 시점에서 항공편 데이터를 스크롤하는 데 사용할 수 있는 기본 애플리케이션을 만들었습니다. 다음 단계에서 이 애플리케이션에 상호 작용을 추가하겠습니다.

2부: 필터링 추가

이 튜토리얼의 이 부분에서는 항공편 목록을 필터링할 수 있는 기능을 추가하겠습니다. 사용자에게 필터를 적용할 충분한 화면 공간을 제공하기 위해 Workshop 서랍 내에 필터링을 중첩합니다.

왼쪽 사이드바에서 레이아웃을 선택한 다음 애플리케이션에 새 서랍을 추가하려면 **+**를 선택합니다. 서랍의 제목과 이름을 "필터 항공편"으로 업데이트하고 아이콘을 필터링 아이콘으로 설정합니다.
서랍 내에서 + 위젯 추가를 선택하고 필터 목록 위젯을 추가합니다. 필터 목록의 입력 데이터를 이전에 생성한 항공편 오브젝트 세트 변수로 설정합니다.
필터 구성에서 사용자가 필터링할 수 있는 몇 가지 속성을 선택합니다. 이 경우 출발 도시 이름, 도착 도시 이름, 및 취소 이유 속성에 대한 필터를 추가합니다.
에디터 뷰의 오른쪽 상단에 있는 X를 사용하여 서랍을 닫습니다. 항공편 뷰로 돌아가서 상단 도구 모음에서 **+**를 클릭하여 도구 모음에 위젯을 추가합니다. 버튼 그룹 위젯을 선택합니다.
버튼에 미니멀 스타일과 큰 스타일을 설정한 다음 버튼 1을 선택하여 버튼과 동작을 설정합니다. 이 경우 버튼은 필터 아이콘만 표시하도록 설정하려고 합니다. 버튼 텍스트를 제거한 다음 왼쪽 아이콘 아래에서 필터 아이콘을 선택합니다. + 이벤트 추가를 선택한 다음 필터 항공편 열기를 선택합니다.
다음으로, 필터 목록 위젯에서 생성된 필터를 적용하여 오브젝트 목록을 업데이트합니다. 오브젝트 목록 위젯을 선택한 다음 입력 데이터 아래의 X를 선택하여 오브젝트 세트 변수 구성을 제거합니다.
새 오브젝트 세트 변수를 선택하고 새 변수의 이름을 "필터링된 항공편"으로 지정합니다.
시작 오브젝트 세트에서 기존 오브젝트 세트 변수인 "[예제 데이터] 항공편"을 선택합니다. 다음으로 변수를 사용하여 필터를 선택하고 필터 목록 위젯에서 선택한 출력을 선택합니다.

이 시점에서 사용자가 구성한 속성 집합에 따라 항공편 목록을 필터링할 수 있는 기능을 추가했습니다. 사용자 인터페이스 혼잡을 피하기 위해 이러한 필터는 전체 페이지 서랍에 표시되어 사용자가 한 번에 여러 필터를 쉽게 구성한 다음 필터링된 목록으로 돌아갈 수 있습니다.

서랍을 열고 덴버, 콜로라도에서 출발하고 날씨로 인해 취소된 항공편으로 필터링해 보십시오. 서랍을 닫으면 항공편 목록이 적절하게 업데이트됩니다.

다음 단계에서 선택한 항공편에 대한 자세한 정보를 살펴볼 수 있도록 사용자에게 활성화하겠습니다.

3부: 선택된 Object View 추가

이 튜토리얼의 이 부분에서는 목록에서 항공편을 선택하면 다른 페이지로 이동하여 세부 정보를 확인할 수 있도록 사용자에게 활성화합니다.

왼쪽 사이드바에서 레이아웃을 선택한 다음 애플리케이션에 새 페이지를 추가하려면 **+**를 선택합니다. 페이지 이름을 "항공편 세부 정보"로 업데이트합니다. 새 페이지의 헤더에서 섹션 제목을 제거합니다.
툴바의 왼쪽 **+**를 선택하고 오브젝트 세트 제목 위젯을 추가합니다. 위젯을 "오브젝트 목록 1 활성 오브젝트"를 입력 오브젝트 세트로 사용하도록 설정합니다.
페이지 내에서 레이아웃 설정을 선택한 다음 흐름 레이아웃을 선택합니다. 이를 통해 스크롤 가능한 본문이 페이지에 추가되어 여러 위젯을 포함할 수 있습니다.
다음으로 현재 항공편의 몇 가지 속성을 표시하겠습니다:

새 흐름 레이아웃의 섹션을 선택하고 제목을 "속성"으로 업데이트합니다.
+ 위젯 추가를 선택하고 속성 목록 위젯을 추가합니다.
속성 목록 위젯을 "오브젝트 목록 1 활성 오브젝트"를 입력 오브젝트 세트로 사용하도록 설정합니다.
속성 목록 위젯을 쌓인 레이블 레이아웃으로 업데이트하고 1열을 사용한 다음 몇 가지 속성을 표면에 표시합니다. 이 경우 운영 항공사, 항공사 이름, 취소 여부, 취소 이유를 표시하겠습니다.

그런 다음 출발지와 목적지 공항에 대한 정보를 표시하겠습니다:

흐름 레이아웃의 하단에서 + 섹션 추가를 선택하십시오. 새 섹션의 제목을 "출발 공항"으로 업데이트합니다.
+ 위젯 추가를 선택하고 속성 목록 위젯을 추가합니다.
**오브젝트 세트 변수 선택...**을 클릭한 다음 + 새 오브젝트 세트 변수를 선택하십시오. "오브젝트 목록 1 활성 오브젝트" 변수를 시작으로 [예제 데이터] 출발 공항 링크를 사용하여 주변 검색을 수행합니다. 이 새 변수의 이름을 "활성 항공편 출발 공항"으로 변경합니다.
속성 목록 위젯을 쌓인 레이블 레이아웃으로 업데이트하고 1열을 사용한 다음 몇 가지 속성을 표면에 표시합니다. 이 경우 표시 이름, 운송업체 수, 출발 항공편 수, 목적지 수 속성을 표시합니다.

목적지 공항에 대한 정보를 표시하는 섹션을 추가하는 위의 단계를 반복하십시오.
왼쪽의 레이아웃 사이드바를 사용하여 원래 항공편 오브젝트 목록을 표시하는 페이지로 전환합니다. 오브젝트 목록을 선택한 다음 구성 옵션의 활성 오브젝트 선택시 아래에 있는 + 이벤트 추가를 선택합니다. 항공편 세부 정보로 전환을 선택하십시오.

이 시점에서 목록의 각 항공편에 대한 자세한 정보를 확인할 수 있는 다른 페이지로 이동할 수 있는 기능을 추가했습니다. 오브젝트 목록에서 항공편을 선택하여 방금 생성한 "항공편 세부 정보" 페이지로 이동해 보십시오.

마지막으로 데스크톱 브라우저와 휴대폰에서 모바일 애플리케이션을 미리보겠습니다.

4부: 모듈 보기 및 사용

오른쪽 상단에서 저장 및 게시를 선택하여 모듈을 저장한 다음 보기 ↗를 선택합니다. 이렇게 하면 Foundry의 모바일 앱 런처에서 애플리케이션을 엽니다.

이 시점에서 데스크톱 브라우저와 휴대폰에서 모바일 애플리케이션을 미리보는 다양한 옵션이 있습니다:

데스크톱 브라우저 미리보기. 실제 전화기에서 애플리케이션이 어떻게 보일지 미리보려면 브라우저의 모바일 장치 에뮬레이션 지원을 사용하십시오:
모바일 기기에서. Foundry 환경에 네트워크 액세스가 있는 모바일 기기가 있다면 휴대폰에서 URL을 열어 애플리케이션을 탐색할 수도 있습니다. 크롬과 엣지와 같은 일부 브라우저에서 페이지를 마우스 오른쪽 버튼으로 클릭하고 이 페이지의 QR 코드 생성을 선택하면 쉽게 할 수 있습니다. 그런 다음 모바일 기기를 사용하여 애플리케이션을 열 QR 코드를 스캔할 수 있습니다.

모바일 앱 런처에서는 브라우저의 뒤로 및 앞으로 상호 작용을 사용하여 페이지를 탐색할 수 있습니다. Android 기기에서는 기기의 뒤로 버튼을 사용하여 탐색할 수 있으며, iOS에서는 아래와 같이 왼쪽 또는 오른쪽으로 스와이프하여 탐색할 수 있습니다.

mobile ios navigation

다음 단계

이 튜토리얼에서는 모바일 기기에서 항공편 데이터를 탐색하는 간단한 애플리케이션을 구축하는 방법을 안내했습니다. 다음 리소스를 사용하여 Workshop의 모바일 지원에 대해 계속 배워보십시오: