[Webflow] 웹플로우로 강의 판매 페이지 만들기 (2) - 웹플로우와 에어테이블 연동하기

이번에는 툴, 클래스 테이블을 '에어테이블'에도 추가한 뒤, 웹플로우에서 만든 툴, 클래스 정보를 에어테이블에 불러와 연동하는 법을 알아보겠습니다. 

 

1. 에어테이블에서 테이블 만들기

1) 툴 테이블 만들기(Tools)

먼저 툴 테이블(Tools)을 만들고, 해당되는 필드를 추가해줍니다. 웹플로우 컬렉션에서 추가했던 필드와 동일한 속성으로 추가합니다.

 

2) 클래스 테이블 만들기(Classes)

다음으로 클래스 테이블(Classes)을 만들고, 해당되는 필드를 추가해줍니다. 마찬가지로 웹플로우 컬렉션에서 추가했던 필드와 동일한 속성으로 추가해줍니다. 

 

 여기서 웹플로우의 클래스 컬렉션에서는 관계형 필드를 추가로 설정해준 것 기억나시나요? 에어테이블에서도 마찬가지로, 관계형 필드를 추가해줍니다. 에어테이블에서 관계를 보여주는 필드의 속성은 'Link to' 인데요, 이미 만들어진 Tools 테이블과 연결하라는 'Link to Tools 를 선택해줍니다.

 

2. 에이테이블과 웹플로우 연동하기

1) 테이블(에어테이블) - 컬렉션(웹플로우) 연동하기

Extensions - Nobull Airtable App(이 익스텐션이 추가가 되어있지 않다면 먼저 추가하기) - New Connect 

 

각각의 테이블을 웹플로우와 연동해줍니다. 연동방법은, Extensions - Nobull Airtable App(이 익스텐션이 추가가 되어있지 않다면 먼저 추가하기) - New Connect 로 연결한 뒤, 연결할 웹플로우 사이트를 선택한 뒤 제공되는 API key 를 복사해서 붙여넣어줍니다. 

 

 

2) 필드 맵핑하기

API key 를 붙여넣으면 아래와 같은 셋업 페이지가 나오는데요, 이 셋업페이지에서 웹플로우 컬렉션과 에어테이블의 테이블을 맵핑해줍니다. 아래 이미지에 표시된 것과 같이, 웹플로우에서 미리 설정해둔 필드값과 에어테이블 필드를 동일하게 맞춰줍니다. 

 

 

3. 에어테이블의 관계형 필드 알아보기

에어테이블에서 이용할 수 있는 여러 필드 중, 관계형 필드에 대해서 알아보겠습니다.

강의에서는 3가지 필드를 다뤘는데요, 하나씩 살펴보겠습니다. 

 

 

1. Count 필드

: 관련 레코드의 갯수가 몇개인지 알려줍니다. 필터를 적용하여, 각 상태에 따른 갯수도 파악할 수 있습니다. 여기서는 툴 테이블과 클래스 테이블이 연관되어 있으므로, 클래스 테이블에서 강의 상태가 모집중인 강의의 수를 보여줍니다. 

 

 

 

 

2. Look up 필드

: 특정 필드와 관련되어있는 레코드를 찾아줍니다. 여기서는 툴 테이블과 클래스 테이블이 연관되어 있으므로, 클래스 테이블에 표시된 강의 상태를 연관된 툴 테이블에 표시해줍니다.

 

 

 

 

 

2. Roll up 필드

: 특정 필드와 관련되어있는 레코드의 정보의 평균, 합 등의 다양한 계산이 가능합니다. 여기서는 툴 테이블과 클래스 테이블이 연관되어 있으므로, 클래스 테이블에 표시된 강의 가격의 평균값(average)를 연관된 툴 테이블에 표시해주었습니다.  

 

 

 

 

 

 

 

 

 

지금까지 에어테이블에서 설계한 테이블을 웹플로우를 연동하여 활용하는 법을 알아보았습니다. 다음 글에서는 본격적으로 웹플로우에서 실제 고객에게 보여질 프론트엔드 페이지를 만들고, 이 페이지에 데이터를 넣는 법을 포스팅해보겠습니다 :)