ChatGPT API 연동했으니 만들려는 서비스에 접목해 보자.
실제 수식을 만드는 우리만의 ChatGPT를 만들어보는 과정이다.
결과물은 다음 화면에서 수식을 입력 후 제출 버튼을 눌렀을 때 엑셀 공식이 출력되어야 한다.
ChatGPTAPI 적용하기
우선 로컬 변수를 생성해야 한다.
페이지 안 결과값을 표시해주기 위해 response 변수를 만든 후에 출력 결과의 값을 response로 바꿔준다.
또한 버튼을 눌러 수식을 제출했을 때 값을 메세지 리스트에 추가하기 위해 chatHistory 변수가 필요하기 때문에 JSON 형식으로 만들었다.
그리고 버튼을 눌렀을 때 액션을 간소하게 만들었다.
1) Update Page State
chatHistory값에 (customFunction →)saveChatHistory을 선택해 적용하고,
chatHistory에 chatHistory 변수를 전달하고 newChat에는 입력한 문장(textField)를 json값으로 전환한 값을 전달한다.
이제 서버에 정보를 보내야 한다.
2) BackEnd Call
API Call을 누른 후, OpenAI ChatGPT 그룹을 선택하고,
apiKey는 이전 key 값과 prompt는 chatHistory 값을 다음과 같이 전달한다.
또한 Action Output Variable Name을 excelFormulaGPTResult로 만들어준다.
이것은 API 호출 결과를 담는 변수이다.
3) Show Snack Bar
API 호출 결과의 성공(True)과 실패(False)에 각각 snackBar를 추가하고, 각각 텍스트가 뜨도록 한다.
4) Update Page State
성공하면 chatHistory 값에 마찬가지로 (customFunction →)saveChatHistory을 선택하고,
chatHistory에 chatHistory 값을 적용, newChat에는 응답이 온 채팅 중 message 값을 골라내어 저장해야 한다.
여기서 message는 아래 JSON Paths에서 정의할 수 있다!
또는 $[’choices’][0][message] 라고 직접 입력해도 가능하다.
그 다음에 update Page State를 통해 바꿔줘야하는 게 하나 남았다.
결과값 response를 표시해주기 위해 , message내의 content값을 저장하여 최종으로 결과를 보여주면 된다!
테스트를 해보면 다음과 같이 SnackBar가 뜨면서 결과값 출력이 잘 되는 걸 확인할 수 있다.
5) Create Document
마지막으로 만들어뒀던 Formula History를 기록하는 CreateDocument 액션을 응답이 왔을 때만 저장되도록 맨 밑으로 이동시켰다.
또한, response_formula에 값을 위와 같은 action output → JSON Body→ Predefined Path → Content 으로 입력하는 것도 잊지 말자.
이렇게 ChatGPTAPI를 연동하여 액션 플로우를 만들었으니 액셀봇으로 튜닝만 하면 마무리가 된다.
액셀봇으로 튜닝하기
액셀 명령어로 결과값을 주기 위해서 처음에 Instruction을 주면 된다! ⭐️
OpenAI 에는 assistant, system, user 이렇게 3가지의 role이 있다.
여기서 system은 chatGPT가 어떤 식으로 동작해야 할지 학습 시키는 것이다. 이를 위해서는, 다음 메시지를 채팅 기록 가장 위에 추가시켜주면 된다.
{ "role":"system", "content":"다음 요청에 해당하는 엑셀 수식을 알려줘. 이때, 답변은 최종적인 엑셀 명령어만 해줘" }
App State에 Instruction (JSON)을 추가하고 위의 메세지를 넣어 만들어준다.
또한 페이지가 로드될 때, 처음부터 해당 값을 적용시켜야 한다.
그러기 위해 On Page Load의 ChatHistory값에 Instruction을 가장 위에 최초로 넣어주자!
테스트를 해보면 액셀 공식으로 대답하는 걸 확인할 수 있다.
마지막으로 복사하기 기능은 간단히 추가할 수 있다.
<복사하기> 해당 row를 눌렀을 때 Copy to Clipboard 액션을 추가하고, SnackBar액션으로 복사 성공 메시지를 띄워주면 완성이다
이렇게 ChatGPT API를 연동하여 앱 서비스에 적용하는 과정을 정리해봤다!
웹 배포 하기
가장 간단한 방법인 웹사이트 배포를 진행해보자. 플러터의 가장 큰 장점은 iOS/Android 뿐만 아니라 웹사이트 배포도 가능하다는 점이다.
웹배포를 위해 Settings → Platforms 에서 Web 옵션을 체크하자.
Settings → Publishing 으로 이동하여
General Information 의 세부 설정을 한 뒤 Publish 만 해주면 배포가 가능하다.
세부 설정
- Site description - SNS를 이용해 공유했을 때 보이는 내용
- page title - 브라우저 상단 이름
- Favicon - 브라우저 왼쪽 아이콘
- Social Share Image - SNS 공유 시 보이는 이미지
유료버전이어야 가능하지만 간단하고 편리하게 이렇게 웹 배포가 가능하다!
배포가 완료되면 나만의 서비스를 만들어서 접속할 수 있게 된다 🙂🙂
'Devlog👩🏻💻 > FlutterFlow' 카테고리의 다른 글
| [FlutterFlow] 플러터플로우에서 ChatGPT API 연동하기 (0) | 2025.01.17 |
|---|---|
| [FlutterFlow/Firebase] 소셜 로그인 적용하기 (0) | 2025.01.13 |
| [FlutterFlow] 플러터플로우에서 서버 연동하기, CRUD 학습하기 (0) | 2025.01.06 |
| [FlutterFlow] 플러터플로우의 기초와 레이아웃 (0) | 2024.12.23 |
