이 섹션에서는 앱에서 데이터베이스의 데이터를 표시하는 방법에 대해 설명합니다.
- 사용자가 데이터가 되는 정보를 서버에 보내면 페이지 element를 사용하여 사용자 화면에 표시할 수 있습니다.
- 컨테이너 element는 데이터 자체를 표시 하지 않지만 모든 하위 요소가 쉽게 참조할 수 있도록 데이터를 로드해 줍니다.
- 이를 통해 데이터를 컨테이너에 쉽게 로드한 다음 이를 데이터 소스로 사용하여 표시하고 사용자가 데이터를 변경할 수 있습니다.
(1) 데이터 표시
데이터는 단일 항목(예: 현재 사용자 보기) 또는 데이터들 List(예: 제품, 연락처 또는 작업 목록)으로 표시됩니다. 아래에는 이 두 가지 시나리오에 대한 자세한 정보를 제공합니다.
1. 컨테이너에 단일 항목 표시
- 데이터를 표시하려면 해당 데이터를 그룹과 같은 컨테이너에 로드하는 것이 유용한 경우가 많습니다.
- 아래의 컨테이너에 대한 글에서 이를 수행하는 다양한 방법에 대해 자세히 알아볼 수 있습니다.
45장. 컨테이너 element > 바로가기
2. List(목록)에 여러 항목 표시
- Do a search for 연산자를 사용할 때와 같이 Bubble이 결과 List(목록)을 반환할 때마다 List(목록)에 결과를 표시할 수 있습니다.
- List(목록)은 다른 요소와 마찬가지로 유연하고 반응적으로 디자인할 수 있습니다.
- 즉, 결과를 Excel과 같은 테이블, 카드 또는 그리드 또는 반응형 엔진에서 생각할 수 있는 다른 방식으로 표시할 수 있습니다.
47장. Repeating Group(반복 그룹 목록)에서 목록에 데이터를 표시하는 방법을 다룹니다. > 바로가기
(1) 표현식을 사용하여 데이터 표시
: 텍스트와 같은 element에 데이터를 표시하려면 Bubble에 데이터를 알리기 위해 표현식을 설정해야 합니다.
1. 표현식의 구성 = 데이터소스 + 연산자
표현식은 데이터 소스와 Bubble에게 데이터로 수행할 작업을 추가로 지시하는 하나 이상의 연산자로 구성됩니다.
- 아래 예시에서 Do a search for를 데이터 소스로 사용한 다음 first item:(첫 번째 항목) 연산자를 추가하여 검색에서 반환한 결과목록의 첫 번째 항목을 로드합니다.
- 데이터소스: Do a search for
- 연산자: first item:
2. 컨테이너에서 데이터 받기
이렇게 하면 Product의 데이터가 컨테이너 요소(여기서는 그룹)에 로드되지만 실제로는 사용자에게 아무것도 표시되지 않습니다.
- 제품이름과 같은 Product의 일부 정보를 표시하려면 해당 그룹 내에 다른 요소(예: 텍스트 요소)를 추가해야 합니다.
- 그런 다음 상위 요소에 로드된 항목을 참조하는 해당 요소에 대한 표현식을 설정할 수 있습니다.
상위 그룹의 Product는 이 표현식의 데이터 소스이고 name은 표시하려는 제품 데이터 유형의 필드를 Bubble에 알려주는 연산자입니다.
3. 부모에서 로드하고 자식이 참조 ( 텍스트 로드 예시)
텍스트 요소 자체에 전체 표현식을 설정할 수도 있습니다.
- Do a search for Products:first item's Name ** 하지만 상위에 있는 해당 Product를 참조하려는 하위의 모든 요소가 검색을 수행하는 것은 번거롭습니다.
- 대신, 하나의 상위 부모 컨테이너를 설정하고 그 안에 데이터를 로드함으로써 작업 속도를 높이고 내부의 모든 요소가 동일한 데이터베이스 항목을 참조하도록 합니다.
4. 이미지 로드
동일한 로직이 텍스트 이외의 다른 것에도 적용될 수 있습니다.
- 예를 들어 상위 그룹에서 이미지 요소를 설정하고 하위에서 이미지를 다시 참조하여 올바른 제품 이미지를 로드할 수 있습니다.
- 이 예시에서는 텍스트 대신 데이터베이스에서 이미지 URL을 가져옵니다.
- 데이터 유형의 필드는 image type(이미지 유형)입니다.
- 다양한 요소 유형과 데이터 유형에 저장된 필드를 결합하여 사용자가 원하는 방식으로 데이터베이스의 정보를 표시하도록 앱을 디자인할 수 있습니다.
(2) Auto-Binding(자동 바인딩)을 사용하여 데이터 표시
Auto-Binding(자동 바인딩)은 Input (입력) 필드가 변경될 때마다 변경 사항을 자동으로 저장하는 데 사용되지만 다른 용도로도 사용됩니다. 이 다른 용도는 기존 데이터를 할당된 필드에 자동으로 로드하는 것입니다.
- 만약에 Product name만 표시하는 것이 아니라 사용자가 이름을 편집하고 싶다고 가정해 보겠습니다.
- 요소가 자동 바인딩되는 필드를 할당하면 Bubble은 페이지가 로드될 때 해당 필드에서 기존 데이터를 자동으로 로드합니다.
- Product의 Name필드에 Input elemet(입력 요소)를 자동 바인딩함으로써 Bubble은 페이지가 로드될 때 기존 데이터를 해당 필드에 자동으로 로드합니다.
