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

21. Bubble frontend & backend (중급): 버블 백엔드 활성화 설정, 프론트엔드 & 백엔드

by 스타트업 사업가 마르코 2023. 6. 27.
*이 섹션에서는 프런트엔드와 백엔드에서 실행되는 워크플로의 차이점에 대해 설명합니다.

 

*이 문서에 설명된 백엔드 기능은 사용 중인 요금계획에 따라 다를 수 있습니다. 가격 책정 페이지에서 다양한 기능에 따라서 다른 요금제를 비교할 수 있습니다.

 

  • 애플리케이션에서 발생하는 모든 일은 사용자의 장치 (예: 컴퓨터 또는 전화)와 Bubble의 서버 간의 명령 및 데이터의 지속적인 교환을 통해 가능합니다.
  • 많은 명령이 사용자의 장치에서 시작됩니다. 예를 들어, 사용자가 무언가를 저장하기 위해 send 버튼을 클릭할 수 있으며, 그 명령은 관련 데이터와 함께 Bubble의 서버로 전송되어 데이터베이스에 저장됩니다.
  • 다른 경우에는 명령이 서버에서 시작될 수 있습니다. 예를 들어, 사용자가 일주일 전에 계정을 등록하고 그 주가 지나면 서버가 온보딩을 돕거나 설문 조사를 완료하도록 요청하는 이메일을 사용자에게 보낼 수 있습니다.
  • 이 문서에서는 서버 간에 발생하는 상호 작용을 탐색하고 logic(논리) 섹션의 나머지 부분을 소개합니다.

 

*Bubble의 workflow(워크플로), expression(표현식) 및 logic(논리)의 작동방식을 자세히 살펴보기 전에 사용자의 장치와 Bubble의 서버가 함께 작동하는 방식을 이해하는 것이 중요합니다.

 

(1) 프런트엔드

*프런트엔드는 Bubble의 page(html)에서 발생하는 모든 것을 말합니다. 여기에서 사용자가 앱과 상호 작용하고 workflow(워크플로)와 expression(표현식)이 이를 실행시킵니다.

 

1. 프런트엔드 워크플로 (frontend workflow)

  • 사용자가 수행하는 작업, 페이지에서 발생하는 작업, 사용자 데이터 변경에 반응합니다.
  • 그 작업들은 때때로 서버에서 아무것도 보내거나 요청하지 않고 작업을 완료하지만 대부분의 작업은 인터넷을 통해 다양한 요청을 전달하고 Bubble 앱에서 응답을 받는 방식으로 수행됩니다.
  • 이들 모두는 프런트엔드 workflow editor(워크플로우 편집기)를 사용하여 만들 수 있습니다.

 

2. 요소 (element)

  • 텍스트, 이미지, 입력 양식 및 목록과 같이 페이지에 배치하는 모든 항목들입니다.
  • 여기에는 Bubble 데이터베이스의 정보가 필요하지 않은 static(정적) 데이터가 포함될 수 있지만 대부분의 경우 사용자 이름, 작업 목록, 제품 이미지 또는 어제 판매 집계 요약과 같이 서버에서 요청된 데이터를 표시합니다.

 

프런트엔드는 사용자가 페이지를 열어 놓은 동안에만 존재하는 임시 우주와 같습니다. 페이지가 닫히면 명령이나 데이터 교환이 발생하지 않습니다. 프런트엔드는 페이지를 변경할 때마다 편집됩니다.

 

(2) 백엔드

1. 백엔드의 의미

*백엔드는 사용자의 앱에서 실행되지 않고 Bubble의 서버에서만 100% 실행되는 이벤트 및 워크플로우를 말합니다.
  • 사용자 명령 없이 트리거하고 실행할 수 있으며 사용자가 앱의 페이지를 열어 두는 것에 의존하여 실행되지 않습니다.
  • 사용자가 취하는 행동이나 화면에 표시되는 내용에 의존하는 프런트엔드와는 다른 용도로 사용됩니다.

 

2. 백엔드 예시

*예를 들어 백엔드를 사용하여 다음을 수행할 수 있습니다. 다음과 같이 특정 날짜 및 시간에 실행되도록 워크플로를 예약합니다.
  • 사용자가 가입한 후 2일 후에 이메일 보내기 데이터베이스에서 변경 사항(예: 30일 평가 기간 후 사용자를 비활성 상태로 되돌리기) 예약 처리
  • 데이터베이스에서 발생하는 변경 사항에 대한 응답으로 워크플로 실행
  • 주/월/년에 한 번과 같이 반복되는 시간에 워크플로 실행
  • 외부 앱의 API 요청 수락 및 응답

 

3. 백엔드 편집기 활성화

:백엔드는 Backend workflow(백엔드 워크플로)라는 섹션에서 편집됩니다.

  • 프런트 엔드 워크플로와 달리 백엔드 워크플로는 사용자가 페이지를 열어 두었는지(앱 접속 유지) 여부에 관계없이 트리거 되고 실행됩니다.

 

*백엔드 편집기에 처음 액세스하는 경우 앱 설정에서 활성화해야 합니다.

 

백엔드 활성화
백엔드 활성화 과정

 

  • 백엔드 편집기는 기본적으로 비활성화되어 있지만 설정에서 활성화할 수 있습니다.
  • 메인 panel 좌측 하단의 Settings 탭으로 이동
  • 상단의 택 중에 API를 선택
  • Enable Workflow API and backend workflows 레이블이 있는 확인란을 선택
  • 선택을 완료하면 메인 panel의 상단 좌측 코너의 page 선택창 클릭
  • 하단의 backendworkflow 선택

벡엔드 워크플로우 에디터
벡엔드 워크플로우 에디터