[FlutterFlow] 플러터플로우로 만드는 나만의 액셀봇 앱 🤖

프로젝트 소개

FlutterFlow로 만드는 AI 앱
ChatGPT API를 활용하여 사용자가 입력한 내용을 기반으로 엑셀 공식을 자동으로 생성해주는 앱! ⚖️📱

 

📆 개발 기간

25.12.23 ~ 25.01.13 (3주)

 

📱 개발 목적

ChatGPT API를 활용하여 사용자가 입력한 내용을 기반으로 액셀 공식을 자동으로 생성하고, Firebase 데이터베이스를 활용하여 사용자 관리 및 히스토리 기능을 제공하는 앱입니다.

FlutterFlow를 사용하여 개발을 진행하였으며, 이를 통해 UI/UX 설계, 데이터베이스 연동, API 통신 등을 경험했습니다.

 

기술 스택

• 개발 플랫폼: FlutterFlow(모바일 앱을 쉽게 디자인하고 개발할 수 있는 플러터 기반 앱 빌더)
• 백엔드: Firebase (Firestore, Authentication)
• API 연동: OpenAI ChatGPT API
• 기능 구현: Firebase Firestore를 활용한 데이터 저장 및 관리

 

핵심 기능

1. 액셀 공식 추출 기능 

• 사용자가 특정 계산식이나 수식 관련 질문을 입력하면 ChatGPT API를 통해 적절한 엑셀 공식을 반환
• 생성된 공식은 사용자가 저장하여 나중에 다시 확인 가능
• 사용자가 입력한 질문과 생성된 공식이 히스토리에 자동으로 저장

2. 사용자 계정 관리

• Firebase Authentication을 활용한 회원가입 및 로그인 기능 구현
• 프로필 편집 기능 제공 (닉네임, 프로필 사진 변경)
• 로그인한 사용자만 히스토리를 저장하고 확인 가능

3. 히스토리 기능

• 사용자가 생성한 공식 및 입력했던 질문을 저장하여 재확인 가능
• Firestore를 활용해 사용자별 데이터를 분리하여 저장

4. 관리자 기능

• 관리자 계정을 통해 사용자들의 히스토리 확인 가능
• 관리자는 특정 사용자에게 댓글을 남길 수 있으며, 피드백 제공 가능

 

개발 과정 

1. 기획 및 설계

• 앱의 주요 기능 정의 (엑셀 공식 생성, 사용자 관리, 히스토리 기능)
• Firebase Firestore의 데이터 구조 설계
• FlutterFlow를 활용한 UI 디자인

 2. 개발 진행

• FlutterFlow를 활용한 UI 구성: 직관적인 화면 설계 및 화면 전환 구현
• Firebase 연동: Firestore와 Authentication을 사용한 사용자 데이터 관리
• 챗GPT API 연동: 사용자의 입력을 받아 적절한 응답을 반환하도록 API 호출 구현
• 관리자 기능 추가: 특정 사용자 데이터 조회 및 피드백 기능 제공

3. 테스트 및 웹배포

• 기능별 테스트 진행 (로그인, 공식 생성, 데이터 저장 확인)
• Firebase Firestore에서 실시간 데이터 변경 사항 반영 확인
• 사용자 경험 개선을 위한 UI/UX 수정

 

🎞️ 화면 기록

 

 

느낀점

• FlutterFlow를 활용한 개발 경험
  → 코드 없이 UI를 구성하고, API 및 데이터베이스를 연결하는 방법을 익혔음
• Firebase 데이터베이스 활용
  → Firestore를 이용해 사용자별 데이터를 효과적으로 관리하고, Authentication을 통해 인증 시스템을 구축함
• API 통신 및 데이터 연동 경험
  → ChatGPT API를 활용하여 사용자 입력을 처리하고 응답을 제공하는 과정에서 API 연동 방식에 대한 이해도가 향상됨
• 관리자 기능 개발 경험
  → 단순 사용자 기능뿐만 아니라 관리자 영역을 추가하여 데이터를 확인하고 피드백을 제공하는 시스템을 설계할 수 있었음