Bubble 1-Day Class 복습 - 워크플로우

 

 

Bubble.io에서 처음으로 만든 [Horoscope Today] 서비스에서  Button1 [오늘의 운세] 를 클릭했을 때 실행되는 워크플로우를 정리해 보면 다음과 같다. 

[Button1] 오늘의 운세 / [Button 2] 결과복사

 

[Button 1]  워크플로우의 전체적인 흐름

Button 1 워크플로우는 OpenAI API를 호출하여 사용자가 입력한 생년월일과 성별 정보를 기반으로 GPT가 점성술 기반으로 생성한 오늘의 점성술  text를 받아오는 과정을 나타낸다.  

 

• Step 1에서 OpenAI API 호출을 통해 운세 데이터를 받아온다 
• Step 2에서는 이 데이터를 MultilineInput Horoscope 요소에 표시하여, 사용자가 그 결과를 볼 수 있도록 한다 

두 단계의 워크플로우를 통해 사용자는 API에서 받아온 '오늘의 점성술' 을 실시간으로 확인할 수 있게 된다.

 

 

Step 1:  Open AI API - API Call

• Body Parameters: API 호출 시 서버에 전송할 데이터를 설정한다. 사용자가 입력한 값(출생연도, 출생월, 성별, 출생일)이 API의 Body에 매핑되어 전송된다 
  • 출생연도: 사용자가 입력한 "출생연도" 필드의 값을 가져와서 body의 출생연도 키에 연결
  • 출생월: 사용자가 입력한 "출생월" 필드의 값을 body의 출생월 키에 연결
  • 성별: 사용자가 입력한 "성별" 필드의 값을 body의 성별 키에 연결
  • 출생일: 사용자가 입력한 "출생일" 필드의 값을 body의 출생일 키에 연결
  • Only When: 특정 조건이 충족될 때만 이 API 호출이 실행되도록 설정할 수 있다. 이 예제에서는 조건이 정의되지 않았지만, 필요에 따라 추가할 수 있을 것이다 
• Add a Breakpoint in Debug Mode:  enable 시켜보니 디버그 모드에서 중단점을 설정하여, API 호출이 어떻게 작동하는지 실시간으로 검토할 수 있다. 

 

[참고] API Call의 Data Type 과 API Call Method

• JSON 데이터 타입: 데이터는 JSON 형식으로 서버에 전송되며, API 응답도 JSON 형식으로 받아온다
• POST Method 사용: 이 API 호출은 서버에 데이터를 전송하고, 그 결과로 '오늘을 점성술 텍스트 데이터'를 받아오기 위헤  POST 메서드를 사용했다. 
• 데이터 전송 방식: GET 요청은 데이터를 URL의 쿼리 파라미터로 전송한다. 이 방식은 데이터가 많을 경우 URL의 길이 제한에 걸려 문제가 발생할 수 있다. POST 방식은 데이터를 요청 본문(Body)에 포함시키므로, 대량의 데이터 전송에 적합하다.
• 보안: GET 요청은 URL에 데이터를 포함시키기 때문에, 민감한 정보가 쉽게 노출될 수 있다. 반면, POST 방식은 데이터가 본문에 포함되어 상대적으로 안전하다. 

결론적으로 GET 요청은 기본적으로 문자열로만 데이터를 전송하기 때문에, JSON과 같은 복잡한 데이터 구조를 전송하는 데 적합하지 않다. POST 방식은 JSON 데이터와 같은 데이터를 전송하는 데 더 유용하다. 따라서, 위 상황에서 GET 방식 대신 POST 방식을 사용하는 것이 더 적절한 것이다 .

 

 

Step 2: Set States - MultilineInput Horoscope

 

API 호출의 결과를 받아와서 MultilineInput 필드에 표시해서 API 응답을 사용자가 볼 수 있도록 설정한다. 이러한 과정을 통해 사용자가 입력한 데이터를 기반으로 OpenAI API가 호출되고, 결과가 페이지에 표시된다 

Bubble.io에서 워크플로우 설정은 이 서비스가 무엇을 하는 것이고 어떻게 작동할지 모든 이해 관계자(비즈니스, 사용자)의 요구를 충족시키는데 필요한 기능을 정의하는 서비스를 기획, 분석, 설계, 구현, 시험 하는데 있어 필요한 설계도와 같은  SRS (Software requirements specification)에 따라 Application/Service의 비즈니스 로직을 단계별로 구현하는 과정이라고 이해하면 되겠다 

 

1. Element 선택:
   • Element: 여기서 MultilineInput Horoscope는 사용자가 API 호출 결과를 확인할 수 있는 텍스트 필드다. 즉, API 호출로 받아온 오늘을 점성술 결과를 이 필드에 표시하게 된다.  
2. Custom State 설정:
   • Custom state: Custom State는 특정 요소에 대한 상태 값을 저장하는 데 사용되며, 여기서는 API 호출의 결과를 저장하기 위해 GPT RESPONSE라는 Custom State 를 사용했다 
3. Value 설정:
   • Value: Result of step 1 (Open AI API - API...)의 choices:first item's message content를 설정
   • 즉, 첫 번째 단계에서 받은 API 호출 결과 중 메시지의 내용을 가져오고 > 이 값이 GPT RESPONSE라는 Custom State 에 저장되고> Custom State를  MultilineInput Horoscope 요소에 표시하는 것
4. Only when 조건:
   • 특정 조건에서만 이 상태가 설정되도록 할 수 있다. 실습에서는  조건이 비어 있지만, 필요에 따라 추가적인 조건을 설정하여 워크플로우의 실행을 제어할 수 있을 것이다. 
5. 디버그 옵션:
   • Add a breakpoint in debug mode: 디버그 모드에서 중단점을 설정하여 이 상태가 설정되는 과정을 실시간으로 확인할 수 있다. 지금은 간단해서 에러가 발생하지 않았는데 뭔가 에러가 발생 하면 디버깅 할때는 유용 할 것 같다 

 

[Button 2]  워크플로우의 전체적인 흐름

 

[Button 2] 의 워크플로우는 [버튼1] '오늘의운세'를 클릭했을 때  생성된 점성술 결과를 클립보드에 복사하고, 복사가 완료되었음을 알리는 간단한 메시지(Toast)를 표시하는 과정을 포함한다 

 

1. Step 1: Create a new log (로그 생성)
   • 사용자가 "결과복사" 버튼을 클릭하면 로그가 생성되며, 이 로그는 사용자가 복사 버튼을 클릭했다는 이벤트를 기록할 수 있다. 
2. Step 2: Copy to clipboard from static text (클립보드에 텍스트 복사)
   • 두 번째 단계는 "오늘의 운세" 결과로 표시된 점성술 결과를 텍스트를 복사하여 사용자가 다른 곳에 붙여넣을 수 있도록 한다. 사용자가 클릭할 때 복사된 텍스트는 사용자의 클립보드에 저장된다.  
3. Step 3: Toast (Toast 메시지 표시)
   • 세 번째 단계는 "복사가 완료되었습니다"와 같은 간단한 메시지를 Toast 형태로 사용자에게 표시한다. Toast는 화면에 잠깐 나타났다 사라지는 알림 메시지로, 사용자가 복사 작업이 완료되었음을 직관적으로 알 수 있게 해 준다. 꽤 유용한듯

 

Step 1:  Create a new log 

Create a new log는 사용자가 클릭한 정보를 기록하는 과정으로 사용자가 버튼을 클릭할 때의 입력값과 결과값을 로그로 저장하는 역할을 한다.

 

1. Type: "log"
   • 이 단계에서 생성되는 데이터의 유형을 "log"로 지정한다. 이 로그는 사용자가 어떤 입력을 통해 어떤 결과를 얻었는지를 기록하는 데 사용된다.
2. Input: 태어난연도’s value
   •  사용자가 "오늘의 운세" 버튼을 클릭할 때 입력한 생년월일 정보 중 하나인  "태어난 연도" 값을 로그에 기록한다. 엄밀히 따지면 Imput은 body의 키값을 다 넣어야 하는데 귀차니즘으로 패스!
3. Output: MultilineInput Horoscope’s GPT RESPONSE
   • "오늘의 운세" 버튼을 클릭한 후 OpenAI API를 통해 생성된 점성술 결과가 이 필드에 저장된다. 이 값은 사용자가 얻은 결과로, "결과복사" 버튼을 클릭했을 때 이 정보를 클립보드로 복사한다.
4. User: Click
   • 이 필드는 현재 빈 상태로 설정되어 있다. 일반적으로 이 필드에는 로그를 남긴 사용자의 정보를 기록힌다. 예를 들어, 사용자가 로그인한 상태라면 사용자 ID나 이름을 이 필드에 추가할 수 있다.
5. Set another field:
   • 이 버튼을 클릭하여 추가적인 필드를 설정할 수 있다. 필요에 따라 더 많은 정보를 로그에 기록하고자 할 때 사용한다. ( 위에서 말한대로 .input 을 추가해야 ..) 
6. Only When:
   • 이 단계는 특정 조건이 충족될 때만 실행되도록 설정할 수 있다. 현재는 그냥 단순하게 버튼이 클릭될 때마다 로그가 생성된다 .
7. Add a breakpoint in debug mode:
   • 디버그 모드에서 이 단계의 실행을 중단하고 실시간으로 로그 생성 과정을 검토할 수 있도록 설정할 수 있다. 

 

Step 2:  Copy to clipboard from static text (클립보드에 텍스트 복사)

 

두 번째 단계는 "오늘의 운세" 결과로 표시된 텍스트를 복사하여 사용자가 다른 곳에 붙여넣을 수 있도록 고정된 텍스트 또는 특정 요소의 텍스트를 클립보드에 복사한다

 

1. Text to copy:
   • 텍스트 복사: "Result of step 1 (Create a new log...)'s output" , 즉 첫 번째 단계에서 생성된 로그의 출력 결과가 복사된다. 이 값은 "오늘의 운세" 버튼을 클릭했을 때 생성된 점성술 결과로 사용자는 결과를 복사하여 다른 문서나 메시지 창 등에 붙여넣을 수 있게 된다 

 

Step 3: Toast (Toast 메시지 표시) 

"복사가 완료되었습니다"와 같은 간단한 알림을 사용자에게 표시, 전달한다 . 

1. Title:
   • Toast 메시지의 제목을 설정하는 부분.현재는 "Title"로 설정되어 있다.
   • 이 필드에는 사용자가 원하는 제목을 입력할 수 있으며, 이 제목은 메시지 창 상단에 표시된다.
2. Message:
   • 표시될 메시지의 내용. 현재 사용자가 클립보드로 복사 작업을 완료했음을 알리는 "복사가 완료되었습니다"라는 텍스트가 입력되어 있다.
3. Timeout:
   • Toast 메시지가 화면에 표시될 시간을 밀리초(ms) 단위로 설정한다. 현재 5000ms로 설정되어 있어, 약 5초 동안 메시지가 화면에 표시된 후 사라지게 된다.(3초가 적당할 듯) 
4. Title color:
   • 제목 텍스트의 색상을 설정하는 옵션. 현재는 흰색(#FFFFFF)으로 설정
5. Message color:
   • 메시지 본문의 텍스트 색상을 설정. 이 역시 흰색(#FFFFFF)으로 설정
6. Background color:
   • Toast 메시지 창의 배경색을 설정. 현재는 파란색(#1E88E5)으로 설정
7. Click to close:
   • 사용자가 메시지를 클릭하면 즉시 닫히도록 설정하는 옵션. 이 옵션이 체크되어 있으면 사용자가 메시지를 클릭하면 즉시 사라지게 된다. 
8. Position:
   • Toast 메시지가 화면에 표시될 위치를 설정. 현재는 "Top Right"로 설정되어 있어, 화면 오른쪽 상단에 표시
9. Animation in / Animation out:
   • Toast 메시지가 화면에 나타날 때와 사라질 때의 애니메이션 효과를 설정하는 옵션.
   • Animation in: 메시지가 나타날 때 "fade in up" 애니메이션이 적용.  메시지가 서서히 나타나며 위쪽으로 올라오는 효과 
   • Animation out: 메시지가 사라질 때 "flipOutX" 애니메이션이 적용. 이 효과는 메시지가 X축을 기준으로 뒤집혀 사라지게 함 

 

 

Data Type 

 

타입은 사용자가 특정 작업을 수행할 때 발생한 입력값과 출력값을 기록하고 추적하기 위해 "Log"라는 데이터 구조를 생성했다 

 

1. Data Type: Log
   • log라는 이름으로 정의된 데이터 타입은 입력, 출력, 사용자 등 특정 활동의 정보를 기록한다 
2. Fields for Type log:
   • input (text): 사용자가 입력한 값. 사용자가 태어난 연도를 입력하면 이 필드에 그 값이 저장
   • output (text): 사용자가 입력한 값에 대한 결과.  "오늘의 운세" 결과가 이 필드에 저장
   • user (User): 이 로그를 생성한 사용자를 기록. 사용자의 고유 ID나 프로필 정보
   • Creator (User): 기본 필드로, 이 로그를 생성한 사용자의 정보를 자동으로 저장
   • Modified Date (date): 이 로그가 마지막으로 수정된 날짜를 기록 (기본 필드)
   • Created Date (date): 로그가 처음 생성된 날짜를 기록 (기본 필드)
   • Slug (text): URL이나 데이터 식별자에 사용되는 텍스트 필드 (기본 필드)

 

자료 

 

 

https://manual.bubble.io/

Introduction | Bubble Docs