노코드 툴, 버블에서 JS와 nodeJS 사용하기
버블이 어느 정도 익숙한 당신, 코드까지 곁들이는 건 어때요?
1. JS, NodeJS가 버블에 필요한 이유
2. 에디터에서 JS, NodeJS 사용하기
3. 플러그인으로 JS, NodeJS 사용하기
4. 버블박스가 만든 플러그인으로 공부하기
JS, NodeJS가
버블에 필요한 이유
버블은 노코드 툴로 코드를 활용하지 않고 다양한 서비스를 만들 수 있다. 다만, 코드 없이 구현할 수 있는 기능에는 한계가 있다. 만약 버블로 빌드하는 서비스에 복잡한 기능을 구현하려고 한다면, 코드 작업이 동반돼야 한다. 특히 외부 서비스와 연동하려고 하는 경우에는 코드 작업이 필수적으로 수반돼야 한다.
예를 들어 카카오톡 채널 추가가 있다. 버블로 빌드한 서비스에 접속한 유저에게 카카오 채널 추가를 유도하고 싶은 경우, 카카오가 제공하는 카카오톡 채널 REST API나 JS SDK를 사용해야 한다.
버블에서 사용할 수 있는 코드 작업으로 (1) JS와 (2) NodeJS가 있다. 클라이언트단에서 동작하는 JS 함수를 작성할 수 있고, 서버단에서 동작하는 NodeJS 함수를 작성할 수 있다. 카카오톡 채널의 경우, 클라이언트단에서 동작하는 JS 함수를 사용한다. 현재 사이드 프로젝트인 버블박스에서 구현한 플러그인도 모두 JS 혹은 nodeJS 코드를 사용한 것이다. 코드를 통해 어떤 기능까지 구현할 수 있는지 궁금하다면, 아래 링크를 참고하자!
버블에서 코드를 사용하는 방법으로 (1) 에디터에서 바로 사용하는 것과 (2) 플러그인을 통해 사용하는 것, 2가지가 있다. 2가지 방식 모두 JS와 nodeJS 코드를 사용할 수 있다. 국내에는 관련된 글이 거의 없기에 간략히 작성해 본다.
에디터에서 JS, NodeJS 사용하기
1. JS 사용하기
버블 플러그인으로 [Toolbox]를 다운로드하면, 버블 에디터 안에서 JS와 nodeJS 코드를 직접 작성해 사용할 수 있다. 플러그인의 설명에 [Run Javascript]와 [Server script]가 있는데, 이들은 각각 JS와 nodeJS를 의미한다.
플러그인을 다운로드하면, 클라이언트단의 워크플로우에서 [Run javascript] 액션 이벤트를 추가할 수 있다. 여기의 [Script] 입력란에서 JS 코드를 작성해 사용하면 된다.
2. nodeJS 사용하기
NodeJS 코드를 사용하고 싶다면, 우선 Backend workflow를 활성화해야 한다. [설정] 탭으로 이동하고, [API] 탭에서 [Enable workflow API and backend workflows]를 활성화한다.
그러면 페이지 내비게이션에서 [Backend workflows]가 보이게 된다. 여기서 백엔드에서 동작하는 워크플로우를 설정할 수 있다.
여기서 API 워크플로우를 만들고, 액션 이벤트로 [Server script]를 추가한다. 그러면 [Node script]에서 nodejs 코드를 작성해 사용할 수 있다.
생성한 API 워크플로우는 클라이언트 단에 호출해서 사용해야 한다. 다시 클라이언트 워크플로우로 이동하고, 액션 이벤트로 [Schedule API Workflow]를 생성한다. 그러면 [API workflow] 선택란에 앞서 만든 API 워크플로우를 호출해 사용할 수 있다.
플러그인으로 JS, NodeJS 사용하기
다만 위와 같이 코드 작업이 필요한 경우, 버블 에디터에서 사용하는 걸 추천하지는 않는다. 오히려 플러그인을 만들어 사용하는 걸 추천하는데, 유지 보수가 확실히 다르기 때문이다. 에디터에서 액션 이벤트로 코드를 작성할 경우, 코드 작업이 불편하다. 단순한 텍스트 형식으로 코드를 입력하기에 syntax 에러나 코드 줄내림 등이 한눈에 보이지 않아서 유지 보수가 어렵다. 또한, 작성한 코드의 인풋 값과 아웃 값의 관리도 원활하지 못하다. 무엇보다 플러그인에서는 별도 버전 관리를 할 수가 있어서 코드 히스토리 관리가 편리하다.
1. JS 사용하기
버블 홈에서 [Plugins] 탭으로 이동하고, [Create a plugin]을 클릭하면 새로운 플러그인을 만들 수 있다.
플러그인을 생성하고 [Actions] 탭으로 이동하면, 해당 플러그인을 설치했을 때 사용할 수 있는 액션 이벤트를 생성 및 관리할 수 있다.
여기서 [Action type] 선택란에 'Client side'와 'server side'가 있다. 이는 해당 액션 이벤트를 클라이언트단에서 처리할지, 서버단에서 처리할지를 선택하는 것이다. 만약 클라이언트단에서 처리한다면, JS 코드를 써야 한다. 반면 서버단에서 처리한다면, nodeJS 코드를 써야 한다.
Client Side를 선택했으면, 하단에 Field 섹션이 존재한다. Field 섹션은 해당 액션 이벤트에서 들어갈 인풋 값을 관리한다. 만약 Field를 추가했으면, 이제 추가된 Field를 액션 이벤트로 사용할 때 입력 값으로 설정할 수 있다. 예를 들어, 아래는 액션 이벤트를 설정할 때 [ChannelId] 값을 받도록 설정했다.
최하단에는 [Action code] 섹션이 존재한다. 여기서 해당 액션 이벤트가 실행됐을 때, 동작시킬 JS 함수를 입력하면 된다.
해당 액션 이벤트에서 Input Field로 받은 값은 properties.{inputName}으로 호출할 수 있다.
2. node JS 사용하기
Sever Side를 선택했으면, 하단에 Field와 Returned Value 섹션이 존재한다. Field 섹션은 해당 액션 이벤트에서 들어갈 인풋 값을, Returend Value는 아웃풋 값을 관리한다. Returend Value에서 생성한 아웃풋은 워크플로우 안에서 액션 이벤트의 결과 값으로 불러와 활용할 수 있다.
[Action code]에서는 nodeJS 코드를 입력하면 된다. 이때, 특정한 nodeJS library가 필요한 경우, 호출해서 사용할 수 있다. 아래를 보면, google-spread sheet와 google-auth-libary라는 2개의 라이브러리를 호출해 사용하는 걸 볼 수 있습니다.
3. 코드 테스트하기
작성한 Js와 NodeJS 코드가 잘 작동되는지 테스트하기 위해선 버블 에디터에서 플러그인을 호출해야 한다. 좌측의 [App to test the plugin]에서 앱의 Id 값을 입력하면 된다.
그러면 해당 앱의 에디터에서 플러그인이 자동 설치된다. 참고로 앱의 Id는 URL에서 확인할 수 있다. 간혹 앱의 이름과 Id가 다른 경우가 있다. 예를 들어 해당 앱의 이름은 bubblebox로 설정했지만, bubblebox-64217이 Id 값으로 설정된 걸 볼 수 있다.
4. 배포하기
코드 작업을 완료했다면, 플러그인을 직접 배포해서 사용하면 된다. 플러그인의 배포 방식은 (1) 무료로 공개하기 (2) 유료로 판매하기 그리고 (3) 개인용으로만 사용하기가 있다. [Plugin distribtuon licencse] 선택란에서 [Private]를 선택하면, 개인용으로 사용할 수 있다.
참고로 테스트 플러그인과 배포 플러그인은 서로 다르다. 테스트 플러그인은 [Actions] 탭에서 작업한 코드가 실시간으로 반영되고, 배포 플러그인은 배포한 시점에서 작성한 코드만 반영된다. 편하게 버블에서 앱을 만들 때 Dev 버전을 테스트 플러그인으로, Live 버전을 배포 플러그인이라고 생각하면 된다. 배포한 플러그인은 하단의 [Changelog and publishing history]에서 로깅된다.
버블박스가 만든 플러그인으로 공부하기
아직까지 감이 잘 오지 않는다면, 다른 사람들이 무료로 배포한 플러그인을 참고하면 큰 도움이 된다. 무료 플러그인의 경우, 모든 사람들이 플러그인에 작성한 코드도 확인할 수 있다. 아래 플러그인은 무료로 배포한 건데, 우측에 [See plugin code]가 있다. 이 부분을 클릭하면 된다.
플러그인 개발이 막막하다면, 버블박스에서 직접 배포한 플러그인을 활용하길 추천한다. 직접 버블로 서비스를 만들면서 필요하다고 생각한 기능들을 플러그인으로 만들어서 배포 중인데, 나한테 필요한 플러그인은 1개쯤 있지 않을까? 추가적으로 특정 플러그인이 필요한 분이 있다면, 사이트에서 플러그인을 요청할 수도 있다!
