이전 강의를 통해 Gemini API 키 발급과 플렉스튜디오에서 API를 연동하는 방법을 살펴봤어요. 이제 실제 시나리오에서 API를 호출해 앱에서 데이터를 활용하는 과정을 소개할게요.
사용자의 요리 실력을 고려해 맞춤형 레시피를 추천해 주는 앱으로 예시를 들어볼게요. 사용자가 선택한 정보(요리 실력, 음식명 등)는 카테고리(Category)에 담겨 있어요. 앱의 마지막 단계에서 이 데이터를 조합해 우리가 만든 API를 호출해요.
1. 마지막 스텝인 Step5로 이동할게요.
2. 스텝 이벤트 사용 > 이벤트 발생 시점: 최초 시작 전 (Init) > 이벤트명: ‘Gemini 호출(변경 가능)’ 으로 설정한 후, 파란색 체인 아이콘을 눌러 이벤트 스크립트를 작성할게요.
1. 이전에 만들어 둔 Gemini API를 직접 호출해봅시다.
2. 노란색 버튼을 눌러 스크립트를 추가하고, Gemini에게 보내기 위한 데이터 형식으로 변환할게요.
다음과 같이 스크립트를 작성해 봅시다. 앞서 ParamBlocks에 role과 content를 정의했으므로, AI에게 정보 전달을 위해 아래 스크립트로 작성했어요.
const role = "user";
const content = `'${_c.menu[0].level}'의 요리 실력을 가진 사람에게 **${_c.menu[0].name}** 레시피를 알려줘.`;
f.Collection.addSector({role, content},'request');
3. 이제 아까 만들어 둔 이벤트에 API를 추가해볼게요.
4. 파란색 버튼을 눌러 API를 추가하고, 저희가 만든 API명과 모듈명을 선택해주세요.
ParamBlock의 카테고리 명을 ‘request’로, ResultBlock의 카테고리 명을 ‘result’로 설정해주세요.
특히 ResultBlock의 덮어쓰기를 설정해주세요.
1. 우측 상단의 작은 초록색 화살표 아이콘을 클릭해주세요. 디버거에서 앱 화면을 마지막 스텝까지 이동해 주세요.
2. 꼭! 오른쪽 화면에서 ParamBlock에 대한 데이터가 전달되는지 확인해주세요!
만약 해당 부분이 비어있다면, 스튜디오에서 ‘보내는 데이터(ParamBlocks)’에 카테고리가 정상적으로 들어 있는지 다시 한번 확인해 주세요.
3. 마지막 스텝에서는 Gemini API가 호출되어 정상적으로 텍스트를 받아오는 걸 볼 수 있어요.
1. API 연동 버튼에서 전처리 스크립트를 통해 구현이 가능해요. API 연동 버튼 내의 전처리 스크립트를 사용하므로, 기존의 스크립트는 ‘SKIP’ 토글을 활성화 해 주세요.
2. 다시 이곳으로 돌아와서, Script 탭의 ‘ParamBlocks Convert Script’를 다음과 같이 변경해주세요.
변경 후에는 꼭 ‘배포’ 버튼을 눌러 적용해주세요.
let params = [];
for (let item of paramBlocks[0]) {
params.push({
"role": "user",
"parts": [
{
"text": "요리 " + item.level + "인 사람에게 " + item.name + " 레시피를 알려줘."
}
]
});
}
3. 다시 스튜디오로 돌아와서, 이번에는 request 카테고리가 아닌 menu로 변경할게요.
저희가 Script 탭에서 menu를 사용하는 데이터로 변경했기 때문이에요.
4. 저희가 선택한 카테고리가 정상적으로 ParamBlock에 들어갔네요.
5. 디버거에서 정상적으로 API가 호출되는 걸 확인하실 수 있어요.
이제 시나리오에서 API 호출까지 완료했어요. Gemini API를 활용하면 복잡한 AI 모델을 기반으로 한 기능도 간단히 구현할 수 있습니다. 플렉스튜디오에서 직접 AI 기능을 결합해 나만의 멋진 앱을 만들어 보세요!
만약 API 호출 중에 오류가 생긴다면, 이전 강의인 ‘API 연동 테스트 기능으로 오류 해결하기’를 참고해보세요!