*이 섹션에서는 Bubble에서 동적 표현식(Dynamic Expressions)을 설정하는 방법에 대해 설명합니다.
(1) 동적 표현식 정의
동적 표현식(Dynamic Expressions)은 사용자 입력, 데이터베이스 업데이트 및 앱의 기타 변경 사항에 따라 실시간으로 업데이트되는 "live(라이브)" 수식과 같습니다.
동적 표현식(Dynamic Expressions)을 사용하면 다양한 방식을 이용하여 동적으로 데이터 작업을 수행할 수 있습니다.
위의 예제에서는 데이터베이스에서 사용자를 검색하고 계산합니다. 그 결과 사용자가 추가되거나 제거될 때마다 자동으로 업데이트되는 사용자 수가 실시간으로 반영됩니다.
동적 표현식은 Bubble의 기본 빌딩 블록 중 하나이며 다양한 시나리오에서 사용됩니다.
예를 들어 고객 주문을 추적하는 앱을 만들고 있다고 가정해 보겠습니다.
- 동적 표현식을 사용하여 각 항목의 가격과 주문 수량을 기준으로 총 주문 비용을 계산할 수 있습니다. 또는 동적 표현식을 사용하여 새 주문이 있을 때 재고 수준을 자동으로 업데이트할 수 있습니다.
- 스프레드시트의 공식과 마찬가지로 Bubble의 동적 표현식은 앱과 데이터베이스의 변경 사항에 따라 실시간으로 업데이트됩니다. 따라서 고객이 주문 항목의 수량을 변경하면 총 주문 비용이 자동으로 업데이트됩니다.
- 동적 표현을 마스터하면 관련 데이터와 지속적으로 동기화되는 강력한 대화형 앱을 만들 수 있습니다.
(2) 동적 표현식의 구성 방식
*동적 표현식은 복잡도가 크게 다를 수 있지만 기본적으로 다음의 세 가지 요소로 구성됩니다.
- 데이터 소스
- 데이터 소스는 데이터베이스, 현재 사용자 또는 API와 같이 Bubble이 데이터를 검색할 수 있는 모든 위치를 나타냅니다.
- 연산자
- 연산자는 데이터 소스를 이용하여 계산, 정렬 등을 수행할 수 있게 하는 기능입니다.
- 비교
- 비교를 통해 두 개의 숫자, 데이터 유형 또는 텍스트 문자열과 같은 두 개의 호환 가능한 값을 비교하고 예/아니요 결과를 얻을 수 있습니다.
1. 데이터소스
:데이터 소스는 다음과 같이 Bubble이 데이터를 검색할 수 있는 모든 위치입니다.
- 데이터베이스 검색 (A database search)
- 현재 사용자 (The current user)
- 옵션 세트 (An Option set)
- API 호출 (An API call)
- 현재 날짜/ 시간 (The current date/time)
- 사용자의 현재 지리적 위치 (The user's current geographic position)
위의 예시를 통해 알 수 있는 점은 데이터 소스가 단순한 데이터베이스 레코드가 아니라 모든 채널에서 일종의 정보를 가져올 수 있다는 점을 보여줍니다.
동적 표현식(Dynamic Expressions)은 항상 데이터 소스로 시작하고 (종종 선택적으로) 해당 데이터 소스에 하나 이상의 연산자를 추가하여 어떤 방식으로든 데이터를 변환, 집계 또는 조작합니다.
2. 연산자
:여기에서는 일반적으로 연산자가 무엇인지 설명합니다.
- 연산자는 작업 중인 데이터 유형에 따라 필터링, 정렬, 그룹화, 집계, 축소, 조인 등 데이터 원본에서 수행할 수 있는 모든 종류의 기능 또는 작업입니다.
- 예제에서 본 것처럼 동적 표현식은 콜론(:)으로 구분되는 두 단계를 거칩니다.
- 데이터 소스 : Do a search for data source를 사용하여 사용자를 검색합니다.
- 연산자: Bubble이 결과를 계산하도록 지시하기 위해 검색에 COUNT 연산자를 추가했습니다.
- 식은 항상 마지막 단계의 값을 반환합니다. 따라서 위의 예제에서 식은 사용자 목록을 반환하지 않고 사용자 수를 나타내는 숫자(예: 50)를 반환합니다.
데이터 관련 연산자
*Bubble은 데이터 소스가 반환하는 데이터의 종류에 따라 사용 가능한 연산자 목록을 조정합니다.
- 위의 예에서 데이터 소스는 사용자를 검색하고 목록을 반환합니다.
- 이것은 수량화할 수 있는 리소스이므로 Bubble에게 목록의 항목 수를 세도록 지시할 수 있습니다.
- 이 예에서 데이터 소스는 사용자 검색 (데이터베이스 레코드 목록 반환)이며 해당 데이터 유형에 적용되는 다른 연산자를 선택할 수 있습니다.
- 이 예에서는 데이터 소스를 날짜/시간을 반환하는 것으로 변경했으며 Bubble은 이를 반영하기 위해 사용 가능한 연산자 목록을 변경합니다.
- 연산자는 대부분의 경우 반환된 데이터의 형식을 변경합니다. 위의 사진에서 두 가지 예를 살펴보겠습니다.
- 처음에는 연산자를 사용하여 검색 결과를 계산하고 데이터가 데이터베이스 레코드 목록에서 숫자로 전환됩니다.
- 두 번째에서는 datetime을 보고 있으며 반환된 데이터는 연산자에 따라 다릅니다. 3/10-23 형식의 연산자는 날짜/시간을 "3/10-2023"과 같은 텍스트 문자열로 바꿉니다. < -range ->는 두 날짜 시간을 날짜로 바꿉니다.+seconds/+ minutes 등 연산자는 초와 분을 추가하지만 datetime 형식은 유지합니다.
3. 비교
비교는 식의 세 번째 구성 요소이며 두 값을 비교하여 예 또는 아니요 값에 도달하는 데 사용됩니다. 비교를 일종의 질문으로 볼 수 있습니다.
1) 수의 비교
:아래의 두 가지 예에서 먼저 인간이 질문을 읽는 방법을 확인한 다음 식에서 형식을 지정하는 방법을 확인합니다.
5는 3보다 큰 수인가요? 대답: 예
- 이것은 인간이 질문하는 방법이며, 반복되거나 답이 없는 질문이 아닙니다. 대답은 항상 예입니다.
- 동적 표현식에서는 동일한 질문이 더 수학적으로 표현되고 명확한 답이 있습니다.
5 > 3 = 예
- 기호는 보다 크다는 것을 나타내며 인간의 식과 마찬가지로 대답은 '예'입니다.
- 이 두 예에서 5와 3 은 모두 데이터 소스이고 >는 비교입니다.
- 따라서 두 데이터 소스의 값을 비교하여 예 또는 아니요(또는 원하는 경우 True: 참 /False :거짓)를 결정합니다.
2) 같은지 비교
:동적 표현식은 동적 데이터 원본 및 연산자와 함께 작동하도록 설정되었으므로 계산 결과인 식에서 두 숫자를 비교해 보겠습니다. 이전 예시에서는 사용자 수를 계산했었습니다.
- Task라는 또 다른 데이터 유형이 있다고 가정하고 각 유형이 몇 개인지 비교해 봅시다.
- 이 식의 구조는 다음과 같습니다.
Data source:operator comparison data source:operator
→ (데이터 소스:데이터 비교 연산자:연산자)
Search for users:count is search for tasks:count
- >를 is로 바꿉니다. 즉, 더 큰지를 묻는 것이 아니라 그들이 같은지를 묻는 질문으로 질문을 변경하는 것입니다.
- 식으로 표현하면 다음 사진과 같습니다.
- 위의 예제에 숫자를 가정해 보면 다음과 같이 표현할 수 있습니다.
- (50명의 사용자와 20개의 작업이 있다고 가정)
- 50은 20과 같습니까? 답변: 아니오
3) 텍스트 유형의 비교
:비교(comparisons)는 비교할 수 있는 한 모든 유형의 데이터를 처리할 수 있습니다.
예를 들어 다음과 같은 질문을 할 수 있습니다.
런던은 뉴욕과 같은가요? 답변: 아니오
- 이 예시에서 우리는 더 이상 숫자를 보지 않고 두 개의 텍스트 문자열을 비교합니다.
- 두 문자열이 동일하지 않기 때문에 응답은 no로 결론을 내릴 수 있습니다.
- Bubble표현식에서 다음과 같이 City라는 데이터 유형에서 해당 이름을 가져올 수 있습니다.
4) 데이터베이스 레코드 자체의 비교
:위의 식에서 우리는 여러 데이터 소스, 연산자 및 비교를 결합하여 다음과 같은 질문을 할 수 있습니다.
현재 사용자에 저장된 도시 이름이 이 검색에서 반환된 첫 번째 도시 이름과 동일합니까? 답변: 아니요
- 이 예시에서는 도시(텍스트)의 이름을 구체적으로 비교했지만 두 도시가 실제로 동일한 데이터베이스 레코드인지 여부를 Bubble에 직접 물어볼 수도 있습니다.
! 이제 질문이 다음과 같이 변경되었습니다.
사용자의 도시 필드에 저장된 데이터베이스 레코드가 이 검색으로 찾은 데이터베이스 레코드와 동일합니까? 답변: 아니오
- 두 예는 동일한 ‘아니요’ 결과를 산출합니다. 하지만 같은 값이 아닙니다.
- 만약에 두 도시가 이름을 공유하는 경우(예: 미국 텍사스 주에 있는 파리와 프랑스 수도인 파리 ) 첫 번째 도시는 예라고 대답하고 두 번째 도시는 아니오라고 대답합니다. 두 도시의 이름은 같지만 두 값은 동일한 데이터베이스 레코드가 아닙니다.
- 위의 예시에서 볼 수 있듯이, 올바른 응답을 안정적으로 제공하기 위해서 비교식을 구성할 때 충분한 검토가 있어야 합니다.
(3) 동적 표현식을 텍스트에 첨부
*대부분의 경우 동적 표현식은 일반 텍스트와 혼합되어 사용자에게 일관된 메시지를 생성할 수 있습니다.
예를 들어 위의 예제에서 사용자 수를 계산하는 동적 표현식을 설정하고 표현식을 텍스트로 감싸는 설정을 했습니다.
텍스트의 내용 → "현재 앱에는 [동적 표현식] 명의 사용자가 있습니다."
- 위의 예시는 앱에서 사용자에게 보이는 텍스트는 "현재 앱에는 50명의 사용자가 있습니다."이며 내부적으로 진행되는 계산(동적 표현식)을 숨깁니다.
동적 표현식 첨부 방법
텍스트 요소(element)의 텍스트 필드의 아무 곳에나 해당 필드에 포커스를 설정한 다음 옆에 표시되는 동적 데이터 삽입(insert Dynamic data) 버튼을 클릭합니다.
- 때때로 빈 표현식이 있는 필드가 있을 것입니다.
- 거기에 표현식을 만들려면 간단히 클릭하십시오.
- 삭제하려면 해당 항목을 클릭한 다음 백스페이스를 클릭하십시오.
(4) 동적 표현식 사용 사례
Bubble 플랫폼의 핵심 부분인 표현식은 다양한 시나리오에서 사용됩니다. 몇 가지를 살펴보겠습니다.
1. 요소 (element)
: 값을 제공하기 위해 요소에서 동적 표현식을 사용할 수 있습니다.
- 표현식의 결과를 텍스트로 표시하기 위해 텍스트 요소에 배치하는 방법을 위에서 이미 살펴보았습니다.
1) 초기 날짜 설정
아래 예시에서는 식을 사용하여 날짜/시간 선택기 요소(element)의 초기 값을 설정합니다.
- 초기 콘텐츠 필드는 페이지가 로드될 때 요소에 날짜를 표시하도록 Bubble에 지시합니다. 사람이 읽을 수 있는 문장으로 우리는 Bubble에게 다음과 같이 말하고 있습니다.
- 이 예시에서 초기 기본값을 현재 날짜 및 시간으로 설정하지 않고 하루를 추가합니다. (current date/time + (days):1 ) 이런 식으로 설정하면 기본값이 내일 현재 시간으로 설정될 수 있습니다.
2) 사용자 목록을 로드하고 반복그룹(Repeating Group)에 표시
- 반복 그룹(Repeating Group)을 사용하는 경우 데이터 소스를 제공해야 하며 이 역시 표현식을 설정하여 수행됩니다.
- 이를 위해 Do a search for Users와 같은 데이터 소스를 정의할 수 있지만 표현식을 더 복잡하게 사용할 수 있는 방법을 보여주기 위해 연산자도 포함해 보겠습니다.
- 이 예에서는 연산자와 intersect with를 사용하여 데이터 소스에서만 얻을 수 있는 것과 다른 사용자 목록을 생성합니다.
- 사람이 읽을 수 있는 문장으로 우리는 Bubble에게 다음과 같이 말하고 있습니다.
- 한 사용자 집합과 두 번째 사용자 집합을 검색한 다음 두 목록 모두에 있는 사용자 목록을 반환합니다.
- 두 검색이 서로 다른 제약 조건으로 인해 서로 다른 결과를 생성한다고 가정하면 두 검색 결과 모두에 있는 사용자 목록이 남게 됩니다.
2. 조건식(Conditional Expressions)
:이 섹션에서는 조건식이 작동하는 방식을 간략하게 살펴봅니다.
조건식은 예 또는 아니오 값을 반환한 다음 해당 응답을 사용하여 작업을 수행하거나 수행하지 않도록 설정된 표현식입니다.
다음과 같이 사용할 수 있습니다.
- 조건이 참인지 여부에 따라 요소 스타일 지정
- 조건이 참일 때마다 실행할 워크플로(workflow) 트리거
- 다른 곳에서 트리거 된 워크플로/작업을 실행해야 하는지 질문
1) 사용자가 로그인하지 않은 경우 요소(element) 숨기기
- 첫 번째 예에서는 사용자가 로그아웃하면 요소를 숨기는 조건을 요소의 조건식에 배치합니다.
- 예를 들어 로그아웃 버튼이 있는 경우 숨기는 것이 좋습니다.
- 첫 번째 부분은 표현식입니다. (when 부분)
- 데이터 소스 현재 사용자를 사용하고 운영자는 예/아니오 답변을 얻기 위해 로그아웃합니다.
- 위의 상황이 달성될 때 변경하는 속성입니다.
- 두 번째 부분은 Bubble에게 요소의 속성 중 하나를 변경하도록 지시합니다.
- 이 예제에서는 요소는 표시되지 않음으로 설정했습니다,
- 위의 두 식을 합하여 사람이 읽을 수 있는 문장으로 말하면 다음과 같습니다.
→ 현재 사용자가 로그아웃한 경우, 이 버튼을 보이지 않게 합니다.
2) 워크플로 실행 중지
:두 번째 예에서는 워크플로가 트리거 될 때 조건식이 실행되어야 하는지 여부를 결정하는 방법을 살펴보겠습니다.
- 사용자가 새 작업을 만들 수 있는 양식이 있지만, 사용자가 작업 이름을 제공하지 않은 경우 연락처를 만들고 싶지 않다고 가정해 보겠습니다.
- 이 예제에서 데이터 소스는 입력 작업(Input Task)이며 두 개의 연산자를 아래와 같이 추가했습니다.
- value는 Bubble에게 해당 입력(사용자가 제공한 작업 이름)의 값을 반환하도록 지시합니다.
- is not empty는 값 연산자가 빈 결과를 반환하는지 여부에 대한 예/아니오 대답을 제공합니다.
위의 두 연산자를 합하여 사람이 읽을 수 있는 문장으로 말하면 다음과 같습니다.
→ 사용자가 새 작업의 이름을 제공한 경우에만, 이 워크플로우를 실행하십시오.
3. 워크플로우(Workflow)
:이 섹션에서는 워크플로(Workflow) 작동 방식을 간략하게 살펴봅니다.
- 워크플로에서 동적 표현식을 사용하여 특정 결과를 생성할 수도 있습니다.
1) 집계된 데이터 저장
:사용자가 다양한 제품에 대한 리뷰를 제공하는 앱을 실행한다고 가정해 보겠습니다.
- 내장된 사용자 데이터 유형 외에도 사용자가 1-10 사이의 점수를 부여하는 숫자 필드를 포함하는 Review(리뷰)라는 사용자 정의 데이터 유형이 있습니다.
- 사용자가 리뷰를 계속 추가함에 따라 평균 점수를 프로필에 저장하려고 합니다.
- 현재 사용자(Current User)를 변경하는 workflow가 있으며 Average Score(평균 점수)라는 필드를 변경하도록 설정했습니다.
- 그런 다음 데이터 소스 Search for users를 추가하고 review(리뷰)가 데이터 소스 This user에 의해 생성되어야 한다는 제약 조건을 추가합니다.
- 리뷰 목록의 결과를 숫자 목록(각 리뷰의 점수)으로 변경하는 각 항목의 점수 연산자를 추가합니다.
- 마지막으로 숫자 목록을 가져와 평균값을 계산하는 평균 연산자(average)를 추가합니다 . 결국 데이터 유형은 사용자의 평균 점수 필드가 기대하는 숫자입니다.
위의 예제를 합하여 사람이 읽을 수 있는 문장으로 말하면 다음과 같습니다.
모든 사용자 리뷰를 검색하고 평균을 계산하여 평균 점수를 사용자에게 저장
3) 두 날짜 값에서 날짜 범위 만들기
: 날짜 범위는 시작과 끝을 저장하여 날짜/시간(date/time) 사이의 범위를 제공하는 데이터 조각입니다. 다른 용도로는 date/time이 특정 범위에 속하는지 확인하는 작업이 있습니다.
- 다음 예제에서는 사용자가 휴가의 시작일과 종료일을 선택할 수 있는 시스템이 있고 이를 날짜 범위로 전환하고 맞춤 상태로 저장하려고 한다고 가정해 보겠습니다.
- 두 날짜 선택기의 값을 데이터로 사용하고 < - range -> 연산자를 사용하여 결합합니다.
- 첫 번째 필드는 사용자 정의 상태(custom state)를 저장하는 위치를 나타냅니다. 이 경우 페이지 자체(인덱스)를 선택했습니다.
- 그런 다음 사용자 지정 상태를 선택합니다. 하나를 만들고 이름을 Date range로 지정했습니다.
- 그런 다음 < - range -> 연산자를 사용하여 날짜 범위를 생성합니다.
(5) 단계별 표현식 값 확인
: 모든 식은 단계로 구성되며 각 단계는 값을 반환합니다.
- 각 값은 예/아니요, 숫자, 텍스트 또는 사용자 정의 데이터 유형과 같은 특정 유형입니다.
- 복잡한 식에서는 각 단계에서 어떤 종류(데이터 유형)의 값이 반환되는지 추적하기 어려울 수 있습니다.
- 데이터 유형을 보려면 마우스 포인터로 단계를 가리키기만 하면 됩니다.
- 식에서 단계를 가리키면 해당 단계가 반환하는 데이터 유형이 표시됩니다.
결과적으로 원하는 데이터 표현식을 구성하기 위해서는 전 단계의 데이터 유형이 원하는 것인지 확인해야 합니다. 그래야만 적합한 데이터 유형에 따라서 그다음 단계에 혼합할 수 있는 표현식의 옵션들이 자동으로 표시됩니다.
(6) 표현식 복사/붙여 넣기
:식을 복사하여 붙여 넣을 수 있는 두 가지 방법이 있습니다.
1. 하나의 표현식 복사
첫 번째 방법은 단일 표현식을 복사하는 것입니다.
- 이렇게 하려면 표현식을 마우스 오른쪽 버튼으로 클릭하고 copy expression(표현식 복사)를 선택합니다.
- 식을 붙여 넣으려면 표현식을 허용하는 영역에 대고 마우스 오른쪽 버튼으로 클릭해야 합니다.
- 그리고 paste expression(표현식 붙이기)를 선택합니다. 동적 Insert dynamic data link(데이터 삽입 링크)를 클릭해야 할 수도 있습니다.
2. 필드의 모든 콘텐츠 복사
- 하나의 표현식뿐만 아니라 텍스트 필드의 모든 내용을 복사하려는 경우 표현식 글자 말고 외부의 빈 공간을 마우스 오른쪽 버튼으로 클릭합니다. 이렇게 하면 표현식과 일반 텍스트가 모두 복사됩니다.
- 붙여 넣으려면 원하는 필드에 가서 글자 위가 아닌 빈 공간에 마우스 오른쪽 버튼을 눌러서 붙여 넣기 한다.
(7) 표현식이 처리되는 방법
동적 표현식은 왼쪽에서 오른쪽으로 평가됩니다.
즉, 시스템은 가장 왼쪽 구성요소에서 시작하여 오른쪽으로 이동하면서 한 번에 하나씩 표현식의 각 부분을 순서대로 읽습니다.
- 이는 괄호, 지수, 곱셈 및 나눗셈, 더하기 및 빼기와 같은 연산 순서를 기반으로 표현식을 평가하는 다른 많은 프로그래밍 언어에서 사용되는 수학적 규칙과 다릅니다.
- 이 왼쪽에서 오른쪽 평가 순서는 다른 프로그래밍 언어에 익숙한 경우 예기치 않은 결과가 발생할 수 있으므로 Bubble에서 식을 작성할 때 염두에 두어야 합니다.
- 그러나 일상 언어의 표현에 대해 일반적으로 생각하는 방식과 일치하는 보다 직관적인 방식으로 평가되기 때문에 표현을 더 쉽게 읽고 이해할 수 있습니다.
