Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

Flutter 앱에 Firebase 추가

이 가이드에 따라 Flutter 앱에 Firebase 제품을 추가하세요.

기본 요건

  • 원하는 편집기 또는 IDE를 설치합니다.

  • Flutter 앱이 iOS 8 이상을 타겟팅하는지 확인합니다.

  • 앱을 실행할 실제 iOS 기기 또는 iOS 시뮬레이터를 설정합니다.

    • 클라우드 메시징의 경우 다음 작업을 완료합니다.

      • 실제 iOS 기기를 설정합니다.
      • Apple 개발자 계정의 Apple 푸시 알림 인증 키를 가져옵니다.
      • XCode의 App(앱) > Capabilities(기능)에서 푸시 알림을 사용 설정합니다.
    • 다른 모든 Firebase 제품의 경우 실제 iOS 기기 또는 iOS 시뮬레이터를 사용할 수 있습니다.

  • 다음을 비롯하여 특정 운영체제에 맞는 Flutter를 설치합니다.

    • Flutter SDK
    • 지원 라이브러리
    • 플랫폼별 소프트웨어 및 SDK
  • Google 계정을 사용하여 Firebase에 로그인합니다.

아직 Flutter 앱이 없다면 시작하기: 시험 사용을 완료하여 선호하는 편집기나 IDE를 통해 새 Flutter 앱을 만들 수 있습니다.

1단계: Firebase 프로젝트 만들기

Firebase를 Flutter 앱에 추가하려면 먼저 앱에 연결할 Firebase 프로젝트를 만드세요. Firebase 프로젝트에 대한 자세한 내용은 Firebase 프로젝트 이해를 참조하세요.

2단계: Firebase에 앱 등록

  1. Firebase Console의 프로젝트 개요 페이지 중앙에 있는 iOS 아이콘()을 클릭하여 설정 워크플로를 시작합니다.

    Firebase 프로젝트에 앱을 이미 추가한 경우 앱 추가를 클릭하여 플랫폼 옵션을 표시합니다.

  2. iOS 번들 ID 필드에 앱의 번들 ID를 입력합니다.

    XCode에 열린 프로젝트에서 이 번들 ID를 확인합니다. 프로젝트 탐색기에서 최상위 앱을 선택하고 General(일반) 탭에 액세스합니다. Bundle Identifier(번들 식별자) 값이 iOS 번들 ID(예: com.yourcompany.ios-app-name)입니다.

  3. (선택사항) 설정 워크플로의 안내를 따라 기타 앱 정보를 입력합니다.

  4. 앱 등록을 클릭합니다.

3단계: Firebase 구성 파일 추가

  1. GoogleService-Info.plist 다운로드를 클릭하여 Firebase iOS 구성 파일(GoogleService-Info.plist)을 가져옵니다.

    • 언제든지 다시 Firebase iOS 구성 파일을 다운로드할 수 있습니다.
    • 구성 파일에 (2)와 같은 문자가 추가되지 않았는지 확인합니다.
  2. Xcode를 사용하여 파일을 Flutter 앱의 Runner/Runner 디렉터리로 이동합니다.

  3. Firebase Console 설정 워크플로로 돌아가서 다음을 클릭하여 나머지 단계를 건너뜁니다.

  4. FlutterFire 플러그인 추가로 넘어갑니다.

4단계: FlutterFire 플러그인 추가

Flutter는 플러그인을 사용하여 Firebase API 등 다양한 플랫폼별 서비스에 대한 액세스를 제공합니다. 플러그인에는 각 플랫폼의 서비스 및 API에 액세스하기 위한 플랫폼별 코드가 포함되어 있습니다.

각 Firebase 제품(예: 실시간 데이터베이스, 인증, 애널리틱스, Cloud Storage)에 하나씩 여러 다양한 라이브러리를 통해 Firebase에 액세스할 수 있습니다. Flutter는 일련의 Firebase 플러그인을 제공하며 이를 총칭하여 FlutterFire라고 합니다.

Flutter는 멀티 플랫폼 SDK이므로 각 FlutterFire 플러그인을 iOS와 Android 모두에 적용할 수 있습니다. 따라서 FlutterFire 플러그인을 Flutter 앱에 추가하면 Firebase 앱의 iOS 및 Android 버전 모두에서 사용됩니다.

FlutterFire 플러그인의 최신 목록은 FlutterFire 문서를 확인하세요.

  1. 에뮬레이터나 기기에서 현재 앱이 실행되고 있지 않은지 확인합니다.

  2. Flutter 앱의 루트 디렉터리에서 pubspec.yaml 파일을 엽니다.

  3. Firebase Core Flutter SDK용 FlutterFire 플러그인을 추가합니다.

    dependencies:
      flutter:
        sdk: flutter
      # Add the dependency for the Firebase Core Flutter SDK
      firebase_core: ^0.4.0+9
    
  4. 앱에서 사용할 Firebase 제품의 FlutterFire 플러그인을 추가합니다.

    애널리틱스 사용

    dependencies:
      flutter:
        sdk: flutter
      # Check that you have this dependency (added in the previous step)
      firebase_core: ^0.4.0+9
    # Add the dependency for the FlutterFire plugin for Google Analytics firebase_analytics: ^5.0.2
    # Add the dependencies for any other Firebase products you want to use in your app # For example, to use Firebase Authentication and Cloud Firestore firebase_auth: ^0.14.0+5 cloud_firestore: ^0.12.9+5

    애널리틱스 사용 안 함

    dependencies:
      flutter:
        sdk: flutter
      # Check that you have this dependency (added in the previous step)
      firebase_core: ^0.4.0+9
    # Add the dependencies for the Firebase products you want to use in your app # For example, to use Firebase Authentication and Cloud Firestore firebase_auth: ^0.14.0+5 cloud_firestore: ^0.12.9+5
  5. flutter packages get을 실행합니다.
    패키지 및 플러그인 관리에 대한 자세한 내용은 패키지 사용을 참조하세요.

  6. 애널리틱스를 추가한 경우 앱을 실행하여 Firebase를 성공적으로 통합했다는 확인을 Firebase에 보냅니다. 그렇지 않으면 확인 단계를 건너뛰어도 됩니다.

이제 준비가 끝났습니다. Firebase를 사용하기 위한 Flutter 앱 등록 및 구성 작업을 마쳤습니다.

애널리틱스에서 예시 앱 사용해 보기

모든 패키지와 마찬가지로 firebase_analytics 플러그인은 프로그램 예시와 함께 제공됩니다.

  1. 이미 Firebase를 사용하도록 구성한 Flutter 앱을 엽니다(이 페이지의 안내 참조).

  2. 앱의 lib 디렉터리에 액세스한 후에 기존 main.dart 파일을 삭제합니다.

  3. Google 애널리틱스 프로그램 예시 저장소에서 다음의 두 파일을 복사하여 앱의 lib 디렉터리에 붙여넣습니다.

    • main.dart
    • tabs_page.dart
  4. Flutter 앱을 실행합니다.

  5. Firebase Console에서 앱의 Firebase 프로젝트로 이동한 후 왼쪽 탐색 메뉴에서 애널리틱스를 클릭합니다.

    • 대시보드를 클릭합니다. 애널리틱스가 제대로 작동 중이면 대시보드의 '지난 30분 동안의 활성 사용자' 패널에 활성 사용자가 표시됩니다. 이 패널에 정보가 표시되는 데 시간이 다소 걸릴 수 있습니다.

    • DebugView를 클릭합니다. 기능을 사용 설정하여 프로그램 예에서 생성된 모든 이벤트가 표시되도록 합니다.

애널리틱스 설정에 대한 자세한 내용은 iOSAndroid 시작 가이드를 참조하세요.

다음 단계