/No-Code Development Agency

FlutterFlow에서 사용자 정의 머신 러닝 모델을 어떻게 만드나요?

FlutterFlow에서 맞춤형 머신러닝 모델을 만드는 방법을 자세한 가이드와 함께 알아보세요. 앱 UI 디자인 방법, Firebase Firestore 통합 방법 등을 배워보세요.

Matt Graham, CEO of Rapid Developers

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.

Book a free No-Code consultation

FlutterFlow에서 사용자 정의 머신 러닝 모델을 어떻게 만드나요?

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에서 커스텀 머신 러닝 모델을 성공적으로 생성하였습니다!

더 유용한 노코드 리소스 살펴보기

No-Code Tools Reviews

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.

Explore

WeWeb Tutorials

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.

Explore

No-Code Tools Comparison

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.

Explore

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences