모바일 항공편 앱 만들기

항공편 목록을 필터링하고 선택한 항공편과 공항의 정보를 상세 페이지에서 보는 모바일 앱을 구성합니다. [Example Data] Flight 예제 데이터는 여러 Foundry 환경에 포함되지만 플랫폼 인스턴스마다 온톨로지가 달라 같은 객체 유형을 사용할 수 없는 경우도 있습니다.

Workshop의 모듈과 변수 및 액션을 이해한 상태에서 시작합니다.

1. 모바일 모드와 목록

새 Workshop 모듈을 만듭니다. 왼쪽 Settings에서 Device type을 Mobile로 바꾸면 편집 화면이 모바일 크기의 단일 열 레이아웃으로 바뀝니다. 우선 오른쪽 위 Module navigation bar visible을 꺼 둡니다.

왼쪽 Overview에서 Add object set variable을 선택하고 [Example Data] Flight 객체 유형을 추가합니다.

+ Add widget으로 Object list를 추가합니다. 항공편 집합을 입력으로 연결하고 Carrier Name, Origin City Name, Destination City Name, Departure와 Arrival 속성을 표시합니다.

2. 필터 drawer

Layout에서 +와 New drawer를 선택합니다. 제목과 이름은 Filter flights, 아이콘은 필터 모양으로 설정합니다.

드로어에 Filter list를 추가하고 기존 Flights 객체 집합을 입력으로 연결합니다. Filters configuration에서 Origin City Name, Destination City Name과 Cancellation reason 필터를 추가합니다.

오른쪽 위 X로 드로어를 닫습니다. 항공편 화면 상단 도구 모음의 +에서 Button group을 추가합니다.

버튼은 minimal style과 large style을 켭니다. Button 1의 텍스트를 지우고 Left icon에 필터 아이콘을 선택합니다. + Add event에서 Open Filter flights를 연결합니다.

필터를 목록에 적용

Object list의 Input data 아래 X로 기존 집합 연결을 제거합니다.

New object set variable을 선택하고 이름을 Filtered flights로 정합니다. Starting object set은 기존 [Example Data] Flight 변수로, Filter using variable은 Filter list의 출력으로 지정합니다.

이제 필터는 전체 화면 드로어에서 조정하고 닫은 뒤 결과 목록을 봅니다. 동작을 확인할 조건 예는 출발지가 Denver, CO이고 취소 사유가 Weather인 항공편입니다.

3. 상세 페이지

Layout에서 +와 New page를 선택하고 이름을 Flight details로 정합니다. 새 페이지 머리글의 섹션 제목을 제거한 뒤 도구 모음 왼쪽 +로 Object set title을 추가합니다.

제목의 입력은 Object list 1 Active object로 지정합니다. 이 예제에서 목록이 현재 선택한 객체를 내보내는 변수입니다.

페이지의 Set layout에서 Flow를 선택하여 여러 위젯을 담고 세로로 스크롤할 수 있는 본문을 만듭니다.

항공편 속성

Flow 안의 섹션 이름을 Properties로 정하고 Property list를 추가합니다. 입력은 같은 Object list 1 Active object입니다. stacked label layout, 1 column으로 구성하고 Operating carrier, Carrier Name, Cancelled와 Cancellation Reason을 표시합니다.

출발과 도착 공항

Flow 하단의 + Add section으로 Origin Airport 섹션을 추가하고 Property list를 넣습니다.

Select object set variable...에서 + New object set variable을 선택합니다. Object list 1 Active object에서 시작하여 [Example Data] Origin Airport 링크로 Search around합니다. 새 변수 이름은 Active flight origin airport로 정합니다.

Property list는 stacked label layout과 1 column으로 설정하고 Display Name, Number of Carriers, Number of Departing Flights와 Number of Destinations를 표시합니다. 도착 공항에도 같은 절차를 반복하되 해당 도착 공항 링크로 연결합니다.

목록에서 상세로 이동

왼쪽 Layout에서 원래 항공편 목록 페이지로 돌아갑니다. Object list의 On active object selection 아래 + Add event에서 Switch to Flight details를 선택합니다.

사용자가 항공편을 고르면 활성 객체 변수가 바뀌고 Flight details 페이지가 그 항공편과 연결 공항을 표시합니다.

4. 게시와 기기에서 열기

Save and publish를 선택한 뒤 View ↗를 열면 앱을 Mobile application launcher에서 볼 수 있습니다.

데스크톱의 Launcher는 전체 브라우저 너비를 사용합니다. 브라우저의 모바일 기기 에뮬레이션으로 휴대전화 크기를 확인합니다.

실제 휴대전화가 Foundry에 네트워크로 접근할 수 있으면 앱 URL을 열어 사용할 수 있습니다. Chrome이나 Edge 등에서 페이지의 Create QR Code for this Page 기능을 사용할 수 있는 경우 QR 코드를 만들고 휴대전화로 읽어 URL을 열 수도 있습니다.

Launcher는 페이지 이동을 브라우저 이력에 연결합니다. Android의 뒤로 버튼이나 iOS 브라우저의 좌우 가장자리 스와이프로 목록과 상세 페이지 사이를 이동할 수 있습니다.

추가 업무 화면은 Mobile Navigation Bar에 연결합니다. 배포 대상 사용자의 네트워크와 인증 및 모바일 설계도 함께 준비합니다.