FlutterFlow에서 맞춤형 머신러닝 모델을 만드는 방법을 자세한 가이드와 함께 알아보세요. 앱 UI 디자인 방법, Firebase Firestore 통합 방법 등을 배워보세요.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
1단계: 새로운 FlutterFlow 프로젝트 생성
FlutterFlow 웹사이트로 이동하여 플랫폼에 로그인하십시오. 성공적으로 로그인한 후 새 프로젝트 만들기
버튼을 클릭하여 새 프로젝트를 시작합니다. 프로젝트의 이름을 선택한 후 생성
을 클릭합니다.
2단계: 앱 UI 디자인
새 프로젝트를 만든 이후에는 모바일 장치 화면의 개요를 볼 수 있습니다. 이것은 FlutterFlow UI 빌더입니다. 커스텀 머신 러닝 모델을 작동시키려면 모델에 정보를 입력하고 출력을 표시하는 방법이 필요합니다.
드래그 앤 드롭 기능을 사용하여 앱의 사용자 인터페이스를 디자인하세요. 예를 들어, 사용자가 데이터를 입력하는 부분을 만들기 위해 화면에 텍스트 상자를 드래그하여 놓습니다. 그런 다음, 클릭하면 애플리케이션이 머신 러닝 예측을 수행하게 만드는 버튼을 추가할 수 있습니다.
3단계: Firebase Firestore 컬렉션 생성
기계 학습 모델에서 사용할 데이터를 저장하기 위해 Firebase Firestore 컬렉션을 설정해야 합니다. 메인 FlutterFlow 화면에서 왼쪽에 있는 Database
탭을 클릭하고 Add Collection
을 선택합니다. 여기에서 데이터의 구조를 정의합니다. 여기서 이제 생성하는 필드는 나중에 기계 학습 모델에서 사용할 수 있습니다. Create
를 클릭하여 컬렉션을 완성합니다.
4단계: Firebase 모델을 FlutterFlow에 통합
이제 Firebase를 통해 기계 학습 모델과 FlutterFlow를 연결할 것입니다. FlutterFlow는 코드를 생성하고 Firebase ML Kit와 직접 상호 작용할 수 있습니다. 먼저 훈련된 모델을 Firebase에 배포해야 합니다.
Firebase 콘솔로 이동하여 FlutterFlow 프로젝트와 일치하는 프로젝트를 클릭하고 Machine Learning
탭으로 이동합니다. 여기에서 TensorFlow Lite 모델을 업로드하고 모델 이름을 얻을 수 있습니다. 나중에 필요하므로 모델 이름을 복사합니다.
5단계: FlutterFlow 프로젝트에 Firebase ML 패키지 추가
FlutterFlow 프로젝트로 돌아와서 최상위 메뉴에서 Integrations
을 찾습니다. 드롭다운에서 Firebase ML
을 선택합니다. 여기에는 Firebase Machine Learning 모델의 이름을 입력할 수 있는 옵션이 표시됩니다. 앞에서 복사한 모델 이름을 붙여넣고 Apply
를 클릭합니다.
6단계: 버튼 동작 커스터마이징
이제 버튼이 클릭될 때 발생하는 동작을 생성해야 합니다. UI 빌더로 돌아와 버튼을 클릭합니다. 오른쪽의 Actions
패널에서 onClick
을 클릭합니다.
드롭다운에 나타나는 목록에서 Firebase ML model 호출
과 같은 항목을 찾을 때까지 이 목록을 아래로 이동해야 합니다. 이것은 기계학습 모델을 호출하고 입력 데이터를 전달하는 액션입니다. 이 모델에 어떤 입력 데이터를 전달할지 선택해야 합니다. 이것은 일반적으로 텍스트 상자에서의 텍스트 또는 다른 유형의 사용자 입력이 될 것입니다.
7단계: 결과 표시
마지막으로, 사용자에게 모델의 출력을 표시하고 싶을 것입니다. 작업하는 데이터의 종류에 따라 이것은 텍스트 출력으로 표시되거나 더 시각적인 형식으로 표시될 수 있습니다. 드래그 앤 드롭 편집기를 사용하여 이 출력을 효과적으로 표시할 요소를 화면에 추가할 수 있습니다.
텍스트 상자 또는 다른 형태의 출력을 만든 후에는 화면 오른쪽의 Bindings
를 클릭하고 'Text'를 기계 학습 모델 호출의 출력에 바인딩하도록 설정합니다.
8단계: 앱 최종화 및 미리보기
모든 원하는 기능이 구현된 후에는 앱을 미리보기 할 수 있습니다. 오른쪽 상단의 Preview
버튼을 클릭하면 실제 장치에서 사용하는 것처럼 앱을 테스트할 수 있는 시뮬레이터가 시작됩니다.
앱에 만족하면 프로젝트를 빌드하고 내보낼 수 있습니다. 최상위 메뉴에서 Build
를 선택하고, 결과를 다운로드한 다음 원하는 코드 편집기에서 더 설정하거나 직접 Android 또는 Apple App Stores에 게시할 수 있습니다.
축하합니다, FlutterFlow에서 커스텀 머신 러닝 모델을 성공적으로 생성하였습니다!
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.