이틀 만에 노코드 툴, 버블로 서비스 만들기 (3)
데이터 전송 및 호출과 비즈니스 로직 구현하기
목차
1. 백엔드를 구축합시다.
2. 데이터를 저장하고 변경하고!
3. 어떤 페이지로 넘어갈까?
4. 화면에 데이터 불러오기
5. "내" 것만 볼 수 있도록
6. 마지막 체크, QA와 배포
백엔드를 구축합시다.
이전 글에서 버블로 화면을 구현하는 방식을 다뤘다. 프로덕트가 가동되려면 (1) 클라이언트 사이드(ex. 화면)를 구현하고 (2) 서버 사이드(ex. 데이터베이스)를 구현한 후, (3) 이 둘을 이어줘야 한다. (1)은 시리즈의 2번째 글, (2)는 시리즈의 1번째 글에서 완료했으니, 이제 (3)의 작업만 하면 된다.
이번 글에는 클라이언트 사이드와 서버 사이드를 연결하기 위한 데이터 전송 및 호출 방법과 비즈니스 로직을 하나하나 뜯어보자
진짜 마지막 단계다! (출처 : <나루토>)데이터를 저장하고 변경하고!
1. 워크플로우란?
유저가 입력한 값을 데이터베이스에 저장하는 과정을 자세히 뜯어보면, (1) 유저가 저장할 값을 입력하고 (2) 서버에 이 값을 저장해달라고 요청하면, (3) 이 값이 적절한지 확인 후, (4) 서버가 해당 값을 전달받아서 저장한다. 이 과정을 회원가입 단계로 살펴보자
(1) 회원가입 단계에서 유저가 사용하고 싶은 이메일과 비밀번호를 입력
(2) 가입 버튼을 클릭
(3) 해당 이메일로 이미 가입된 계정이 있는지 확인
(4) 없다면, 계정 DB에 해당 이메일과 비밀번호를 등록
여기서 (2)는 트리거 이벤트고, (3), (4)는 액션 이벤트다. 유저가 이메일과 비밀번호를 입력해도, 가입 버튼을 클릭하지 않으면 계정이 생성되지 않는다. 그리고, 트리거와 액션 이벤트로 구성된 흐름을 워크플로우라 칭한다. 트리거 이벤트가 작동되면, 해당 워크플로우를 구성하는 모든 액션 이벤트가 자동으로 실행된다. 버블에서는 워크플로우를 이용해 클라이언트 측에서 서버 측으로 데이터를 전송하거나, 비즈니스 로직을 작동시킨다.
2. 워크플로우 생성하기
아래 이미지는 프로필 등록 페이지다. 여기서 유저한테 데이터를 입력받기 위해 (1) 닉네임, 직업을 입력하는 [Input] 요소 2개, (2) 소개글을 적는 [Multi Input] 요소 1개, (3) 프로필 이미지를 등록하는 [Picture Uploader] 요소 1개가 사용된다. 그리고, 하단에 입력된 값을 서버에 전송하기 위한 [Button] 요소가 존재한다.
하단 버튼 요소의 설정창에 들어가 보면, [Start/Editflow]라는 버튼이 보인다. 이 버튼을 클릭하면, 선택한 버튼 요소의 클릭을 '트리거 이벤트'로 하는 워크플로우를 생성할 수 있다.
해당 버튼을 클릭하면 [Workflow] 탭으로 이동된다. 여기서 현재 페이지의 모든 워크플로우를 관리한다. 워크플로우는 (1) 트리거 이벤트와 (2) 액션 이벤트로 구성되며, [When]이라 적힌 부분이 트리거 이벤트다. 현재 선택한 워크플로우를 보면, [When] 부분에 [Button 정산 정보 등록 is clicek]라고 적혀있다. 이는 '정산 정보 등록'이란 버튼의 클릭을 트리거 이벤트로 설정했다는 말이다.
[When] 아래에 여러 [Step 1], [Step 2]가 존재한다. 여기서 [Step]에 적힌 부분이 액션 이벤트다. 즉, '정산 정보 등록'이란 버튼을 클릭했을 때, 자동적으로 실행하는 액션이다. 현재는 (1) [Step 1] : 유저 데이터를 변경하고 (2) [Step 2] : signup_account 페이지로 이동하게 설정한 상태다.
3. 데이터 변경 이벤트 생성하기
프로필 등록 페이지에서 유저가 프로필 등록을 완료했을 때, 유저 데이터베이스에 해당 유저의 닉네임, 이미지 등을 추가해줘야 한다. 이렇게 데이터베이스에 데이터를 저장 및 변경하는 작업도 워크플로우로 구현한다. 프로필 등록 로직을 구현하기 위해 (1) 액션 이벤트를 생성하고 (2) [Data(Things)] 카테고리의 [Make Changes to thing]을 선택한다.
해당 이벤트는 데이터베이스의 특정 데이터를 변경하는 액션이다. 프로필 등록 과정 이전에 이미 유저는 회원가입을 한 상태이다. 따라서, 프로필 등록 페이지에서는 (1) 회원 가입한 현재 유저를 데이터베이스에서 찾고 (2) 프로필 정보를 추가하는 로직을 구현하면 된다.
4. 데이터 변경 값 설정하기
생성한 액션 이벤트를 더블 클릭하면, 해당 이벤트의 설정창이 나온다. 여기서 자세한 설정값을 등록할 수 있다. [Thing to change] 필드에서 어떤 개체의 데이터를 변경할지를 선택하면 된다. 현재는 회원가입을 완료한 유저가 프로필을 등록하는 상황이므로, 해당 유저의 데이터를 바꿔주기 [Current Page User]를 선택하면 된다. 만약 유저 개체가 아닌, 특정 데이터베이스의 개체의 데이터를 바꿔줘야 한다면 [Do a search for]을 선택하고, 바꿀 데이터를 찾아주면 된다.
개체를 선택했으니, 이제 개체의 속성 값을 바꿔주면 된다. [Change antoher field]를 클릭하면, 해당 개체가 지닌 속성 항목을 추가 및 변경할 수 있다. 각 속성을 어떤 값으로 변경할지 입력해주면 된다. 이때, 현재 페이지에 있는 정보를 값으로 사용할 수도 있다.
아래 이미지를 보면, (1) 현재 페이지 유저의 (2) description, image, job과 nickname을 입력한 값으로 변경하도록 설정된 상태다. 그리고, [Input userDescription's value]라고 파란색 글씨로 적혀있는데, 프로필 등록 페이지에서 [한 줄 소개] 입력란에 유저가 입력한 값을 불러온다는 의미다. 이처럼, 현재 페이지에 기반해 불러오는 정보는 파란색 글씨로 표기된다.
5. 데이터 체크하기
서비스의 모든 데이터는 [Data] 탭의 [App data]에서 확인할 수 있다. 여기서 설정한 데이터 추가 및 수정 로직이 정상적으로 작동되는지 확인하면 된다. 이 외에도 [Upload]를 클릭해 직접 데이터를 추가할 수도 있고, [Modify]를 클릭해 데이터를 직접 변경할 수도 있다.
우측 상단의 [switch to live database]라고 적혀있는데, 버블은 (1) dev와 (2) release의 데이터베이스를 별도로 운영한다. 디폴트 데이터베이스는 dev이며, 해당 버튼을 클릭하면, release의 데이터베이스를 볼 수 있다.
어떤 페이지로 넘어갈까?
1. 페이지 이동 이벤트
유저의 프로필 데이터 변경이 완료되면, 그다음 단계의 페이지로 넘어가게 만들어줘야 한다. 이를 위해 새로운 다음 페이지로 넘어가도록 추가 액션을 달아주면 된다. (1) 새로운 액션 이벤트를 생성하고 (2) [Navigation] 카테고리의 [Go to Page]를 선택하면, 특정 페이지로 넘어가게 만들 수 있다.
페이지 이동 이벤트의 설정창에는 [Destination]과 [Data to send] 필드가 있다. [Destination]은 이동해서 도착할 페이지를 설정하고, [Data to send]는 해당 페이지로 전송할 데이터를 선택할 수 있다. 현재 유저의 데이터가 계속 필요하면, [Current Page User]를 선택해주면 된다.
여기서 [Data to send]가 헷갈리는 분을 위해 조금 더 보충 설명을 해보자. 우리가 커머스 앱에서 특정 상품을 찾는다고 해보자. (1) 수많은 상품이 리스팅 된 페이지에서 (2) 특정 상품을 클릭하면 (3) 해당 상품의 상세 설명이 나오는 페이지로 이동된다. 여기서 (2)에서 (3)으로 넘어가는 단계에 [Data to send]가 쓰인다. 즉, 우리가 페이지를 이동할 때, 해당 페이지에서 보여줄 데이터를 호출하는 것과 같다.
2. 페이지의 데이터 타입 설정하기
워크플로우에 의해서 데이터가 특정 페이지로 전송되면, 전달받는 페이지에서도 추가 설정을 해줘야 한다. 도착할 페이지로 이동한 후, 페이지 설정창에 들어가면 [Type of content]라는 선택란이 있다. 여기에 직전 페이지에서 전송하는 데이터 타입으로 변경해줘야 한다.
이전에 만든 로직에서 [signup_profile] 페이지에서 [signup_account] 페이지로 이동할 때, [Current Page User] 데이터를 전송하게 설정했으므로, [singup_page] 페이지에서 전달받을 수 있도록 데이터 유형을 [User]로 설정한 걸 볼 수 있다.
화면에 데이터 불러오기
1. Dynamic data란?
버블의 Dynamic data 기능을 이용하면, 생성한 요소에 특정 데이터를 불러와서 보여줄 수 있다. 예를 들어, 유저의 닉네임, 프로필 이미지는 데이터베이스에 저장되어 있는데, 이를 불러와서 보여줄 수 있다.
[Design] 탭으로 이동한 후, 요소의 설정창으로 들어가보자. 아래 이미지를 보면, 텍스트 요소의 필드에 파란 글씨로 [Current User's nickname]이라고 적혀있다. 이는 (1) 유저 데이터베이스에서 (2) 현재 유저를 찾고 (3) 찾은 유저의 닉네임 속성 값을 불러온다는 의미다. 이처럼, 파란 글씨로 적힌 게 모두 Dynamic data로, 데이터베이스에 저장된 데이터나 혹은, 현재 페이지의 각 요소에 있는 정보를 불러온다.
2. Dynamic data 생성하기
입력 필드를 클릭하면 [Insert dynamic data]라는 창이 나오는데, 이를 클릭하면 된다. 만약 이를 클릭하지 않으면, 입력하면 고정 변수가 출력된다. 아래 이미지를 보면 파란색 글씨와 흰색 글씨가 같이 있는데, (1) 파란색 글씨는 데이터베이스에서 데이터를 불러오는 Dynamic data이고 (2) 흰색 글씨는 고정 텍스트다.
Dynamic data를 생성하면, 다음처럼 선택지가 여러 개가 나온다. 선택지는 크게 2가지 유형이 있는데 (1) 데이터베이스에서 데이터를 호출해 값을 입력하거나 (2) 현재 페이지에 있는 정보에 기반해 값을 입력하는 방식이 있다.
만약 유저 데이터를 불러올 거면 [Current User] 혹은, [Current Page User]를 선택하면 된다. 전자와 후자는 다소 차이가 있는데, 예를 들어 인스타그램에서 내 친구의 피드를 본다고 해보자. 그러면 현재 서비스를 사용하는 유저 데이터는 "나"지만, 화면에 출력되는 유저 데이터는 "친구"다. 이런 경우에 "나"는 [Current user]로, "친구"는 [Cureent Page User]로 보면 된다.
데이터베이스의 특정 테이블의 데이터를 불러오려면 [Do a search for]을 선택하면 된다. 해당 선택지를 택하면, 검색 조건을 설정할 수 있다, [Type] 선택란에는 각 테이블을 선택할 수 있고, 선택한 테이블에 필터를 적용해 특정 데이터만 불러올 수 있다. 아래 왼쪽 설정창을 보면, [Session]이란 테이블에서 [todoIds]라는 속성이 현재 페이지의 투두를 포함시키는 데이터만 불러온다고 설정한 걸 확인할 수 있다.
"내" 것만 볼 수 있도록
특정 데이터는 접근 권한을 설정해야 한다. 예를 들어, 자신의 비밀 글은 (1) 나만 볼 수 있고 (2) 다른 사람은 볼 수 없게 등록해야 한다.
내 데이터... 누가 본다면...? 데이터의 권한 설정을 위해서 [Data] 탭의 [Privacy]로 이동해야 한다. 여기서 각 데이터베이스의 테이블마다 접근 권한을 설정할 수 있다. 좌측 영역은 현재 서비스의 데이터베이스의 각 테이블을 볼 수 있고, 우측 영역에는 선택한 테이블의 접근 권한을 설정할 수 있다.
우측 영역에서 [When] 부분에 조건을, [Users who match this rule can]에서는 접근 권한을 입력한다. 즉, 해당 조건이 부합할 때, 설정한 접근 권한을 부여한다는 말이다. 아래를 보면, 첫 번째 조건으로 [This product's reference]라고 적혀있다. 이는 레퍼런스로 설정한 프로덕트라면, 누구나 조회할 수 있도록 설정한 것이다. 두 번째 조건으로 [This product's Creator is Current User]라고 적혀있는데, 현재 유저가 자신이 만든 프로덕트만 볼 수 있도록 설정한 것이다.
마지막 체크, QA와 배포
1. 버그를 찾아보자
빌드를 완료한 서비스의 디버깅은 우측 상단의 [Preview]를 클릭해서 할 수 있다. 그러면, 현재 페이지가 보이는 창이 뜬다. 여기에 좌측 하단을 보면 [Normal], [Slow], [Step-by-step]이 있다. [Step-by-step]을 클릭하고 서비스를 테스트해보면, 워크플로우를 하나하나 동작시켜서 버그가 없는지 체크할 수 있다.
2. 드디어 배포!
최종 QA까지 완료됐으면, 서비스를 배포하면 된다. 우측 상단의 [Development]에서 [Deploy current version to Live]를 클릭하면, 현재까지 만든 서비스를 배포할 수 있다. 참고로 Live 버전 배포는 유료 모델에서만 가능하다.
버블에서 기본 도메인을 제공하는데 {serviceName}. bubbleapps.io라는 형식을 갖는다. 만약 자신이 별도 도메인을 갖고 있다면, [Settings] 탭의 [Domain / email]에 들어가서 도메인을 설정하면 된다.
오프라인에서 함께 노코드 전문가로 거듭나요!
( ~23년 8월 말까지 모집 )
온라인 클래스로 빠르게 공부하는 방법
