본문 바로가기
버블 개발/중급

64. 데이터 생성, 저장 및 삭제(중급): 워크플로우로 데이터 조작, 자동 바인딩 설정, 워크플로우와 자동 바인딩의 비교

by 스타트업 사업가 마르코 2023. 8. 2.
이 문서에서는 데이터를 생성, 변경 및 삭제하여 데이터베이스로 작업하는 방법을 다룹니다.

 

: Bubble은 데이터베이스의 데이터를 사용하여 다음과 같은 다양한 작업을 수행할 수 있는 다양한 방법을 제공합니다.

  • 새로운 항목을 생성
  • 기존 항목 변경
  • 기존 항목 삭제

 

데이터베이스의 데이터 조작은 세 가지 방법으로 수행됩니다.
  1. 사용자가 변경 사항 저장 버튼을 클릭하는 것과 같은 특정 이벤트에서 트리거 되는 워크플로를 설정할 수 있습니다.
  2. Auto binding(자동 바인딩)을 사용하여 사용자가 입력 필드에 일부 입력을 제공할 때마다 데이터베이스에 변경 사항을 저장할 수 있습니다.
  3. 데이터베이스 편집기를 사용하여 데이터베이스에서 직접 데이터를 편집할 수 있습니다. 이 옵션은 Bubble 편집기에서 해당 액세스 권한이 있는 사용자만 사용할 수 있습니다.

 

(1) 워크플로우

워크플로는 Event(이벤트)가 발생할 때마다 순서대로 실행되는 Action의 모음입니다.

1. Event(이벤트)

: 트리거가 되는 이벤트의 유형은 버튼 클릭, 입력 필드의 업데이트, 특정 조건이 참일 때와 같은 다양한 유형 중에서 선택할 수 있습니다.

2. Action

: 데이터베이스를 변경하는 몇 가지 Action이 있습니다.

 

아래 링크를 클릭하면 해당 Action에 대한 핵심 항목을 볼 수 있습니다.

1) Create a new thing : 특정 데이터 유형의 새 레코드를 생성하고 선택적으로 해당 데이터 유형의 필드에 정보를 저장합니다.

 

2) Make Changes to a thing : 새로운 정보를 데이터에 저장하여 이전에 현장에 있던 것을 대체합니다.

  • 데이터 List 변경 : 위와 동일하지만 한 번에 여러 항목에 대해 작동합니다.
  • 현재 사용자 변경 : 위와 동일하지만 Action workflow를 시작한 사용자에게 직접 적용

 

3) Delete a thing : 데이터베이스에서 해당 항목을 삭제합니다.

  • 해당 List 삭제 : 위와 동일하나, 복수의 항목을 삭제
  • 해당 List 복사 : 새로운 Unique ID와 업데이트된 생성 날짜 및 수정 날짜 필드를 사용하여 기존 데이터 List의 동일한 사본을 생성합니다. 한 번의 작업으로 최대 50개의 항목을 복사할 수 있습니다.

이러한 작업을 다양한 방법으로 결합하여 새로운 데이터와 기존 데이터를 유연하게 사용할 수 있으며 데이터베이스와 관련되거나 관련되지 않은 추가 작업을 포함할 수도 있습니다.

 

3. 예시

사용자가 자신의 프로필을 편집할 수 있는 양식을 설정했다고 가정해 보겠습니다.

이 경우 사용자가 정보를 제공할 수 있는 몇 가지 입력 필드가 있습니다.

그리고 워크플로를 트리거하는 버튼을 설정할 수 있습니다.

 

이 예시에는 사용자가 일부 정보를 제공한 다음 버튼을 클릭하여 변경 사항을 저장할 수 있는 입력 필드 목록이 있습니다.

위의 설정은 사용자가 실제로 버튼을 클릭할 때까지 변경 사항이 데이터베이스에 저장되지 않음을 의미합니다.

버튼이 클릭될 때 Action이 실행
버튼이 클릭될 때 Action이 실행

  • 이메일 및 비밀번호와 같은 일부 정보는 변경 대상과 다른 Action을 사용하여 변경해야 합니다. 사용자 개인인증은 민감한 특성 때문에 보안을 유지하고 사용자 개인 정보를 보호하기 위해 다르게 처리해야 합니다.
  • 여기서 우리는 요소가 클릭됨 Event(이벤트)를 결합하여 현재 사용자 작업을 변경합니다.
  • 위의 두 단계가 함께 워크플로를 구성합니다.

 

워크플로를 사용하면 다른 관련 작업을 수행하기 위해 첫 번째 작업 이후에 추가 작업을 설정할 수 있습니다.

  • 예를 들어 Alert 요소를 사용하여 작업이 성공했다는 메시지를 표시할 수 있습니다.
  • 이 예시에서는 변경 사항이 저장되었다는 메시지를 사용자에게 표시하는 추가 단계를 설정합니다. 이 작업을 사용할 수 있으려면 페이지에 Alert element가 있어야 합니다.

 

→ 이 예시에서 볼 수 있듯이 워크플로는 사용자가 변경사항을 저장할 시기를 결정할 수 있도록 하고 워크플로에서 둘 이상의 작업을 연결해야 하는 경우에 유용합니다.

 

 

(2) Auto binding(자동 바인딩)

자동 바인딩은 Input element를 데이터 유형의 특정 필드에 바인딩하는 것을 의미합니다.
이것이 설정되면 Bubble은 해당 Input의 변경 값을 데이터베이스에 자동으로 저장합니다. 즉, 변경하기 위해 Action을 설정할 필요가 없습니다.

 

Auto binding(자동 바인딩)은 Field필드에 연결됩니다. 즉, Input element와 데이터 필드의 데이터 형식이 일치해야 합니다.

  • 예를 들어 날짜가 포함된 필드는 사용자의 날짜를 예상하는 입력 요소에 연결되어야 합니다.
  • 또한 자동 바인딩은 Input element의 부모에 로드된 데이터 유형이 있고, 새 항목을 만들 수 없는 경우에만 작동합니다. 이미 존재하는 항목에만 씁니다.

 

오토바인딩 구동 체크박스 element 에 존재
오토바인딩 구동 체크박스 element 에 존재

1. Auto binding(자동 바인딩) 설정

자동 바인딩은 Element의 에디터 appearance에서 설정됩니다. Enable auto-binding on parent element's 항목을 체크하면 수정할 필드를 선택하고 선택적으로 작업이 성공할 때마다 경고를 표시할 수 있습니다.

 

  • 필드에 대한 Input의 값을 자동으로 저장하는 텍스트 Input(입력) 요소를 설정했습니다.
  • 사용자는 컨테이너 element(요소) 또는 페이지 자체인 부모에 로드됩니다.
  • element(요소)가 포커스를 잃을 때마다 데이터가 저장됩니다.
  • 즉, 사용자가 Input(입력) 필드에서 멀리 클릭하거나 탭 했다는 의미입니다.
  • Bubble은 사용자에게 데이터가 저장되고 있음을 보여주기 위해 잠시 동안 로딩 바를 표시합니다.

 

참고: 입력에 대한 자동 바인딩은 디버거에서 단계별 기능을 사용할 때 "다음 단계"를 기다리지 않고 즉시 실행됩니다.

 

2. 성공에 대한 알림 표시

자동 바인딩이 활성화되면 성공했음을 사용자에게 알리는 알림을 표시할 수 있습니다.

alert 배치
alert 배치

 

 

alert 활성화 설정
alert 활성화 설정

 

  • 이 기능을 사용하려면 먼저 페이지에 Alert element를 배치해야 합니다.
  • Input에서 Show an alert on success를 사용하여 적용할 Alert element와 표시할 메시지를 선택할 수 있습니다.
  • 위의 그림에서 알림 요소를 만들고 상단에 알림 배치 상자를 선택하여 페이지 상단에 전체 너비 막대로 표시되는지 확인합니다.
  • 자동 바인딩이 활성화된 입력에서 방금 생성한 Alert element를 선택합니다. 또한 변경된 필드와 일치하는 사용자 지정 경고 메시지를 만들 수 있습니다.

 

(3) 워크플로 및 Auto binding(자동 바인딩) 비교

워크플로 또는 자동 바인딩 작업을 선택할 때 몇 가지 주요 차이점이 있습니다.

 

1. UX

첫 번째는 단순히 사용자 경험에 미치는 영향입니다.

  • 일부 형식에서는 사용자가 자신의 정보를 검토하고 버튼을 클릭할 때까지 아무것도 저장하지 않도록 하는 것이 좋습니다.
  • 다른 경우에는 필드를 편집하자마자 정보를 저장하는 것이 더 효율적입니다.
  • 각각의 경우에 무엇이 가장 좋은지 결정하는 것은 개발자의 몫입니다.

 

2. 보안

Bubble은 Action에 대한 보안을 설정하여 처리하고 Auto binding(자동 바인딩)은 약간 다르게 처리합니다.

 

1) 워크플로우

워크플로는 개인 정보 보호 규칙 의 영향을 받지 않으며 누가 무엇을 할 수 있는지 제어하기 위해 자체 조건식을 설정해야 합니다.

  • 예를 들어, 아래 작업에서 사용자가 자신의 프로필인 경우에만 프로필을 편집할 수 있음을 지시하는 표현식을 설정했습니다.

워크플로우 조건 설정
워크플로우 조건 설정

  • 위의 식은 편집 중인 사용자가 현재 사용자인지 확인합니다.
  • 이렇게 하면 사용자가 자신의 프로필에만 변경 사항을 저장할 수 있습니다.

 

2) Auto binding(자동 바인딩)

자동 바인딩에는 필드에 대한 변경 사항이 저장되는 상황을 지정하는 전용 개인 정보 보호 규칙이 있습니다. 필드는 여전히 편집할 수 있지만 포커스를 잃으면 개인 정보 보호 규칙이 사용자가 자동 바인딩을 통해 변경 사항을 저장하는 것을 허용하지 않는 경우 오류 메시지를 생성합니다.

 

자동바인딩 설정 - DATA 에서 설정
자동바인딩 설정 - DATA 에서 설정

  • 위의 스크린숏에서 편집 중인 사용자가 현재 사용자와 동일한 경우 이름 필드를 편집할 수 있도록 개인 정보 보호 규칙을 설정했습니다.
  • 다른 사람이 자동 바인딩으로 이 사용자를 편집하려고 하면 오류 메시지가 생성됩니다.

 

3. 성능

워크플로와 자동 바인딩은 성능 관점에서 동작하는 방식에도 약간의 차이가 있습니다.

 

1) 워크플로우

하나의 큰 덩어리에서 수행해야 하는 모든 변경 사항을 서버로 보냅니다.

  • 즉, 속도 저하가 적지만 전송되는 데이터의 양에 따라 속도가 느려질 수 있습니다.

 

2) Auto binding(자동 바인딩)

필드가 편집되는 즉시 업데이트된 정보를 서버로 전송합니다.

  • 즉, 데이터 전송은 더 많지만 더 짧아질 수 있습니다.
  • 올바른 접근법이 무엇인지에 대한 옳고 그른 대답은 없습니다. 또한 그 차이가 매우 작을 수 있으며 종종 무시할 수 있는 수준일 수 있다는 점에 유의하는 것이 중요합니다.
  • 차이는 있지만 전체 사용자 경험 측면에서 장단점을 따져 어떤 방법이 가장 좋은지 결정하는 것이 중요합니다.

 

(4) 데이터베이스 편집기

Bubble을 사용하면 내장된 데이터베이스 편집기에서 직접 데이터를 편집할 수도 있습니다.
이는 개발버전 데이터베이스와 라이브버전 데이터베이스 모두에서 작동합니다.

 

  1. 매인 페널의 좌측 DATA에서 App data탭으로 이동하고 편집할 Data Type(데이터 유형)을 선택하여 데이터베이스 편집기에 액세스 합니다.
  2. 특정 항목을 검색하고 편집 아이콘을 클릭하여 편집할 수 있습니다.
  3. 항목 옆에 있는 연필 아이콘을 클릭하면 항목을 변경할 수 있습니다.

데이터베이스에서 직접 편집하는 것은 빠른 업데이트가 필요할 때 유용하지만 장기적인 설루션으로 데이터 편집을 위한 자체 양식을 설정하는 것이 좋습니다.

 

(5) 자주 하는 질문

1. Auto binding(자동 바인딩)을 사용하는 경우 항목이 저장될 때 추가 작업을 계속 실행할 수 있습니까?

네 )

  • 먼저 workflow에서 트리거 되는 event 중 Input value changed를 사용하여 워크플로우를 설정하고 거기에 추가 Action을 배치할 수 있습니다.
  • 자동 바인딩 Action이 변경 사항을 등록하는 Action에 대해 시간 내에 완료되거나 완료되지 않았을 수 있다는 점은 주의해야 합니다.
  • 즉, 해당 워크플로의 Action이 데이터베이스에 저장된 데이터에 의존하는 경우 자동 바인딩 대신 워크플로에 저장할 수 있습니다. 이렇게 하면 X단계 결과 데이터 소스를 사용하여 프로세스가 완료되었는지 확인할 수 있습니다.

 

2. 자동 바인딩으로 새로운 데이터 셋을 생성할 수 있습니까?

  • 자동 바인딩은 기존 항목에만 작동하며 새 항목을 만들 수 없습니다.
  • 데이터가 로드되지 않은 컨테이너에 무언가를 쓰려고 하면 오류 없이 작업이 실패합니다.