No code Tool 어떻게 사용하는가 ?

Explore

No-code tool 어떻게 사용하는가?

Bubble flow (앱/웹)
Bubble flow (앱/웹)

유의 사항

문제가 생길 때는 페이지를 Reload 하기

SHORT-CUTS

CMD + 드래깅하면 콤포넌트가 복사됨

CMD + G 그룹을 만듬 ??

CMD + 클릭 on 겹치는 element → one-by-one으로 선택할 수 있음

만들 블록을 선택하고 캔버스에서 드래그-앤-드랍해야 함

UI Builder Basic

한 페이지에 조건부로 보이는 요소들이 많아서 Element Tree 활용할 일이 많음

모든 element는 Parent에서 절대 좌표로 위치함

X-ray 아이콘을 클릭하면 모든 element가 반투명으로 보임

Lock this element를 체크해서 안 움직이게 할 수 있다

Property Editor의 (i) 아이콘을 클릭해서 UI/Workflow에서 어떻게 쓰이는지 확인 가능

그룹의 element를 만든 뒤 이를 Reusable하게 만들어서 다른 곳에도 가져다 쓸 수 있다

Group

요소들을 클릭해서 그룹을 만들거나, 각 요소를 클릭한 뒤 Ungroup 하거나

그룹 박스 안에 요소를 끌어 넣으면 그룹에 속하게 됨

Style

스타일링 하기 전에

매뉴얼⁠

을 읽어보고 다시 해 보자

Property Editor에서 수정할 수 있고 저장해 둘 수 있음

Style을 모아서 Theme으로 제공된다

Responsive

먼저 큰 화면에서 디자인을 마친 다음에 작은 화면에서의 미세 조정을 하기

기본 원칙

화면이 줄거나 늘때 구성 요소의 크기가 먼저 조정됨

구성 요소의 max/min width 한계에 달하고, 다음 라인으로 애들 보내는 것도 모두 보내고 난 경우에야 마진을 조정함

겹치는 애들은 하나의 구성요소로 취급된다

Box에 구성 요소를 담아서 조정하기

Responsive viewer로 들어가서 미리 보기를 할 수 있음

파라미터

실제 하기 전에

매뉴얼⁠

을 읽고

Tutorial⁠

을 제대로 봐 보자

Make this element fixed width --

Make this element fixed width - 해지해야 다른 파라미터가 효과가 생김

Minimum width (%) - 화면이 줄어들었을때 최소한의 폭

Maximum width - 화면이 크게 늘어났을 때 이것 이상은 커지지 말라는 폭

Fixed width - 줄어들거나 늘때 폭이 변경이 안되는 것

Collapse margin if ... - 특정 크기 이하이면 마진을 줄여라

Wrap to prev line … - 크기가 늘어나면 윗줄로 옮겨라

Cut off content … 화면이 작아지면 문단을 줄여서 보여라

Keep element proportion … 이미지, 지도 크기를 화면에 비례하게 표시

Explain box margin - 은 마진이 왜 그렇게 되었는지 설명해 줌

Conditional Formatting

속성 Tab의 Conditional Tab 클릭

Log-in 상태는 State 별로 다르게 표현이 가능하다

Transition 탭에서 색이 변하는 시간이라던지 … 하는 전환 효과를 정의할 수 있음

Data Handling

데이터 생성, 수정, 삭제, 읽기는 워크플로, UI는 읽어오기만 가능

Type

데이터 타입, Field를 가지고 있다. Preference에 가서 수정 가능

Type의 Field가 다른 Type을 또 가질 수 있다

a Thing

데이터 타입에 따라 만들어진 데이터 스토리지

사용예) Form 입력 받은 뒤, Workflow를 사용해서 미리 정의된 Type의 Thing을 만듬

Built-in fields - 수정일자 등, 자동으로 생기는 필드

외부 API를 연결해서 데이터를 받으면 새로운 타입, a thing이 생긴다

이렇게 생긴 type은 수정할 수 없음

Data tab을 통해 만들거나, type을 입력할 때 만들거나

Primary field를 설정해서 view를 바꿔 볼 수 있다

특정 사용자가 앱을 실행한 상황(Run as option)으로 디버깅할 수 있다

기본값은 Data 탭에서 해당 Thing의 field 리스트에서 설정할 수 있다

Bubble에 파일을 올릴수 있고, 올리면 URL로 액세스 가능함 (기본으로 Public)

User type

기본으로 생성되고 다른 type과는 다르게 session 관리등을 할 수 있다

a thing을 만드는 것과 user를 만드는 것은 방법이 다름.

‘Sign the user up' or the 'Create an account for someone else' action

Built-in fields - email, email confirmed

a temporary user - 로그인안된 사용자, 사용자 정보 수정 가능하고 3일간 보관됨.

여러개 things를 수정하기

Workflow 상에 할 수 있으나, 바로되지는 않는다 (?)

Scheduled workflow로 이런일을 할 수 있다

Auto-binding

부모 타입의 thing에서 (보통 a type of content - thing에서) 값을 바로 바로 내려 받는 thing

용도 - ?

Option Set

객관식으로 선택하는 필드를 전체 앱에 대해 데이터탭에서 사전 정의할 수 있음

예) 결혼 유무,

이건 데이터베이스에 넣어 두는게 아니라 빠르고 저렴하다

Element Custom State

DB에 저장하지 않고 임시로 가질 수 있는 State

예) 사용자가 지도에 입력한 주소

Privacy & Security

버블의 모든 데이터는 디폴트로 모두 공개된다

공개되면 안될 데이터는 모두 Privacy Rule을 정의하고 세팅을 해야 함

Workflow로 데이터 수정하는데는 Privacy 세팅이 안 먹히니 조심해라

Primary field

각 Thing의 field에는 Primary Field를 지정해서 그 필드 값이 데이터베이스에서 thing을 대표하는 표시 값이 됨

Primary field가 만일 List of things 타입이라면 레퍼런스 ID 값을 넣어줘야 하니까, text field로 지정해야 한다

Data Privacy

기본적으로 모든 데이터는 화면에 보이지 않아도 개발자들이 분석해서 볼 수 있다

Collection → Privacy에서는 특정 조건의 사용자가 데이터 접근 권한을 어떻게 가지는 지 정의하여, 서버에서 데이터에 대한 접근을 관리한다

Displaying Data

Single element

Appearance 세팅 혹은 workflow로 데이터를 element에 넣으면 됨

Single element in Group

그룹이란 = Containers = Groups, Popups, Floating groups

그룹을 만들고, a thing을 연결함

그 뒤에 그룹 내에 element를 만든 뒤, 부모 group과 연결된 데이터와 연결

Page

특정 페이지(최상단 부모 그룹)에 a thing을 연동해서 데이터 보이게 하기

보내는 쪽에서 a thing을 연동해 주고 받는 page에서 참조하여 데이터 시각화

Repeating Group

만들기

그룹 블록을 만들고

콘텐트 타입(Type of Content)를 지정한 뒤 (이미 만들어져 있는 Type)

해당 Type의 a Thing을 연결한 뒤

다이내믹 데이터를 표시할 요소를 그리드에 넣음

검색을 위해서 데이터 소스가 Do a search for … 처럼 콘텐츠의 일부를 선택할 수 있음

리스트를 노출하는 방법 - ??

Workflow

해당 요소를 오른쪽 클릭한 다음에 편집을 시작

하나의 이벤트에 여러 워크플로가 연결되어 있을때는 병렬로 실행됨

클라이언트 사이드 액션은 과금에 안들어 가지만 서버 액션은 과금됨

Custom Event로 반복 사용되는 workflow를 정의해 두고 쓸 수 있음

이때 a type of a thing이 사용되면 호출하는 쪽도 같은 type을 써야 함

Debugging

URL 끝에 ?debug_mode=true 붙여서 활성화

Preview로 보는 앱은 디버거 동작이 가능하다

Application Editor에서 Breakpoint를 세팅할 수 있다

Performance

The less data being fetched, the faster the performance

Using advanced filters can slow queries down

External API

⁠

Airtable과 연동하는 방법⁠

⁠

발생한 문제와 해결책

Airtable과 연동했을 때 값을 넣는 Type이 안나옴 → Airtable을 연동하는 Repeating Group을 하나 만들어 보고 그 뒤에 페이지 Reload하니까 나온다 …

이슈

여러개의 Condition에 따른 것을 정의할 때는?

Types을 사전에 Airtable로 만들어 둘 방법은 없을까?

인사이트

프로그래밍을 자연어로 하는데 이게 영어다

스프레드시트 → Airtable (data oriented) → Glide (UI oriented)

내부툴이라면 Retool과 같은 그리드 형태가 더 좋은 듯 하다

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

Bubble flow (앱/웹)Bubble flow (앱/웹)