Flutter를 사용하여 Firebase Data Connect 시작하기

이 빠른 시작에서는 작은 샘플 데이터베이스를 만들고 배포한 후 Flutter 프런트엔드에서 액세스합니다.

기본 요건

이 빠른 시작을 완료하려면 다음이 필요합니다.

  • 다음 도구가 설치된 환경:
  • Google 계정

튜토리얼

튜토리얼

1. 새 Firebase 프로젝트 만들기

먼저 Firebase Console에서 새 Firebase 프로젝트를 만듭니다. 그런 다음 프로젝트를 Blaze 요금제로 업그레이드합니다.

2. 프로젝트 초기화

새 디렉터리를 만들고 그 안에 Firebase 프로젝트를 초기화합니다. 메시지가 표시되면 다음 옵션을 선택합니다.

  • 이전 단계에서 만든 프로젝트를 선택합니다.
  • Gemini로 스키마를 만들지 마세요 (이 튜토리얼에서는 사전 빌드된 예시 스키마를 사용합니다).
  • 새 Cloud SQL 인스턴스를 만듭니다.
  • Flutter 템플릿을 만듭니다.
 
mkdir myproj ; cd myproj
firebase login --reauth
firebase init dataconnect

3. GraphQL 정의 예시 검토

Data Connect에서는 GraphQL을 사용하여 모든 데이터베이스 스키마와 작업을 정의합니다. 프로젝트를 초기화할 때 Firebase CLI가 시작하는 데 도움이 되는 몇 가지 예시 정의를 만들었습니다.

 dataconnect/schema/schema.gql (발췌) 
type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}
 dataconnect/example/queries.gql (발췌) 
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

4. 스키마 및 작업 배포

데이터베이스 스키마, 쿼리 또는 변형을 변경할 때마다 변경사항이 데이터베이스에 적용되도록 배포해야 합니다.

 
firebase deploy --only dataconnect

5. 샘플 데이터로 데이터베이스 시드

이 시드 데이터를 사용하면 샘플 앱을 테스트할 때 확인할 수 있습니다. 이 단계에서는 관리 작업에 허용되는 임의의 GraphQL을 실행합니다.

 
firebase dataconnect:execute dataconnect/seed_data.gql

6. Dart 클라이언트 SDK 생성

이 명령어는 GraphQL 정의를 사용하여 데이터베이스 전용 Dart 라이브러리를 생성합니다. 클라이언트 앱에서 이 라이브러리를 사용하여 모든 데이터베이스 작업을 실행합니다.

connector.yaml에 정의를 추가하여 Android용 Kotlin, iOS용 Swift, 웹용 JavaScript를 비롯한 여러 플랫폼용 라이브러리를 생성할 수 있습니다.

 
firebase dataconnect:sdk:generate
 자동 생성 Dart SDK (발췌) 
class ExampleConnector {
  ListMoviesVariablesBuilder listMovies() {
    return ListMoviesVariablesBuilder(dataConnect);
  }

  // ...
}

7. Flutter 앱 설정

다음 명령어를 실행하여 Firebase 프로젝트를 사용하도록 Flutter 앱을 설정합니다.

flutterfire 명령어로 메시지가 표시되면 이전에 만든 Firebase 프로젝트를 선택하고 타겟팅할 플랫폼을 선택합니다.

 
cd flutter_app
flutter pub add firebase_core firebase_data_connect
flutterfire configure

8. 샘플 Flutter 클라이언트 작성

flutter_app/lib/main.dart의 콘텐츠를 이 간단한 Flutter 앱으로 바꿉니다.

앱은 생성된 SDK의 함수를 사용하여 필요한 데이터베이스 액세스를 완료합니다.

 
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/dataconnect_generated/generated.dart';
import 'package:flutter_app/firebase_options.dart';

class MyApp extends StatelessWidget {
  late final Future<QueryResult<ListMoviesData, void>>
  _movieListFuture;

  MyApp({super.key}) {
    _movieListFuture = ExampleConnector.instance
        .listMovies()
        .execute();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: _movieListFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return ListView.builder(
              scrollDirection: Axis.vertical,
              itemBuilder: (context, index) => Card(
                child: Text(
                  snapshot.data?.data.movies[index].title ?? "",
                ),
              ),
              itemCount: snapshot.data?.data.movies.length ?? 0,
            );
          }
          return const CircularProgressIndicator();
        },
      ),
    );
  }
}

Future<void> main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

9. 앱 사용해 보기

개발 서버를 시작하여 예시 앱이 작동하는지 확인합니다.

 
flutter run

다음 단계

Visual Studio Code 확장 프로그램 사용해 보기

Data Connect로 개발할 때는 Visual Studio Code 확장 프로그램을 사용하는 것이 좋습니다. Visual Studio Code를 기본 개발 환경으로 사용하지 않더라도 확장 프로그램은 스키마 및 작업 개발을 더 편리하게 만들어 주는 여러 기능을 제공합니다.

  • GraphQL 언어 서버로, Data Connect에 특화된 구문 검사 및 자동 완성 제안을 제공합니다.
  • 스키마 정의 파일에서 데이터를 읽고 쓰고 작업 정의에서 쿼리와 변형을 실행할 수 있는 코드와 일치하는 CodeLens 버튼
  • 생성된 SDK를 GraphQL 정의와 자동으로 동기화합니다.
  • 간소화된 로컬 에뮬레이터 설정
  • 프로덕션에 간편하게 배포

로컬 개발을 위해 Data Connect 에뮬레이터 사용

이 튜토리얼에서는 Data Connect 스키마와 작업을 프로덕션에 직접 배포하는 방법을 보여주었지만 앱을 적극적으로 개발하는 동안 프로덕션 데이터베이스를 변경하지 않는 것이 좋습니다. 대신 Data Connect 에뮬레이터를 설정하고 프로덕션이 아닌 에뮬레이터를 대상으로 개발 작업을 진행하세요. 에뮬레이터는 CloudSQL의 라이브 Postgres 인스턴스와 유사하게 작동하는 로컬 PGlite 인스턴스를 설정합니다.

앱의 스키마와 작업을 작성하는 방법 알아보기

Data Connect로 앱을 개발할 때 스키마와 작업 설계는 완료해야 하는 첫 번째이자 가장 중요한 개발 작업 중 하나입니다.

  • Firebase 콘솔의 Gemini는 앱의 자연어 설명에서 Data Connect 스키마를 생성할 수 있는 AI 도구입니다. 이 도구를 사용하면 특히 관계형 데이터베이스를 사용해 본 적이 없는 경우 매우 빠르게 시작할 수 있습니다.
  • 또는 GraphQL을 사용하여 데이터베이스 스키마, 쿼리, 변형을 직접 작성할 수 있습니다. Data Connect 스키마 설계 페이지에서 시작하여 후속 페이지로 계속 진행하여 작업을 작성하는 방법을 알아보세요.