질문: FlutterFlow를 사용하여 자선 또는 크라우드펀딩 플랫폼을 어떻게 구축하나요?

FlutterFlow에서 새 프로젝트 설정하기

먼저 FlutterFlow로 이동하여 가입하거나 로그인하세요. 대시보드에 들어가서 **'새 프로젝트'**를 클릭하세요. 프로젝트에 적절한 이름을 부여하고, UI Builder로 Flutter를 선택하십시오.

단계 1: 사용자 인증 생성하기

크라우드펀딩 플랫폼은 기부자와 모금자를 관리하기 위한 사용자 인증 시스템이 필요합니다. 왼쪽 사이드바에 있는 **'Auth'**를 클릭하여 앱에 사용자 인증을 추가할 수 있습니다. FlutterFlow는 Firebase 인증을 포함한 여러 인증 시스템을 지원합니다.

**'Firebase 추가'**를 클릭하고 Firebase 프로젝트의 세부 정보를 입력하세요. 이에는 웹 API 키, 인증 도메인, 프로젝트 ID가 포함됩니다. 이 정보는 Firebase 프로젝트 설정에서 찾을 수 있습니다. 이 설정을 저장하십시오.

'Auth' 섹션에서 이메일/비밀번호 로그인을 선택합니다. Google과 Apple 로그인도 활성화할 수 있습니다. 그런 다음 로그인 및 가입 페이지가 자동으로 생성됩니다.

단계 2: 메인 페이지 디자인하기

메인 페이지는 모든 활성 크라우드펀딩 캠페인을 보여줍니다. '새 페이지 추가' 버튼을 클릭하고 이를 '메인 페이지'라고 이름 지어주세요.

'위젯 추가' 메뉴에서 'Top Bar' 위젯을 추가분 시전하세요. 플랫폼에 적절한 제목을 적으세요. '추가' 아이콘과 '프로필' 아이콘도 추가 할 수 있습니다. '추가' 아이콘은 '캠페인 생성' 페이지로 이동하고 '프로필' 아이콘은 사용자의 프로필로 이동합니다.

다음으로 'StreamBuilder' 위젯을 추가하세요. 이렇게하면 새 캠페인이 생성될 때 캠페인 목록이 자동으로 업데이트됩니다. 데이터베이스로 Firebase Firestore를 선택하고 관련 세부 정보를 입력하세요.

'StreamBuilder'의 하위 항목으로 'ListView.builder' 위젯을 추가하세요. 'ListView.builder'는 캠페인의 스크롤 가능한 목록을 생성합니다.

단계 3: ListView에서 각 Card 디자인하기

캠페인은 ListView에서 카드로 표시됩니다. 각 카드는 현재의 기금, 목표, 캠페인의 제목, 그리고 모금자의 이름을 보여야 합니다.

'ListView.builder'의 하위에 'Card' 위젯을 추가하세요. 이렇게 하면 작업할 수 있는 둥근 상자가 제공됩니다.

'Card' 위젯 내에 'Column' 위젯을 추가하세요. 이를 통해 여러 위젯을 세로로 추가할 수 있습니다.

column의 하위에 'Text' 위젯을 추가하세요. 텍스트는 캠페인의 이름을 표시해야 합니다.

다음으로, 텍스트 위젯 아래에 'ProgressBar' 위젯을 추가하세요. 현재 값으로 '현재 자금'을 선택하고 최대 값으로 '목표'를 선택하세요.

마지막으로, 모금자의 이름을 보여주는 또 다른 'Text' 위젯을 추가하세요.

단계 4: '캠페인 생성' 페이지 생성하기

새로운 크라우드펀딩 캠페인을 생성하기 위한 페이지가 필요합니다. 새 페이지를 생성하고 이를 '캠페인 생성'이라고 이름 지어주세요. 사용자가 캠페인에 대한 세부 정보를 입력할 수 있는 양식을 추가하세요.

이 페이지는 캠페인의 제목, 설명, 목표, 그리고 캠페인의 선택적 이미지 URL에 대한 'TextFormField' 위젯이 있어야 합니다.

클릭하면 양식 데이터를 Firestore에 저장하는 **'SubmitButton'**을 추가하세요.

단계 5: 사용자 프로필 페이지 생성하기

또한 간단한 사용자 프로필 페이지를 생성해야 합니다. 이 페이지는 사용자의 이름, 이메일, 그리고 사용자가 생성한 캠페인의 목록을 보여주어야 합니다.

단계 6: 탐색 구현하기

앱을 탐색 가능하게 하려면 '탐색' 탭으로 이동하여 경로를 설정하세요. 메인 페이지가 초기 경로여야 합니다.

단계 7: 앱 출시하기

디자인에 만족했다면, 오른쪽 상단에 있는 **'앱 출시'**를 클릭하세요. FlutterFlow는 이제 코드를 생성하고 컴파일합니다. 이 단계는 몇 분 정도 걸릴 수 있습니다. 완료되면 웹 미리보기에서 앱을 미리볼 수 있습니다.

단계 8: 앱 배포하기

앱에 만족하면 이제 배포할 차례입니다! '내보내기'를 클릭하고 선호하는 내보내기 방법을 선택하세요. GitHub로 코드를 내보내거나 zip 파일로 다운로드 할 수 있습니다.

FlutterFlow로 구축된 자선 또는 크라우드펀딩 플랫폼으로 세계에 긍정적인 영향을 미치는 여정을 시작하십시오!